This is a quick rundown on how to install, configure and tune the PageSpeed on Ubuntu with Apache as web server.
First get the appropriate
mod_pagespeed (64-bit or 32-bit version)
.DEB package for your Ubuntu server.
wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_i386.deb
To install run following commands in same directory where you have downloaded
.DEB binary. Post installation we restarted Apache and removed the downloaded package to keep it clean.
sudo dpkg -i mod-pagespeed-*.deb apt-get -f install service apache2 restart rm mod-pagespeed-*.deb
To restart Apache instead of
service apache2 restart you can also use
Next you need to validate that if your PageSpeed installation is working or not by looking at response headers of page returned by Apache. Response header will normally include
X-Mod-Pagespeed header which is indication that installation is working properly.
On Ubuntu, PageSpeed configuration file for Apache (
pagespeed.conf) is located at
/etc/apache2/mods-available/. Every time we make change in the
pagespeed.confan Apache restart is required to activate new configuration change.
CoreFilters are enabled which includes following filter,
Enable PageSpeed Server-Side Cache
pagespeed.conf file, PageSpeed server-side cache location is set by
ModPagespeedFileCachePath. By default it will be enabled and look like following.
Please note that PageSpeed server-side cache will not work unless the cache location is writable by Apache user/group (
ps aux | grep -v root | grep apache | cut -d\ -f1 | sort | uniq chown -R www-data:www-data /var/cache/mod_pagespeed
Flushing PageSpeed Server-Side Cache:
Normally PageSpeed server-side cache files live for 5 minutes. After that it automatically refresh using a conditional check (if file changed get fresh version and cache it, flush old version; else keep current version in cache just refresh the expiry header). That said you can manually flush PageSpeed server-side cache before the cache lifetime expires simply by touching the file "cache.flush" in cache directory. If you are loading static files from disk (next) this is not required.
Loading static files from disk
Loading static files from disk enables PageSpeed to load sub-resource faster. By default PageSpeed loads sub-resources via an HTTP fetch.To read directly from the filesystem you can add
ModPagespeedLoadFromFile to your Apache
pagespeed.conf file. This also mean you don't need to flush the server-side cache maintained by PageSpeed. In following example I have added 4 different folder location to load static files from disk directly.
ModPagespeedLoadFromFile "http://example.com/static/" "/var/www/static/" ModPagespeedLoadFromFile "http://example.com/_themes/mytheme/css/" "/var/www/_themes/mytheme/css/" ModPagespeedLoadFromFile "http://abhishek-tiwari.com/_themes/mytheme/js/" "/var/www/_themes/mytheme/js/" ModPagespeedLoadFromFile "http://abhishek-tiwari.com/_themes/mytheme/img/" "/var/www/_themes/mytheme/img/" ModPagespeedLoadFromFile "http://abhishek-tiwari.com/_themes/mytheme/fonts/" "/var/www/_themes/mytheme/fonts/"
Enable Additional Filters
For majority of cases enabling filters for prioritising critical CSS, lazy loading images (below the fold) and inline preview images will improve performance.
ModPagespeedEnableFilters prioritize_critical_css ModPagespeedEnableFilters lazyload_images,inline_preview_images,insert_image_dimensions
Inline preview images filter generates low-quality image and inline them. These low-quality images are swapped with by high quality versions after an
onload event is triggered (LQIP, Low Quality Image Placeholders Approach). Here
insert_image_dimensions was used to avoid reflow as the images load.
In addition by inserting image dimensions (height and width) web page will load faster because when browser knows the image dimension it can layout faster and avoid multiple layout exercise.
If you do not tell the browser the size of your images then it must "build" the page not once, but twice (or more times depending on how many images you have on the page). It will build it once to display all the text, and then it will wait until an image is downloaded. When one image is downloaded the browser can now determine the size of the image and will rebuild the page to wrap the text around that image. This process will happen for every image on your page.
A similarly filter, resize mobile images is available for mobile only browsers.
Using following you can test if your PageSpeed configuration changes are improving the performance or making worse is,
- PageSpeed Insights: Higher PageSpeed score means improvement
- Web Page Test: Lower page load is better