Blogger Page Speed Optimization - Ultimate Guide 2022

Blogger Page Speed Optimization - Ultimate Guide 2022

Updated: 7/12/2022
 
One of the most substantial questions is - how to optimize page speed for your Blogger blog.

Site loading speed has become one of the most vital factors for ranking on search engines. When you have a lot of content and visits on your blog, it can affect the slow loading of pages and be frustrating for visitors. If they wait long for the page to load, they will leave your site and look for information elsewhere.
 
{tocify} $title={Table of Contents}

Why is page speed optimization important for your Blogger?



Since 2010, Google has included site loading speed as one of the essential factors in ranking sites in search results. According to his data - when the site loads slowly, people spend less time on the website or impatiently leave.

In mid-June 2021, an update to Google's algorithm was released, which starts to penalize sites that do not meet the specified site loading speed criteria.

The penalties that individual sites with poor loading speed will bear are lower positions of keywords for which they previously ranked well.
 
With a faster site, you will provide a better experience for visitors, increase your conversions, and Google will love you :)

Large corporations, including Bing, Microsoft, AOL, and Shopzilla, have recognized the significance of page speed optimization.

  • According to research by the Microsoft Bing team, opening the site for just 2 seconds reduces customer satisfaction by 3.8%. In addition, it reduces the number of clicks by 4.3%, which directly means a loss of 4.3% of revenue per user.
  • The KissMetrics study also showed that delays in opening a site for mobile phones lead to a 7% reduction in conversions.
  • According to Akamai research, 47% of people expect their website to open in less than 2 seconds. 40% of people will leave the page if it loads for more than 3 seconds.


In addition to these, several other studies have confirmed that time site loading affects sales.


Customers who are unhappy with a website's performance 80% of the time are less likely to make another purchase there. Because of website delays, customer satisfaction declines by 16%. {alertInfo}


So, if you want to improve your position in search results, page speed optimization should be one of your priorities.  

In this ultimate guide, I will introduce you to simple ways in which you can speed up the Blogger and provide a better user experience for your visitors.

Test the speed of your Blogger


To track the effect of Blogger's page speed optimization, you need to know the current load time of the site.

I suggest the Google Speed Insights tool to analyze Blogger. After applying each step to optimize the page speed, you can compare the information because every improvement is significant, even in milliseconds.

Google Speed Insights is a tool that analyzes site speed on a scale of up to 100 and also provides insight for computers and mobile devices. You get improvement tips and links to find out how to do it.

Use a lightweight Blogger Template to increase Page Speed Optimization


Choose a theme that is customizable and properly optimized for mobile devices. Free templates are generally not optimized for higher speeds. It is better, of course, to pay for a premium theme.

So I have prepared for you - some premium templates that you can use on your blogger website.


Optimize images for page speed optimization


Optimize images for page speed optimization

Before you upload images to Blogger, you need to adjust their size and thus save space, especially if you have site plenty of pictures.

Images can affect the loading speed of a site, images generally take up half the total size of your page, and it is one of the causes of slow pages. So you should optimize your images before uploading them to your blog.

The recommended image format is webP which allows better compression than PNG and JPG formats and is also specially designed for websites.

Blogger doesn't support the webP format, but simply adding "-rw" to the image link solves the problem.

Example:

https://1.bp.blogspot.com/xxxxxxxx/xxxxxxxx/xxxxxxxx/s1600/image.webp

Add -rw suffix to it like this:

https://1.bp.blogspot.com/xxxxxxxx/xxxxxxxx/xxxxxxxx/s1600-rw/image.webp

You can convert your images to webP format using our WebP Image Converter Free Tool.

The compression ratio of this tool is excellent - compress PNG images to about 60-65 percent without much loss of quality. If the image quality is essential to you, place your photos in another cloud storage or image CDN. 

Optimize Home Page


To increase the loading speed of your Blogger website, here are some simple tips:

  • reduce the number of posts on the page
  • remove additional widgets.


How do I limit the number of posts on a Blogger's website?

  1. Go to your Blogger Dashboard and click the Layout >section.
  2. Default blog posts and click the Edit button.
  3. You will now see the option to change the number of posts on the main page. Change the value and save it.

Try to keep the design of your blog clean and simple. A clean and simple design will give readers a better user experience and improve the loading speed of your website. 


Limit the use of custom fonts


Avoid Chaining Critical Requests Fonts

Fonts also affect page speed optimization and increase the number of HTTP requests. So I recommend you use at least one font on your Blogger or a maximum of two fonts.

Fix Avoid Chaining Critical Requests On the Blogger website

Heavy images and web fonts block critical requests. That's why sometimes you get a resource error that blocks rendering in page speed insights.

You can efficiently fix critical request chaining by implementing the - rel = 'preload' attribute.

Just copy the code and replace it with your font URL. Paste just below the <head> tag of your template.

