Blogger Page Speed Optimization - Ultimate Guide 2022
One of the most substantial questions is - how to optimize page speed for your Blogger blog.
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.
The penalties that individual sites with poor loading speed will bear are lower positions of keywords for which they previously ranked well.
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%.
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.
- Gamila Premium Blogger Template
- Minisite Pro Premium Blogger Template
- Median UI 1.3 Premium Blogger Template
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?
- Go to your Blogger Dashboard and click the Layout >section.
- Default blog posts and click the Edit button.
- 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
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.
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.
Now Cloudflare will ask you to choose a plan. Choose a free plan and click continue.
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.
After clicking the Continue button, you will see a new window asking you to 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.
Cloudflare settings
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>"
Now in the panel, select SSL / TLS> Edge Certificates and check if the "Always use HTTPS" and "Automatic HTTPS Rewrites" options are enabled.
Then select Speed> Optimization in the panel and make sure "Brotli" and "Auto Minimize (HTML, CSS, and Javascript)" are enabled.
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>
//<;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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjINX8Z90XpUKFn-qojOgp_mQ0u6g8NEeWjHx_VEmmM3uCHerflkegknsDD9IhjNk7YxDRCSdqX6xtzHTdbi16FjGO9M5l_JiDK3Y-5fZAhYL2ZBZnxN8wI_X-8Qsyll4yoNSjwtXLu-8n/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.
