文档中心 >Google PageSpeed

压缩HTML代码

概览

压缩HTML代码,包括任何内嵌的JavaScript和CSS,可以减少很多字节和加速下载、分析和执行时间。

详细

优化HTML的好处跟简化CSS和JS一样:减少网络延迟,增强压缩,以及使浏览器更快加载和执行,此外,HTML中常含有内嵌的JS代码(在<script>标记)和内嵌CSS(在<style>标记),所以压缩这些是非常有用的。

注:此规则是实验性的,目前集中在尺寸缩小而不是严格的HTML格式良好。规则的未来版本也将考虑到正确性。

操作范例

如下是一些重写说明

删除空白符

这种重写是用一个空白字符替换连续的空格,可以减少HTML文件传输的字节,因为HTML是经常格式化额外的空格以增强可读性或作为用于生成它的模板的附带的效果,这种技术可以减少传输的HTML资源所需的字节数。

例如,之前HTML是这样的

<html>

  <head>
    <title>Hello,   world!   </title>
    <script> var x = 'Hello,   world!';</script>
  </head>

  <body>
    Hello, World!
    <pre>
      Hello,
        World!
    </pre>
  </body>

</html>

重写后变成这样

<html>
<head>
<title>Hello, world!</title>
<script> var x = 'Hello,   world!';</script>
</head>
<body>
Hello, World!
<pre>
      Hello,
        World!
</pre>
</body>
</html>

这个重写不改变出现在 <pre>, <textarea>, <script> and <style> 标签里空白符,包含在scripts和styles里的空白符可以使用简化JavaScript和简化CSS的方法重写。这个重写将试图保留换行符的程度 - 至少有一个新行的空白的连续序列将会折叠到一个单一的新行。

条件限制

虽然在HTML中的连续空白(超出第一空间)通常被浏览器的标签外部忽略,如<PRE>和<textarea>,可以用CSS属性如“white-space: pre”使浏览器保留文档内的一部分空白。使用这种性能比较少见,然而,这种改写CSS尚未识别,因此,任何可能使用这个CSS特性的网页(静态或动态),都不应该在此时使用该重写。

合并Heads

HTML文档不允许有多个<head>单元,但是一些网页合集多个源码便有可能出现多个<head>的情况,这时我们便需要把多个<head>合并在一起,以改良HTML源码运行性能,提高执行速度。参见合并Heads

条件限制

如果在body的两个head之间有样式或脚本标签,那么重写可以改变它们的顺序。如果还启用了缩小CSS重写,风险会有所降低。此外,就是后来的<head>之前执行的JavaScript会在这个重写中看到不同的DOM。如果有JavaScript嵌入在页面的中间,那么这个重写可能会改变其行为。

转换Meta标签

转换Meta标签是为所有具有“http-equiv”属性的Meta标签增加一个响应头。参见转换Meta标签

Elide属性(省略属性)

这种重写通过从标签移除属性减少HTML文件传输大小,移除属性时指定的值等于该属性的默认值。这样可以节省字节数量,而且可能使由canonicalizing受影响标签的文档更可压缩。

有两种情况,其中一个属性值可以被删除。首先,一些属性是“单值”或“布尔”的,即该属性指定的值是不相关的 - 所有重要的是该属性是否存在与否。在这种情况下,重写将从标签删除值,只留下属性名称。

例如,下面的tag

<button name="ok" disabled="disabled">

能被重写成这样

<button name="ok" disabled>

第二种情况是有一个默认值的可选属性。如果一个HTML属性包括一个属性(也许是为了增加可读性)等于默认属性的显式值,重写将删除属性名称和价值,知道浏览器会推断出预期的属性而已。

例如,下面的tag

<form method="get">

可改写成这样

<form>

删除注释

这种重写消除HTML注释,这往往是用来记录的代码或注释实验。请注意,CSS注释在简化CSS里消除,Javascript注释在简化JavaScript里消除。

这种重写通过删除最HTML注释减少HTML文件传输大小。根据HTML文件,这可以显著减少在网络上传输的字节数。

例如,html文档看起来是这样

<html>

  <head>
    <title>Hello,   world!   </title>
    <script> var x = 'Hello,   world!';</script>
  </head>

  <body>
    Hello, World!
    <pre>
      Hello,
        World!
    </pre>
  </body>

</html>

可以重写成这样

<html>
<head>
<title>Hello, world!</title>
<script> var x = 'Hello,   world!';</script>
</head>
<body>
Hello, World!
<pre>
      Hello,
        World!
</pre>
</body>
</html>

条件限制

一些网页使用注释来嵌入数据或JavaScript,以减少在HTML文档的解析时间。此重写不应使用在此类页面里,因为它会除去含有所需要由这些网页的数据或JavaScript的说明文字。

删除引号

这种重写从HTML属性消除了不必要的引号(无论是''或"")。当被各种HTML规格请求,如果属性的值是由字符(字母,数字以及一些标点符号字符)的特定子集组成,浏览器允许其遗漏。

在大多数的网页,去除引号能产生适度的节约字节数。它也可以通过canonicalizing name = value对的文字表述,以有利于gzip压缩。

例如,如果HTML是这样的

<html>
  <head>
  </head>
  <body>
    <img src="BikeCrashIcn.png" align='left' alt="" border="0" width='70' height='30' >
  </body>
</html>

可以重写成这样

<html>
  <head>
  </head>
  <body>
    <img src=BikeCrashIcn.png align=left alt="" border=0 width=70 height=30 >
  </body>
</html>

裁剪网址

这种重写裁剪URL是通过解析他们,使他们相对于页面的基础URL网址。例如http://www.example.com/的网页,“http://www.example.com/foo”将被缩短为“foo”。该重写仅适用于那些由SRC或HREF属性指定的值的URL。它还裁剪图像的URL在CSS,如果使用了简化CSS。

这种重写通过缩短大部分网址减少HTML文件传输大小。根据HTML文件,这可以改写显著减少在网络上传输的字节数。虽然充分指定URLs对开发是有好处的,当一些东西移动之后这样的链接不会被打断,但这些都是在网络上不必要发送的字节数。

例如,如果HTML看起来是这样的

<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>

可以改写成这样

<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>

条件限制

只有在href和SRC属性引用的URLs可以使用这种重写,在CSS文件里使用的URL可以在简化CSS里重写。在其他地方的URL不能改变。

使用在线HTML压缩工具

如果人工压缩HTML会比较不现实,为此,卡卡网推出了HTML在线压缩工具,使用此工具,可以把HTML代码压缩20%以上,推荐使用。

本页面中的内容已获得知识共享署名3.0许可,并且代码示例已获得Apache 2.0许可;另有说明的情况除外。

文章源地址:https://developers.google.com/speed/pagespeed/service/OptimizeHtml