Google recently released a specific Apache mod: mod_pagespeed.
Here are my findings:
And oh how you promise yourself you’ll fix those issues later. But let’s be honest: deadlines are cruel.
So a lot of websites go live without a lot of speed omtimizations. They get a bad score in YSlow or PageSpeed.
And the word on the street is, google prefers website that load faster!
Optimizing your CSS/JS/Images takes time. Compressing your content, combining CSS/JS also makes it difficult to adjust any of these later. You’ll have to dig through compacted code. Nobody likes that.
The new mod_pagespeed is an Apache Output Filter. This means your website renders your website (in PHP, Java, Ruby, …) and just before Apache serves your HTML page to the browser, this thing comes into action.
You can configure it to do a lot of things. I listed the ones I find most important below. But you can get the full feature list here
- Compress CSS and JS (less traffic)
- Move inline CSS/JS to an external file (so they can get cached)
- Combine external CSS/JS to one file (less requests)
- Caching (of HTML,CSS,JS,images)
- Automatically resize images based on the ‘width’ and ‘height’ attributes of an img-tag (less traffic)
- Add ‘width’ and ‘height’ attributes if you forgot any (usability)
- Base64 encode images and include them in HTML when small (less requests)
Bottomline: it’s genius
I played around with mod_pagespeed today. Here’s the configuration I came up with (I added comments)
(your configuration resides in /etc/apache2/mods-enabled/pagespeed.conf)
AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER text/html
#Add head section to HTML (if not already there)
#Move CSS and JS to outline (external file)
#If inline CSS is used, move this to head section
#Combine external CSS files to 1 fil
#Compress CSS and JS by removing whitespace/comments
#Cache/compress images. Couold also move the image to HTML code (base64 encoded) if image size is small enough
#Add longer expires headers
#Insert "width" and "height" attributes if not used
#Remove HTML comments
# Removes quotes around HTML attributes that are not lexically required
#pagespeed enabled domain 1
#Pagespeed enabled domain 2
#pagespeed enabled domain 3
#Maximum filesize cache
#Interval to which cache is refreshed
#Minimum allowed bytes in CSS before exporting to external CSS
#Minimum allowed bytes in JS before exporting to external JS
#Maximum allowed filesize for embedding images inline (base64)
Carefull with writing permissions
On my webserver, I run every website under a different user account (e.g. mycoolwebsite.bartv.be is run by user ‘coolwebsite’ or something). They all belong to the group ‘www-data’.
Now one consequence of this is that the cache being written by mod_pagespeed gets written by the user running the website. So be carefull with writing permissions in /var/mod_pagespeed/
Even though this article might suggest it. I’m in no way promoting quick and dirty development.
You could think: to hell with it, I’ll just write whatever I want, mod_pagespeed will solve it for me. Don’t
mod_pagespeed is great, but in my eyes, it helps you find errors you might have missed. And it lets you use your development CSS/JS files without compressing them first.
But don’t use it to clean up your mess!