15 simple hacks to improve page speed in blogger website

Page speed is now an official ranking factor and Improving the page speed of a Blogger website is a bit technical and requires a little bit of technical knowledge.

That’s why I will show you The step by step process to improve the loading speed of the blogger website. 

Remember one thing if you are planning to achieve a 100% score in page speed Insight then that is practically not possible especially when you are using AdSense on your website. 

Let’s Understand what is page speed and what are the best SEO practices behind it.

What is Page Speed?

Page speed is often considered as the “page load time” which is the total time takes by a browser to fully load the Contents on a specific page. 

Google’s page speed insight considers the overall page loading time whereas other page speed checkers like Pingdom, and GTmetrix consider the “time to first byte” concept while calculating the page speed. 

This is the total time taken by the browser to receive the first byte of information from the server to display the above fold content. 

You should know that Google’s Pagespeed insights speed score depends upon Two important speed matrices First Contentful Paint (FCP) & DOMContentLoaded (DCL). It also takes data from the Chrome User experience report. 

Why is page loading speed important for SEO?

As you know Google is now using core web vitals as a ranking signal which includes three important factors given below. 

1. Largest Contentful Paint (LCP)
2. First Input Delay (FID)
3. Cumulative Layout Shift (CLS)

So, you need to focus on improving these scores. I have prepared a detailed guide on core web vitals so that you can check how it works and how to improve them.

Do you know One-second delay in page loading speed can cause 

• 11% fewer page views
• 16% decrease in customer satisfaction
• 7% loss in conversions

The ideal time to load a website is 2 seconds or less. In fact, 40% of people hit the back button if a page takes 3 or more seconds. 

So, page speed is very important for better ranking along with better conversions. 

Steps to speed up a Blogger website

1. Use a Fast loading Blogger theme 

The speed of a Blogger’s website mostly depends on the Theme. That’s why you should use a premium lightweight theme on your website.

Pick a theme which is responsive and properly optimized for mobile devices. Free themes are generally not optimized for better speed, that’s why it is better to invest in a premium theme. 

I have shared some premium blogger themes below that you can use on your blogger website. 

• Newspeed Blogger theme
• Freebify Blogger theme [Currently using]
• Top 10 Premium blogger template

2. Optimize your blog Images 

Images generally take up half of your total page size and it is the main cause of slow pages. That’s why you should optimize your images before uploading them to your blog. 

As you know Blogger doesn’t have an automated tool for image optimizations. So, you have to manually optimize each and every image of your blog post.

The best image format that is recommended is .webp which provides better compression than .PNG and .JPG formats and it is also specifically designed for web pages. 

How to convert images to webp format?

You can convert your images to webp format using a free online tool called Online JPG to WebP converter by  ezgif.com. 

I personally use this tool to convert all my images on the Blogger website and it works perfectly. The compression rate of this tool is very good. It can compress normal PNG images to around 60-65 percent without losing significant quality. 

It uses lossy compression which is best for blog websites. 

Blogger doesn’t support Webp format by default, you have to modify the code a little bit to take the advantage of webp format in blogger. Learn how to use the webp format properly in Blogger. 

Update: Now you can enable Webp format in Blogger from the settings. Note it only works for blog post and pages images only. It won’t work on thumbnail images.

If you are running an Image website or fashion website where image quality is very important then you should host your images in other cloud storage or Image CDN. 

3. Limit the Number of Posts on the Home Page 

To boost the loading speed of your blogger website, you need to limit the number of posts on the homepage. The more posts your homepage has, the more images will require to load, so you should limit it. 

You can use expandable buttons for loading more posts on the Home page. 

For example, If you go to my Homepage then you will see 8 posts at the beginning, and when you click load more posts it will then load 8 more posts. 

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. 

4. Minimize the Number of Blog Widgets 

The speed of bloggers also depends upon the number of widgets used on the website. So, try to avoid lots of widgets in the sidebar and keep the important ones. 

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

5. Limit the use of custom fonts 

