What is Lazy Loading Images?

Lazy loading images is a way to only load the image when the user can see it on their browser, that is when it is “on screen”. It means that the page will, or should load faster, particularly on mobile devices where bandwidth is limited. Google developers offer more insight. This blog talks about native lazy loading in the browser and different attributes.

Can Lazy Loading Images be used by Jekyll?

The short answer is yes. I will be using the ranvir blog and the lazysizes lazy loader for images to see if it makes a difference to Google Page Speed Insights.

Mobile Google Page Speed Insights - Before

Before applying the lazy loading of images to the test page, it achieved a mobile page speed score of 92, which is actually very good. Can lazy loading improve on this?

google page speeds before lazy loading images.

Including the lazysizes javascript in the Webpage

According to the ranvir blog, the best place to include the lazysizes script is the default.html. I decided to add to the header.html. I then added _includes/lazyload.html as instructed on the ranvir blog, and finally updated the image references in the Jekyll markdown from:

![Google Page Speed Insights Before Removing Disqus on Desktop](/assets/google page speeds desktop score before.jpg)

to this format:

{% include lazyload.html image_src="/assets/google page speeds desktop score before.jpg" image_alt="Google Page Speed Insights Before Removing Disqus on Desktop" image_title="Google Page Speed Insights Before Removing Disqus on Desktop" %}

Now, when inspecting the HTML, the lazyloaded class is included:

<img data-src="/assets/google page speeds desktop score before.jpg" alt="Google Page Speed Insights Before Removing Disqus on Desktop" title="Google Page Speed Insights Before Removing Disqus on Desktop" class="blur-up ls-is-cached lazyloaded" src="/assets/google page speeds desktop score before.jpg">

Did Lazy Loading the images make a difference to Google Page Speed Insight?

No. The score was exactly the same. However, I am not convinced that lazy loading is being implemented. I have started exploring how to check lazy loading.

I’ll update this post with my findings.