How To Optimize Fonts and Increase Loading Speed Of Blogger

 


hello everyone welcome to ke2 blogging and in this video i will show you how can improve your blogger page speed by fixing the font so most of the blogger website the font will slow down the website so let me just show you so here let me just copy the url and go to the page speed inside tool and let me just paste it and let's click on analyze so the font takes most of the page size and slow down your loading speed so in this video we will learn how to fix this font issue in our blogger website so let's wait for the result okay now let's scroll down and the page speed is around 71 so let's scroll down and you

Blogger website the font

 have to select this option keep request count low and transfer file size so here as you can see there is total 26 request and out of which 4 request is done by font and out of total size of 566 kb the font is taking around 164 kb so we need to fix this font issue so let's scroll off and let's click on avoid chaining critical request so as you can see there are four font file that is causing this slowdown so woff to this is the font file like fonts.gstatic.com so we need to fix this issue so if you want to fix the average chaining critical request then i have already made two video on this you can simply search for fix abortion and critical request by ke2 blogging so this is the latest video where i have shown how to fix the average

 chaining critical request of font and if you don't want to use the font then you can remove the font altogether so let me just show you how can remove this font so for this i will go to the blogger dashboard and i will click on theme option and make sure to take a backup of your blogger theme so in case if you do anything wrong in this process then you can easily restore it by just copy and paste the old backup file to your blogger theme so let me just click on edit html and i have to search for that font file so let me just scroll down and i have to search for the css code so let's scroll down and here it is this is the font body and this is the font heading so i don't want to use this external font in our website so as

Blogger theme

 you can see this is the font from fonts.gstatic.com so i have to simply remove this font from my theme so let me just remove this and let me just save the code okay now the file is saved now let's go to the website and let me just click on refresh and as you can see the website is still looking good and let me just open a blog post here and as you can see the default font looks like this so when we remove the font from our theme file it will load the font from the device so that it will not request the font file to the server and it will serve the font locally so in this way you can save some resources so let me just go to


 the page speed insight tool and let me just copy this and we have to run this test again so let me just click on duplicate this and i need to click on the home page again i have to paste the url again and let's click on analyze so it will take some time so let's wait okay now we have removed the phone now the page speed is further improved to 83 so previously it was 71 and we have improved the page speed to 83 so let's click on this option keep request count low and here as you can see the font is taking around 0 kv and in the previous case the font is taking around 160 kv so in this way you can drastically reduce the file size the web page size so let me just scroll off and let's click on the average ending critical request it also fix the critical request and remove the font altogether and load the phone within the

 device so let me just fix another problem like add this wizard.js so this is basically the social share icons so to fix this you need to go to the template file and search for that code so as you can see this is the code so most of the blogger do mistake they put the javascript just below the head text so you need to delete this script from the head tag and we have to go to the closing body tag and we have to paste

Blogger do mistake they put the javascript 

 that javascript code just above the closing body tag so in this way it will not block the mainframe and it will load after the all important script is loaded in your website so i don't want to use this social share button so i will simply remove this and let's save the code and let's run the paste bit again okay now the code is saved let me just rerun this test so i will click on unlatch again okay now scroll down and as you can see the speed is now 98 so in the previous case the speed is around 71 and we have removed the phone and it will jump to 83 and we have removed an javascript file and it is now showing 98 so in this

 way you can further improve your page speed and you can also fix this issue like soft next format so let me just go to the website and you have to search for this playlist and here i have shown how to improve the page speed like how to fix this sharp image in exchange format or how to lazy load analytics or lazy load youtube videos so you just need to follow the videos from this playlist to improve your page speed and if you have any doubt regarding this then you can ask me in the comment section and if you find this video helpful then give it a like and subscribe to my channel for more upcoming videos like this and i will see you in the next video thank you  

Post a Comment

Previous Post Next Post