Could Your Site Be Faster?
Page speed and how quickly your site loads on desktops, tablets and mobiles has been important for some time. Therefore it's essential to look at ways to improve your site's performance and download times.
In a previous article "10 Tips To Speed Up Your Website" we looked at ways to do this and mentioned Google's PageSpeed Insights to enable the analysis of website pages and to provide information on how to to make them faster for both mobile and desktop devices.
In this article we take a more in depth look at 3 ways in which you can improve your page speed and increase your Google "PageSpeed" score.
Don't forget to test your site before and after changes are made.
1. Enable Compression
For IIS, enable compression in the settings. See Configuring HTTP Compression in IIS 7.
In Apache, you can add the code below to your .htaccess file. See Apache Module mod_deflate.
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
# Or, compress certain file types by extension:
If you can't change your .htaccess file, you can use PHP to return compressed content. Give your HTML file a .php extension and add this code to the top of the file code:
<?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?>
Once enabled you can check compression is working correctly by going to GIDZipTest: Web Page Compression (Deflate / Gzip) Test - GIDNetwork.
By enabling compression you can reduce the size of page files by up to 60+%.
2. Leverage Browser Caching
However, this can present a problem when you want to change your site files e.g. add new copy or change your logo. Therefore when telling the browser to cache page content you need to let it know how long to hold the cache for and when to refresh it. This can be achieved by:
Using Expires Headers:
# 1 YEAR - won't change for some time
# 1 WEEK - changes weekly
# 3 HOUR - core content, changes hourly
Using max-age headers:
# 1 YEAR
Header set Cache-Control "max-age=31536000, public"
# 1 WEEK
Header set Cache-Control "max-age=604800, public"
# 3 HOUR
Header set Cache-Control "max-age=10800"
# NEVER CACHE
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
You can check your page cache in Redbot. You'll see the headers returned, and a cache summary on the side.
3. Minify HTML / CSS / JS
Simply by removing extra spaces, unused code, code comments and formatting in your CSS, HTML and JS files you can decrease your file sizes. Unfortunately this can make it harder to edit the files later. Therefore it's a good idea to keep a copy of the "un-minified" files so you can make changes then run them through the compressor again.
Note: PageSpeed Insights will give you a downloadable zip file with a minified version of your CSS and JS (and optimised images) when you test each page. Be careful when it comes to the optimised images as Google can sometimes over downsize (especially when images are used in a responsive design) which can compromise the quality of the images on your site.