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?
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?
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:
to this format:
Now, when inspecting the HTML, the lazyloaded class is included:
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.