## mod_pagespeed Filter Examples

Here are some of the most useful filters provided by mod_pagespeed. Each one has a simple HTML example attached; click "before" to see the original file, and "after" to see what mod_pagespeed produces with that filter (and only that filter) enabled. The two versions should look exactly the same, but the "after" one will be (slightly) speedier. Use "view source" to see the mod_pagespeed difference!

add_instrumentation | Adds client-side latency instrumentation. | before | after
extend_cache | Improves cacheability. | before | after
collapse_whitespace | Removes unnecessary whitespace in HTML. | before | after
combine_css | Combines multiple CSS files into one. | before | after
combine_javascript | Combines multiple JavaScript files into one. | before | after
combine_heads | Combines multiple <head> elements into one. | before | after
defer_javascript | Defers the execution of javascript in the HTML. | before | after
move_css_above_scripts | Moves CSS Above Scripts. | before | after
move_css_to_head | Moves CSS into the <head> element. | before | after
elide_attributes | Removes unnecessary attributes in HTML tags. | before | after
inline_css | Inlines small external CSS files. | before | after
inline_import_to_link | Inlines style tags comprising a single CSS @import by converting them to an equivalent link. | before | after
flatten_css_imports | Flattens @import rules in CSS by replacing the rule with the contents of the imported resource. | before | after
inline_javascript | Inlines small external Javascript files. | before | after
lazyload_images | Loads images when they become visible in the client viewport. | before | after
local_storage_cache | Loads inlined CSS and image resources into HTML5 local storage whence the client fetches them subsequently rather than the server sending them again. | before | after
outline_css | Moves large inline <style> tags into external files for cacheability. | before | after
outline_javascript | Moves large inline <script> tags into external files for cacheability. | before | after
remove_quotes | Removes unnecessary quotes in HTML tags. | before | after
remove_comments | Removes HTML comments. | before | after
rewrite_style_attributes | Rewrite the CSS in style attributes by applying the configured rewrite_css filter to it. | before | after
rewrite_style_attributes_with_url | Rewrite the CSS in style attributes by applying the configured rewrite_css filter to it, but only if the attribute contains the text 'url('. | before | after
trim_urls | Removes unnecessary prefixes from URLs. | before | after
make_google_analytics_async | Converts synchronous Google Analytics code to load asynchronously. | before | after
rewrite_css | Minifies CSS. | before | after
rewrite_css + cache_extend | Cache extends images in CSS. | before | after
rewrite_css + rewrite_images | Re-compress images in CSS. | before | after
rewrite_images | Rescales, and compresses images; inlines small ones. | before | after
rewrite_javascript | Minifies Javascript. | before | after
sprite_images | Sprites images. | before | after
insert_ga | Inserts Google Analytics javascript snippet. | before | after
inline_preview_images | Delays original images; serves inlined, low-quality placeholder images until originals are loaded. | before | after
resize_mobile_images | Just like inline_preview_images, but uses smaller placeholder images for mobile browsers. | before | after