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.
