In this article, I will try to conclude the easiest possible ways to optimise page speed and to improve your website’s Google ranking. Also, it is not only a research article but it explains each practical steps towards reducing page loading time which I learnt from my personal experience, optimising our web design agency website.
Tips in this article have successfully achieved Google PageSpeed Score from 32 to 85 for our website.
WHY REDUCE PAGE LOAD TIME? SOME SHOCKING FACTS:
1. Increases Conversion Rate
According to kissmetrics.com, 47% of online users expect the website to be loaded in 2 seconds and 40% leave the website if it doesn’t load in 2 seconds. Similarly, 79% of the shoppers wouldn’t return to a website if they are not satisfied with its speed.
Maile Ohye (Developer Programs tech lead at Google) stated two examples in her video about the importance of fast loading web pages. Example one, Shopzilla increase 7-12% conversion by optimising their website load time. Her second example is Firefox in the video, Firefox downloads increased by 15.4% which means 60M extra downloads.
So, one main reason to have fast loading website page is to increase the conversion.
2. Google Ranking
In a Google official blog article, the expert’s team verified the consideration of page loading in ranking:
Like us, our users place a lot of value in speed — that’s why we’ve decided to take site speed into account in our search rankings. (Google Search Quality Team)
The more traffic you the better you ranking would be, so get ready for new traffic stream.
HOW TO KNOW/TEST WEBSITE LOADING TIME?
Speed Testing Tools:
Google Page Speed
GTmetrix
Pingdom
Web Page Test
HOW TO IMPROVE WEB PAGE SPEED / OPTIMISE PAGE FOR FASTER LOADING
1. Enable Compression
Everybody with IT knowledge knows that due to small size, compressed files are easy to download. So, to improve your website loading speed you will need to enable file compression. For some reason, it is hard to find how to enable the compression but it is very easy. Create a .htaccess file in your website root directory and add the following code to it:
# compress text, php, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript # Or, compress certain file types by extension:
<files *.php>
SetOutputFilter DEFLATE
</files>
2. Minify CSS, JavaScript, and HTML
Minifying CSS, JavaScript and HTML files will reduce the file size and small files are easy to download which means that using minified files will reduce your page load time. There are different online tools available to minify your website files. For example:
- http://www.minifier.org/
- https://javascript-minifier.com/
- http://cssminifier.com/
- http://kangax.github.io/html-minifier/
You can copy and paste the code from your original CSS or JavaScript file, in the result, the website will produce a minified version of the file which you can download as a file or copy from the ‘Minified Output’ window. You can read more about Minify Resources at Google.
3. Reduce redirects
A website that doesn’t use any redirect will load significantly faster than one uses redirects. If you are using server-side redirects, for example; 301, 302 which use HTTP are faster than the client-side redirect, for example; http-equiv=“refresh” attribute or other javascript redirects. So, reduce the use of redirects as much as possible.
4. Minimise the Use of External Files
Avoid using external resources such as CSS and JavaScript files for galleries, sliders and other purposes. Download external files and call them from within your website. For example
www.externalsource.com/js/JavaScriptFile.js
www.yourwebsite.com/js/JavaScriptFile.js
In this way, you avoid sending requests to another server as well as the delay of the external server.
5. Leverage browser caching
Browsers stores website files in its cache, so the website can be loaded quickly when visited again. These files are stylesheets, images, JavaScript files and more. You can set ‘Expires’ for each file type in days, weeks or months depending upon the nature of the file. For example, your logo, banners and other images wouldn’t be frequently changing so you can set its expiry to a month. On the other hand, you add new content to your HTML or PHP pages, so set their expiry to a day. You can find more about leveraging caching on Google.
To setup expiry, add a .htaccess file to your website root folder and add this code that file:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType text/css "access 1 day"
ExpiresByType text/html "access 1 hour"
ExpiresByType application/pdf "access 1 day"
ExpiresByType text/x-javascript "access 1 day"
ExpiresDefault "access 1 day"
</IfModule>
## EXPIRES CACHING ##
You can modify the ‘ExpiresBy’ period according to your own needs.
6. Optimize images
Most of the time to maintain the look and feeling of the website we compromise on website loading time which is not a wise option. If the user cannot load your website then how would he see the beauty of it? I wouldn’t say that create a boring flat website but keep a balance between the look and loading time. Avoid using too many large pictures and heavy animations. Google explain the image optimisation here.
7. Howe to optimise web images for quick loading:
If you cannot compromise on pictures then you will need to compromise on its quality by optimising them to reduce its size for quick loading.
Optimise web images online:
There are different online tools available to optimise your images, click here to optimise your web images online using Optimizilla, where you upload your website images and download them once the images are optimised and compressed.
Optimise website images using Photoshop
If you are familiar with Photoshop then you can optimise your web images by yourself. You can reduce the image size to half of the original.
The below images shows that an image with JPEG ‘Quality:100’ is 170K and it comes to 70K by reducing the quality to 72.
Similarly, you can use GIF and PNG image formats for limited colour images.
8. Improve server response time
Your server response time is also one the factor which may cause slow page loading. There are several factors which may affect your server response time such as the resources each page use, slow database queries, the hardware and software server uses etc. You can address most of these factors but the most important one is slow database queries which will cause problems at every stage of browsing for the users if it is a database driven website.
9. Use a content distribution network (CDNs)
Each browsing request starts from the user’s browser and passing through different data centres it gets back to the user’s browser with the requested information. Content distribution networks (CDNs) are networks of servers which holds your web site at multiple, geographically diverse data centres so that users can get the shortest possible route to your files for speedy delivery.
Here are the links for some free CDNs websites:
OTHER RESOURCES:
- Page Speed Rules
https://developers.google.com/speed/docs/insights/rules - https://blog.kissmetrics.com/loading-time/
- https://webmasters.googleblog.com/2010/05/you-and-site-performance-sitting-in.html
- https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html
- https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization
- http://optimizilla.com/
- http://www.minifier.org/
- https://javascript-minifier.com/
- http://cssminifier.com/
- http://kangax.github.io/html-minifier/
- https://developers.google.com/speed/docs/insights/MinifyResources
Click here for Fast Loading Web Designs.
