Page loading time or simply Page speed is an important factor considered by Google to rank a page. A fast loading page improves user experience and reduces bounce rate.
In this article, I'll be sharing 21 tested ways I implemented in my blog to speed up blog loading time. Note: This article is going to be lengthy, so please grab a coffee before starting.
Why page speed is important?
There is no deny that a quick and fast loading page trumps a slower one. According to various studies conducted on website loading time, it was found that if an average page load time exceeds 3 seconds, users abandonment rate increases. This consequently rises bounce rate. A high bounce rate telegraphs search engine that a website is not useful for that specific keyword and hence reducing ranking. Therefore, it is important to have a fast page speed.
Moreover, On April 2010, Google had announced that they are considering page speed time as a key factor for ranking. The faster a page loads, better it is. Also for eCommerce websites, page speed is very crucial. Below are some quick facts :
- A study by Walmart showed that every second of improvement in their website loading time would increase conversion by 2%.
- One second delay in loading cost for Amazon is $1.6B sales each year!
- In an average every second of delay in page loading time can result in 7% decrease in online sales.
The impact of a second delay for eCommerce websites can be seen, but what about small website like ours? Does one second have huge impact for smaller websites? How precious is 1 second online exactly? Below are some most remarkable one second stats taken from Hostingtribunal.
- 1 second delay reduces page views by 11%.
- 1-3 seconds in loading time see a very low bounce rate probability – only 32%. Add 1 second more to that and the chance for users to bounce triples, reaching 90%.
- 1 second delay decreases customer satisfaction by 16%.
Therefore, a reduction even in a millisecond have huge huge benefits to any websites.
How to test my page speed?
Now, you know the importance of page speed in ranking, its time to find out how fast your blogger blog loads. Below are my all time favorite page loading time testing tools.
1) GTMetrix
GTMetrix is a page speed testing tool that provides a detail overview of how fast a page loads. This tool consider many factors like optimization of code, position of CSS & Javascript, number of requests, redirections, use of CDN etc., and append PageSpeed and YSlow Score based on those factors.
Moreover, GTMetrix also keeps a record of past history scores and it helps a lot to keep track of historical data of website. I just love it !
Unlike other tools, GTMetrix not only shows factors like compression of images needed, but it also provides optimized images that are easily downloadable. Normally, I download those images and replace with the previous ones.
Hey, I forgot to mention that my homepage scores a whopping 99 Score !! :D Here is the proof.
2) Google PageSpeed Insight
Pagespeed insight is a free tool provided by Google. I prefer this because ultimately Google is the one who ranks my website based on their algorithms.
It shows my page score for mobile and desktop version, along with different suggestions like Defer OffScreen Images, Remove unused CSS, Eliminate rendering resources and many more.
Here is a screenshot of my homepage score.
3) Web Page Test
Web Page Test is probably the best tool to figure out what's wrong with your website. It gives you details on First View and Repeat View. This is important because when a visitor visits your site for the first time, all required resources need to be downloaded, taking more time to load compared to repeating visitors.
Therefore, a site must be optimized for new visitors so as to convert them into repeating ones. Have you heard of first impression? That very much applies to website as well.
4) Web Page Test - Light House Testing
LightHouse Testing is a powerful tool packed with factors like Performance, Accessibility, Best Practices and SEO. I rely heavily on this tool to make my site accessible to every single person and to guarantee that I'm using latest SEO trends.
Here is a screenshot of my homepage score on Light house testing. I'm trying my best to get a perfect score :P
How To Speed Up My Blog Loading Time?
Now that you have tested your blog loading time, see if you need optimization. If yes, this article is going to be a big gift. Stick with me, and I promise to deliberate something new that will surely help you speed up page loading time.
1] Leverage Browser Caching
If someone asked me how to speed up page easily, my answer would be to enable caching. If you want a fast loading page, caching would probably be the first step.
While caching may sound too technical for some, the underlying principles of caching are pretty simple to understand. So, what is caching?
Caching is a small memory browsers use to store website contents files locally. Let me give you a scenario:
Let's say, you have visited this article for the first time. The browser needs to download HTML, CSS, JS, images and other contents of this article causing a delay in loading. Now, refresh this page and notice the loading time. It must be less than the first visit (ignoring other factors). So, how come the same page is loading faster than before?
This is because browser stores files temporarily in a cache (given that you have provided caching time) and the second request is served without connecting to server, directly from a cache memory. This is like loading static HTML page.
 |
| Fig: Inspecting Elements to notice caching |
Caching time is a duration about how long the page should be cached by browser. While browsers cache files by themselves and set a day (in most cases) as caching duration, sometimes you may need to manually set caching time. So, how do you achieve that in blogger? Well, I've already written an article on how to overcome favicon leverage browser caching issue in blogger, go check that out. Hope that helps. I recommend not to cache Google Analytics.
2] Use of Content Distribution Network (CDN)
Content Distribution Network delivers contents through a server that is close to the end users. In other words, users' request is served via a closest server in corresponding to that user.
For instance, Google uses server located in Japan in response to the request made by a Japanese user.
 |
