HTML - 减少字节大小

Question

我正在使用PageSpeed Insights工具测试网站速度。

在结果页面中，其中一个警告建议我减少 css ， html 和 js 文件的字节大小。
在第一次我试图删除评论，但没有任何改变 我怎么能这样做？
我应该删除空格和标签吗？ 这似乎是一个非常漫长的操作，值得吗？

Answer 1

删除空格，制表符和无用字符的操作称为缩小 您不需要这样做，有很多服务可以为您最小化文件。 例如： http://www.willpeavy.com/minifier/

如果你有jquery代码，请注意：有时它会删除错误位置的空格。

Answer 2

要减少页面大小，您有两件事要做：

• 缩小CSS＆amp; JS文件

在服务器端，如果您通过Apache运行您的网站，您可以安装APC，用于页面记录。你会有更好的表现

• APC

Answer 3

编辑，经过进一步测试并纳入以下评论中讨论的问题：

PageSpeed Insights是一款完全非常业余的工具，与缩小代码相比，有更多有效的方法可以加快渲染时间。

PageSpeed Insights是一个非常业余的工具，作为标准建议减少HTML，CSS和JS文件大小，如果不缩小的话。 Pingdom Website Speed Test是一个更好，更好的工具。这将渲染速度与要求测试的站点的平均值进行比较，并给出站点组件的下载时间。

在两者上测试www.gezondezorg.org，看看测试结果的巨大差异。谷歌工具是错误的。它建议减少CSS和JS文件，而它自己的数字（点击相应的标题）表明，这样做将分别减少3.8和7.9 kB的大小。这归结为不到1毫秒的下载时间差异！ （1毫秒= 1/1000秒;推测宽带互联网）。

此外，它说我确实做了一件好事：启用缓存。这也是BS，因为我的.htaccess文件告诉浏览器在每次访问时检查新更新的文件，并在更新时刷新缓存的文件。测试证实所有浏览器都注意到该命令。

此外，该网站不打算在手机上查看。对此有太多的文字。尽管如此，PageSpeed Insights仍会根据手机标准进行测试结果。

加快渲染速度的更有效方法
因此，缩小几乎不会加速渲染时间。这是做什么的：

• 尽可能将CSS代码和Javascripts放在一个文件中。这节省了浏览器到服务器（BTS）的请求。 （请记住，相当多的Javascripts需要首先完全加载DOM，所以在实践中，它归结为尽可能地将脚本放在2个文件中：前置文件和后置文件。）< / LI>
• 针对网络优化大图像。 Photoshop等等甚至还有一个特殊的功能，减少文件大小，同时保持足够的质量，以便在网络上使用。
• 如果图像充当容器的全尺寸背景：使用图像精灵。这也节省了BTS请求。
• 对HTML和JS文件进行编码，以便不对来自外部域的文件进行渲染依赖，例如来自Twitter，Facebook，Google Analytics，广告代理等。
• 确保网络主机能够快速响应，具有足够的处理能力，并且具有（几乎）100％的正常运行时间。
• 尽可能使用vanilla / native JS。仅将jQuery或其他库用于过于困难或过于耗时的任务。 jQuery不仅是一个需要下载的额外文件，它的处理速度也比原生JS慢。

最后，您应该意识到：

• 让服务器动态缩小代码通常会导致服务器响应慢得多;
• 缩小代码会使其无法读取;
• 去除工具因其糟糕的表现而臭名昭着。

Answer 4

除了上面的CSS minifier / prettifier工具，我建议使用proCSSor来优化CSS文件。它提供了各种高级选项。

Answer 5

除了提供可能放慢速度的提示之外，从未发现这些工具有多大用处。缩小不太可能取得多大成就。如果您想加快网站速度，请保存页面并查看最大的文件。通常它们将是图像文件而不是代码，看看你是否可以减少它们。

另外，尝试在两台服务器上测试它 - 主机是否慢？

如果您的html文件很大，这表明该网站的结构存在问题 - 页面很少需要很大。

最后，大型javascript文件最有可能是像jquery这样的东西。如果Google托管这些内容，请使用托管版本。这样，它可能已经存在于用户的缓存中，并且不会影响您的加载时间。

Answer 6

缩小资源是指消除不必要的字节，例如额外的空格，换行符和缩进。压缩HTML，CSS和JavaScript可以加快下载，解析和执行时间。此外，对于CSS和JavaScript，只要HTML被适当更新以确保选择器继续工作，就可以通过重命名变量名来进一步减小文件大小。

你可以找到很多用于此目的的在线工具，其中一些在下面。

HTML Minify
CSS Minify
JS Minify

祝你好运！