Fast above the fold content and worry about the rest later.

It is crucially important that websites load as fast as possible.

We want content rendering and visible by the 1 second mark, images that are below the fold and out of view can greatly delay and impact a page's loading time.

So why do we load them?

Worry about them later is the answer, after the main 'above the fold' content is loaded, after dom loaded. Then we load the images below, this is called defer.

Some may choose async, some may choose both, both have their merits but defer works very nicely for images below the fold ie those logos you may have in the footer.

But how? a little js on load listener is added and then we call the images to load after the page content above the fold has loaded.

listen for on load

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

now the page has loaded enough for the visitors needs, now load the images below.

<a href="https://facebook.com/yourpage" aria-label="Click to join us on FaceBook" target="_blank" rel="noopener noreferrer">
  <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://cdn.yoursite.com/coolimagename" alt="join us On Facebook">
 </a>

So a few things.

The js does the listening and then we call the image, the base64 encoded image is so lightweight that when we initially load the page, it makes no odds to loading times, not like trying to load the images in the standard way can cause a render blocking delay.

Plus we'll also add in some added security by way of adding rel="noopener noreferrer" because we are using target="_blank" , plus the aria-label helps those with disability, to browse your website and understand what the logo/link function actually does.

Hope you enjoyed this quick write up and I hope it helps you to speed up your sites and worry about those images later.

Dev Vip