What Is PageSpeed?
Google Mod_PageSpeed is designed to help speed up your website by automatically applying recommended optimizations to web pages and their assets (CSS, JavaScript, images).
It is one of the most sought-request we have received, we have gone ahead and implemented on some of our machines in 3 regions.
Having said that, it is important to point out that mod_pagespeed is a beta offering, and that we are still testing most of its functions for compatibility, performance, and reliability.
Thus we cannot completely guarantee that any enabled modules will not conflict with your website's existing content.
We are currently using PageSpeed CoreFilters set of filters which we believe are safe for most websites to make your site go faster.
These are the set of filters that come with the default settings are:
add_head
combine_css
combine_javascript
convert_meta_tags
extend_cache
fallback_rewrite_css_urls
flatten_css_imports
inline_css
inline_import_to_link
inline_javascript
rewrite_css
rewrite_images
rewrite_javascript
rewrite_style_attributes_with_url
You can see if your website is using Mod_Pagespeed from https://ismodpagespeedworking.com/
Alternatively, run:
curl -D- https://www.domain.com/ | lesswhere "domain" represents your website name and ".com", your TLD.
But every application, every website, every module, every plugin is unique and different.
What worked with on the website might encounter an issue in the next one.
What worked in a testing/staging environment may run into issues in production.
The beauty of it all is that while PageSpeed enables itself for the entire server (with global options propagating to all VirtualHosts), it is a behavior that can be overridden per host because it also comes with the ability to limit which host(s) PageSpeed runs on.
If you experience issues with your website or need to see everything as it is by default or notice that the changes you are making on your website are not reflecting in real-time), turn Mod_PageSpeed "Off".
Turning the module on and off
To turn PageSpeed temporarily off, just set this on your .htaccess using " | ":
ModPagespeed standby
OR
ModPagespeed off
To turn it on again, replace the "standby" or "off" with "on"
If you want to turn it off completely, and you are a VPS or dedicated customer with system admin access to top-level Apache configuration, use:
ModPagespeed unplugged
If you a VPS or dedicated server customers with "sudo" or "root" access, do note that ModPagespeed on in a virtual host can override a top-level ModPagespeed unplugged directive.
If you need to add anything extra from below, add it one at a time to your testing/dev/staging environment, observe how it affects your website before moving it to production.
You can check out your score at:
We know it could be addictive but don’t think of the 100/100 score on Google PageSpeed Insights solely from a metrics point of view.
The whole reason Google developed PageSpeed Insights was a guideline on best web performance practices to provide recommendations to optimize your site.
And by following the guidelines hopefully, you will achieve a faster website.
| Filter | Description | Risk Level |
|---|---|---|
ModPagespeedEnableFilters combine_css
|
reduce the number of HTTP requests made by a browser during page refresh by replacing multiple distinct CSS files with a single CSS file, containing the contents of all of them. However, JavaScript can be written that walks the DOM looking for entries with a certain syntax. Such JavaScript may behave differently on a page which has modified CSS links in this way. | Low Risk |
ModPagespeedEnableFilters dedup_inlined_images
|
replaces repeated inlined images with JavaScript that loads the image from the first occurrence of the image. | Low Risk |
ModPagespeedEnableFilters extend_cache
|
based on the best practice to optimize caching, as applied to the browser, this filter seeks to improve the cacheability of a web page's resources without compromising the ability of site owners to change the resources and have those changes propagate to users' browsers. Only applied to resources that are publicly cacheable, to begin with. | Low Risk |
ModPagespeedEnableFilters extend_cache_pdfs
|
identifies PDF URLs by their ".pdf" extension and marks them as eligible for cache extension. | Low Risk |
ModPagespeedEnableFilters hint_preload_subresources
|
uses resource preloading HTTP headers to inform browsers of CSS and JavaScript resources early in page processing. | Low Risk |
ModPagespeedEnableFilters move_css_above_scripts
|
seeks to make sure scripts do not block the loading of CSS resources. May slow down your web pages for some browsers. | Low Risk |
ModPagespeedEnableFilters outline_css |
an experimental filter which takes inline CSS and puts it in an external resource. Only run on single-server environments because the resource can only be fetched from a server after that server has rewritten the HTML page. You "absolutify" relative URLs. | Low Risk |
ModPagespeedEnableFilters outline_javascript
|
an experimental filter which takes inline JavaScript and puts it in an external resource. Filters outline all JavaScript that is larger than a minimum threshold in bytes. The threshold can be set by adding/changing the line: ModPagespeedJsOutlineMinBytes 3000. Currently only run on single-server environments because the resource can only be fetched from a server after that server has rewritten the HTML page. If a different server rewrote the HTML page, then this server will not have the information needed to create the resource. | Low Risk |
ModPagespeedEnableFilters move_css_to_head
|
by moving CSS to head, reduces the number of times the browser must re-flow the document by ensuring that the CSS styles are all parsed in the head before anybody elements are introduced. | Low Risk |
ModPagespeedEnableFilters insert_ga ModPagespeedAnalyticsID |
adds the basic Google Analytics javascript snippet to each HTML page. In order to avoid any strange Google Analytics reporting, make sure that the ID specified in the configuration file matches the one used on your site. Please check with Google Tag Assistant to ensure you are duplicating your tags or JS snippet. | Low Risk |
ModPagespeedEnableFilters remove_comments
|
eliminates HTML comments, which are often used to document the code or to comment out experiments. If you use comments to embed data or JavaScript, in order to reduce the parse time of the HTML document, DO NOT use this filter, as it will remove the comments containing the data or JavaScript that is needed by these web pages. Only applies to HTML files. CSS comments are eliminated with the rewrite_css filter, and Javascript comments are eliminated with the rewrite_javascript filter. | Low Risk |
ModPagespeedEnableFilters remove_quotes
|
eliminates unnecessary quotation marks (either "" or '') from HTML attributes. Might not be needed as the cost of running the filter may outweigh its benefits in certain settings. | Low Risk |
ModPagespeedEnableFilters add_head
|
adds a head to the document if it encounters a tag before finding a tag. | Minimal Risk |
ModPagespeedEnableFilters inline_import_to_link
|
converts "pre" statements into the corresponding tags. | Minimal Risk |
ModPagespeedEnableFilters convert_meta_tags
|
adds a response header that matches each meta tag with an http-equiv attribute. | Minimal Risk |
ModPagespeedEnableFilters include_js_source_maps
|
tell browsers how to map between a minified JavaScript file and the original, readable version so that you can see the readable version while debugging minified production code. For developers, the biggest risk is that source maps are incorrect or out of date, in which case the browser will show you a completely incorrect location when debugging JavaScript. Clearing the cache or turning off source maps should fix this problem. | Minimal Risk |
ModPagespeedEnableFilters insert_dns_prefetch
|
reduces DNS lookup time by providing hints to the browser at the beginning of the HTML, which allows the browser to pre-resolve DNS for resources on the page. | Minimal Risk |
ModPagespeedEnableFilters rewrite_style_attributes,rewrite_css ModPagespeedEnableFilters rewrite_style_attributes_with_url,rewrite_css,rewrite_images |
rewrites CSS inside elements' style attribute. Requires rewrite_css to also be enabled. | Minimal Risk |
ModPagespeedEnableFilters rewrite_css
|
parses linked and inline CSS rewrites the images found and minifies the CSS. The filter works on CSS found in "style> blocks and "link>" refs. Note that there is an outstanding bug that the CSS parser can silently lose "data" on malformed CSS. | Minimal Risk |
ModPagespeedEnableFilters rewrite_javascript
|
this is equivalent to enabling both rewrite_javascript_inline and rewrite_javascript_external. The former rewrites only inline scripts, and the latter rewrites only external ones. It minifies JavaScript code, using an algorithm similar to that in Douglas Crockford's popular JSMin program: http://www.crockford.com/javascript/jsmin.html. | Moderate Risk |
ModPagespeedEnableFilters combine_javascript
|
reduce the number of HTTP requests made by a browser during page refresh by replacing multiple distinct JavaScript files with a single one. | Moderate Risk |
ModPagespeedEnableFilters rewrite_domains
|
applies all domain mapping directives specified in pagespeed.conf to web resources that are not otherwise rewritten by PageSpeed. Please note that if the target domain has cookies, then any JavaScript loaded from a resource moved to a domain with cookies will gain access to those cookies. It is your responsibility as the site administrator to set up the shard entries in your DNS or CNAME configuration to ensure that moving resources onto domains does not create a security vulnerability. | Moderate Risk |
ModPagespeedEnableFilters inline_google_font_css
|
reduces the number of requests made by a web page that uses the Google Fonts API by inlining the small loader CSS into the webpage. Ensure that you abide by Google Fonts API Terms of Service. | Moderate Risk |
ModPagespeedEnableFilters inline_css
|
reduces the number of requests made by a web page by inserting the contents of small external CSS resources directly into the HTML document. If CSS contain URLs that are relative to the location of the CSS file, the 'Inline CSS' filter will attempt to rewrite them into absolute URLs when it performs the inlining to avoid breaking such URLs. | Moderate Risk |
ModPagespeedEnableFilters flatten_css_imports
|
parses linked and inlined CSS and flatten it by replacing all @import rules with the contents of the imported file, repeating the process recursively for each imported file. The rewrite_css filter (ModPagespeedEnableFilters rewrite_css) must be enabled for this filter to be applied. | Moderate Risk |
ModPagespeedEnableFilters inline_javascript
|
reduces the number of requests made by a web page by inserting the contents of small external JavaScript resources directly into the HTML document. There is a tradeoff here between requests and cacheability though: including the JavaScript directly in the HTML avoids making an additional request to the external JavaScript resource, but if the JavaScript file is large (and doesn't change often), it may be better to keep it separate from the HTML so that it can be cached by the browser./td> | Moderate Risk |
ModPagespeedEnableFilters rewrite_css,sprite_images
|
detects GIF and PNG images used as backgrounds in CSS and attempt to combine all such images referenced from a CSS file into a single large image. Requires the 'Rewrite CSS' filter.
Please note there are some potential problems to be aware of:
|
Moderate Risk |
ModPagespeedEnableFilters inline_preview_images
|
generates low-quality versions of the images that are inlined in the HTML page. Users experience faster rendering of the page and the low-quality images are replaced by high-quality versions after an onload event is triggered. | Moderate Risk |
ModPagespeedEnableFilters lazyload_images
|
optimize browser rendering and reduce the number of HTTP round-trips by deferring the loading of images that are not in the client's viewport. Please note that the computation of each image's position in the viewport may consume more CPU cycles on the client-side. | Moderate Risk |
ModPagespeedEnableFilters prioritize_critical_css
|
parses the CSS and replaces it with inlined CSS that contains only the rules used on the page. This avoids any blocking CSS requests needed for the initial render. Though safe for most pages, it could potentially cause a reflow of the page. If different content (with substantially different styles) is served for the same URL based on cookies, IP, user agent, etc., then this filter could potentially show unstyled content before it loads the page completely, or in certain cases, it could break rendering completely. | Moderate Risk |
ModPagespeedEnableFilters add_instrumentation
|
injects two small blocks of JS into HTML pages that measure the time the client spends loading the page. could break pages if they include JavaScript which depends on knowing the first child of the "head" or the last child of the "body". | Moderate Risk |
ModPagespeedEnableFilters canonicalize_javascript_libraries
|
identifies popular JavaScript libraries & replace them with ones hosted by the Google Hosted Libraries. You must ensure that you abide by the terms of service of the providers of the canonical content before enabling canonicalization. The terms of service for the default configuration can be found at Google Hosted Libraries Terms of Service. | Medium Risk |
ModPagespeedEnableFilters trim_urls
|
trims URLs by resolving them by making them relative to the base URL for the page &also trims image URLs in CSS if rewrite_css is enabled. Works only on URLs that are the values specified by "src" or "href" attributes. While it's useful for web development to fully specify your URLs so that links don't break when things move around, these are bytes that are sent unnecessarily on the wire. Can cause problems for an example if you serve HTML that will be pasted verbatim into other HTML pages and URLs are trimmed on the first page, they will be incorrect for the page they are inserted into. For this reason, it is off by default. | Medium Risk |
ModPagespeedEnableFilters collapse_whitespace
|
filters reduce bytes transmitted in an HTML file by removing unnecessary whitespace. The 'Collapse Whitespace' filter doesn't modify whitespace appearing within "pre", "textarea", "script" and "style". However, the 'Collapse Whitespace' filter is not yet CSS-aware, so any pages that might use such CSS properties (either statically or dynamically) should not use this filter at this time. | Medium Risk |
ModPagespeedEnableFilters combine_heads
|
combines multiple heads into one. though technically HTML documents are not allowed to have multiple sections, sites that aggregate content from multiple sources sometimes have them. So if there are style or script tags in the body, between two heads, then this rewrite pass can change their order. | Medium Risk |
ModPagespeedEnableFilters elide_attributes
|
reduces the transfer size of HTML files by removing attributes from tags when the specified value is equal to the default value for that attribute. | Medium Risk |
ModPagespeedEnableFilters make_show_ads_async
|
load Google AdSense ads with the synchronous show_ads.js snippet to load them with the asynchronous adsbygoogle.js instead. | High Risk |
ModPagespeedEnableFilters make_google_analytics_async
|
load the Google Analytics tracking code synchronously to load it asynchronously instead. | High Risk |
ModPagespeedEnableFilters defer_javascript
|
tries to defer JavaScript execution until page load because if JavaScript is written to expect user actions before the page is loaded completely, such scripts will behave differently with defer_javascript. For example, if an alert is placed at the start of the page, then with defer_javascript the alert would appear only after the page is loaded completely.
Any non-critical CSS, as well as Google fonts, can be defer loaded by using this snippet of code.: For JavaScript files, you can simply add defer or async attributes to the "script" tags. |
High Risk |
ModPagespeedEnableFilters local_storage_cache
|
an experimental filter that saves inlined resources to the browser's local storage (an HTML5 feature) on the first view of a page, and loads them from local storage on subsequent views rather than sending them (inline) again. | High Risk |
ModPagespeedEnableFilters responsive_images,resize_images
|
makes images responsive by adding srcset attributes that provide multiple versions for different pixel density screens. You must explicitly specify the height and width attributes and src must be a high enough resolution image (at least 2x larger than these height and width values) and even at that, it will increase cache usage by 4x for all images which have explicit width and height attributes. It may also break any JavaScript which changes images by modifying their src attribute. | High Risk |
ModPagespeedEnableFilters convert_gif_to_png, recompress_png
|
converts GIF and PNG images to JPEG if they have no transparent pixels and if PageSpeed determines that they are not sensitive to compression noise. | Risk Level Undetermined |
ModPagespeedEnableFilters convert_png_to_jpeg, convert_jpeg_to_progressive, recompress_jpeg
|
converts animated GIF to animated WebP if the latter format is supported by the browser; otherwise, this filter is ignored. The progressive mode can be used to render the image incrementally and has a higher compression ratio for large images. | Risk Level Undetermined |
ModPagespeedEnableFilters convert_jpeg_to_webp, convert_to_webp_lossless, convert_to_webp_animated, recompress_webp
|
converts PNG and non-animated GIF images to losslessly-encoded WebP if PageSpeed determines that the images are sensitive to compression noise. | Risk Level Undetermined |
ModPagespeedRunExperiment on ModPagespeedUseAnalyticsJs off // use ga.js ModPagespeedAnalyticsID UA-XXXXXXX-Y |
allows you to run experiments where segments of your traffic get the page rewritten with different settings in order to figure out which filters work best for your site. After you have been running an experiment for 24 hours Analytics will have results for you. If you already have a tracking snippet on your pages, the lowest risk option is to remove it so that the one PageSpeed inserts is the only one. If you do choose to leave your existing snippet, PageSpeed will attempt to modify it to add experiment tracking. If you've customized your snippets you should manually verify that the modified snippet is still correct.
When a visitor first arrives on a site with this feature enabled PageSpeed chooses an experiment from among the ExperimentSpecs. If you are running your experiments on less than 100% of your visitors, some will be assigned to "no experiment", which PageSpeed represents as id=0. It generates the page in accordance with the ExperimentSpec and then sets a cookie valid for one week so that on future page loads it knows which ExperimentSpec to apply to this visitor. You can test this on your site with the curl program: You should see a Set-Cookie header in the output if this feature is set up properly. While it does try to detect when a page already is using Google Analytics and add to it only what it needs, this is imprecise and can get it wrong. We recommend that you let PageSpeed insert the only snippet. Once you have added this:
The next logical step might be to examine the filter list to determine if there are filters that are not in the core set which might be good targets for future experimentation. |
Risk Level Undetermined |
Gotchas And Things To Watch For
When PageSpeed rewrites a resource, it updates the HTML to refer to the resource by its new name. Generally, PageSpeed leaves the resource at the same origin and path that was originally found in the HTML. However, it is possible to map the domain of rewritten resources. Examples of why this might be desirable include:
mod_pagespeed might rewrite HTML and change references to URLs (e..g style.css) to a cache-extended version. If the browser's ensuing request for the CSS file winds up on a different server than the HTML file, and that server does not have mod_pagespeed installed, then it won't be able to decode the resource name to find the CSS file.
This kind of scenarios could be:
- if the server is behind a load balancer, and it's more efficient to reference the server directly by its IP address, or as 'localhost'. - the server has a special DNS configuration - the server is behind a firewall preventing outbound connections - the server is running in a CDN or proxy, and must go back to the origin server for the resources - the server needs to service https requests
In these situations, it is possible to map the origin domain of rewritten resources:
ModPagespeedMapOriginDomain origin_to_fetch_from origin_specified_in_html [host_header] ModPagespeedMapRewriteDomain cdn.example2.org *example.org ModPagespeedMapOriginDomain localhost *.example.com # Wildcards can also be used in the origin_specified_in_html. ModPagespeedMapOriginDomain localhost/example *.example.com # origin_to_fetch_from can include a path after the domain name.
e.g:
ModPagespeed On ModPagespeedDomain https://www.domain.com ModPagespeedMapOriginDomain https://www-origin.domain.com *.domain.com ModPagespeedMapRewriteDomain www.domain.com www-origin.domain.com ModPagespeedEnableFilters [...]
Cloudflare & Mod_PagesSpeed
Until we are shown otherwise, we kinda believe that Google's mod_pagespeed and Cloudflare have no known conflicts at this time.
However, that doesn't mean that websites with mod_pagespeed enabled cannot experience issues with domains using the CloudFlare.
If it happens, it is because of the fact that both CloudFlare and mod_pagespeed attempts to use compression when serving the website.
This can often be resolved by disabling compression through CloudFlare to avoid redundancy.
Also, if you have added CSS and JS minifications to your .htaccess file, disable the minify JS and CSS options in Cloudflare since you have already enabled them in the Pagespeed configuration.
Cloudflare's CDN and optimization services may be faster because Cloudflare is a CDN (content delivery network) as well, so running mod_pagespeed on a Cloudflare-enabled website may likely be somewhat redundant since many of the features offered by mod_pagespeed are also already available in Cloudflare's feature set.
WordPress and Mod_PageSpeed
While it is the most popular CMS on the planet, from a developers point of view, WordPress is not the fastest platform out there.
So customers using WordPress often have to use WordPress plugins that deal with minification of JS and CSS files to speed up the application.
Please be careful with these plugins if you are using them on your website along with PageSpeed as they may completely screw up your site and contact forms. We recommend disabling these first and then gradually adding them back if you must use them.
As a general rule, you should definitely avoid using too many plugins and should delete or disable plugins that aren’t being used and use small tweaks using custom coding rather than installing monster plugins which load 2-3 JavaScript or CSS files.
Be careful using both these tools together as it may take time before the conflicts show up. Test, test, and test again before enabling it fully for your WordPress website(s).
Pagespeed can optimize the most common image formats, including GIF, PNG, and JPEG, and convert them to PNG, JPEG, or WebP. GIF, PNG, and JPEG are supported by all browsers.
WebP is a modern image format that can compress images over 25% more than older formats and is currently supported by many browsers, including Google Chrome, Android 4.0+, and Opera. Note that not all browsers support this: https://caniuse.com/#search=webp.
PageSpeed-optimized images are converted to the best format supported by the target browser, i.e., to WebP if it is supported, or PNG or JPEG if not.
I'm using WordPress and my pages are blank after Mod_Pagespeed. What can I do?
Disable compression in any WordPress plugin you are using, so that mod_pagespeed will process uncompressed HTML. mod_pagespeed ensures that its output will be compressed by enabling mod_deflate.
PageSpeed broke my site; what do I do?
First of all, sorry about that.
We put a lot of work into validating our rewriters against a large corpus of websites and we disable filters that cause problems as soon as we can, but sometimes things slip through.
If it's still breaking your site, please try appending ?ModPagespeed=off to the URL. This de-activates PageSpeed. If the site is still broken, it is not a rewrite or HTML parsing problem.
If that fixed the site, try appending ?ModPagespeed=on&ModPagespeedFilters= to the URL. This turns on PageSpeed, but no filters. If the site is broken now, it is an HTML parsing problem. Please let us know.
If the site still worked, try appending ?ModPagespeed=on&ModPagespeedFilters=foo for various filters "foo".
For example try:
http://www.modpagespeed.com/?ModPagespeed=on&ModPagespeedFilters=extend_cache http://www.modpagespeed.com/?ModPagespeed=on&ModPagespeedFilters=combine_css http://www.modpagespeed.com/?ModPagespeed=on&ModPagespeedFilters=inline_css http://www.modpagespeed.com/?ModPagespeed=on&ModPagespeedFilters=inline_javascript http://www.modpagespeed.com/?ModPagespeed=on&ModPagespeedFilters=insert_image_dimensions http://www.modpagespeed.com/?ModPagespeed=on&ModPagespeedFilters=rewrite_images http://www.modpagespeed.com/?ModPagespeed=on&ModPagespeedFilters=rewrite_css http://www.modpagespeed.com/?ModPagespeed=on&ModPagespeedFilters=rewrite_javascript
You may have to reload them a few times over several seconds to make sure they have had time to load sub-resources into the cache and rewrite them.
If one of these breaks your site, you now know which filter is at fault.
