PageSpeed Insights is one of Google’s more evangelistic pursuits to “Make the Web Faster.” It started off as a simple enough exercise – type in your URL, and the tool will give you a score (out of 100) based on your website’s speed and usability, along with suggested fixes. What is PageSpeed Insights and what are the factors that the tool takes into consideration is described in detail in this post.
If you want to see how your website performs you can check out Lucep’s handy website measurement tool and get a better understanding of how good your website is and what areas you can improve on.
Why is this important?
This being a Google tool, it’s quickly turned into an SEO contest, with websites around the world trying to outdo each other and get a score of 100, or close enough.
Even so, it’s still a pretty good way to optimize your website for better performance and user experience, resulting in more pageviews, a reduced bounce rate, and a better conversion rate from the same traffic.
Also, your PageSpeed Score may not stay high for long. Anytime you make a change on the website, it instantly affects your score. For instance, if you install a new WordPress theme, you may end up with a much lower PageSpeed score. The whole process of trying to increase your score in incremental steps all over again is going to be simply unbearable.
Increase PageSpeed Score by 50% in Less Than 5 Minutes
So in this post, I’m going to share an easy fix that takes care of two common problems (compression and browser caching) that cause page loading time delays. This fix will give your website a huge boost (of up to 50%) in the Google Insights PageSpeed Score. The best part is that anyone can do this in less than 5 minutes. You don’t have to spend any time or get hold of a developer to do this.
The only two prerequisites are that your website should be hosted on an Apache server, and you need to be able to upload or modify the .htaccess file in your root directory. In simpler terms, you’re using PHP scripts like WordPress, and you have FTP access to upload or edit files on your server.
If there’s no .htaccess file in your web server’s root directory at the moment, simply upload this file to the root. Now go check your PageSpeed Score and savor the huge improvement.
If you have an existing .htaccess file in your web server’s root directory, then you need to modify it by adding the following code:
#–Prevent viewing of .htaccess file–#
< Files .htaccess >
deny from all
< /Files >
###—–End of Security Rules—–###
#–Uses mod_deflate for sending compressed requests–#
SetEnvIfNoCase Request_URI \.(?:gif
png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
#–compresses static files–#
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE font/opentype font/truetype font/eot
ExpiresByType image/jpeg A604800
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType application/x-shockwave-flash A604800
ExpiresByType audio/mpeg A604800
ExpiresByType image/x-icon A604800
ExpiresByType font/eot A604800
ExpiresByType font/ttf A604800
ExpiresByType text/html A604800
ExpiresByType text/xml A604800
So now you’re deliriously happy at the huge improvement in your PageSpeed score. Take a minute more to understand what you just did and ensure that your website pages continue to load fast.
.htaccess – This is a text file that tells your server what kind of access to provide to visitors from that location on the server. Note the unique filename – on Linux operating systems the “dot” at the front of the file indicates that it should be a hidden file – much like in Windows, hidden files are usually used for system configuration.
This system file allows you to control various aspects of your Apache web server – such as password protect certain areas of your site by specifying it in this file, or you can block certain types of traffic from accessing your site.
The aforementioned code, when added to your .htaccess file, will enable compression of network data from your server to the visitor’s browser. Secondly, it will also instruct the visitor’s browser to use locally cached versions of certain elements of your website, instead of asking for everything from the server depending on when they last visited.
Enable Compression – This is about compressing the data that flows from the server to the visitor’s browser (with every http:// request). Almost every browser now supports and automatically negotiates gzip compression for all HTTP requests – if you have compression enabled on your server. Once you do this, the size of the packets going through will be reduced by up to 90%, which will significantly reduce the time it takes to transfer the data, which in turn will reduce the page loading time. This is why the PageSpeed Score for your website jumps by a huge amount when you enable compression.
Leverage Browser Caching– Following the same line of thinking, you can further reduce the page loading time if the user’s browser is able to use as many locally cached elements of your website as possible, instead of asking for everything on the page to be downloaded every time the user wants to see it. The server will send everything the first time a visitor lands up on your site. But when they come back, you can select which static elements (that won’t change) should be taken from the local cache instead of being hauled in all the way in from the server. You can also set the time period (like say 30 days), during which the visitor’s browser will use locally cached elements, and refresh the cache during the first visit after this duration.
So when you add or modify your .htaccess file to include the aforementioned code, the server only has to send part of the data needed, and even that is heavily compressed and takes less time to be transferred. So your webpages load much faster and your PageSpeed Insights score shoots up to reflect all this.
For other ways you can improve your website check out these articles