Home Notes Web development Speeding up your websites

Speeding up your websites E-mail
Thursday, 29 October 2009 17:31

I've run YSlow on several websites, including my own, and it gives some good suggestions for speeding up your website.  So here are a few tips I've found from around the web for generally speeding up a website:

ETags and Expires Headers

Update

I have changed the code below to the following, from this page:

<IfModule mod_headers.c>
Header unset ETag
FileETag None
<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$">
Header unset Last-Modified
Header set Expires "Fri, 21 Dec 2012 00:00:00 GMT"
Header set Cache-Control "public, no-transform"
</FilesMatch>
</IfModule>


These can be added by adding the following to your .htaccess file (from here):

<IfModule mod_headers.c>
Header unset ETag
Header unset Last-Modified
</IfModule>
FileETag None

<FilesMatch "\.(ico|gz|JPG|jpg|jpeg|png|gif|js|css|swf)$">
Header unset Cache-control
Header set Expires "Wed, 28 Apr 2010 20:00:00 GMT"
</FilesMatch>

The first of these requires mod_headers, and the latter mod_expires to be enabled on your Apache server.

Gzip


Update

If your site runs on cPanel and you have access to it, you can also turn on compression - either only for certain extension or for all files - by going into Optimize Website from the main cPanel screen.  You'll see the following:

cPanel

If you don't have access to cPanel, you can use the following in your .htaccess file (instead of what's posted below).  This will compress all content except for file extension types you specify:

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ \
    no-gzip dont-vary
SetEnvIfNoCase Request_URI \
    \.(?:exe|t?gz|zip|bz2|sit|rar)$ \
    no-gzip dont-vary
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
In this example the following extensions are excluded: exe, tar.gz, zip, bz2, sit, rar, and pdf

This requires that mod_gzip or mod_deflate be enabled on your server.  I found several solutions to add this to your site, so I'll list them all:

To compress all text and HTML:

AddOutputFilterByType DEFLATE text/html text/plain text/xml

To compress certain file types by extension:

<Files *.html>
SetOutputFilter DEFLATE
</Files>

Here's the other route:

AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

There's also the PHP route, which is to add the following to the top of each of the files you want to compress:

if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
ob_start("ob_gzhandler");
else ob_start();

It seems there are plugins available for both WordPress and Joomla to help with compression and mini-fication:

Finally, this seems to be the most popular place to test whether your site is being transmitted compressed.  (Here's another site.)These are the most effective site-wide changes you can make.  Other than that, you can individually compress JavaScript and CSS files, and optimize your site's images.