it-swarm.cn

减少HTML或XHTML页面大小的常见优化?

为减少HTML或XHTML页面大小而执行的常见优化是什么?一些想到的是:

  • 删除评论,
  • 删除无关的空白,
  • 将重复的内联样式移动到CSS样式表,
  • 等等.

还有什么其他的?哪个提供最大的降压还是可以通过工具或模块自动执行?

15
Chris W. Rea

谷歌已经概述并解释了他们的最佳建议 最小化有效载荷大小 。它们包括以下技术:

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

这些建议是他们的开源Firefox/Firebug附加项目的一部分,名为 Page Speed 。类似于Yahoo!的 YSlow 插件。实际的Page Speed插件将检查比列表详细解释的更多优化。还提供了使用页面速度的说明。

雅虎的 加速你的网站的最佳实践 确定一组类似的最佳实践:

  1. 最小化HTTP请求
  2. 使用内容分发网络
  3. 添加Expires或Cache-Control标头
  4. Gzip组件
  5. 将样式表放在顶部
  6. 把脚本放在底部
  7. 避免使用CSS表达式
  8. 使JavaScript和CSS外部
  9. 减少DNS查找
  10. ...

(雅虎的名单长约35项,无需全部引​​用。)

YSlow (图像链接)和 页面速度 (图像链接)将允许您在您的页面上运行测试,建议您可以做的事情并向您展示他们的建议,已经实施。

5
Bryson

有人会说标记应该是Gzip,所以我也可能是那个。

这里有一个很长的解释 Gzip 关于如何设置它的链接 ApacheIIS

一个 WebReference上的文章 声明在使用mod_gzip Apache模块时你会发现以下性能提升。

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

18
jessegavin

这可能不值得。

我已经 用HTML删除空格 一点点,并且在gzipping之后只看到10%的有效载荷减少。

实际上,空格和换行符正在进行压缩将为我们做的工作。我们只是增加了一点人工辅助效率:

 Raw Compressed 
未经优化的CSS 2,299字节671字节
优化的CSS 1,758字节615字节

(是的,这说的是CSS,但同样的基本规则也适用于HTML)

问题是,

  1. GZIP正在为您完成90%的工作,因此这是一项疯狂的微优化。我的意思是,也许你是谷歌或雅虎。
  2. 在“视图源”中完全不可读的HTML相当陡峭的成本增加了10%的额外尺寸
10
Jeff Atwood

好的,一个小的:保持标签名称和属性小写和一致(顺便说一下,作为标准的要求)。它会将压缩比提高一两个百分点。

6
Thomas Bonini

如果您是一个非常高容量的站点,您可能需要考虑使用超短实体ID和类名,因为这些会减少HTML页面和用于设置样式的CSS页面的大小。

另外,要注意过度结构化的网站构成;当它们不是真正需要时,很容易添加div和span部分。您可能还需要考虑诸如分页大结果集和类似输出之类的策略。

实际上,对于与Google不在同一流量类别的网站,这些优化的回报非常有限(对于分页策略,潜在的SEO缺点)是值得的。只需按照 jessegavin的推荐 启用GZip/Deflate压缩并完成它。

4
JasonBirch

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

有关组合图像的更多信息,请参阅 http://css-tricks.com/css-sprites

另外,从Google查看 Closure Compiler 。我没有使用它,但它声称使javascript下载和运行更快。

3
mcrumley

正如其他人所说,最大的好处来自于gzipping。

确保使用适当的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>
3
DisgruntledGoat

如果您使用的是ASP.NET网站,请注意 ViewState 。它可以在页面中生成非常大的隐藏字段,在没有必要的情况下经常重载(我已经发现ViewState比页面的其余部分更重)。
如果您使用AJAX,尤其如此,因为ViewState会随着每个请求来回发送,从而减慢您的网站速度并增加流量。

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

2
Julien N

其他人已经说过了,但他们只是没有把这一点夯到家里:gzipping。

  1. 几乎没有努力或缺点。
  2. 在我有限的经验中,将HTML大小减少了60%到90%。

您可以对HTML进行的所有其他调整需要更多的努力/维护,与仅仅进行gzipping和遗忘相比几乎没有任何影响。除非你是谷歌,否则他们根本不值得花时间。你不是谷歌。

(正如其他人提到的那样,你的HTML越一致,gzipping的效果就越大,因为 - 根据我的有限理解 - gzipping在你的文件中查找相同的字符串,并用一个很小的代码替换每个重复的实例。因此,创作实践,例如保持属性的顺序相同,并保持所有外壳相同,可以帮助gzipping完成它的工作。)

哦 - 如果您在构建/服务过程中的某个时刻自动缩小HTML,则不需要太多的努力/维护。这里列出了一些HTML缩小器:

https://stackoverflow.com/questions/728260/html-minification

1
Paul D. Waite

有一堆 免费的网页性能分析和优化工具 。您可以从他们生成的报告中编译自己的大检查列表。

以下是Zoompf绩效评估中的几个转述点 -

  • 避免动态生成的内容(图像)。请考虑将图像作为静态图像文件脱机绘制或调整大小。
  • 避免使用没有尺寸的图像标签。
  • Google Analytics(&Ads)支持异步加载其JavaScript文件。如果你使用它们,你可以选择异步加载它们。
1
mvark

一个经常被忽视的策略是从页面中删除所有不必要的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/en/blog/20090218/performance-and-rfc-2396/

  • 对于像<br>这样的标签,您可以简单地省略XHTML语法中使用的斜杠(<br />),除非您确实需要使用XHTML。

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

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

html5doctor.com/html-5-boilerplates/

1
dzollman