<link as='font' crossorigin='' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.woff2' rel='preload' type='font/woff2'/> 


Minimize your third-party gadgets to achieve effective page speed optimization



Third-party gadgets slow down the speed of your website by more than 20 percent. So try to limit the number of third-party gadgets and use only the most useful ones.

Third-party gadgets like social media sharing, Disqus comments, Facebook Plugin, and Facebook comments are very common in blogger templates.

To achieve effective page speed optimization, you need to remove unused third-party gadgets.

Implement DNS prefetching in Blogger


You can use DNS prefetch to speed up blog loading. Most premium themes come with DNS prefetching by default.

What is DNS prefetching, and how to implement it on Blogger?


DNS prefetching is a technique for resolving the IP address of a website before, and the user clicks on its link. Resolves latency problems with DNS resolution that can add a few seconds to page load time.

You can check if DNS prefetching is implemented on your blogger theme by searching for code such as <link rel = "dns-prefetch" or running a speed test in a page speed insight.

The DNS prefetch syntax is like

<link rel = "dns-prefetch" href = "// example.com">

If DNS prefetching is not implemented on your template, you can easily add it to your blogger theme.

To implement DNS prefetching on the Blogger website, copy the code below and paste it under your head, as shown in the image below.

DNS prefetch code for Blogger

<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' />


Implementing DNS prefetching on Blogger will help you reduce "time to first byte" and improve
page speed rating.


Use a content distribution network (CDN) to optimize page speed.


Content Delivery Network (CDN) refers to the worldwide distribution of servers working together to ensure fast delivery of Internet content.

Adding CDNs to your blogging website will improve your loading speeds as it creates multiple copies of your website and saves them to different locations.

It does not replace traditional web hosting, but it helps to cache the network-level content and helps improve website performance.

You can use Cloudflare CDN on your blogger for free.

There are several other benefits to using a CDN: it protects your pages from DDoS attacks, reduces DNS lookup time, and more.

How to Connect Blogger with Cloudflare


First, create an Account on Cloudflare.


Go to Cloudflare and click on the signup button to create a free account. Enter your email address and password here.

Create an Account on Cloudflare

Click on Websites in the panel on the left, then on Add Site to add the address of your Website/Blogger without www (as example.com), and click on add site.

cloudflare add website

cloudflare add website 2

Now Cloudflare will ask you to choose a plan. Choose a free plan and click continue.

cloudflare chose plan

In the free plan, you will get some basic features more than enough for Blogger, such as Global CDN, free SSL, protection against DDoS attacks, etc.

Cloudflare will automatically add the required DNS settings of your website from your domain name registrar - in my case GoDaddy and show you in the Cloudflare dashboard. Then click on the continue button.

cloudflare dns setting

After clicking the Continue button, you will see a new window asking you to change your nameservers.

cloudflare change your nameservers

Now log in to your domain name service provider (in my case Godaddy), and go to DNS Management, find Nameservers, click Change> Enter my own nameserver (advanced) and add the Cloudflare provided nameserver on it, and click Save.

godaddy change nameservers

godaddy change nameservers 2
 
Your domain provider may need some time to propagate the name server to Cloudflare. Cloudflare will send you a confirmation email upon successful transfer of the name server.


Cloudflare settings


Cloudflare settings for page spid optimization

Click on the name of your Website / Blogger in the left panel, select SSL / TLS> Overview, and set your "SSL / TLS encryption mode to Full>"

ssl tls encryption mode

Now in the panel, select SSL / TLS> Edge Certificates and check if the "Always use HTTPS" and "Automatic HTTPS Rewrites" options are enabled.

cloudflare Always use HTTPS

cloudflare Automatic HTTPS Rewrites

Then select Speed> Optimization in the panel and make sure "Brotli" and "Auto Minimize (HTML, CSS, and Javascript)" are enabled.

cloud flare Brotli and Auto Minimize (HTML, CSS, and Javascript)

Enable browser cache in Blogger


You can easily enable browser cache for your Blogger using Cloudflare and set the duration of the cache in the user's browser.

To set the cache, in the panel, select Caching> Configuration> Browser Cache TTL - you can set this duration to more than 24 days.

Now all the basic settings are done, and your website is ready to take advantage of the CDN service.


Use Lazy Load for page speed optimization


Lazy Load can significantly improve page loading speed and user experience on your website.

Images take up more than 50 percent of a website size and can drastically reduce the loading speed of a blog.

For example, your blog post has more than ten images, and when someone visits that post, the browser will try to load all the pictures before showing the content to readers.

The Lazy Load script delays loading resources or objects until they are needed and reduces the initial load time.

How to Implement Lazy Load on Blogger


  • In the Blogger Dashboard and click the Theme section.
  • Click Edit HTML from the drop-down menu.
  • In the HTML editor, press CTRL + F in the search type </body> or simply scroll down to the end and you will find the </body> tag.
  • Paste the javascript code above the </body> tag and save it.

