Speed ​​up Blog Loading by Implementing Lazysizes on Blogger 2020

Nilesh    9/10/2020    Blogger Trick   

Blog loading speed is very important in the eyes of Google for readers too. A blog with very fast loading will make users comfortable when reading, imagine if a blog is slow loading and you visit the blog then you will feel annoyed because the content doesn't appear.

How Lazysizes Works

Lazysizes is a javascript that makes images on your blog load after other very important code is loaded, for example css html and javascript, once fully loaded, the image will be loaded last too, lazysizes can load images that will be displayed according to screen size of the available image sources. Lazysizes really helps speed up blog loading and is recommended by web.dev.

For lazysizes to work we have to replace src with data-src or overwrite it with srcset and then add data-srcset. 

When src is replaced with data-src, the image will not appear because data-src is not the code that will display the image source. Lazysizes' javascript will convert this data-src to src which will display the image source.

Just try to write the following html code and open it in a web browser, the image will never appear.

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

Logically, if you are going to the market, then you go to a dead end, then you cannot go to the market because there is no way, then come the mothers who justify your way to the market, then you will arrive in the market.

Example of implementing code.

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

It's different from srcset, why? Since srcset overwrites src so that the image source is displayed inappropriately, for example with a transparent image, we need data-srcset which will overwrite srcset with the proper image. 

Logically, you will go to the market and already know the right way, but it turns out that there is a gate on the road so you can't go through then come the mothers who open the gate so you can pass and get to the market. 

Example of implementing code

<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 is the size. In data-src we can only apply one image source while in 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 it will be faster and save data when loaded mainly mobile devices.

How it Works Blogger responsiveImage

Then there is the responsiveImage from blogger, this responsiveImage functions to change the size of images such as thumbnails and profile photos from the author.

The way blogger responsiveImage works is not much different from implementing the lazysizes srcset method. The difference lies in the loading, lazysizes will load at the end while the Blogger responsiveImage will load by default.

The applicant will apply the srcset with the original image source so that the loading of images runs by default, along with the responsiveImage blogger 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 the calling conditions as follows.

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

Then the html produces something 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>

Quite complicated if you don't understand the ins and outs of blogger code and HTML5.

Simply put, the source image from srcsetwill load according to the value of sizesif none of the values ​​are the same then the approximate size will be loaded.

That 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 is loaded from a screen with a width of 360px then what appears is no more than 360px and the data captured is still 1MB.

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

At first I thought responsive Image on blogger only worked if the image was saved on google cdn such as blogspot / blogger storage, google photos and Google Drive. In fact, it works with images from wherever the image is stored, I tried it with an image that we can download for free on pexels but I didn't download it but took the image source url and added the image via the url in the blogger post.

The final image is loaded from google cdn and resized, for example the url that has been loaded from cdn google.

https://blogger.googleusercontent.com/img/proxy/AVvXsEjhEdewhQIwMJllPWkEv0Bs3lTruxSblyD_xBLz8nOk680t5RsLck9l2K1aqqK4vfdPEh3a-F-VzbyPiYaKbd0E1k6dZxrDG5cniFP-HeM3ReE4YKFw_S1egfEkAcF9ITZ-xjh7q5NnCOuKqpnzq-AaYVtxa4VdJPvWrGSn0psmucIa=w300-h150-p-k-no-nu

While the original url

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

Wow! It turns out that blogger has the features I wanted and only found out a few months before this post was created.

Implementing LazySizes on ResponsiveImage

When I found the responsive image feature from blogger and implemented it, I also discovered something new, namely lazysizes, I thought Lazysizes and responsiveImage were destined to be together in order to speed up blog loading 👫. 

When I implemented it, I had difficulties because I didn't really know the blogger code, but I still forced it and the results were quite satisfying because the blog loading was fast.

For the application method, you need to listen to it carefully.

Template Specifications

It should be noted because the responsiveImage feature only works with blogger templates that have the following specifications

1. Widget v3
2. Layout v2

Application

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

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

Now look for a code like the following

<b:defaultmarkup type='Common'>

Now add the following code just below the code you were looking for.

<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 then 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 look for a code like the following.

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

Replace 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 a measure of the width of how many images will appear, for example 300, 400, 640, 800.
- imageRatio is the ratio of the width and height of the image, for example 2: 1 or 4: 3
- imageClass is a class of images that will look like <img class="...", but don't delete lazyload because that class serves as a lazysizes call
- fallBack is an addition, I myself can use a base64 gif image, adjust the size to the ratio

Be careful when the execution process, because it can have fatal consequences such as failing to render and only appear blank.

The final word

The method is quite easy if you understand the code from blogger, because all you do is rewrite and modify the responsiveImage code so that the render results are what we want. After implementing lazysizes on blogger responsiveness, I feel that blog loading is faster than before.