doc/filters.html - incubator-pagespeed-website - Git at Google

 <!--
 Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
 distributed with this work for additional information
 regarding copyright ownership.  The ASF licenses this file
 to you under the Apache License, Version 2.0 (the
 "License"); you may not use this file except in compliance
 with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing,
 software distributed under the License is distributed on an
 "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->

 <html>
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>PageSpeed Filters</title>
     <link rel="stylesheet" href="doc.css">
   </head>
   <body>
 <!--#include virtual="_header.html" -->


   <div id=content>
 <h1>PageSpeed Filters</h1>

 <p>
 PageSpeed improves web page latency by changing the resources on that
 web page to implement web performance
 <a target="_blank" href="https://developers.google.com/speed/docs/best-practices/rules_intro">best practices</a>.  Each sort
 of change that PageSpeed makes is embodied in a <em>filter</em>.  The filters
 are run in a pre-defined order, but can be enabled and disabled in the server
 <a href="configuration">configuration file</a>.
 </p>
 <p>
 Some filters simply alter HTML content, such as removing excess
 whitespace, attributes, or attribute values that will be ignored.
 </p>
 <p>
 Other filters change references to CSS, JavaScript, or images to point
 to more optimized versions, because they:
 </p>
 <ul>
   <li>are smaller,</li>
   <li>combine multiple files into one, and</li>
   <li>extend the cache lifetime</li>
 </ul>

 <h2>Categories of filters</h2>
 <p>
 Filters are of many categories that fit under performance best practices.
 The current set of filters fits in these categories as follows:
 </p>
 <a target="_blank" href="https://developers.google.com/speed/docs/best-practices/caching">
   <h3>Optimize Caching</h3>
 </a>
 <ul>
   <li><a href="filter-canonicalize-js">Canonicalize JavaScript Libraries</a>
   <li><a href="filter-cache-extend">Extend Cache</a></li>
   <li><a href="filter-cache-extend-pdfs">Extend Cache PDFs</a></li>
   <li><a href="filter-local-storage-cache">Local Storage Cache</a></li>
   <li><a href="filter-css-outline">Outline CSS</a></li>
   <li><a href="filter-js-outline">Outline JavaScript</a></li>
 </ul>

 <a target="_blank" href="https://developers.google.com/speed/docs/best-practices/rtt">
   <h3>Minimize Round Trip Times</h3>
 </a>
 <ul>
   <li><a href="filter-css-combine">Combine CSS</a></li>
   <li><a href="filter-flatten-css-imports">Flatten CSS @imports</a></li>
   <li><a href="filter-css-inline">Inline CSS</a></li>
   <li><a href="filter-css-inline-google-fonts">Inline Google Fonts API CSS</a></li>
   <li><a href="filter-js-combine">Combine JavaScript</a></li>
   <li><a href="filter-js-inline">Inline JavaScript</a></li>
   <li><a href="filter-css-above-scripts">Move CSS Above Scripts</a></li>
   <li><a href="domains#shard">Configuration file directive to
       shard domains</a></li>
   <li><a href="filter-image-sprite">Sprite Images</a></li>
   <li><a href="filter-insert-dns-prefetch">Pre-Resolve DNS</a></li>
 </ul>

 <a target="_blank" href="https://developers.google.com/speed/docs/best-practices/request">
   <h3>Minimize Request Overhead</h3>
 </a>
 <ul>
   <li><a href="filter-domain-rewrite">Rewrite Domains</a></li>
   <li><a href="domains#mapping_rewrite">Configuration
       file directive to map domains</a></li>
 </ul>

 <a target="_blank" href="https://developers.google.com/speed/docs/best-practices/payload">
   <h3>Minimize Payload Size</h3>
 </a>
 <ul>
   <li><a href="filter-whitespace-collapse">Collapse Whitespace</a></li>
   <li><a href="filter-head-combine">Combine Heads</a></li>
   <li><a href="filter-attribute-elide">Elide Attributes</a></li>
   <li><a href="filter-js-minify">Minify JavaScript</a></li>
   <li><a href="filter-image-optimize">Optimize Images</a></li>
   <li><a href="filter-prioritize-critical-css">Prioritize Critical CSS</a></li>
   <li><a href="filter-dedup-inlined-images">Deduplicate Inlined Images</a></li>
   <li><a href="filter-comment-remove">Remove Comments</a></li>
   <li><a href="filter-quote-remove">Remove Quotes</a></li>
   <li><a href="filter-css-rewrite">Rewrite CSS</a></li>
   <li><a href="filter-rewrite-style-attributes"
       >Rewrite Style Attributes</a></li>
   <li><a href="filter-trim-urls">Trim URLs</a></li>
 </ul>

 <a target="_blank" href="https://developers.google.com/speed/docs/best-practices/rendering">
   <h3>Optimize Browser Rendering</h3></a>
 <ul>
   <li><a href="filter-convert-meta-tags">Convert Meta Tags</a></li>
   <li><a href="filter-js-defer">Defer Javascript</a></li>
   <li><a href="filter-hint-preload-subresources"
       >Hint Resource Preloading</a></li>
   <li><a href="filter-inline-preview-images">Inline Preview Images</a></li>
   <li><a href="filter-lazyload-images">Lazily Load Images</a></li>
   <li><a href="filter-image-responsive">Make Images Responsive</a></li>
   <li><a href="filter-css-to-head">Move CSS to Head</a></li>
   <li><a href="filter-image-optimize">Optimize Images</a></li>
   <li><a href="reference-image-optimize#progressive"
       >Convert JPEG to Progressive</a></li>
   <li><a href="filter-rewrite-style-attributes"
       >Rewrite Style Attributes</a></li>
 </ul>

 <h3>Other</h3>
 <ul>
   <li><a href="filter-head-add">Add Head</a></li>
   <li><a href="filter-instrumentation-add">Add Instrumentation</a></li>
   <li><a href="filter-source-maps-include"
       >Include JavaScript Source Maps</a></li>
   <li><a href="filter-css-inline-import">Inline @import to Link</a></li>
   <li><a href="filter-insert-ga">Insert Google Analytics Snippet</a></li>
   <li><a href="filter-make-show-ads-async"
       >Make Google AdSense Async</a></li>
   <li><a href="filter-make-google-analytics-async"
       >Make Google Analytics Async</a></li>
   <li><a href="filter-pedantic">Pedantic</a></li>
   <li><a href="module-run-experiment">Run Experiment</a></li>
 </ul>

 <p>
 In some cases, a filter such as 'Optimize Images' helps both minimize request overhead and optimize browser rendering.
 </p>

   </div>
   <!--#include virtual="_footer.html" -->
   </body>
 </html>
	<!--
	Licensed to the Apache Software Foundation (ASF) under one
	or more contributor license agreements. See the NOTICE file
	distributed with this work for additional information
	regarding copyright ownership. The ASF licenses this file
	to you under the Apache License, Version 2.0 (the
	"License"); you may not use this file except in compliance
	with the License. You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

	Unless required by applicable law or agreed to in writing,
	software distributed under the License is distributed on an
	"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	KIND, either express or implied. See the License for the
	specific language governing permissions and limitations
	under the License.
	-->

	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>PageSpeed Filters</title>
	<link rel="stylesheet" href="doc.css">
	</head>
	<body>
	<!--#include virtual="_header.html" -->


	<div id=content>
	<h1>PageSpeed Filters</h1>

	<p>
	PageSpeed improves web page latency by changing the resources on that
	web page to implement web performance
	<a target="_blank" href="https://developers.google.com/speed/docs/best-practices/rules_intro">best practices</a>. Each sort
	of change that PageSpeed makes is embodied in a <em>filter</em>. The filters
	are run in a pre-defined order, but can be enabled and disabled in the server
	<a href="configuration">configuration file</a>.
	</p>
	<p>
	Some filters simply alter HTML content, such as removing excess
	whitespace, attributes, or attribute values that will be ignored.
	</p>
	<p>
	Other filters change references to CSS, JavaScript, or images to point
	to more optimized versions, because they:
	</p>
	<ul>
	<li>are smaller,</li>
	<li>combine multiple files into one, and</li>
	<li>extend the cache lifetime</li>
	</ul>

	<h2>Categories of filters</h2>
	<p>
	Filters are of many categories that fit under performance best practices.
	The current set of filters fits in these categories as follows:
	</p>
	<a target="_blank" href="https://developers.google.com/speed/docs/best-practices/caching">
	<h3>Optimize Caching</h3>
	</a>
	<ul>
	<li><a href="filter-canonicalize-js">Canonicalize JavaScript Libraries</a>
	<li><a href="filter-cache-extend">Extend Cache</a></li>
	<li><a href="filter-cache-extend-pdfs">Extend Cache PDFs</a></li>
	<li><a href="filter-local-storage-cache">Local Storage Cache</a></li>
	<li><a href="filter-css-outline">Outline CSS</a></li>
	<li><a href="filter-js-outline">Outline JavaScript</a></li>
	</ul>

	<a target="_blank" href="https://developers.google.com/speed/docs/best-practices/rtt">
	<h3>Minimize Round Trip Times</h3>
	</a>
	<ul>
	<li><a href="filter-css-combine">Combine CSS</a></li>
	<li><a href="filter-flatten-css-imports">Flatten CSS @imports</a></li>
	<li><a href="filter-css-inline">Inline CSS</a></li>
	<li><a href="filter-css-inline-google-fonts">Inline Google Fonts API CSS</a></li>
	<li><a href="filter-js-combine">Combine JavaScript</a></li>
	<li><a href="filter-js-inline">Inline JavaScript</a></li>
	<li><a href="filter-css-above-scripts">Move CSS Above Scripts</a></li>
	<li><a href="domains#shard">Configuration file directive to
	shard domains</a></li>
	<li><a href="filter-image-sprite">Sprite Images</a></li>
	<li><a href="filter-insert-dns-prefetch">Pre-Resolve DNS</a></li>
	</ul>

	<a target="_blank" href="https://developers.google.com/speed/docs/best-practices/request">
	<h3>Minimize Request Overhead</h3>
	</a>
	<ul>
	<li><a href="filter-domain-rewrite">Rewrite Domains</a></li>
	<li><a href="domains#mapping_rewrite">Configuration
	file directive to map domains</a></li>
	</ul>

	<a target="_blank" href="https://developers.google.com/speed/docs/best-practices/payload">
	<h3>Minimize Payload Size</h3>
	</a>
	<ul>
	<li><a href="filter-whitespace-collapse">Collapse Whitespace</a></li>
	<li><a href="filter-head-combine">Combine Heads</a></li>
	<li><a href="filter-attribute-elide">Elide Attributes</a></li>
	<li><a href="filter-js-minify">Minify JavaScript</a></li>
	<li><a href="filter-image-optimize">Optimize Images</a></li>
	<li><a href="filter-prioritize-critical-css">Prioritize Critical CSS</a></li>
	<li><a href="filter-dedup-inlined-images">Deduplicate Inlined Images</a></li>
	<li><a href="filter-comment-remove">Remove Comments</a></li>
	<li><a href="filter-quote-remove">Remove Quotes</a></li>
	<li><a href="filter-css-rewrite">Rewrite CSS</a></li>
	<li><a href="filter-rewrite-style-attributes"
	>Rewrite Style Attributes</a></li>
	<li><a href="filter-trim-urls">Trim URLs</a></li>
	</ul>

	<a target="_blank" href="https://developers.google.com/speed/docs/best-practices/rendering">
	<h3>Optimize Browser Rendering</h3></a>
	<ul>
	<li><a href="filter-convert-meta-tags">Convert Meta Tags</a></li>
	<li><a href="filter-js-defer">Defer Javascript</a></li>
	<li><a href="filter-hint-preload-subresources"
	>Hint Resource Preloading</a></li>
	<li><a href="filter-inline-preview-images">Inline Preview Images</a></li>
	<li><a href="filter-lazyload-images">Lazily Load Images</a></li>
	<li><a href="filter-image-responsive">Make Images Responsive</a></li>
	<li><a href="filter-css-to-head">Move CSS to Head</a></li>
	<li><a href="filter-image-optimize">Optimize Images</a></li>
	<li><a href="reference-image-optimize#progressive"
	>Convert JPEG to Progressive</a></li>
	<li><a href="filter-rewrite-style-attributes"
	>Rewrite Style Attributes</a></li>
	</ul>

	<h3>Other</h3>
	<ul>
	<li><a href="filter-head-add">Add Head</a></li>
	<li><a href="filter-instrumentation-add">Add Instrumentation</a></li>
	<li><a href="filter-source-maps-include"
	>Include JavaScript Source Maps</a></li>
	<li><a href="filter-css-inline-import">Inline @import to Link</a></li>
	<li><a href="filter-insert-ga">Insert Google Analytics Snippet</a></li>
	<li><a href="filter-make-show-ads-async"
	>Make Google AdSense Async</a></li>
	<li><a href="filter-make-google-analytics-async"
	>Make Google Analytics Async</a></li>
	<li><a href="filter-pedantic">Pedantic</a></li>
	<li><a href="module-run-experiment">Run Experiment</a></li>
	</ul>

	<p>
	In some cases, a filter such as 'Optimize Images' helps both minimize request overhead and optimize browser rendering.
	</p>

	</div>
	<!--#include virtual="_footer.html" -->
	</body>
	</html>