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?
- How to test my page speed?
- How To Speed Up My Blog Loading Time?
Why page speed is important?
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.
Therefore, a reduction even in a millisecond have huge huge benefits to any websites.
How to test my page speed?
2) Google PageSpeed Insight
3) Web Page Test
4) Web Page Test – Light House Testing
How To Speed Up My Blog Loading Time?
1] Leverage Browser Caching
|Fig: Inspecting Elements to notice caching|
So, how to set caching time in blogger?
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)
|Fig: How CDN Works|
So, how CDN helps in speeding up the loading time?
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
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
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
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
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:
The above link tag is saying “I want to resolve
www.example.com domain before it is called.”
Note: Don’t add
//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.
6] Request only required fonts
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:
7] Optimize Images
The rule of thumb is to save images in PNG format if the number of colors used are less, choose JPEG if multiple colors are used and GIF if you’re creating a short animated video. I’ve shared a detailed article comparing different image formats.Check that out too.
b) Save and upload them in article. Check for article’s Page Score in GTMetrix.com and download new optimized images. Replace previous images with the new downloaded ones in the same article.
8] Specify Image Dimensions
When the browser lays out the page, it needs to be able to flow around replaceable elements such as images. It can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around. If no dimensions are specified in the containing document, or if the dimensions specified don’t match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML <img> tag, or in CSS.
In short, specifying image dimensions prevent browser from redrawing already downloaded images. This helps load a website faster.
You can easily specify image dimenions within <img> tag as below:
Or, you can use CSS:
So, a good practice is to crop or re-size the images to needed dimensions via an image editor before uploading in the articles. Later, we can specify same width and height attributes.
Below I have used an online photo resizer to check the filesize for same image. You can notice the difference in file sizes.
9] Lazy Load Images
10] Optimize Web Icon Fonts : Font Awesome
- Improved pagespeed.
- Less DNS Look-up.
- Less HTTP Requests.
Check out this article to learn how to optimize font awesome icons.
that was a lengthy one, right? This is the completion of part 1 for 21 tested ways to speed up page loading time. In the next part, I’ll be covering remaining 11 techniques which includes Optimization of CSS, Compression and many more. Stick with us and Happy Blogging !
Please take a second to share this with everyone. Thank you !