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

Post a Comment

Popular posts from this blog

Gmail confidential mode launching on by default on June 25, 2019

Image
Originally Posted on Google's G Suite Updates Blog What’s changing Earlier this year, we announced the launch of Gmail confidential mode for G Suite in beta. On June 25, 2019, this feature will become generally available and your users will have the option to send emails with confidential mode. At launch, confidential mode will be set to default ON for all domains with Gmail enabled, unless you choose to disable this feature (see instructions below). Who’s impacted Admins and end users Why you’d use it Confidential mode provides built-in information rights management controls in your emails by allowing senders to create expiration dates and revoke previously sent messages. Because a sender can require additional authentication via text message to view an email, it’s also possible to protect data even if a recipient’s email account has been hijacked while the message is active. Additionally, with confidential mode, recipients don’t have the option to...
Read more

Check out the new G Suite Learning Center

Image
Originally Posted on Google's G Suite Updates Blog What’s changing We’re launching a revamped G Suite Learning Center . Who’s impacted Admins and end users Why you’d use it This completely redesigned site features 300+ guides and customer-friendly enhancements, including: An Announcements tab with lists of new and updated Learning Center guides. A “Day 1” checklist to help new G Suite users get started on their first day. An improved search function to help you find help and training content across the G Suite Learning Center. Guides that are easier to print and save as PDFs or customize in Google Docs and Slides. How to get started Admins and end users: The new G Suite Learning Center can now be found at support.google.com/a/users, but you can still use the old web address gsuite.google.com/learning-center. Additional details This initial launch is for the English language site only. In the coming months, we’ll release our revamped Learning ...
Read more

Bulk-export Hangouts Meet hardware fleet information

Image
Originally Posted on Google's G Suite Updates Blog What’s changing We’ve added the ability to export detailed information about all Hangouts Meet hardware devices in a domain to a Google Sheet or CSV file in a single action. Who’s impacted Admins only Why you’d use it Having access to up-to-date information about all Meet devices allows G Suite admins to better understand usage across their entire organization by: Populating data for reports/dashboards Auditing organization-wide peripherals usage Analyzing data for external systems such as ticket/support system or financial functions such as asset tracking or inventory management How to get started Admins: To export your list of devices, follow the steps in the Help Center. After completion, the results will be available from the Tasks icon at the top of the page. Depending on the selected format the information can then be viewed in Google Sheets, or downloaded as a CSV file. End users: No action required Addit...
Read more