PageSpeed Service was turned off on August 3rd, 2015. Please see Turndown Information for PageSpeed Service.
Objective
Reduce payload size of HTML document and reduce processing on the browser when rendering the page.
PageSpeed rule
This rewriter implements the PageSpeed rule for minimizing payload size and optimizing browser rendering.
Operation
The following rewriters control the respective functionalities described below.- Collapse Whitespace
- Combine HEADs
- Convert Meta Tags
- Elide Attributes
- Remove Comments
- Remove Quotes
- Trim URLs
Collapse Whitespace
This rewriter reduces bytes transmitted in a HTML file by replacing contiguous whitespace with a single whitespace character. Because HTML is often formatted with extra whitespace for human readability or as an incidental effect of the templates used to generate it, this technique can reduce the number of bytes needed to transmit HTML resources.
For example, if the HTML document looks like this:
<html> <head> <title>Hello, world! </title> <script> var x = 'Hello, world!';</script> </head> <body> Hello, World! <pre> Hello, World! </pre> </body> </html>
Then PageSpeed Service will rewrite it into:
<html> <head> <title>Hello, world!</title> <script> var x = 'Hello, world!';</script> </head> <body> Hello, World! <pre> Hello, World! </pre> </body> </html>
This rewriter will not modify whitespace appearing within
<pre>
, <textarea>
,
<script>
and <style>
tags. Extraneous
whitespace within inline scripts and styles can be removed using the
Minify Javascript and
Minify CSS rewriters. This rewriter
will attempt to preserve newline characters to an extent - a contiguous sequence
of whitespace with at least one newline anywhere in it will always collapse to a
single new line.
Limitations:
Although contiguous whitespace in HTML (beyond the first space) is
normally ignored by the browser outside of tags like <pre>
and <textarea>
, one can use CSS properties
such as "white-space: pre"
to make the browser preserve
whitespace within a portion of the document.
Use of such properties is relatively rare; however, this rewriter is not yet
CSS-aware, so any pages that might use such CSS properties (either statically or
dynamically) should not use this rewriter at this time.
Combine HEADs
This rewriter combines multiple <head>
sections in the HTML
document into one. Technically HTML documents are not allowed to have multiple
<head>
sections, but sites which aggregate content from
multiple sources sometimes have them. This rewriter moves the content from later
<head>
sections into the first head. This can change the
order of content (e.g. CSS and JS) in the later <head>
sections relative to intervening <body>
elements.
For example, if the HTML document looks like this:
<html> <head> <link rel="stylesheet" type="text/css" href="styles/yellow.css"> <link rel="stylesheet" type="text/css" href="styles/blue.css"> </head> <body> <div class="blue yellow big bold"> Hello, world! </div> </body> <head> <link rel="stylesheet" type="text/css" href="styles/big.css"> <link rel="stylesheet" type="text/css" href="styles/bold.css"> </head> </html>
Then PageSpeed Service will rewrite it into:
<html> <head> <link rel="stylesheet" type="text/css" href="styles/yellow.css"> <link rel="stylesheet" type="text/css" href="styles/blue.css"> <link rel="stylesheet" type="text/css" href="styles/big.css"> <link rel="stylesheet" type="text/css" href="styles/bold.css"> </head> <body> <div class="blue yellow big bold"> Hello, world! </div> </body> </html>
This rewriter operates within the scope of a "flush window".
Specifically, large or dynamically generated HTML files my be "flushed"
by the resource generator before they are complete. If the CSS combiner
encounters a Flush prior to the end of the first <head>
,
then subsequent <head>
sections will not be merged in.
Limitations:
In some browsers, in the above example, the original version will flash quickly as the browser will render the "Hello, world!" text before it sees second set of style tags providing definitions for "big and bold". This transformation will eliminate that flashing, but the end result will be the same.
If there are style or script tags in the body, between two heads, then the
rewrite pass can change their order. The risk is reduced if the Minify CSS
rewriter is also enabled. Additionally, JavaScript that is executed before a
later <head>
will see a different view of the DOM in the
presence of this rewriter. If there is such JavaScript embedded in the middle of
a page then this rewriter may change its behavior.
Convert Meta Tags
This rewriter adds a response header that matches each meta tag with an
http-equiv
attribute. For example,
<meta http-eqiv="Content-Language" content="fr">
would be
converted to Content-Language: fr
in the response headers.
The original tag is left unchanged.
Certain http-equiv
meta tags, specifically those that specify
content-type, require a browser to reparse the html document if they do not
match the headers. By ensuring that the headers match the meta tags, these
reparsing delays are avoided.
Elide Attributes
This rewriter 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. This can save a modest number of bytes, and may make the document more compressible by canonicalizing the affected tags.
There are two cases where an attribute value can be removed. First, some attributes are "single-valued" or "boolean", in that the value specified for the attribute is irrelevant -- all that matters is whether the attribute is present or not. In such cases, the rewriter will remove the value from the tag, leaving only the attribute name.
For example, the following tag:
<button name="ok" disabled="disabled">
can be rewritten to:
<button name="ok" disabled>
The second case is an optional attribute with a default value. If an HTML attribute includes an explicit value for an attribute (perhaps to aid readability) that is equal to the default attribute, the rewriter will remove the attribute name and value, knowing that the browser will infer the intended attribute anyway. For example, the following tag:
<form method="get">
can be rewritten to:
<form>
Limitations:
This rewriter must be wary of documents with an XHTML doctype, as removing the value from a single-valued attribute will result in invalid XHTML. The rewriter attempts to recognize XHTML doctype declarations and will disable this rewriting feature in such cases.
This rewriter can break CSS formatting on pages that select on default attributes. For example, it is possible to write a CSS rule such as:
td[colspan="1"] { ... }
This rule matches all <td>
elements with a
colspan
attribute whose value is "1
." When this
rewriter removes the colspan
attribute, the table column will still
not be extended through further table cells, but the CSS rule above will no
longer match.
Further, JavaScript can be written that inspects the DOM looking for the presence of certain attributes. Such JavaScript may behave differently on a page which has removed otherwise unnecessary attributes.
Remove Comments
This rewriter eliminates HTML comments, which are often used to document the
code or to comment out experiments. Note that this directive applies only to
HTML files. CSS comments are eliminated with the Minify CSS
rewriter, and Javascript comments are eliminated with the Minify
JavaScript
rewriter.
This rewriter reduces the transfer size of HTML files by removing most HTML comments. Depending on the HTML file, this rewriter can significantly reduce the number of bytes transmitted on the network.
For example, if the HTML document looks like this:
<html> <head> <title>Hello, world! </title> <script> var x = 'Hello, world!';</script> </head> <body> Hello, World! <pre> Hello, World! </pre> </body> </html>
Then PageSpeed Service will rewrite it to:
<html> <head> <title>Hello, world!</title> <script> var x = 'Hello, world!';</script> </head> <body> Hello, World! <pre> Hello, World! </pre> </body> </html>
This rewriter is aware of Internet Explorer conditional comments and does not remove them.
Limitations:
Some web pages use comments to embed data or JavaScript, in order to reduce the parse time of the HTML document. This rewriter should be disabled for such pages, as it will remove the comments containing the data or JavaScript that is needed by these web pages.
Remove Quotes
This rewriter eliminates unnecessary quotation marks (either "" or '') from HTML attributes. While required by the various HTML specifications, browsers permit their omission when the value of an attribute is composed of a certain subset of characters (alphanumerics and some punctuation characters).
Quote removal produces a modest savings in byte count on most pages. It may also benefit gzip compression by canonicalizing the textual representation of name=value pairs.
For example, if the HTML document looks like this:
<html> <head> </head> <body> <img src="BikeCrashIcn.png" align='left' alt="" border="0" width='70' height='30' > </body> </html>
Then PageSpeed Service will rewrite it into:
<html> <head> </head> <body> <img src=BikeCrashIcn.png align=left alt="" border=0 width=70 height=30 > </body> </html>
Only previously-quoted attributes are subject to quote removal. Quote
removal occurs after most rewriting passes, so that any alterations to
attribute values (such as rewritten URLs) will be correctly accounted
for. This rewriter will act as a pass-through when XHTML is detected
via doctype
or content-type
.
Limitations:
Space savings from the rewriter may be small (so the cost of running the rewriter may outweigh its benefits in certain settings).
Trim URLs
This rewriter trims URLs by resolving them and making them relative to the base
URL for the page. E.g. on http://www.example.com/
,
"http://www.example.com/foo"
would be shortened to
"foo"
. This rewriter works only on URLs that are the values
specified by src
or href
attributes.
It also trims image URLs in CSS if Minify CSS
is enabled.
This rewriter reduces the transfer size of HTML files by shortening most of the URLs. Depending on the HTML file, this rewriter can significantly reduce the number of bytes transmitted on the network. While it's useful for 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.
For example, if the HTML document looks like this:
<html> <head> <base href="http://www.example.com/"> </head> <body> <a href="http://www.example.com/bar">Link with long URL</a> <img src="http://www.othersite.example.org/image.jpg"> </body> </html>
Then PageSpeed Service will rewrite it to:
<html> <head> <base href="http://www.example.com/"> </head> <body> <a href="bar">Link with long URL</a> <img src="//www.othersite.example.org/image.jpg"> </body> </html>
Limitations:
Only URLs referenced by href
and src
attributes and,
if Minify CSS
is enabled, URLs in CSS files are rewritten. URLs
that occur elsewhere are not altered.