Lazy Loading your images in Jekyll blog | Improving page speed

Updated on: March 18, 2020 · 4 mins read

Images are the heaviest part of your blog and often are the most interesting once without which your post can’t be complete.

Most of the people in a Jekyll blog tend to upload the images onto the directory on which the blog is hosted. At least such is the case with the people hosting it using GitHub pages.

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.

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 old liquid 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 JavaScript min 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 the lazyload 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"}

This is the first step to get started, but we won’t be using it. We will directly be adding this 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 created lazyload.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 this python 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, '%', '}'))

This will print the images tag following the new include statement. You can then copy them to the post.

If you directly want to update the old images with the new tags then you will write to the post file as well.

You can check the network’s tab in the inspect elements of the browser. The images are only queried when they are in the frame.

Images are queried when they are required

Thanks for reading the post. Do share your views.

Ranvir Singh

Lazy Loading your images in Jekyll blog | Improving page speed

Introduction to the problem: Defer off-screen images

Using Lazysizes

Get the Lazysizes min file.

Giving a class to images in Jekyll

Creating an image creation script using the variables passed.

Include lazy loading in the posts.

Changing the old images to follow the new script

You May Also Enjoy

1. How to Create a Table of Content in Jekyll blog | Without any Plugin

2. How to link to your old posts like a pro in GitHub Pages/ Jekyll blog

3. How I created separate category pages in my Jekyll blog

4. How to add social sharing buttons on your Jekyll Blog using GitHub pages

Lazy Loading your images in Jekyll blog | Improving page speed

Introduction to the problem: Defer off-screen images

Using Lazysizes

Get the Lazysizes min file.

Giving a class to images in Jekyll

Creating an image creation script using the variables passed.

Include lazy loading in the posts.

Changing the old images to follow the new script

Liked it? Sing it Loud and Proud:

You May Also Enjoy

1. How to Create a Table of Content in Jekyll blog | Without any Plugin

2. How to link to your old posts like a pro in GitHub Pages/ Jekyll blog

3. How I created separate category pages in my Jekyll blog

4. How to add social sharing buttons on your Jekyll Blog using GitHub pages