Mod_PageSpeed Filters
Apache Mod_PageSpeed is still currently “incubating” as you can see if you checkout the official Mod_PageSpeed site . Though it has been incubating for several years now, it’s a tool that Google very highly recommends use of for websites and web applications of all sizes.
A properly deployment and implementation can save a Developer or Programmer hours, if not days of their time tweaking and optimizing everything from image format (like jpg to webp), to minifying and prioritizing JavaScript and CSS assets. The beauty about it is that you have the option of setting filters at site level in for example the .htaccess file, or in the configuration file the server side. Some filters like minifying and image compression make sense on server side, however, if you host sites for say a real estate firm where the listings are constantly changing and updated, you’ll want to set specific image caching rules per site.
If you haven’t already, you should check out our article on how to setup Mod_PageSpeed here.
Mod_PageSpeed Filters in .htaccess
For the sake of creating an example, I have put all of the filters for Lemacks Media in the .htaccess file for now. The primary modules you will want enabled on your server are Mod_Rewrite, Mod_Deflate, Mod_Expires, and PageSpeed_Module.
In the .htaccess file it will look something like this for Mod_Rewrite
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>Followed by Mod_Deflate
<IfModule mod_deflate.c> # Insert filters / compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/vtt AddOutputFilterByType DEFLATE text/x-component AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/js AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/x-httpd-fastphp AddOutputFilterByType DEFLATE application/atom+xml AddOutputFilterByType DEFLATE application/json AddOutputFilterByType DEFLATE application/ld+json AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-web-app-manifest+json AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon # Exception: Images SetEnvIfNoCase REQUEST_URI \.(?:gif|jpg|jpeg|png)$ no-gzip dont-vary # Drop problematic browsers BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html # Make sure proxies don't deliver the wrong content <IfModule mod_headers.c> Header append Vary User-Agent env=!dont-vary </IfModule> </IfModule>
Mod_Expires
## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 week" ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType text/css "access plus 1 month" ExpiresByType text/html "access plus 1 minute" ExpiresByType text/plain "access plus 1 month" ExpiresByType text/x-component "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType application/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/ld+json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month" ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType application/rss+xml "access plus 1 hour" ExpiresByType application/font-woff "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" </IfModule> ## EXPIRES CACHING ##
And finally, PageSpeed_Module
<IfModule pagespeed_module> ModPagespeed on ModPagespeedEnableFilters rewrite_domains ModPagespeedEnableFilters rewrite_style_attributes,rewrite_css,combine_css ModPagespeedEnableFilters prioritize_critical_css ModPagespeedEnableFilters move_css_above_scripts ModPagespeedEnableFilters move_css_to_head ModPagespeedEnableFilters elide_attributes ModPagespeedEnableFilters rewrite_javascript,combine_javascript ModPagespeedEnableFilters inline_javascript ModPagespeedEnableFilters recompress_images ModPagespeedEnableFilters convert_png_to_jpeg,convert_jpeg_to_webp ModPagespeedEnableFilters collapse_whitespace,remove_comments ModPagespeedEnableFilters responsive_images,resize_images ModPagespeedEnableFilters lazyload_images ModPagespeedEnableFilters make_google_analytics_async </IfModule>
For brevity of this article, I am only going to go over some of the PageSpeed filters, the rest you can read about by visiting the Apache PageSpeed documentation site.
CSS Filters
The PageSpeed filters reqrite_style_attributes, rewrite_css, and combine_css work to minify the css sheets and any inline styling that might have been done in html rather than being added to the theme or other stylesheet itself. All of the css assets are then combined into a single stylesheet generated by the PageSpeed module and called on each time the site is rendered.
The PageSpeed filter prioritize_critical_css does just what you might imagine, it identifies css rules necessary for rendering the content on a page, inlines those rules, and defers the loading of the remaining stylesheet rules until after the page has finished loading most of the visible content the user might interact with.
The PageSpeed filters move_css_above_scripts and move_css_to_head do exactly what they say as well. They force the loading of the css assets prior to any potentially render blocking scripts that are in the head of the site.
JavaScript Filters
The PageSpeed filter inline_javascript works by inlining external JavaScript directly into the HTML, like Facebook Pixel which helps to reduce page load and render times dramatically.
The PageSpeed filter combine_javascript reduces the number of external requests made by your browser after the initial load by replacing the multiple external JavaScript files with a single file on page refresh (or until the caching has expired).
The PageSpeed filter rewrite_javascript minifies the JavaScript files by removing whitespace, extra lines, comments and more from the file.
Image Filters
The most important filter here is hands down the convert_jpeg_to_webp filter. WebP is a newer image format that is highly compressed, meaning images load faster on most devices and browsers. Browsers that do not support WebP format images are presented with the original jpg image instead. You can read more about WebP here.