减少HTML或XHTML页面大小的常用优化方法？

为减少HTML或XHTML页面大小，进行了哪些常见的优化？我想到的一些是：

• 删除评论，
• 删除多余的空格，
• 将重复的内联样式移动到CSS样式表中，
• 等等

还有什么？哪个提供最高的性价比，或者可以由工具或模块自动执行？

Google已概述并解释了他们的建议，以最大程度地减少有效负载大小。它们包括以下技术：

1. 启用压缩
2. 删除未使用的CSS
3. 缩小JavaScript
4. 缩小CSS
5. 缩小HTML
6. 推迟加载JavaScript
7. 优化图像
8. 服务缩放的图像
9. 通过一致的URL提供资源

这些建议是其名为Page Speed的开源Firefox / Firebug附加项目的一部分。与Yahoo!的YSlow插件类似。实际的Page Speed加载项将检查比该列表详细说明的更多优化。还提供了使用Page Speed的说明。

Yahoo!的“ 加快网站访问速度的最佳做法”确定了一组类似的最佳做法：

1. 最小化HTTP请求
2. 使用内容交付网络
3. 添加过期或缓存控制标头
4. Gzip组件
5. 将样式表放在顶部
6. 将脚本放在最下面
7. 避免CSS表达式
8. 将JavaScript和CSS设为外部
9. 减少DNS查找
10. …

（Yahoo!的列表大约有35个项目，无需全部引​​用。）

这两个YSlow的（图像链接）和网页速度（影像链接）可以让你在网页上运行测试，这件事情是你可以做的，并显示你什么，他们的建议，已经落实。

有人会说标记应该被压缩，所以我也应该成为那个。

这是关于Gzip的冗长解释，并提供了有关如何在Apache和IIS上进行设置的链接。

WebReference上的一篇文章指出，使用mod_gzip Apache模块时，您将获得以下性能提升。

使用此模块，网站管理员通常会看到Web服务器性能提高150-160％，HTML / XML / JavaScript带宽使用减少70％-80％。总体而言，带宽节省约为30％到60％

这可能不值得。

我玩过删除HTML中的空白的过程，在gzip后看到的有效负载大小仅减少了10％。

实际上，空格和换行符的删除正在完成压缩工作。我们只是添加了一些人工辅助的效率：

                  原始压缩
未优化的CSS 2,299字节671字节
优化的CSS 1,758字节615字节

（是的，这说的是CSS，但相同的基本规则也适用于HTML）

问题是，

1. GZIP正在为您完成90％的工作，因此这是一个疯狂的微优化。我的意思是，也许您是Google或Yahoo。
2. 额外减少10％的大小是因为“视图源”中完全不可读的HTML所付出的巨大代价

好吧，一个小小的：将标签名称和属性保持小写和一致（顺便说一下，这是标准要求）。它将压缩率提高一个或两个百分点。

如果您的网站流量很大，则可能要考虑使用超短实体ID和类名，因为它们会减小HTML页面和用于为其设置样式的CSS页面的大小。

另外，要注意过度结构化的站点组成；如果确实不需要div和span部分，则很容易添加它们。您可能还需要考虑诸如对大型结果集和类似输出进行分页的策略。

实际上，对于与Google流量类别不同的​​网站，这些优化的回报率非常有限（对于分页策略而言，潜在的SEO缺点）是值得的。只需按照jessegavin的建议启用GZip / Deflate压缩即可。

将常见的CSS，图片和JavaScript合并到一个文件中。这不会减少文件的大小，但是会减少http请求的数量。对于较小的文件，http开销远大于下载时间。编写结合CSS和javascript文件的脚本很容易，因此您可以在开发过程中更轻松地管理它们，但可以将它们部署到单个文件中。

有关合并图像的更多信息，请参见http://css-tricks.com/css-sprites。

另外，请从Google 查看Closure Compiler。我没有使用过它，但是它声称可以使javascript下载并运行得更快。

正如其他人所说，最大的好处来自gzip。

确保使用适当的HTML元素。代替<div class="page-title">Hello World</div>使用<h1>Hello World</h1>。

显而易见的一点是：不要使用表格进行布局！使用像960.gs这样的简单网格系统（或滚动自己的轻量级版本）。HTML大小之间可能会有很大差异，尤其是对于嵌套表而言。比较：

<table cellpadding="3" cellspacing="0" border="0">
<tbody>
    <tr>
        <td width="200">...</td>
        <td width="600">...</td>
    </tr>
</tbody>
</table>

和

<div class="colSmall">...</div>
<div class="colLarge">...</div>

如果您使用的是ASP.NET网站，请注意ViewState。它可以在页面中生成很大的隐藏字段，并在不必要时经常使它过载（我已经发现ViewState比页面的其余部分重）。
如果使用AJAX，则尤其如此，因为ViewState将随每个请求来回发送，从而减慢您的网站并增加流量。

解决方案是在.net代码中。

有很多免费的Web性能分析和优化工具。您可以从它们生成的报告中编译自己的大清单。

以下是Zoompf效果评估中的几个解释要点-

• 避免动态生成内容（图像）。考虑将图像离线绘制或调整大小为静态图像文件。
• 避免使用没有尺寸的图像标签。
• Google Analytics（分析和广告）支持异步加载其JavaScript文件。如果您使用它们，则可以选择异步加载它们。

通常被忽略的策略是从页面中删除所有不必要的HTML代码。

对于任何给定的项目，您都必须根据所使用的（X）HTML版本以及网站的使用方式来决定采用哪种策略。

（显然，由于我是新用户，因此我不能在每个答案中发布多个超链接，因此必须复制并粘贴这些URL……我希望这是洁食。）

• 在HTML4和HTML5中，对于许多元素而言，不需要结束标记。也不需要body元素的开始标签。看到：

meiert.com/en/blog/20080601/optional-tags-in-html-4/

code.google.com/speed/articles/optimizing-html.html

• 可以省略HTTP URL的协议（http :)部分。

meiert.com/zh/blog/20090218/performance-and-rfc-2396/

• 使用<br>这样的标记，您可以简单地省去XHTML语法（<br />）中使用的斜杠，除非您确实需要使用XHTML。

• 以下是一些小型HTML文档结构的示例：

meiert.com/en/blog/20080429/best-html-template/

html5doctor.com/html-5-boilerplates/

其他人已经说过了，但是他们只是没有把重点放在正确的地方：gziping。

1. 几乎没有任何努力或缺点。
2. 以我有限的经验，将HTML大小减少60％至90％。

您可以对HTML进行的所有其他调整需要更多的精力/维护，并且与gzip压缩和遗忘相比几乎没有任何效果。除非您是Google，否则他们根本不值得花时间。您不是Google。

（正如其他人提到的那样，HTML越一致，gzipping的效果就越好，因为-根据我的有限理解-gzipping在文件中查找相同的字符串，并用一个引用因此，诸如保持属性顺序相同以及所有大小写相同的创作实践可以帮助gziping完成其工作。）

哦，而且，如果您要在构建/服务过程中的某个时刻自动缩小HTML，则无需付出更多的努力/维护。这里列出了一些HTML缩小器：

/programming/728260/html-minification