Nurhidayat

Menu

How to Speed Up Blogger Loading with Lazysizes

Taufik Nurhidayat
7 min read
#blogger #tutorial #programming

Blog loading speed is very important in Google's eyes, as well as for readers. A blog with very fast loading will make users comfortable when reading. Imagine if a blog loads slowly and you visit it, you will feel annoyed because the content doesn't appear.

social_cards/mempercepat_2bloading-blog_2bthumbnail.png

Blog loading speed is very important in Google’s eyes, as well as for readers. A blog with very fast loading will make users comfortable when reading. Imagine if a blog loads slowly and you visit it, you will feel annoyed because the content doesn’t appear.

How Lazysizes Works

Lazysizes is a JavaScript library that loads images in your blog after other crucial codes like CSS, HTML, and JavaScript are loaded. After everything else is fully loaded, images will be loaded last. Lazysizes can load images that will be displayed according to the screen size from the available image source. Lazysizes greatly helps speed up blog loading and is recommended by web.dev.

For Lazysizes to work, we need to replace src with data-src or override it with srcset and then add data-srcset.

When src is replaced with data-src, the image will not be displayed because data-src is not a code that will display the image source. After that, the Lazysizes JavaScript will change data-src to src, which will display the image source.

Try writing the following HTML code and opening it in a web browser; the image will never appear.

<img data-src="url-image.jpg"/>

The logic is, if you are going to the market and you encounter a dead end, you cannot reach the market because there is no path. Then, a mother comes and fixes your path to the market, and you arrive at the market.

Example of code implementation:

<img data-src="image.jpeg" class="lazyload"/>

It’s different with srcset, why? Because srcset overrides src, so the image source is not displayed as it should be, for example, with a transparent image. Therefore, we need data-srcset which will override srcset with the proper image.

Logically, you are going to the market and already know the right way, but there is a gate on that road, so you cannot pass. Then, a mother comes and opens the gate, so you can pass and reach the market.

Example of code implementation:

<img src="image3.jpg" 
srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-srcset="image3.jpg 600w, image1.jpg 220w, image2.jpg 300w, image4.jpg 900w"
data-sizes="auto" class="lazyload" />

The difference between the data-src and data-srcset methods lies in the size. With data-src, we can only apply one image source, while with data-srcset, we can apply various image sizes so that the image size loaded by the browser matches the user’s screen size, which will minimize the blog loading size and, of course, be faster and save data when loaded, especially on mobile devices.

How Blogger’s ResponsiveImage Works

Then there’s Blogger’s responsiveImage. This responsiveImage functions to change the size of images like thumbnails and author profile photos.

The way Blogger’s responsiveImage works is not much different from the srcset method of Lazysizes. The difference lies in the loading. Lazysizes will load at the end, while Blogger’s responsiveImage will be loaded standardly.

Its implementation will apply srcset with the original image source, so the image loading runs standardly. Here’s the Blogger responsiveImage code.

<b:includable id='responsiveImage'>
<img expr:src='data:image'>
<b:class expr:name='data:imageClass'/>
<b:attr expr:value='data:altText ?: data:messages.image' name='alt'/>
<b:attr cond='data:enhancedSourceset.isYoutube' expr:value='resizeImage(data:enhancedSourceset, 1152, "1152:864")' name='data-ess'/>
<b:attr expr:value='data:originalWidth' name='data-original-width'/>
<b:attr expr:value='data:originalHeight' name='data-original-height'/>
<b:attr expr:value='data:image.isResizable ? data:sourceSizes : ""' name='sizes'/>
<b:attr expr:value='sourceSet(data:image, (data:imageSizes ?: [120,240,480,640,800]), data:imageRatio)' name='srcset'/>
</img>
</b:includable>

with calling conditions like this.

<b:include data='{ image: data:post.featuredImage, imageSizes: [72,144], imageRatio: "1:1", sourceSizes: "72px" }' name='responsiveImage'/>

This results in HTML roughly like this.

<img src="image.jpg"
alt="image"
data-original-width="200px"
data-original-height="200px"
sizes="72px"
srcset="image1.jpg 72px, image2.jpg 144px"></img>

It’s quite complicated if you don’t understand the ins and outs of Blogger code and HTML5.

Simply put, the image source from srcset will be loaded according to the value of sizes. If there is no matching value, the closest size will be loaded.

This way, the data from the loaded image source is not wasted. For example, an image with a width of 1200px and a size of 1MB loaded from a screen with a width of 360px will only display up to 360px, but the data taken is still 1MB.

However, when responsiveImage is applied, the data size can be reduced because the width of the image source will be changed to 360px, so the loaded data will be smaller and, of course, faster and save data, especially when loaded on mobile devices.

Initially, I thought responsiveImage in Blogger only worked if the image was stored on Google’s CDN, such as Blogspot/Blogger storage, Google Photos, and Google Drive. In reality, it works with images stored anywhere. I tried it with images that can be downloaded for free on Pexels, but instead of downloading them, I just took the URL of the image source and added the image via URL in a Blogger post.

