YALL Lazy Loading

This template uses "YALL", which is a lazy loading javascript designed to increase the pageload speed. It's reliable, easy to use, and as long as you follow image and video tag instructions, pretty much foolproof.

Creating Your Image (and video) Tags

We all know the standard way of placing an image tag onto your page. It looks like this...

<img src="image-files/image.jpg">

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"

All off-page resources such images and videos need a src in order for the browser to find and then display them. data-src on the other hand is not for that. In our case the purpose is to store essential data (the url) that can be stored and manipulated with javascript. The data-src stores the url to the image or video, and when yall runs, the javascript uses this to get the url and place it into the src tag. Easy, but there is no requirement to know how it works in order to use it.

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.