YALL Lazy Loading
Creating Your Image (and video) Tags
We all know the standard way of placing an image tag onto your page. It looks like this...
With Yall, we modify that slightly, so it looks like this...
<img class="lazy" src="" data-src="image-files/image.jpg">
In case you are concerned that we leave the src tag empty (a placeholder image can be used but not required), don't be. Search Engines "see" the image just like any other regular picture, as the html is changed dynamically by Yall. Below is screenshot of the HTML used and displayed by the image above.
Using YALL With Embedded Youtube Video
This is done exactly the same way as it is for images. Instead of a src="video-path/video.mp4" we use class="lazy" src="" data-src="video-path/video.mp4"
What Is "data-src"
Usage Tip: Don't use YALL on your small decorative or social media icon images. It is faster to load these in the normal way. Also try to avoid using it on images that are at the very top of your page, above the fold. That can sometimes slow a page rather than speed it up. If in doubt, test your page by refreshing and noting how quickly it load one way, versus the other. Or go to Pagespeed Insights to check loading time scores.