Up next in 10
How to Lazyload Font-Awesome Library and Improve Blog Loading Speed
2K views
Jan 24, 2024
In this tutorial video, viewers will be guided on how to lazyload the Font Awesome library to improve blog loading speed. Released in 2023, the content provides a step-by-step guide, making it accessible for both beginners and experienced bloggers. Whether you're a content creator, website owner, or someone concerned about optimizing your blog's performance, this tutorial offers practical insights and clear demonstrations on implementing lazyloading for the Font Awesome library. Learn how to enhance your blog's loading speed by efficiently managing the loading of Font Awesome icons with the guidance provided in this tutorial.
View Video Transcript
0:00
Hi everyone, welcome to Kito Blogging and in this video I will show you how you can delay the loading of
0:05
font awesome icon in your blogger website. So as you can see that, this is the Foodify theme from Templetify and here they are using
0:14
the font awesome icons for this like if you click on the search button, there is the search icon
0:20
and there is the close icon and if you scroll down there is the back to top icon and there are
0:25
some social media icons like this. So all these icons are made using the Fond Awesome icons
0:32
So if you remove the Fond Awesome icon then this icon will not load in your website and
0:36
it looks odd. So to fix this issue or to fix the Fond Awesome page speed inside issue, you need to delay the
0:43
loading of Fond Awesome icon. So let me just copy the website URL here and let's test the URL in the PaysPid Inside
0:53
first and let's check how the Fond Awesome icon is affecting your page speed
0:57
So let's wait for some time. And here as you can see that the score is very low and if I scroll down here and here you
1:07
will see some options like fond or some main dot CSS in eliminate render blocking resources
1:14
And here you will see more options, reduce unused CSS, fond awesome main dot CSS
1:22
And if you click on here, afford changing critical request here also you will see this option
1:26
font awesome mean dot c s s s so the fond osome is causing a lot of issues in loading of the website so we
1:34
can delay the loading of the fond awesome and load the important resources fast and then the fond
1:40
awesome will load after that so to add the delay in fond osome let go to the blogger dashboard here and let click on edit html and before making any changes i recommend you to take a backup of your theme first and otherwise if you do any mistake in this process then you can easily restore it back to the original position
2:01
So here I need to find the font awesome icons here. So let me just find it and let me search for a font awesome
2:11
And here it is the font awesome icon is used using the font awesome here
2:15
the font face here and if you see this Fond Awesome version it is 5.15.1
2:23
So make sure to identify the Fond Awesome version in your theme otherwise you will not see the
2:30
results. So here the Fond Awesome version is 5.15.1. So here we can add a code like this
2:39
So here makes you to change the Fond Awesome version from here. So let's copy this
2:45
from here and what I can do is I will remove all the font face code like this and I will
2:54
scroll all the way to the bottom and I will search for closing body tag and I will paste
3:00
that code like this and here I have delayed the loading of Fondossum by 3 seconds so
3:06
you can make it like 3,500 or 4,000 so it will delay by 3.5 second or 4 second and
3:15
Let's find any other font awesome icon is there or not. So I will type Control Plus app and I will search for Pond Awesome again
3:25
And here it is, there is a Fond Awesome mean dot CSS is also used
3:31
So let me just close it here or let me just remove that font awesome from here and let me just paste it here So here this is the fond awesome mean dot and this is the all So if you want to delay the loading of this as well then you can use the second script
3:52
So what I can do is I will copy the source code from here like this and I will paste it
3:58
in the link to section here. And if you have a single font or some CSS then you can use this script
4:07
If we have multiple Fondossom style sheets then you can use the second one
4:12
Like here you can add two style sheet. First one is this one, 5.15.1 CSS, all
4:20
. . . here all the font of some CSS is added in this source link
4:27
So I can add it here in CSS1 like this. So we have delay both the source URL
4:37
dot mean dot CSS and there is the fond awesome mean dot CSS
4:42
Now let me just change the time duration to 3000. So you can change it to like three seconds
4:51
So this is the command line to identify you can change the time here
4:57
So let me just copy the script from here and as there is two fond awesome icon script or
5:06
our fond awesome icon style sheet here, we can replace it with the second script here
5:12
Like this, let me just save this code from here. Now let's go to the front end and let's check if there is any break in the icons
5:21
So let me just refresh this page and let's wait for the three seconds to load the icons
5:27
and as you can see that the icon is loading after three seconds So in this way you can delay the fond awesome icon loading and improve your pace speed So let go to the pay speed inside and earlier the score is 62 and here the total size
5:44
is 565 kb. So let me just open this in a new tab and let me just copy the URL from here and let me just
5:55
paste the URL here. So let's yze it again. And as you can see that the pace score is improved significantly
6:03
Earlier it is 62, now it is showing 80. And if I scroll down here, those errors are now gone
6:10
Like reduce on you CSS and eliminate render blocking resources, those errors are now gone
6:17
And if you check the total size, it is around 454 kv and earlier the total size is around 565 KV
6:27
Means there is the saving of 100 KV in the total page size, which is around 20% of the total
6:34
page size. So in this way you can delay the loading of font awesome icons
6:39
So if you have one font awesome style sheet, then you can use the first script here, just add
6:46
the source URL from here. And if you have multiple font or some, then you can use the second script
6:53
you need to add the both source link from here. All right, now you have learned how you can delay the loading of font or some icon in your
7:04
blogger website. And if you want me to improve your blog loading speed, then you can also hire me and I will
7:10
optimize your website for better speed. So we will found the link in the description
7:16
And if you found this video helpful, then make sure to hit the like button and do subscribe
7:20
our channel for more upcoming videos like this. I will see you in the next video. Thank you
#Computers & Electronics
#Internet & Telecom
#Skins
# Themes & Wallpapers