Page Speed Techniques

I’ve been playing around with the valuable feedback from  Google Page Speed analysis and have managed to significantly improve the scores on some of my websites. For future reference I have made some notes below.

Image Optimisation

It is possible to optimise JPEG images with little impact on image quality.

sudo apt-get install jpegoptim

find . -type f -name “*.jpg” -exec jpegoptim –max=70 –strip-all {} \;

Now for optimising the PNG files:

sudo apt-get install optipng

find . -type f -name “*.png” -exec optipng -o7  {} \;

Now convert any GIFs to PNGs (page code will need to be changed):

sudo apt-get install gif2png

#!/bin/bash
for file in `find . -type f -name “*.gif”`
do
gif2png “$file”
done

And change the code so that references to the .gif files are changed to .png – make a backup first 😉

find . -type f -exec sed -i ‘s#\.gif#\.png#g’ {} \;

 

Leverage Page Caching

The Apache modules mod_expires and mod_headers are already compiled in if you are using a Red Hat variant such as CentOS. To check use:

httpd -M

All we need to do then is add the following two files and restart httpd:

/etc/httpd/conf.d/mod_expires.conf

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 1 seconds”
ExpiresByType text/html “access plus 1 seconds”
ExpiresByType image/gif “access plus 604800 seconds”
ExpiresByType image/jpeg “access plus 604800 seconds”
ExpiresByType image/png “access plus 604800 seconds”
ExpiresByType text/css “access plus 604800 seconds”
ExpiresByType text/javascript “access plus 604800 seconds”
ExpiresByType application/x-javascript “access plus 604800 seconds”
ExpiresByType application/vnd.ms-fontobject “access plus 604800 seconds”
ExpiresByType application/x-font-ttf “access plus 604800 seconds”
ExpiresByType application/x-font-woff “access plus 604800 seconds”
</ifModule>

/etc/httpd/conf.d/mod_headers.conf

<ifModule mod_headers.c>
<filesMatch “\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|eot|ttf|woff)$”>
Header set Cache-Control “max-age=2592000, public”
</filesMatch>
<filesMatch “\\.(css)$”>
Header set Cache-Control “max-age=604800, public”
</filesMatch>
<filesMatch “\\.(js)$”>
Header set Cache-Control “max-age=604800, private”
</filesMatch>
<filesMatch “\\.(xml|txt)$”>
Header set Cache-Control “max-age=604800, public, must-revalidate”
</filesMatch>
<filesMatch “\\.(html|htm|php)$”>
Header set Cache-Control “max-age=1, private, must-revalidate”
</filesMatch>
</ifModule>

Setting the max-age variables to be 604800 (i.e. One Week) could be a little long depending on the application and I am thinking it could be better placed in a .htaccess file on a per website basis rather than centrally. We’ll see how that one pans out!

Minify Javascript and CSS

On Ubuntu install YUI Compressor with:

sudo apt-get install yui-compressor

Then use it as follows:

/usr/bin/yui-compressor styles-src.css -o styles.css –charset utf-8

Or create a script to automate things a bit:

#!/bin/bash
for FILE in *-src.js;
do
NEWFILENAME=`echo $FILE | sed ‘s/-src//g’`
/usr/bin/yui-compressor $FILE -o $NEWFILENAME –charset utf-8
echo $FILE compressed as $NEWFILENAME
done

So using that script if I stick to the convention of naming the source files -src before the dot it should work fine. Your mileage may vary.

Specify a character set

In your PHP code add the following:

header(‘Content-type: text/html; charset=UTF-8’);

In the HTML code add the following Meta Tag:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Of course it would be possible to do more e.g. combine all javascript into a single file or using SpriteMe to make sprites from smaller images, but the techniques above have been good quick hits for me.

 

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>