PageSpeed

• PageSpeed,
• Google,
• Mobile Friendly

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.

# compress text, html, 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 *.html>
SetOutputFilter DEFLATE
</files>

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:

In PHP:

<?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

When someone visits your site their browser can save a copy of images, stylesheets, javascript or the entire page. The next time the user visits, the browser can refer to the locally held copy and doesn't have to download it again.

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:

ExpiresActive On
ExpiresDefault A0

# 1 YEAR - won't change for some time
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A31536000
</FilesMatch>

# 1 WEEK - changes weekly
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
ExpiresDefault A604800
</FilesMatch>

# 3 HOUR - core content, changes hourly
<FilesMatch "\.(txt|xml|js|css)$">
ExpiresDefault A10800
</FilesMatch>

Or...

Using max-age headers:

# 1 YEAR
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

# 3 HOUR
<FilesMatch "\.(txt|xml|js|css)$">
Header set Cache-Control "max-age=10800"
</FilesMatch>

# NEVER CACHE
<FilesMatch "\.(html|htm|php|cgi|pl)$">
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
</FilesMatch>

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.

For minifying HTML (or CSS, JS), try HTML Minifier. For CSS, you can use YUI Compressor or CSS Min. For minifying JavaScript, try the Closure Compiler or YUI Compressor.

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.