| Fig: How CDN Works |
The number of requests are reduced when using a CDN. Let's say, in above scenario, if a Japanese user's request is served via Brazilian server, then that request has to be transmitted from Japan to Brazil (at minimum) whereas if it was served directly from Japan, no connection has to be made from Japan to Brazil.
CloudFlare is probably the most popular free CDN right now, and it is easy to use. You can learn more on how to setup Cloudflare account here...
3] Minimize HTTP Requests
Every request a webpage makes will add a considerable amount of time in establishing a connection and retrieving data. More request = More loading time and vice versa. We can use different techniques to minimize HTTP Requests. Some are explained below:
a) Use Data-URI for small images
Images are loaded in a website via HTTP Request. In order to avoid this, images should be converted to base64 codes, which looks something like this:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABwElEQVQ4T53TQSjfYRzH8dfvj0lJiaVc7KClJGpODru4jOTg6Miy5DKHf3LjIrnYAcsobi5KLqyEzE1hOagtShxcHOSirfit5/f7G1OrzXN6ns/zfN/f5/N9vk/k0YhjDehBM17ktk+wjk9R5OvDkOhuEceK8AFvkXkMzq1vMYv3UeQ6aAkgF/wZr/8S+Fj+gjcBcgeYzl37H+OTY8HOuyh4vrmxm83KxPGf8ZkM3d3MzNzrJSV0dFBfL9h5FQBT19d619dZXmZ2lvx8FhcpKuLwkP5+CgpYWqK9ncJCTk8pL/cxAL7hZcjR1cXcHA0N7O+nWTs7WVigsZG1NcrKUv3sjMpK3wPgB54FsbY2zdjTw3SoCqqrOT6mpoaKCra2mJigry/Z/vkbcHVFaSm3t6mN4P3igufPU9DICNvbrK7S0sLKyj0gsbCxQXNoHRwcUFeXHm5tTbWjIyYnGR+nqoqT0FpSC1PoHR1lcJDiYi4vyctjeJihIULlNzdpa+P8nLExstkEkBQxtO7u/LzMzk5KHxhIswYre3vpPIpSi+FGTU2JlD5jmMWxpzdSDhD+wdNb+QHkaZ8pdZmO//3OvwAaHqExdfK/7gAAAABJRU5ErkJggg==
The above code is an image file in base64 format. If you copy and enter the above code in browser, you'll get following image, which is our favicon.
When the browser encounters a Data-URI in your code, it is able to decode the data and construct the file. Be careful not to remove any single character from base64 code.
And, use Data-URI for small images only because large-sized images will have more size when converted to Data-URI formats.
Currently, I have replaced all small images with Data-URI codes and saved some requests. Use it and let me know if it helped your website to load faster.
b) Combine external Scripts and CSS files
It is a good practice to combine small files into one. For every external file, an request is to be made. Try to reduce such requests.
Be careful to append scripts that need to be called earlier at the top. Doing so won't hamper page features and improves user experiences.
c) Use CSS Sprites
This is another cool technique to reduce no. of requests. CSS Sprites combine many images into a single sprite sheet. Then, CSS is used to show any specific image from the sheet using background-position property.
CSS Sprite works best for small images like social media icons. Do not combine large images into one as the product image will have larger size.
A tool like CSS Sprites Generator can be used to create sprite sheet.
4] Reduce Redirections
Redirections are calls or methods that take a user from one location to another. There are 5 types of redirections and each type hampers your web performance because it is a waste to go one place just to be redirected to another.
Let's consider a scenario: You ask someone where to find eggs and when you go there, you're told that there are no more eggs and you need to go another shop. It is just like that.
So, how to find out your website redirections?
A simple way to figure out redirections is to use a tool like Redirect Mapper by Varvy which detects and displays 301 and 302 redirects.
Type in your page address and hit enter. You'll be provided with a result something like this :
The above redirection is common among bloggers. Firstly a non-www is redirected to www and later to https. This results in a 2 redirection chain and it significantly impact loading speed.
The solution for this can be to redirect all non-www to https www in a single redirection. It is important to know that even if we remove a single redirection, it helps in faster loading of page.
Google recommends eliminating redirects by never linking to a page with a redirection in it. This happens when you had once entered an address, and that address is now redirected and you have not updated. Therefore, it is important to know whether your pointing addresses are valid or are 404 errors or are simply redirects.
You can use free tools like broken link checker or screaming frog to find 404 errors and redirections.
It is not that redirections are totally bad. There are many good and legitimate reasons to have redirections. Maybe you have changed your domain or maybe you've removed old article and written a similar one recently. The only thing to be aware is that they significantly increase page speed and performance issues.
5] Use DNS prefetch
DNS prefetching is another way to improve page performance of a website. With this, we can inform browser to resolve a DNS lookup for future usage. According to W3C documentation,
The dns-prefetch link relation type is used to indicate an origin that will be used to fetch required resources, and that the user agent SHOULD resolve as early as possible.
When a web page contains assets that need to be loaded from external domains, DNS prefetching notifies that there are web resources like scripts, CSS etc. that will be required from specific domains. As a result, a browser resolves DNS lookup asynchronously while loading other contents.
An easy way to achieve DNS prefetch is to add a <link> tag with rel="dns-prefetch" attribute within <head></head> section. The code looks like this:
<link rel="dns-prefetch" href="//www.example.com"/>
The above link tag is saying "I want to resolve www.example.com domain before it is called."
Note: Don't add http:// or https:// use // instead. That way, browser will resolve DNS no matter what the protocol is.
Below is a list of some domains with prefetching. Don't forget to remove the domains you won't be using.
<!-- Google CDN -->
<link rel="dns-prefetch" href="//ajax.googleapis.com">
<!-- Google API -->
<link rel="dns-prefetch" href="//apis.google.com">
<!-- Google Fonts -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<!-- Google Analytics -->
<link rel="dns-prefetch" href="//www.google-analytics.com">
<!-- Google Tag Manager -->
<link rel="dns-prefetch" href="//www.googletagmanager.com">
<!-- Google Publisher Tag -->
<link rel="dns-prefetch" href="//www.googletagservices.com">
<!-- Google AdSense -->
<link rel="dns-prefetch" href="//adservice.google.com">
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com">
<link rel="dns-prefetch" href="//tpc.googlesyndication.com">
<!-- Google Blogger -->
<link rel="dns-prefetch" href="//bp.blogspot.com">
<link rel="dns-prefetch" href="//1.bp.blogspot.com">
<link rel="dns-prefetch" href="//2.bp.blogspot.com">
<link rel="dns-prefetch" href="//3.bp.blogspot.com">
<link rel="dns-prefetch" href="//4.bp.blogspot.com">
<!-- Microsoft CDN -->
<link rel="dns-prefetch" href="//ajax.microsoft.com">
<link rel="dns-prefetch" href="//ajax.aspnetcdn.com">
<!-- Amazon S3 -->
<link rel="dns-prefetch" href="//s3.amazonaws.com">
<!-- Cloudflare CDN -->
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
<!-- jQuery CDN -->
<link rel="dns-prefetch" href="//code.jquery.com">
<!-- Bootstrap CDN -->
<link rel="dns-prefetch" href="//stackpath.bootstrapcdn.com">
<!-- Font Awesome CDN -->
<link rel="dns-prefetch" href="//use.fontawesome.com">
<!-- Facebook -->
<link rel="dns-prefetch" href="//connect.facebook.net">
<!-- Twitter -->
<link rel="dns-prefetch" href="//platform.twitter.com">
<!-- Linkedin -->
<link rel="dns-prefetch" href="//platform.linkedin.com">
<!-- Vimeo -->
<link rel="dns-prefetch" href="//player.vimeo.com">
<!-- GitHub -->
<link rel="dns-prefetch" href="//github.githubassets.com">
<!-- Disqus -->
<link rel="dns-prefetch" href="//referrer.disqus.com">
<link rel="dns-prefetch" href="//c.disquscdn.com">
<!-- Gravatar -->
<link rel="dns-prefetch" href="//0.gravatar.com">
<link rel="dns-prefetch" href="//2.gravatar.com">
<link rel="dns-prefetch" href="//1.gravatar.com">
<!-- BuySellads -->
<link rel="dns-prefetch" href="//stats.buysellads.com">
<link rel="dns-prefetch" href="//s3.buysellads.com">
<!-- DoubleClick -->
<link rel="dns-prefetch" href="//ad.doubleclick.net">
<link rel="dns-prefetch" href="//googleads.g.doubleclick.net">
<link rel="dns-prefetch" href="//stats.g.doubleclick.net">
<link rel="dns-prefetch" href="//cm.g.doubleclick.net">
http:// or https:// use // instead. That way, browser will resolve DNS no matter what the protocol is.6] Request only required fonts
Fonts are integral part of web designing. A good font can enthrall visitors into going through contents. There are many ways to add a font in your website. A common practice is to install Google Fonts which are free and easy to use.
You just need to select fonts you want from Google Fonts and click on embed option.
<link href='https://fonts.googleapis.com/css?family=Open+Sans' id='google-fonts-css' media='all' rel='stylesheet' type='text/css'/>
The above is Open Sans Google Font. It looks amazing when you set height and size. However, have you bothered to open that file ?
The file loads Cryptic, Latin, Vietnamese and other versions of fonts. Do you even need them? A recent studied showed that adding a .woff version will be more than enough because all browsers support it. Woff2 is new version and most modern browsers support them too. I'm using .woff2 format for twistblogg.
You can do the compatibility test from caniuse.com.
What if browser or system doesn't support the font you have added? In that case, you can use a property font-display:swap to swap the font with default system font incase browser can't load it. Pretty simple, right?
Here is the code to add Open Sans Google Font:
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2'); font-display: swap;}
font-display: swap;}
