Lazy Loading your images in Jekyll blog | Improving page speed
Updated on: March 18, 2020 ·
4 mins read
1. Introduction to the problem: Defer off-screen images
2. Using Lazysizes
3. Get the Lazysizes min file.
4. Giving a class to images in Jekyll
5. Creating an image creation script using the variables passed.
6. Include lazy loading in the posts.
7. Changing the old images to follow the new script
If you check the page speed of your page on the Google’s pagespeed, you might have seen Google giving some suggestions related to images if your page contain a good number of images.
One of the major one is to Defer Off-screen Images, that is what we are going to do in this post.
2. Using Lazysizes
3. Get the Lazysizes min file.
4. Giving a class to images in Jekyll
5. Creating an image creation script using the variables passed.
6. Include lazy loading in the posts.
7. Changing the old images to follow the new script
Introduction to the problem: Defer off-screen images
When your blog post has a lot of content and the people have to scroll to see the images of the content, then Google suggest loading the images after the whole DOM is loaded first.Deferring off screen images means delaying loading of images that appear below-the-fold on the page.There are a lot of ways of doing this.
Using Lazysizes
Before jumping into the tutorial, I want to state that if you follow this tutorial, you will have to change the way you define images in your Jekyll blog post, you won’t be able to use the oldliquid
tags.
We are going to use Lazysizes to help us with the deferring of the off-screen images from the blog posts.
Get the Lazysizes min file.
Lazysizes JavaScriptmin
file can be found here. Just copy the content to a file named lazysizes.min.js
and import it into the base file of your blog.
The best place to include it, would be in the default.html
.
<script src="/blog/lazysizes.min.js" async=""></script>
Giving a class to images in Jekyll
You can give thelazyload
class to your images and get started with the library.
You can use the following code to add class to images in Jekyll
![alt text](https:image/source.png "title text"){:class="lazyload"}
class
to every image of all the posts on its own with new style.
Creating an image creation script using the variables passed.
Write the following script and add it to the_includes
directory so that you can include them from posts.
_includes/lazyload.html
This script is checking if the image_src
and JavaScript is enabled by the given client.
If yes, it uses the passed variables and renders an image
with data-src
( required by lazysizes to defer off-screen images). Otherwise, it will render a normal image.
Include lazy loading in the posts.
While writing the posts you can include the newly createdlazyload.html
.
That’s it. After this you will not see the Google pagespeed’s suggestion to defer your off-screen images.
Changing the old images to follow the new script
I know changing the images in your earlier posts can be a pain, so I created thispython
script that can help you with that.
ff = open('_posts/your_post.md')
for a in ff:
# Check if the line contains markdown image tag.
if a[0:2] == '![':
alt = a[2:].split(']')[0]
src = a.split('(')[1].split(' ')[0]
title = a.split('"')[1].split('"')[0]
print('{}{} include lazyload.html image_src="{}" image_alt="{}" image_title="{}" {}{}'.format('{', '%', src, alt, title, '%', '}'))
inspect elements
of the browser. The images are only queried when they are in the frame.
Please share your Feedback:
Did you enjoy reading or think it can be improved? Don’t forget to leave your thoughts in the comments section below! If you liked this article, please share it with your friends, and read a few more!