Website Optimization

In my previous post about Used Boats Ahoy! I mentioned a Joomla plugin Mobile Joomla! and how it can detect mobile devices and display the website accordingly without having to redirect to a subdomain..

Unfortunately since I don’t have complete control of how things are displayed due to the nature of the services I’m using, I’ve had to resort to complex CSS, and other creative solutions.  It’s proven a little more difficult than I expected to format everything just right, but even so the mobile experience is much better now than it was before.  By getting back into the code for this website, I felt it was an ideal time to look into other ways to boost my site performance.

Google’s PageSpeed Online is a useful tool to help with website optimization that offers tips to increase the loading speeds ordered by priority.  My initial speed result was about 70/100.  Surprisingly enough Google Adsense doesn’t follow all of their own recommendations.  After making my changes, I was able to get my rank up to 88/100 which I’m pretty happy with.  These kinds of optimization follow the 80/20 rule where at a certain point a the effort to save a few milliseconds may not be worth it.  Below are the higher priority messages I received, and what I did to resolve them

Leverage browser caching
Apache can specify how long static files such as images can be stored, by adding the settings in the .htaccess file.  This snipped assumes you have the mod_header, mod_expires.

Header unset ETag
FileETag None
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
<IfModule mod_expires.c>
 <FilesMatch "\.(gif|png|jpg|jpeg|js|css|swf|ico)$">
 ExpiresActive On
 ExpiresDefault "access plus 1 years"
 </FilesMatch>
</IfModule>
RewriteEngine on
RewriteRule ^(assets)/(js|css|img|swf)/(.*\.)v[0-9.]+\.(js|css|jpg|gif|png|swf)$ $1/$2/$3$4 [L]

Minify CSS/Minify HTML
This process can be done manually in the files, or with the help of tools. Clean CSS is an online service that can reformat CSS files in a number of different ways, including a minify mode.

Using A Joomla plugin, such as CssJsCompress, can parse and remove unessential code including line breaks and spaces.  It can also combine multiple CSS files and JavaScript files into one.

Optimize Images
This tip can be tedious if there are many images involved.  For PNG images, a service such as PunyPNG can be used to remove unnecessary data from the PNG files without affecting the image quality.  Other options are to use compressed images such as JPEG when applicable.