Few weeks ago, I had discussed what a page loading time is, why is it important, how to measure it and also some ways to improve blog speed. You can read all the details from this article : 21 Tested Ways To Speed up blog by decreasing loading time - Part 1.
And today, I'll share remaining tested ways I implemented in my website to decrease page loading time. Let's dive into them.
Scalable Vector Graphics (SVG) files are nothing more than simple documents that describes shapes, lines, curves, colors, texts and points. Each attribute describes its own property and it can be modified individually, hence providing higher range of editing flexibility. You can learn more about the advantages of SVG icons over traditional image formats like PNG, JPEG from this linked page.
In fact, most of the developers do not rely on font awesome or icomoon for inserting icons in their website. They simply create a SVG icon using application softwares like Inkspace, Photoshop, Sketch and insert it in the website. Not necessary to install Font Awesome and call, hence improving webpage loading time.
Moreover, you can use SVG format as logo, icons and website backgrounds instead of traditional image formats. This will reduce page size (given SVG files are optimized) and boost page speed.
Creating a SVG icon on your own can be hectic if you are not good with vector application softwares, hence using already available icon sets is an easy approach. Here is what I normally follow when I'm in need of SVG Icons :
Let's say I need a simple facebook icon.
I have my SVG code for facebook icon. Now, I'll paste the code in desired location and tweak some properties to fit with my site.
Below are some websites which provide free SVG background files:
# HeroPatterns.com
This website provides free repeatable SVG background patterns. Click on the one you like, customize the foreground and background color and you're ready with the code.
# SVGBackgrounds.com
This website provides colorful SVG background patterns for free. Change color, opacity and scaling factor to fit with your website design.
# Philiprogers.com
This website provides beautiful and eye catching SVG patterns. To match the design, you might need to change values from coding section provided in demo site.
# Svgeez.com
This website provides unique and stylish SVG background patterns. You can even order a custom SVG images based on requirements.
2# Greater points in a file == increased file size. Therefore, it is not worth creating detailed images with SVG.
CSS defines how HTML elements are to be displayed in a screen. A website can access this information in three ways : In an external file, which loads before page is rendered and is called using
If you're not sure how your CSS is currently loaded, you can use this CSS delivery tool. Enter your web address and you'll get complete information along with sizes. Here's a screenshot of this blog.
This is actually a simple process. Simply copy the contents of each CSS files and combine them into a main CSS file.
Then, remove all the references for old files and update code reference with this new main CSS file.
Now, analyze the site in Pagespeed Insight to make sure you're not getting any render blocking CSS issues. If you're facing this issue, make sure to follow Google Recommendation for Optimizing CSS delivery.
For optimizing internal CSS attributes, start removing unnecessary spacing and comments. We will discuss more on this in a moment.
For optimizing inline CSS attributes, try avoiding them when possible. This will make the code lot cleaner and duplication of codes can be minimized. Inline code looks like this and there is also optimized code. Take it as a reference.
Google recommends that you load critical CSS internally (eg: page-layout,main-container) and non-critical externally. It also recommends to avoid inline styling of CSS.
When it comes to non-critical CSS like font-awesome, animation libraries, syntax highlighter styling or anything that is not responsible in the styling of webpage structure, you can asynchronously load them.
Lazy loading of CSS ensures that content is loaded first before loading CSS and Javascript. This is important for users with slow connections. In this method, even if CSS fails to load, users can still read the text content.
In the following code, I'm trying to lazy load Font awesome, simply copy and paste before closing head tag.
It is important to use
Smaller the page size, faster it loads. Every byte we can reduce, it will benefit by reducing load time. A simple way to decrease page size is by enabling Gzip compression.
Gzip stands for Gnu Zip and it is a form of data compression i.e it takes a large chunk of data and make it smaller.
To run a compression audit, go to GIDNetwork and enter your web address. Click Check and if your page is compressed, you'll see something like this:
For blogger users, there's a good news. Google enables GZIP compression by default and you do not need to worry it. Just in case, you're getting a negative result, add this php code above
However, minifying of code reduces code readability. This might bring problems while editing back the code. But there is a solution: You can use formatter tools (I'll be sharing links along with minifier tools) to add whitespaces and re-structure the codes.
Let's take a sample CSS code from one of our widget to check how compression reduces size.
You can see I saved around 551 bytes in a small CSS file which might not be huge but repeating the same process for all available codes can make a huge difference. Small small differences bring big changes (Butterfly Effect :P).
You can reverse the process by using any of the formatter too. Note: These tools re-structure HTML, CSS and Javascript as well, so you can use them for all.
If any of the script takes longer time for downloading, the website won't load, hence increasing Time to First Byte (TTFB) and loading time significantly.
A good practice is to keep Javascript files at the bottom of page. Doing so won't block rendering of HTML and scripts are loaded at the end after HTML and CSS files. Alternatively, you can defer or asynchronously load scripts which will be discussed below.
For deferring scripts, use defer attribute in the script tag. Note: It only works with external scripts with src attribute defined.
It is inevitable that increased DNS lookup adds significant loading time. Though we focus on reducing external CSS and JS, sometimes we forget about third party external scripts that are being loaded without even knowing.
You can identify all the scripts loading along with page using Network section in Chrome Inspect Elements tool.
In the above image, we can identify that disqus files are loaded along with initial page loading. This increases page loading time. Lazy loading of disqus can boost page speed drastically.
Figure out what all scripts are important and remove unnecessary scripts. For instance, calling twitter API script for a simple Tweet button can increase DNS lookup. You can replace that script with simple anchor tag.
Before proceeding, make sure to take a backup and confirm your theme is independent of blogger's available widgets.
To remove them permanently from source code as well, add
Important: When you use
There are a lot of themes/templates available throughout the internet. So, how do you select the best one for your website? Here's my recommendation:
Maybe your file crashed and site is not able to access it or maybe your server is not responding, hence increasing loading time . Maybe you have updated codes and that is slowing down your page. Images you have added could be of large sizes. Therefore, it is important to monitor it over time.
Keep track of how your site performs frequently at least within every 3 days. Make changes, see how that affects page speed.
In addition to monitoring your page loading time in desktop version, it is equally important to monitor it for mobile devices because most readers prefer their phones for surfing. You can start testing your site with thinkwithgoogle.
Also, it is important to know that while all above tips and solutions listed can help you achieve a better pagespeed score, it is not necessary to implement all of them.
Analyze your site, make a note of what all factors are slowing down, start working on improving those factors for decreasing page loading time. Good Luck :)
And today, I'll share remaining tested ways I implemented in my website to decrease page loading time. Let's dive into them.
11] Shift To SVG Icons/Files
Scalable Vector Graphics (SVG) files are nothing more than simple documents that describes shapes, lines, curves, colors, texts and points. Each attribute describes its own property and it can be modified individually, hence providing higher range of editing flexibility. You can learn more about the advantages of SVG icons over traditional image formats like PNG, JPEG from this linked page.
In fact, most of the developers do not rely on font awesome or icomoon for inserting icons in their website. They simply create a SVG icon using application softwares like Inkspace, Photoshop, Sketch and insert it in the website. Not necessary to install Font Awesome and call, hence improving webpage loading time.
Moreover, you can use SVG format as logo, icons and website backgrounds instead of traditional image formats. This will reduce page size (given SVG files are optimized) and boost page speed.
How to find SVG Icons for my website?
Creating a SVG icon on your own can be hectic if you are not good with vector application softwares, hence using already available icon sets is an easy approach. Here is what I normally follow when I'm in need of SVG Icons :
Let's say I need a simple facebook icon.
- I'll go to iconmonstr.com (you can choose any website that provides SVG Icons, but this is my first choice).
- Search for facebook icon and choose one of the available icon.
- Click on SVG format and accept license agreement.
- Finally, hit Embed option. Done.
I have my SVG code for facebook icon. Now, I'll paste the code in desired location and tweak some properties to fit with my site.
How to find SVG images for using as website backgrounds?
In our previous template (TwistBlogg v2), in order to improve page speed we replaced header and footer images with SVG pattern files. They were less size compared to images and there was no need to establish a connection, which was a must in case of normal images. So, how did I find cool SVG images to use as backgrounds?Below are some websites which provide free SVG background files:
# HeroPatterns.com
This website provides free repeatable SVG background patterns. Click on the one you like, customize the foreground and background color and you're ready with the code.
# SVGBackgrounds.com
This website provides colorful SVG background patterns for free. Change color, opacity and scaling factor to fit with your website design.
# Philiprogers.com
This website provides beautiful and eye catching SVG patterns. To match the design, you might need to change values from coding section provided in demo site.
# Svgeez.com
This website provides unique and stylish SVG background patterns. You can even order a custom SVG images based on requirements.
When not to use SVG?
1# OpenGraph does not support SVG images, thereby it is not worth replacing post images with SVG files.2# Greater points in a file == increased file size. Therefore, it is not worth creating detailed images with SVG.
12] Optimize CSS
CSS defines how HTML elements are to be displayed in a screen. A website can access this information in three ways : In an external file, which loads before page is rendered and is called using
<link> tag, or internally, which is embedded somewhere within site, or inline, meaning along with HTML tags.If you're not sure how your CSS is currently loaded, you can use this CSS delivery tool. Enter your web address and you'll get complete information along with sizes. Here's a screenshot of this blog.
Good Practices to be followed for optimizing CSS
If your website is using multiple external CSS files, each one adds delay in page loading time. It is always best to combine them into a single file. That way with a single connection established, everything can be loaded at once, hence improving page speed.This is actually a simple process. Simply copy the contents of each CSS files and combine them into a main CSS file.
Then, remove all the references for old files and update code reference with this new main CSS file.
Now, analyze the site in Pagespeed Insight to make sure you're not getting any render blocking CSS issues. If you're facing this issue, make sure to follow Google Recommendation for Optimizing CSS delivery.
For optimizing internal CSS attributes, start removing unnecessary spacing and comments. We will discuss more on this in a moment.
For optimizing inline CSS attributes, try avoiding them when possible. This will make the code lot cleaner and duplication of codes can be minimized. Inline code looks like this and there is also optimized code. Take it as a reference.
13] Lazy Loading CSS Files
Google recommends that you load critical CSS internally (eg: page-layout,main-container) and non-critical externally. It also recommends to avoid inline styling of CSS.
When it comes to non-critical CSS like font-awesome, animation libraries, syntax highlighter styling or anything that is not responsible in the styling of webpage structure, you can asynchronously load them.
Lazy loading of CSS ensures that content is loaded first before loading CSS and Javascript. This is important for users with slow connections. In this method, even if CSS fails to load, users can still read the text content.
In the following code, I'm trying to lazy load Font awesome, simply copy and paste before closing head tag.
<!-- If browser doesn't support JavaScript, then use normal link tags to load CSS -->
<noscript>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>
<!-- <link href='/sample/main.css' rel='stylesheet'/> --> //Add More external stylesheets
</noscript>
<!--Lazy Loading of Font Awesome Begins-->
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) {
"use strict";
var i = window.document.createElement("link");
var o = t || window.document.getElementsByTagName("script")[0];
i.rel = "stylesheet";
i.href = e;
i.media = "only x";
o.parentNode.insertBefore(i, o);
setTimeout(function() {
i.media = n || "all"
})
}
loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css");
<!-- loadCSS("/sample/main.css"); --> //Add More external stylesheets
//]]>
</script>
It is important to use
<noscript> tag, since it loads CSS when browser does not allow to load any scripts.14] Run a compression audit
Smaller the page size, faster it loads. Every byte we can reduce, it will benefit by reducing load time. A simple way to decrease page size is by enabling Gzip compression.
Gzip stands for Gnu Zip and it is a form of data compression i.e it takes a large chunk of data and make it smaller.
To run a compression audit, go to GIDNetwork and enter your web address. Click Check and if your page is compressed, you'll see something like this:
For blogger users, there's a good news. Google enables GZIP compression by default and you do not need to worry it. Just in case, you're getting a negative result, add this php code above
<!DOCTYPE html>.<?php if (substr_ count($_SERVER['HTTP_ACCEPT_ENCODING'],'gzip')) ob_start("ob_gzhandler");else ob_ start();?> 15] Enable HTML/CSS/JS Compression
Another way to reduce page size is by minifying HTML,CSS and Javascript files. Your code might contain whitespaces, comments and indentions. These can be safely removed without affecting the core functionality of HTML, CSS and JS.However, minifying of code reduces code readability. This might bring problems while editing back the code. But there is a solution: You can use formatter tools (I'll be sharing links along with minifier tools) to add whitespaces and re-structure the codes.
Let's take a sample CSS code from one of our widget to check how compression reduces size.
You can see I saved around 551 bytes in a small CSS file which might not be huge but repeating the same process for all available codes can make a huge difference. Small small differences bring big changes (Butterfly Effect :P).
Minifying HTML
Because HTML codes rarely contain comments and extra whitespaces, minifying them is not a trend followed by many designers. However, you can always work on improving every aspect of your code. Use any of the following links to automate minification process :You can reverse the process by using any of the formatter too. Note: These tools re-structure HTML, CSS and Javascript as well, so you can use them for all.
Minifying CSS
Minifying Javascript
16] Keep Javascript files at the bottom of page
One thing we all bloggers do wrong is keeping<script> tag in the head section. This results in showing a blank page till the browser downloads the complete script.If any of the script takes longer time for downloading, the website won't load, hence increasing Time to First Byte (TTFB) and loading time significantly.
A good practice is to keep Javascript files at the bottom of page. Doing so won't block rendering of HTML and scripts are loaded at the end after HTML and CSS files. Alternatively, you can defer or asynchronously load scripts which will be discussed below.
17] Defer or Asynchronously load Javascript Files
There is a small difference between deferring and asynchronously loading JS files.
With asynchronous loading, scripts are downloaded in parallel and then executed as soon as downloads are complete.Not necessary that execution order follows calling order.
With defer loading, scripts are also downloaded in parallel, but executed only when the document parsing is completed. Execution order always follows calling order.
For deferring scripts, use defer attribute in the script tag. Note: It only works with external scripts with src attribute defined.
<script defer src="/script.js"></script><script async src="/script.js"></script>18] Reduce external scripts
It is inevitable that increased DNS lookup adds significant loading time. Though we focus on reducing external CSS and JS, sometimes we forget about third party external scripts that are being loaded without even knowing.
You can identify all the scripts loading along with page using Network section in Chrome Inspect Elements tool.
Figure out what all scripts are important and remove unnecessary scripts. For instance, calling twitter API script for a simple Tweet button can increase DNS lookup. You can replace that script with simple anchor tag.
19] Remove default CSS and JS Blogger Files
By default, blogger loads its own version of CSS and JS in blogspot sites. These files help blogger's widgets and gadgets run smoothly. You can view them in Chrome Dev tools under "Sources" tab. They are of large size and hampers page speed. So, removing them can decrease loading time significantly. In fact, most of the available custom themes do not depend on them.Before proceeding, make sure to take a backup and confirm your theme is independent of blogger's available widgets.
Remove Dyn CSS authorization.css file
To remove authorization.css file, replace</head>
with
<!--</head>--></head>
.Remove Blogger's Default widget_css_bundle.css file
To remove default css file, add this attribute
b:css='false'
to
<html>
tag. Your code will look something like this: <html b:css='false' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>Remove Blogger's Default widgets.js Javascript file
To remove widgets.js file, replace
</body>
with
<!--</body>--></body>
. Remove default blogger's CSS and JS file from View Page Source
When you use above method, javascript and css files will not be loaded but they will still appear in comment tags in your source code. This is an optional step.To remove them permanently from source code as well, add
b:css='false'
and
b:js='false'
to
<html>
tag. Your code will look like this:<html b:css='false' b:js='false' b:version='2' >Important: When you use
b:js='false', it will disable the feature to edit widgets via layout section. So, when you're editing, remove it and vice versa.20] Choose a Minimal Theme
Theme selection directly affects website loading time. A minimal theme loads faster than the one with lots of plugins embedded. Go for some simple light weight theme and your half work is done.There are a lot of themes/templates available throughout the internet. So, how do you select the best one for your website? Here's my recommendation:
- Check Page Speed on GTMetrix and Pagespeed Insight (anything above 90 score is a good choice). Also, make sure the load time is below 3/4 seconds.
- SEO optimization is a must factor. Make sure that theme is following latest SEO trends. You can use tools like SEO analyzer by Neil Patel, woorank or Seoptimer.
- Responsiveness is a key factor for improving page traffic. Check whether the theme is responsive or not. You can use Responsive Design Checker.
- Make sure it passes Google Structured data test.
21] Monitor your Page Speed Over Time
Page speed depends on various factors and is changing frequently based on geo location, file accessibility, DNS fetching and many more. The page speed you obtained today might not be same tomorrow.Maybe your file crashed and site is not able to access it or maybe your server is not responding, hence increasing loading time . Maybe you have updated codes and that is slowing down your page. Images you have added could be of large sizes. Therefore, it is important to monitor it over time.
Keep track of how your site performs frequently at least within every 3 days. Make changes, see how that affects page speed.
In addition to monitoring your page loading time in desktop version, it is equally important to monitor it for mobile devices because most readers prefer their phones for surfing. You can start testing your site with thinkwithgoogle.
Conclusion
Obtaining a desired page speed for your site is a challenging task and it takes lot of effort, patience and consistency, but the result will improve page performance.Also, it is important to know that while all above tips and solutions listed can help you achieve a better pagespeed score, it is not necessary to implement all of them.
Analyze your site, make a note of what all factors are slowing down, start working on improving those factors for decreasing page loading time. Good Luck :)