Search

PageSpeed Optimization Examples

Below is a list of some commonly used PageSpeed optimizations as applied by automatic PageSpeed optimization. Click "compare" to see how PageSpeed automatically optimizes your web content. On the left the unoptimized html source code will be shown, and on the right the optimized version will be displayed.

Other PageSpeed Experimentation options

PageSpeed Examples Directory

Add Instrumentation (timing measurements) Adds client-side latency instrumentation which will beacon back both timings from the server and real time user measurements. before after compare
Canonicalize JavaScript Libraries Recognizes common JavaScript libraries and redirects each to a canonical URL. before after compare
Collapse Whitespace Strip whitespace in HTML, taking care not to affect layout. before after compare
Combine CSS Combines multiple CSS files into one. before after compare
Combine JavaScript Combines multiple JavaScript files into one. before after compare
Deduplicate Inline Images Replaces repeated inlined images with JavaScript that loads the data from the first instance of the image. before after compare
Defer Javascript Defers the execution of javascript in the HTML and unblocks the browser's rendering (and sometimes network) pipelines. before after compare
Elide Attributes Removes unnecessary attributes in HTML tags. before after compare
Pedantic Adds default type attributes to script and style tags that are missing them. before after compare
Extend Cache Improves cacheability of CSS, JavaScript, Images and PDF files with automatic content fingerprinting. before after compare
Extend Cache for PDF files . Improves cacheability of PDFs. before after compare
Fallback optimize css urls Optimize assets references in CSS even if the CSS is not parseable. before after compare
Flatten CSS Imports Flattens @import rules in CSS by replacing the rule with the contents of the imported resource. before after compare
Inline CSS Inlines small external CSS files. before after compare
Inline CSS @import to link Inlines style tags comprising only CSS @imports by converting them to an equivalent link. before after compare
Inline JavaScript Inlines small external Javascript files. before after compare
Inline Preview Images Delays original images; serves inlined, low-quality placeholder images until originals are loaded. before after compare
Insert DNS Prefetch links Injects <link rel="dns-prefetch" href="//www.example.com"> tags in the HEAD to enable the browser to do DNS prefetching. before after compare
Insert Google Analytics Inserts Google Analytics javascript snippet. before after compare
Lazyload Images Loads images when they become visible in the client viewport. before after compare
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 compare
Make Google Analytics Async Converts synchronous Google Analytics code to load asynchronously. before after compare
Move CSS Above Scripts Moves CSS Above Scripts. before after compare
Move CSS to Head Moves CSS into the <head> element. before after compare
Outline CSS Moves large inline <style> tags into external files for cacheability. before after compare
Outline JavaScript Moves large inline <script> tags into external files for cacheability. before after compare
Prioritize Critical CSS Instruments the page, inlines its critical CSS at the top, and lazily loads the rest. before after compare
Map and Proxy Domain Proxies and optimizes trusted resources from domains not running PageSpeed. before after compare
Strip comments Removes HTML comments. before after compare
Remove Quotes Removes unnecessary quotes in HTML tags. before after compare
Resize Mobile Images Just like "Inline Preview Images", but uses smaller placeholder images for mobile browsers. before after compare
Resize Images to rendered dimensions. Resize images to rendered dimensions as measured on the browser. before after compare
Optimize CSS Minifies CSS. before after compare
Optimize CSS + Extend Cache Cache extends images in CSS. before after compare
Optimize CSS + Optimize Images Re-compress images in CSS. before after compare
Optimize Images Rescales, and compresses and transcodes images; inlines small ones. before after compare
Minify JavaScript Minifies Javascript. before after compare
Rewrite Style Attributes Rewrite the CSS in style attributes by applying the configured Optimize-CSS filter to it. before after compare
Rewrite Style Attributes with URL Optimize the CSS in style attributes by applying the configured Optimize-CSS filter to it, but only if the attribute contains the text 'url('. before after compare
Sprite CSS background images Sprites images. before after compare
Trim URLS Removes unnecessary prefixes from URLs, resulting in the shortest notation possible. before after compare
Combine Heads Combines multiple <head> elements into one. Primarily used by other filters which will turn it on when nessecary. before after compare
PageSpeed optimization modules powered by the official Google PageSpeed SDK to Make the Web Faster by optimizing web pages to reduce rendering speed, latency and bandwidth.
Optimizing web perfomance helps drive conversion and retention by optimizing page speed and user experience.

Speedy web pages help maximize visitor engagement, retention, and conversions. Google's PageSpeed platform offers testing tools, recommendations, and optimization products to automatically comply with best practices from the web performance optimization industry.



Share View Comments
.
Some content on this website represents a modified version of the official Google PageSpeed documentation