Fonts also take significant page sizes and increase your number of HTTP requests. That’s why I recommend you use at least one font on your website or a maximum of two fonts. 

You can easily know the size of the font of your website by running a page speed test on Pingdom.  As you can see in the below image fonts take more than 300KB which can be reduced to below 100 KB if we limit the number of fonts used. 

6. Minimize Your Third-Party Gadgets 

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

Third-party gadgets like addthis [social share], Disqus [comment], Facebook Page Plugin, and Facebook comment are very much common in every popular theme. 

Removing unused third-party gadgets can have a huge performance improvement on your blogger website. 

7. Implement DNS Prefetch in Blogger 

You can use the DNS prefetch technique to speed up your blog loading speed a little bit. Most of the premium themes like Galaxymag, and Freebify comes with DNS prefetch by default.

What is DNS prefetch and How to implement it on Blogger?

DNS prefetch is a technique to resolve a website’s IP address before a user clicks on its link. It solves the latency issues associated with DNS resolution which can add several seconds to the site’s page load time. 

You can easily check if the DNS prefetch is implemented on your blogger theme or not by simply searching for code like <link rel=”dns-prefetch” or by running a speed test in page speed insight. 

The syntax of DNS prefetch is like 

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

If it is not implemented on your theme then you can easily add it to your blogger theme. 

To implement DNS prefetch in the Blogger website just copy the below code and paste it below the head as shown in the below image. 

Code for DNS prefetch in 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'/>

You can add more or delete some of the websites in the above code. Just add the most requested websites here. 

This will help you reduce the “time to first byte” and improve the page speed score.

8. Use a content distribution network [CDN] 

A content delivery network (CDN) refers to the worldwide distribution of servers that work together to provide fast delivery of Internet content.

Adding CDN to your blogger website will greatly improve your loading speed as it creates multiple copies of your website and saves them in different locations. 

It doesn’t replace traditional web hosting but it helps cache the content at the network level and helps improve website performance. 

You can use Cloudflare CDN on your blogger website for free and it will do the job for you. If you don’t know how to connect Blogger with Cloudflare let me know in the comment section. 

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

9.Minify CSS, JavaScript, and HTML 

One of the common practices for speed improvement is to minify HTML, CSS & javaScript used in websites. There are several techniques to minify these assets one is in the theme level and the other at the server-side level.

Most of the premium Blogger themes come with minified versions of HTML, CSS, and JavaScript which are generally missing in free versions. 

That’s why try to use a premium version theme on your blogger website. You can also minify these using the Cloudflare account. 

To minify HTML, CSS & JS login to your Cloudflare dashboard and click on the speed tab. Now click on Optimization and scroll down to Auto minify. Here tick marks all three items and clicks on save changes. 

If you are not using Cloudflare and want to minify the CSS code of your theme then you can use our Free Online CSS minify Tool. 

Now run a speed test to check the performance improvement of your blogger website.

10. Enable Gzip/Brotli compression 

Gzip is the most popular lossless data compression technique used on the web to reduce the overall size of HTML web pages, stylesheets, and scripts.

Since in Blogger we don’t have access to the web hosting it is a bit difficult to enable Gzip compression on it but you can achieve the same using your Cloudflare account. 

How to Check If GZIP Compression Is Enabled in Blogger or not?

You can easily check if GZip compression is enabled on our blogger site or not by simply running a speed test in Google’s page speed insight. 

Now search for Enable text compression warning and if not found then check it in the passed audit section. It is the simplest way to check for Gzip compression. 

You can also check it using the free Check GZIP Compression or HTTP Compression Test tools. 

How to enable Gzip compression on Blogger?

• Login to your Cloudflare account
• Go to the speed tab and click on the Optimization option
• Now search for Brotli & enable this option.

Now it will work as a Gzip compression for your blogger website. 

How Good Is GZIP Compression?

Gzip compression works for all file types but it is super helpful for compressing textbases files like HTML, CSS & JS. 

Its compression ratio is around 70% for small files, but it can reach up to 90% for larger text-based assets. You can check the compression of popular CSS and JS libraries here.

