CSS组织

尝试最小化内联CSS样式，并将常用的CSS规则保存在外部样式表中。这有助于保留可重用的样式以供日后使用，缺少样式属性可使您的HTML页面下载更快。

缩小

由于您的CSS和Javascript包含必须从您的服务器下载到客户端，因此较小的总是更好。雅虎有一个很棒的工具叫YUI Compressor，它可以用来减少CSS和JavaScript的大小。像JQuery这样的流行图书馆也将提供其图书馆的缩小版和开发版。请记住保留非缩小版本的副本以进行调试！

图像压缩

您可能需要考虑压缩图像。对于JPG文件，请尝试设置大约80％的压缩，并查看结果的外观。你可以玩水平，直到你得到一个体面的结果。对于PNG文件，您可能需要查看一些PNG compression tools available。

CSS Sprites

保存HTTP请求的一个有趣策略是使用CSS Sprites。基本理论不是下载多个图像，而是简单地下载一个大图像，其中包含所有图像。这意味着浏览器只需要发出一个请求，而不是连续请求图像文件。教程CSS Sprites: What They Are, Why They’re Cool, and How To Use Them提供了有关该过程的一些很好的信息，包括如何从现有的多图像布局进行转换。

资源订购

在订购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文件意味着浏览器必须不必要地与服务器通信以获取不存在的文件。根据服务器的位置和丢失的文件数量，可能会导致页面加载速度变慢。

Answer 2

缩小HTML源代码，CSS源代码和JS源代码。如果可能的话，请使用Gzip。

http://code.google.com/p/htmlcompressor/

对于JavaScript，请尝试：http://code.google.com/closure/compiler/

Answer 3

首先，您应该使用YSlow（可用的Firefox和Chrome扩展程序）或Googe Page Speed Online等工具。我确信还有其他人在那里。这些工具可以评估您的网站在不同领域的表现，并提供有关如何改进它们的提示。

使用这些工具一段时间之后，您将开始更改构建页面的方式并考虑这些额外步骤。

您还可以查看JavaScript文件的异步脚本加载器。一个受欢迎的是head.js.在Google上搜索应该会为您提供更多关于更深入技术的文章。

Answer 4

强制性参考。

Best Practices for Speeding Up Your Web Site

Answer 5

在头标记之后使用PHP的flush功能

<html>
<head>
</head>
<?php flush(); ?>
<body>
</body>
<html>

Answer 6

HTML5 boilerplate会毫不费力地帮助你。

我该怎么做才能减少HTML页面的加载时间？

6 个答案: