Using Mod_PageSpeed Filters

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.

 


Visit https://lemacksmedia.com/news/08/27/using-mod_pagespeed-filters/ for updates and more content.

Comments

Popular posts from this blog

Asus RT-AX88U Router Review

Titan Security Key Bundle by Google Cloud

Native Roaming Photography site launch