Brotli is a new open-source data compression method. In most cases Brotli can compress files to a smaller size than gzip can, that’s why it is a better compression method compared to gzip.

11.Prioritize above-the-fold Content  (lazy loading) 

You can significantly improve your page loading speed and the user experience of your readers by simply enabling lazy load on your website.

As you know images take more than 50 percent of web page size and slow down your blog loading speed.

Suppose your blog post has more than 15 images and when someone visits that post the browser will try to load all the images before showing anything to your readers. 

So, you can set an instruction to the browser to load only that image that is actually in the view of readers and when all resources are loaded properly then the browser will load the rest one by one. 
It will improve your Overall score like First contentful paint, large contentful paint and time to interactive, etc. 

You can easily apply lazy loading to your blogger website by simply adding a code just above the </head> tag. I have prepared a detailed guide with a video tutorial on how to implement lazy load on the Blogger website.  

12. Use Async/Defer Parsing JavaScript 

JavaScript has a huge impact on the better loading of a webpage. Generally, if you don’t optimize your JavaScript [JS] properly then it is very hard to maintain a good page speed.

There are 4 ways JavaScript can load on an HTML web page. 

• Inline JavaScript
• External Script
• Async Script
• Defer Script

Inline and External Javascript implementations are old-school methods that actually block your page while downloading and running the JS file. So, sometimes you got an error called render-blocking resources. 

Whereas the Async script and defer script are faster than the first two methods. 

In async script your JavaScript loads in the background, while rendering your normal HTML & CSS files. But when the downloading is completed then it will run blocking the HTML & CSS files. 
Example of async script: 

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

In deferring javascript it won’t block HTML & CSS files at all and when the downloading is completed it will set the JS to queues and once the processing of HTML & CSS is finished it will run the javascript. 

Here is an Example of Defer javascript 

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

Now you have some basic ideas on how JavaScript is implemented on a website. Most of the premium blogger themes are using an async script which is good. But I recommend you to use Defer JavaScript for AdSense, so it will not block your HTML & CSS processing. 

You can also implement Lazy loading of AdSense codes to speed up your blogger blog significantly. 

If you implement it properly it will solve your render-blocking JavaScript problem but use it wisely otherwise you may break your site.  

13. Leverage browser caching 

caching means placing something in storage (usually in secret) on the chance that it may come in useful later. 

Browser caching also works in the same way. When someone visits your website some of your data will be saved in the user’s browser and if that person again visits your website most of the assets will load locally and request very few files to the server. 

In this way, the loading speed of your website will significantly increase for subsequent visits and saves a lot of bandwidth for your server. 

You can easily enable browser caching using Cloudflare. 

14. Reduce redirects 

You can also improve your blogger blog loading time by reducing redirects of URLs. You can follow some of the best practices to reduce your redirects given below. 

• Never link to a page that has multiple redirects in it. 
• Avoid plugins/scripts with unnecessary redirection
• Regularly scan your website for old redirects

15. Use instant Page Script

You can also speed up your page loading time in Blogger using the instant page script. This is a small code snippet which helps website to load the page faster by preloading the content when a user hover over any internal link. 

You can learn more on how to load page faster with instant page script here. 

16. Monitor your speed over time 

Monitoring the changes on the page load time is very important, especially adding a new theme, plugins, or script to your blogger website. 

You can use several online tools like Google’s page speed insight, GTmetrix, and Pingdom speed test to test your website loading performance. 

Here is my latest GTmetrix speed test report.

Conclusion

As you know there are several factors that depend on the page speed of a website and fixing all problems is very tricky and sometimes it may break your website design. 

That’s why you can contact some professionals like me to fix all of your problems and boost the page speed of your Blogger website. You can hire me on Fiverr for Different blog-related services. 

I hope this speed optimization technique will help you increase the loading speed of your blogger website.  

Do share your problems and feedback in the comment section and I will try to solve your problem ASAP. Thank you. 

Read Also: How to add a table of content to Blogger website.