Introduction to the problem: Defer off-screen images

Deferring off screen images means delaying loading of images that appear below-the-fold on the page.

Using Lazysizes

liquid

Get the Lazysizes min file.

min

lazysizes.min.js

default.html

<script src="/blog/lazysizes.min.js" async=""></script>

Giving a class to images in Jekyll

lazyload

![ alt text ]( https:image/source.png "title text" ) {:class="lazyload"}

class

Creating an image creation script using the variables passed.

_includes

_includes/lazyload.html

image_src

image

data-src

Include lazy loading in the posts.

lazyload.html

Changing the old images to follow the new script

python

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

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.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, that is what we are going to do in this post.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.There are a lot of ways of doing this 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 oldtags. We are going to use Lazysizes to help us with the deferring of the off-screen images from the blog posts.Lazysizes JavaScriptfile can be found here . Just copy the content to a file namedand import it into the base file of your blog. The best place to include it, would be in theYou can give theclass to your images and get started with the library. You can use the following code to add class to images in JekyllThis is the first step to get started, but we won’t be using it. We will directly be adding thisto every image of all the posts on its own with new style.Write the following script and add it to thedirectory so that you can include them from posts.This script is checking if theand JavaScript is enabled by the given client. If yes, it uses the passed variables and renders anwith( required by lazysizes to defer off-screen images). Otherwise, it will render a normal image.While writing the posts you can include the newly created. That’s it. After this you will not see the Google pagespeed’s suggestion to defer your off-screen images.I know changing the images in your earlier posts can be a pain, so I created thisscript that can help you with that.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 theof the browser. The images are only queried when they are in the frame.Thanks for reading the post. Do share your views.