我能做些什么来减少HTML页面的加载时间？
注意 ：这是一个社区wiki文章
为尽可能地提高用户体验，我能做些什么来使HTML页面的加载更有效率？
处理页面性能时，有几个重要的方法可以快速保持页面加载时间。
CSS组织
尽量减少内联CSS样式，并将外部样式表中常用的CSS规则保留在一起。 这有助于以后保留可重用的样式，缺少样式属性会使您的HTML页面下载更快。
缩小
由于您的CSS和Javascript包含必须从您的服务器下载到客户端，因此小一些总是更好。 雅虎有一个叫做YUI Compressor的很棒的工具，它可以用来减少你的CSS和JavaScript包含的大小。 流行的库如JQuery也将提供它们的库的缩小版和开发版。 只记得为了调试目的保留非缩小版本的副本！
图像压缩
您可能需要考虑压缩图像。 对于JPG文件，请尝试设置大约80％的压缩率，并查看结果的外观。 你可以玩水平直到你得到一个体面的结果。 对于PNG文件，您可能需要查看一些可用的PNG压缩工具。
CSS精灵
保存HTTP请求的一个有趣策略是使用CSS Sprites。 基本理论不是下载多个图像，只需下载一张包含所有图像的大图像。 这意味着浏览器只需要提出一个请求，而不是连续请求图像文件。 教程CSS Sprites：它们是什么，为什么它们很酷，以及如何使用它们具有关于该过程的一些很好的信息，包括如何从现有的多图像布局进行转换。
资源订购
当谈到订购你的CSS和Javascript时，你希望你的CSS先来。 原因是渲染线程具有渲染页面所需的所有样式信息。 如果Javascript包含第一，JavaScript引擎必须在继续下一组资源之前解析它。 这意味着渲染线程无法完全显示页面，因为它没有它需要的所有样式。 这里是一个例子：
<link rel="stylesheet" type="text/css" href="/css/global.css" />
<link rel="stylesheet" type="text/css" href="/css/forms.css" />
<script type="text/javascript" src="/js/formvalidation.js"></script>
跟踪/加盟脚本位置
许多网站使用跟踪和/或附属脚本。 如果远程主机存在问题，并且脚本包含在<head>标记中，那么浏览器必须等待下载才能进行。 虽然这样的事情不错，但它们不应该减慢用户体验。 建议将这些脚本移动到页面底部的</body>标记之前：
<!-- HTML Here -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
缺少资产
缺少CSS和JavaScript文件意味着浏览器必须与服务器进行不必要的通信才能获取不存在的文件。 根据服务器的位置和丢失的文件数量，这可能会加慢页面加载速度。
缩小您的HTML源代码，CSS源代码和JS源代码。 Gzip如果可能的话。
http://code.google.com/p/htmlcompressor/
对于JavaScript，请尝试：http://code.google.com/closure/compiler/
首先，您应该使用诸如YSlow（可用的Firefox和Chrome扩展）或Googe Page Speed Online等工具。 我确信还有其他人。 这些工具将在不同领域对网站性能进行评分，并提供如何改进它们的提示。
在使用这些工具一段时间后，您将开始改变构建页面的方式并考虑这些额外的步骤。
您还可以查看JavaScript文件的异步脚本加载器。 一个流行的是head.js. 在Google上进行搜索应该会为您提供更多更深入的技术文章，例如此类。
链接地址: http://www.djcxy.com/p/41515.html