PageSpeed Caching
Overview
PageSpeed (mod_pagespeed) is a powerful tool that optimizes your website's content to load more quickly by applying a variety of filters. These filters help reduce latency by minifying scripts, inlining CSS, and automatically deferring JavaScript to avoid blocking DOM rendering. This results in a faster browsing experience, improving visitor engagement and overall site performance.
Availability
PageSpeed is available on our platform and is enabled by default, ensuring that your website is optimized out of the box.
You can adjust PageSpeed settings directly from the control panel. Navigate to Web > Site Optimizer to access and configure your PageSpeed filters.
Filter Usage
PageSpeed operates through a modular filter system, allowing you to add or remove specific filters to tailor optimizations to your needs. These filters can be controlled via the .htaccess file in your document root. By default, all filters listed under CoreFilters are enabled.
How to Add or Remove Filters
To modify filters in your .htaccess file:
- Create a
.htaccessfile in your document root if it doesn't already exist. - To add filters, use:
ModPagespeedEnableFilters filtera,filterb - To remove filters, use:
ModPagespeedDisableFilters filtera,filterb - After committing these changes, the specified filters will be added or removed from CoreFilters.
Filter List
Below is a comprehensive list of available filters, indicating whether they are included in CoreFilters (CF) or OptimizeForBandwidth (OFB). Each filter name links to its detailed documentation.
| Filter Name | In CF | In OFB | Description |
|---|---|---|---|
| add_head | Yes | No | Adds a <head> element to the document if not already present. |
| combine_heads | No | No | Combines multiple <head> elements into one. |
| inline_import_to_link | Yes | No | Converts <style> tags with only CSS @imports to <link> tags. |
| outline_css | No | No | Externalizes large CSS blocks into a cacheable file. |
| outline_javascript | No | No | Externalizes large JS blocks into a cacheable file. |
| move_css_above_scripts | No | No | Moves CSS elements above <script> tags. |
| move_css_to_head | No | No | Moves CSS elements into the <head>. |
| combine_css | Yes | No | Combines multiple CSS elements into one. |
| rewrite_css | Yes | Yes | Minifies and optimizes CSS files. |
| fallback_rewrite_css_urls | Yes | No | Rewrites non-parsed resources in CSS files. |
| rewrite_style_attributes | No | No | Applies rewrite_css to style attributes. |
| rewrite_style_attributes_with_url | Yes | No | Rewrites style attributes containing url(. |
| flatten_css_imports | Yes | No | Inlines CSS by flattening all @import rules. |
| prioritize_critical_css | No | No | Replaces CSS tags with inline critical CSS. |
| make_google_analytics_async | No | No | Converts Google Analytics API to asynchronous. |
| rewrite_javascript | Yes | Yes | Minifies and optimizes JavaScript files. |
| rewrite_javascript_external | Yes | Yes | Rewrites external JavaScript files. |
| rewrite_javascript_inline | Yes | Yes | Rewrites inline JavaScript blocks. |
| include_js_source_maps | No | No | Adds source maps to rewritten JavaScript files. |
| combine_javascript | Yes | No | Combines multiple script elements into one. |
| canonicalize_javascript_libraries | No | No | Redirects JavaScript libraries to a hosting service. |
| inline_css | Yes | No | Inlines small CSS files into the HTML document. |
| inline_google_font_css | No | No | Inlines CSS from fonts.googleapis.com. |
| inline_javascript | Yes | No | Inlines small JavaScript files into the HTML document. |
| local_storage_cache | No | No | Caches inlined resources in HTML5 local storage. |
| insert_ga | No | No | Adds the Google Analytics snippet to each HTML page. |
| rewrite_images | Yes | Yes | Optimizes images by re-encoding and inlining small images. |
| convert_jpeg_to_progressive | Yes | Yes | Converts large JPEGs to progressive format. |
| convert_png_to_jpeg | Yes | Yes | Converts GIF and PNG images to JPEGs if compression artifacts are not significant. |
| convert_jpeg_to_webp | Yes | Yes | Produces WebP images instead of JPEGs for supported browsers. |
| convert_to_webp_lossless | No | No | Replaces GIF and PNG images with WebP format on supported browsers. |
| insert_image_dimensions | No | No | Adds width and height attributes to <img> tags. |
| inline_images | Yes | No | Inlines small images as data URLs. |
| recompress_images | Yes | Yes | Recompresses images, removing metadata and transforming GIFs to PNGs. |
| resize_images | Yes | No | Resizes images based on <img> tag dimensions. |
| resize_rendered_image_dimensions | Yes | No | Resizes images based on rendered dimensions. |
| inline_preview_images | No | No | Uses low-quality placeholders for images. |
| resize_mobile_images | No | No | Serves smaller placeholder images to mobile devices. |
| remove_comments | No | No | Removes comments from HTML files. |
| collapse_whitespace | No | No | Removes excess whitespace from HTML files. |
| elide_attributes | No | No | Removes insignificant attributes from HTML tags. |
| extend_cache | Yes | No | Extends cache lifetime for resources with a content hash. |
| sprite_images | No | No | Combines background images in CSS into a sprite. |
| rewrite_domains | No | No | Rewrites resource domains based on settings. |
| trim_urls | No | No | Shortens URLs by making them relative to the base URL. |
| remove_quotes | No | No | Removes unnecessary quotes around HTML attributes. |
| defer_javascript | No | No | Defers JavaScript execution until the page has loaded. |
| lazyload_images | No | No | Loads images as they enter the viewport. |
| insert_dns_prefetch | No | No | Inserts <link rel="dns-prefetch"> tags to reduce DNS resolution time. |
By understanding and utilizing these filters, you can significantly improve your website’s performance, making it faster and more responsive to user interactions.