Website network performance is usually a very complicated process. Over the years, I’ve outlined many development techniques that can be used toward this goal. I’d heard about mod_pagespeed for some time, but never had the opportunity to experiment with it until recently. My first impression is that it is a VERY EASY means to gain performance improvements without reworking your existing website to implement techniques for establishing far-future expires, cache-busting, minification and static file merging.
Out of the box, most common techniques are automatically applied to your assets and a local server cache is created to utilize them.
Default installation is trivial:
- Download the latest version for your server architecture:
sudo dpkg -i mod-pagespeed-*.deb
sudo apt-get -f install
sudo service apache2 restart
NOTE: Using tools like Firebug will enable you to see an HTTP Header indicating the version being used for your requests.
If you need to modify configuration from the default:
sudo vi /etc/apache2/mods-available/pagespeed.conf
For VirtualDomains, you can selectively enable and disable PageSpeed and many of it’s settings in your appropriate configuration files with:
?ModPagespeed=off to your URL will disable functions for that request.
This is a HUGE topic, I’ve outlined some simple steps below as well as my initial configuration for you to start with…
NOTE: this is for simple ‘static’ content such as images, additional work is required for dynamic (program generated) content, such as that generated in PHP.
1. In ‘httpd.conf’ make sure the following line is uncommented.
LoadModule expires_module modules/mod_expires.so
2. In ‘httpd.conf’ add the following:
### Expire images 1 day from when they’re accessed
ExpiresByType application/java-archive “access plus 1 day”
ExpiresByType image/gif “access plus 1 day”
ExpiresByType image/png “access plus 1 day”
ExpiresByType image/jpg “access plus 1 day”
ExpiresByType image/jpeg “access plus 1 day”
ExpiresByType image/x-icon “access plus 1 day”
ExpiresByType text/css “access plus 1 day”
ExpiresByType text/xml “access plus 1 day”
ExpiresByType application/xml “access plus 1 day”
ExpiresByType text/plain “access plus 1 month”
3. (Optional) Set default expiry of content in ‘httpd.conf’:
### Expire everything else 1 day from when it’s last modified
ExpiresDefault “modified plus 1 day”
NOTE: These we’re my original settings, you may want to add attitional MIME type and expiry configurations particular to your web content.
I’m usually a considered by most to be just a “programmer”, but occasionally the need comes up for someone to edit or create an image for a project. I might not be a designer, but I still need similar tools to accomplish this, but can’t justify the cost of Adobe Photoshop & Illustrator.
Here are some great (if not better) alternatives that are FREE and available on a variety of operating systems, not just Windows and Apple Macintosh.
GIMP – is an acronym for GNU Image Manipulation Program. It is suitable for a variety of image manipulation tasks, including photo retouching, image composition, and image construction.
- GIF, JPEG, PNG, XPM, TIFF, TGA, MPEG, PS, PDF, PCX, BMP and many others.
It has many capabilities. It can be used as a simple paint program, an expert quality photo retouching program, an online batch processing system, a mass production image renderer, an image format converter, etc.
Inkscape – is an open-source vector graphics editor similar to Adobe Illustrator, Corel Draw, Freehand, or Xara X. What sets it apart is it’s native use of Scalable Vector Graphics (SVG), an open XML-based W3C standard.
- opening only SVG and SVGZ (gzipped SVG) formats.
- save as SVG, SVGZ, Postscript/EPS/EPSi, Adobe Illustrator (*.ai), LaTeX (*.tex), and POVRay (*.pov).
- import most raster formats (JPG, PNG, GIF, etc.) as bitmap images, but it can only export PNG bitmaps.
- With the help of extensions, Inkscape can open/save as PDF, EPS, AI, Dia, Sketch and some others.
Together this suite can tackle most work that previously required costly software that isn’t available on many Operating Systems.
Many of you may be questioning why my examples always use PNG images, and not GIF or JPEG…. the answer is really simple, PNG is better suited to most usage of images on the Internet. It’s well supported by most modern browsers and allows for smaller images of higher quality than is available with GIF.
Additionally, PNG offers advanced features such as GAMA correction and Alpha Transparency.
Previously there were several patents that restricted the use of GIF online, JPG has similar restrictions that are occasionally disputed. PNG has always been an open standard and as such isn’t encumbered by any legal issues.
Here’s the simple rules that I generally apply…
1. JPG / JPEG = Photo quality images.
2. GIF = Animated Images
3. PNG = Static (non-photo) Images