<script>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);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>


Use Async / Defer parsing JavaScript for page speed optimization


JavaScript has an enormous impact on web page loading. Generally, if you do not optimize your JavaScript [JS] properly, you will not have a good page speed.

JavaScript can be loaded in 4 ways into a Webpage

  • Inline
  • External
  • Async
  • Defer


Inline and External Javascript implementations block your site while downloading and running JS files. So, sometimes you have a bug called render-blocking resources.

Async and Defer are faster than the first two methods.

With Async, your JavaScript loads in the background while rendering your HTML and CSS files. But when the download is complete, it will - start blocking HTML and CSS files.

Example of the async script:

<script src = "mini.js" async> </script>


The javascript Defer will not block HTML and CSS files, and when the download is complete, it will queue the JS, and once the HTML & CSS processing is complete, javascript will start.

Here is an example of a javascript defer:

<script src = "mini.js" defer> </script>


Fix jquery Avoid chaining critical requests


Just copy the code and replace it with your jquery URL. Paste just below the <head> tag of your template

<link as = 'script' href = 'https: //cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' rel = 'preload' />



Most premium blogger themes use an asynchronous script. But I recommend using defer JavaScript for AdSense so it won't block your HTML and CSS processing.

You can also implement Lazyloading AdSense script to speed up your blogger. 

Read also: Fix "Avoid Chaining Critical Requests" On Your Blog or Website


Implement Lazyload Adsense script on Blogger


One of the main reasons for your Blogger's slow loading and loading speed is Adsense.

When we check our Blogger site in Speeds Insights, it shows that Adsense takes up more than 50 percent of the page size by loading unnecessary scripts.

How does the Lazyload Adsense script work?


One of the most crucial steps in page speed optimization is the implementation of Lazyload Adsense script, which will significantly speed up the site.

Implementing the Lazyload Adsense script on Blogger will delay the loading of ads and load only the critical pageview request.

When a user starts scrolling on a page, the Adsense code will start appearing in the browser, and your ads will show up on the page.

PageSpeed Insights will not detect the load of the Adsense script because it is loaded by user response. Lazyload Adsense script reduces the overall size of the page and the loading speed itself.

How to implement Lazyload Adsense script on Blogger?


To implement Lazyload Adsense on Blogger, follow the steps below.

  • Go to Blogger Dashboard and click Theme.
  • Back up your Theme, and click Edit HTML.
  • Remove previous Adsense code from your blogger theme.
  • Copy the code below and replace "ca-pub-xxxxxxxxxxxxxxxx" with your own Adsense Publisher ID.


Paste code just above the </body> tag of your template.

<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>



All your Adsense ads will load after the page loads, and you will see a significant increase in page load speed. 


Implement Lazy Loading Google Analytics script on Blogger


One of the most often used javascript scripts on a website, Google Analytics, might have a display-blocking impact while the page is loading.

You cannot just delete the code because it is essential for monitoring website traffic. However, you can speed up page load time by implementing Lazy Loading the Google analytics code on your Blogger website.

As I mentioned with Google Adsense, Lazy Loading Google analytics implementation will significantly speed up the site. And it also belongs to one of the most crucial steps in page speed optimization.


How to implement the Lazy Loading Google Analytics script on Blogger?


  • First Step, go to Blogger setting page and remove the Google Analytics
  • property ID.
  • Second Step, Create a backup of your theme.
  • Third Step, click edit HTML - search for old analytics code and remove it.
  • Fourth Step, copy and paste code just above the </body> tag.


Lazy Loading Google Analytics script:

<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=X-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', 'X-XXXXXXXXXX');
//]]>
</script>

  • Fifth Step, replace the tracking code (red text) with your tracking code.
  • Sixth Step, save your theme.


After these steps, the lazy analytics code - is successfully added to your blogger website.

Lazyload Google Analytics's disadvantages


Your analytics data may be impacted if your website uses lazyload analytics code. If a user leaves the page before it has fully loaded, it will be unable to track views.

However, that is perfectly OK because - it is pointless to track a user who partially loads the website.

Also, keep in mind - that since the analytics data has already been cached in the browser, a user's subsequent visit won't have any impact on it.

In any case, I recommend using the Lazyload Google Analytics script for the Blogger website, especially since we are talking about page speed optimization.

Conclusion


If you consider all or at least half of these tips, you should see measurable progress in the speed of your site. Only one thing can make a big difference.

This content will be regularly updated with new ways for page speed optimization.

I would be grateful if you share this article on Facebook and other networks.

Jasmin K.

SEO Blogger Tips The main goal of this site is to provide quality tutorials, tips, courses, tools, and other resources that allow anyone to work online and master digital marketing.

Post a Comment (0)
Previous Post Next Post