Let’s Speed Up Your Website With These Simple Steps
If you think website speed does not matter, think again.
There is a lot of concrete data to support that if your website is slow to load, user will not stick around to see what you have to offer.
3 Seconds is all it takes for visitors to Abandon a Web Page
A study by Akamai found that
- 47% of people expect a web page to load in two seconds or less.
- 40% will abandon a web page if it takes more than three seconds to load.
- 52% of online shoppers say quick page loads are important for their loyalty to a site.
Back in 2010 Google announced that website speed would begin having an impact on search ranking.
Average Web Page Load Speed
The average website load speed has increased 22% this year, according to a report by Radware. It now takes 7.72 seconds to load — a far cry from the two-second limit of your average user.
How to Load Your Web Page Faster
Clearly, its critical to speed up your website. Not only to rank well in google but also for your visitors satisfaction. There are simple steps we can take to make significant improvement in load speeds.
This article is focused on top 2 steps, which do not require a lot of coding or changes in your existing website, which I found most effective in increasing page load speed.
1 — Enable Gzip Compression
The most effective thing to do is to enable Gzip compression on the server. The good thing is, it does not require any change in the code. Its a web server setting you need to enable, rest is done automatically between web server and web browser.
What is Gzip Compression?
Gzip finds all repetitive strings and replaces them with pointers to the first instance of that string. This can be incredibly effective at reducing file size, especially with code, since code be incredibly repetitive. Imagine how many instances of <div there are in an HTML file or { in a CSS file. In some cases it can reduce the file size up to 85%. Small files means, a much quicker download.
To enable Gzip Compression on the Appache and IIS, following are sample settings that you can use.
Apache
Windows IIS
After you have implemented the Gzip compression, you can test if its working correctly or not. If your server is not Apache or Windows, the HTML5 Boilerplate project offers server configs for all the popular servers.
2 — Minify assets and Minimal HTTP Requests
Importance of Reducing HTTP Requests
According to Yahoo, 80% of a Web page’s load time is spent downloading the different pieces-parts of the page: images, stylesheets, scripts etc. An HTTP request is made for each one of these elements, so the more on-page components, the longer it takes for the page to render.
In this article we are only focusing on javascript, css and HTML. Usually, a website has multiple javascript and stylesheet files. To enhance the website speed by reducing the HTTP requests we need to combine all javascript files into one file. Same goes for css files.
How Minified Resources Enhance Website Performance
Minification does things like removing whitespace, removing comments, removing non-required semicolons, reducing hex code lengths etc. Having formatted code, spacings, comments is good for readability of the code but it also increase the size of javascript, css and HTML file.
Here’s Google’s recommendation:
- To minify HTML, you can use PageSpeed Insights Chrome Extension to generate an optimized version of your HTML code.
- To minify CSS, you can try YUI Compressor and cssmin.js.
- To minify JavaScript, try the Closure Compiler, JSMin or the YUI Compressor.
This seems a lot of work, is there a better way?
Adding all these steps in your development workflow is a lot of work. There is a much better way that does combining/minifying resources automatically and is very easy to include in your development workflow.
Single Tool to Minify And Combine Javascript and CSS files
I use Minify for all of our websites. Its a php library that combines and minify javascript and css files on runtime. To use the library
- Download and put min folder on the root of your website.
- Edit min/groupConfig.php and list all your javascript and css files like following
The minify library will combine the files, validate and minify. It also sets appropriate mime types and expire headers to browser cashing(we will talk about browser cashing in details in the next article) on runtime.
Now instead of including all the individual javascript and css files, in your html page you would only include one javascript and one css file like following
<link href=”/min/?g=css” rel=”stylesheet”>
<script src=”/min/?g=js” type=”text/javascript”></script>This example is for PHP custom website, if you are using WordPress or other CMS systems there a number of other tools that provide you with the same functionality e.g. BWP Minify, W3 Total Cache etc.
Minify HTML File
Now, we have implemented Gzip compression and Minified/Combined javascript and stylesheets, we need to minify the HTML file itself. The first thing that loads in the browser is off course HTML file and no other assets start loading until HTML markup is fully downloaded. Minified HTML not load downloads faster, as its size is smaller, there are evidence suggesting that web browser can parse them faster, as there are no comments and blank spaces.
To apply HTML minification, following code can be used. I would suggest to create a min.php file and include in your startup php file or header php file.
If you implement Gzip Compression and Minification, you will see a major difference in your website speed, you can measure that difference using tools like GTmetrix, Google’s PageSpeed Tools and PingDom.
What is next?
This article gives you insights on why it is important to optimize your website speed and provides you with a good start. This is, no way, end of the story. There are a number of other optimizations we can do to make our website lighting fast.
Check out my next article Improve Conversion by 7% with these Optimisations where I wrote tips to optimize images, sprites, browser cashing.
Happy Optimization!
