 |
| Improve website speed |
Hello,
Welcome to our blog and today I am going to tell you how you can increase your website performance in blogger to simple steps and load your website faster than before.
So let's start with a quick introduction about how to check your website performance and what are the advantages and disadvantages of using the codes which I am going to give you.
Website Loading Performance
According to the data given by Google 50% of the users says that speed matters to them and they will skip the website if it loads in more than 5 seconds on a 4G network.
Now if you realise that 5 seconds is such a small time but yes it can be possible if we correctly implement scripts and other factors in our website.
We know that the ?m=1 additional URL component makes our website to load a bit slowly which makes some extra time to load.
But we can't do anything in this because it's a server side URL component.
Besides this we can take our performance to 100 if we are using a good template and to 90+ if using some other templates by implementing the given codes.
How to check our website performance?
There are two sub branches of lighthouse.
1. Page Speed Insights:
This website is also owned by Google and it provides how fast is the performance of a website and what factors we must have to implement as soon as possible.
2. Web.dev :
As lighthouse is built for desktop users so for Android users web.dev hand built a performance check up tool which uses lighthouse to provide the information.
Both these tools provide you accurate results of the performance of your website.
I am experiencing low performance help me out!
So majorly there are 7 to 8 improvements that you can do and your possibly missing all these in your website.
Steps for Performance Improvement
So let's start,
1. ?m=1 removal code
Imagine that you are going to a shop with says that in order to take some stuff from our shop we need to go behind our shop and then come from a different path.Isn't it something bit more slow right.
Similarly as we know that ?m=1 is been implemented by blogger for mobile devices and I personally don't know why blogger is doing such things for custom domains.
Although we are not here to criticize this but I need to talk if removing this code is helpful or not.
So basically we can't remove it but we can hide this from JavaScript and as you know there are many websites available on Google search that provide this code.
Now many users who goes to the original URL like for an example example.com is a URL which I want to open but now when I type it in browser and hits search then it redirect me to example.com/?m=1 and then add we had putten the code it then redirects me to example.com .
So basically this will create multiple urls of your website to be indexed and this will affect the SEO of your website and will over the performance of your website because it is two way redirect.
So I will recommend you to not use the javascript code to hide this m=1..
Moving to the second issue is the adsense lazyload...
2. AdSense Code is to much big
As we know that Google AdSense on applying for its approval we get JavaScript code which we have to improvement in our head section of our website.
But as you know that there are many factors which Google AdSense will use to determine your website and it will force some javascripts to run so it's approximately a 500 KB JavaScript code with many other additional javascripts inside it.
So to deal with it if our performance needs to be sky rocketed we have to lazy load this AdSense code.
Laser can be estimated as when our website loads then its will not be shown but when we just scrolling little bit the adsense code will activate and add service show one and this is how the performance can be improved too much.
Yaar below is the adsense laser load code which you must into your website whenever you use it.
<script type='text/javascript'>//<![CDATA[var lazyadsense2 = false;window.addEventListener("scroll", function(){if ((document.documentElement.scrollTop != 0 && lazyadsense2 === false) || (document.body.scrollTop != 0 && lazyadsense2 === false)) {(function() { var ad = document.createElement('script'); ad.setAttribute('data-ad-client','ca-pub-xxxxxxxxxxxxxxxx'); ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();lazyadsense2 = true; }}, true);//]]></script>Change the publisher ID and paste it above head and you are done with the adsense code.
Now moving to the Google Analytics....
3. Google Analytics Code
As you know that for the tracking of our website visitors and various factors of their interest coming to our website and very high court information about our traffic Google offers the Google Analytics which helps in determining the traffic and its experience to our website.
Google Analytics gives us gtag.js type of code which is enough heavy to our website to hold on so many users search for lazy loading analytics but I think that if we lazy lord analytics then what will be the mean of Analytics.
Like if first impression counts to be coming to the website and then if you lazy loaded then the impression will only be counted when a user scrolls all those this and this doesn't means that our website is not good but as far as if you will see the results after you really export it may be decreased from before.
While I will know support about Google Analytics lazy load system as this will help us in regaining the performance of our website.
When you will get the code from Google Analytics there will be a code starting from UA-xxxxxxxx and just you need to copy that code if you find it otherwise you can search on Google for how to find this code.
Now when you have that code just go to blogger.com and then to edit HTML and paste the below JavaScript code above head<script type='text/javascript'>//<![CDATA[var lazyanalisis=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyanalisis||0!=document.body.scrollTop&&!1===lazyanalisis)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxxx ";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyanalisis=!0)},!0);//]]></script><script>//<![CDATA[ window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-xxxxxxx-x ');//]]></script>
And now save it and you can now see the impressions to your website in approximately 24 hours in the Google Analytics dashboard.
Now coming to images....
4. Next Gen Images Format ! What is it?
According to web.dev next gen images are WebP images which lords your images 20% faster than PNG and contains a little bit less space than PNG.
So now how to make WebP images from PNG?
So for this I would suggest you cloudconvert.com which will provide you WebP images for your PNG images in seconds..
And then just upload that WebP images as similar to PNG and even after that the performance is showing some errors in image sections then don't worry there is second code which will help you to definitely get out of this problem but it also requires the first one to be followed so that both can compensate the loading time and now it will not more faster.
So for this when after the last step where we had uploaded the WebP images now we have to go to edit HTML and have to see this type of code in the images:
/s360/.....
/s480/.....
/s520/....
/s640/....
/s1280/...
These are basically the size of our maids which will be shown on our post.
Now just edit these code with this replaced one whenever you use an image -
/s360-rw/.....
/s480-rw/....
/s520-rw/....
/s640-rw/....
/s1280-rw/....
Now when you will see the image it will be the same as usual but this RW will make the image to load more faster or we can say that it is an alternative to use PNG as web images directly but it will only help you a little.
So my recommendation would be like if you follow the first step and then add the image in your post and then add this – rw behind this image size.
And yes we can also lazy lord images and the lazy lord code is as follows which needs to be placed before </body>:
<script>//<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://4.bp.blogspot.com/-XNnCtsmVWps/WwUzI4O3OMI/AAAAAAAAGzM/s5IzNI42txMh8ZglfGk9ktfD7CqQ0JkMgCLcBGAs/s1600/sun.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>Now coming to the additional JavaScript codes.....
5. Additional JavaScript Codes LazyLoad
As you know that there are various scripts which we need to acquire from some directly so that we can use the script and we know that big JavaScript is so balki that it will take approximately 5 seconds time to render fully which is just done from the starting of the loading screen.
This will affect the page speed of your website and so for its solution we use lazy lord on these types of javascripts.
Below is the lazy load JavaScript:<script type='text/javascript'>//<![CDATA[var lazyanand=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyanand||0!=document.body.scrollTop&&!1===lazyanand)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://www.anandnawal.com/sw.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyanand=!0)},!0);//]]></script>
In the above script replace your JavaScript external link to the marked one and paste it above </body>.
6. Limited number of Posts
On the home page offer blogger website there will be not more than 7 to 9 recent posts so that the website loads faster and it doesn't takes time so much to render all the articles.
So for setting this you just have to follow the below steps:
How to limit the number of posts on the Blogger website?
1. Go to your Blogger dashboard and click on the Layout section.
2. Now search for Main posts [Default blog posts] and click on the edit button.
3. Now you will see the option to change the Number of posts on the main page. Change the value and save it.
7. Use DNS Prefetch to speed up
By using DNS prefetch you can increase your logger website is speed and it more than before.
Most of the high standard website on blogger use DNS prefetch.
This will help you reduce the "time to first byte" and improve the page speed score.
How to use DNS prefetch?
<link href='//fonts.gstatic.com' rel='dns-prefetch'/> <link href='//1.bp.blogspot.com' rel='dns-prefetch'/> <link href='//2.bp.blogspot.com' rel='dns-prefetch'/> <link href='//3.bp.blogspot.com' rel='dns-prefetch'/> <link href='//4.bp.blogspot.com' rel='dns-prefetch'/> <link href='//www.blogger.com' rel='dns-prefetch'/> <link href='//dnjs.cloudflare.com' rel='dns-prefetch'/> <link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/> <link href='//www.googletagmanager.com' rel='dns-prefetch'/> <link href='//www.google-analytics.com' rel='dns-prefetch'/> <link href='//connect.facebook.net' rel='dns-prefetch'/> <link href='//c.disquscdn.com' rel='dns-prefetch'/> <link href='//disqus.com' rel='dns-prefetch'/> <link href='//www.w3.org' rel='dns-prefetch'/> <link href='//www.youtube.com' rel='dns-prefetch'/> <link href='//feeds.feedburner.com' rel='dns-prefetch'/>
Conclusion :
So, that's all for this post.
Please comment below of you want to know more about this topic or have any other queries.
Please do consider reading this post so that we can know if we dove better or not.
Thanks