The final result is that the image is loaded from Google’s CDN and its size is changed, for example, a URL that has been loaded from Google’s CDN.

https://lh3.googleusercontent.com/proxy/TD2RbRjs1wf8ix_YmoCwGniv9g9GUGDIACHJgeaSDKY3KRSK1oHOHgBncHymnAIHuM-YQkZLKTTpll8Vb5NOWQYBM9iJwayzXzhaixeM365Otem-WAA=w300-h150-p-k-no-nu

While the original URL is:

https://images.pexels.com/photos/2228579/pexels-photo-2228579.jpeg

Wow! It turns out Blogger has a feature I wanted, and I only found out about it a few months before this post was made.

Implementing LazySizes on ResponsiveImage

When I discovered Blogger’s responsiveImage feature and implemented it, I also found something new: Lazysizes. I thought Lazysizes and responsiveImage were destined to be together to speed up blog loading.

When I implemented it, I had some difficulty because I didn’t know much about Blogger code yet, but I forced myself, and the result was quite satisfying because the blog loading felt faster than before.

For the implementation method, you need to pay close attention.

Template Specifications

Note that the responsiveImage feature only works with Blogger templates that have the following specifications:

  1. Widget v3
  2. Layout v2

Implementation

First, install Lazysizes on the template by copying and pasting the following code either above the </head> tag or above the </body> tag.

<script src='https://fiik346.github.io/js/lazysizes/5.2.2.min.js'/>

Now find the following code:

<b:defaultmarkup type='Common'>

Now add the following code right below the code you just found.

<b:includable id='responsiveImage'>
<img expr:data-src='data:image'>
<b:class expr:name='data:imageClass' />
<b:attr expr:value='data:fallBack ? data:fallBack : "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="' name='srcset'/>
<b:attr expr:value='data:altText ?: data:messages.image' name='alt' />
<b:attr cond='data:enhancedSourceset.isYoutube' expr:value='resizeImage(data:enhancedSourceset, 1152, "1152:864")' name='data-ess' />
<b:attr expr:value='data:originalWidth' name='data-original-width' />
<b:attr expr:value='data:originalHeight' name='data-original-height' />
<b:attr expr:value='data:image.isResizable ? data:sourceSizes : ""' name='data-sizes' />
<b:attr expr:value='sourceSet(data:image, (data:imageSizes ?: [120,240,480,640,800]), data:imageRatio))' name='data-srcset' />
</img>
</b:includable>

If it doesn’t exist, you can add the following code:

<b:defaultmarkups>
<b:defaultmarkup type='Common'>
<b:includable id='responsiveImage'>
<img expr:data-src='data:image'>
<b:class expr:name='data:imageClass' />
<b:attr expr:value='data:fallBack ? data:fallBack : "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="' name='srcset'/>
<b:attr expr:value='data:altText ?: data:messages.image' name='alt' />
<b:attr cond='data:enhancedSourceset.isYoutube' expr:value='resizeImage(data:enhancedSourceset, 1152, "1152:864")' name='data-ess' />
<b:attr expr:value='data:originalWidth' name='data-original-width' />
<b:attr expr:value='data:originalHeight' name='data-original-height' />
<b:attr expr:value='data:image.isResizable ? data:sourceSizes : ""' name='data-sizes' />
<b:attr expr:value='sourceSet(data:image, (data:imageSizes ?: [120,240,480,640,800]), data:imageRatio))' name='data-srcset' />
</img>
</b:includable>
</b:defaultmarkups>

Now find the following code:

<b:include ... name='responsiveImage'/>

Replace it with the following code:

<b:include
data='{ image: data:featuredImage,
imageSizes: [300, 400, 640, 800],
imageRatio: "2:1", 
sourceSizes: "auto", 
imageClass: "card-img-top lazyload", 
altText: data:post.title,
fallBack: "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAQAAABeK7cBAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=", 
enhancedSourceset: data:highRes }' name='responsiveImage'/>
  • imageSizes is the width of the image that will be displayed, for example, 300, 400, 640, 800.
  • imageRatio is the width and height ratio of the image, for example, 2:1 or 4:3.
  • imageClass is the class of the image that will be like <img class="...", but do not delete lazyload because that class functions as the Lazysizes caller.
  • fallBack is my own addition; you can use a base64 GIF image with a size that matches the ratio.

Be careful during the execution process, as it can be fatal, such as rendering failure and only a blank display.

Final Words

The method is quite easy if you understand Blogger’s code, because all you have to do is rewrite and modify the responsiveImage code so that the rendering result is as we want. After implementing Lazysizes on Blogger’s responsiveImage, I feel that the blog loading is faster than before.

I apologize if the logic or delivery is not clear and difficult to understand. Please ask in the comments section if you don’t understand.

Notes: After I learned more JavaScript with Vue and React frameworks, Blogger’s logic and code became easier to understand.