加快网页下载速度的十种方法

为什么下载速度如此重要？

你喜欢等待页面下载吗？你的网站用户也不喜欢。请继续阅读……

1. 使用CSS来布局你的页面，而不是表格

CSS下载速度比表格快，因为

• 浏览器在显示表格内容之前会阅读两次，一次是为了确定表格结构，一次是为了确定表格内容。
• 表格一次性显示在屏幕上——直到表格的全部内容下载并渲染完毕，表格的任何部分都不会显示出来。
• 表格会鼓励使用占位符图像来帮助定位。
• CSS通常比笨重的表格需要更少的代码。
• 所有与布局相关的代码都可以放在外部CSS文件中，该文件只需被调用一次，然后就可以在用户计算机上缓存（存储）；而表格布局则存储在每个HTML文件中，每次新页面下载时都必须重新加载。
• 有了CSS你可以控制项目在屏幕上下载的顺序——让内容在加载慢的图像之前出现，你的网站用户一定会对此表示赞赏。

要了解更多关于CSS以及它能为你的网站带来的惊人功能，请查看HTML Dog上出色的教程。

2. 不要使用图像来显示文本

又是我们老朋友CSS再次出现。没有必要使用图像来显示文本，因为通过CSS可以实现很多功能。看看这段代码：

a:link.example, a:visited.example, a:active.example 
{ 
color:#fff; 
background:#f90; 
font-size:1.2em; 
font-weight:bold; 
text-decoration:none; 
padding:0.2em; 
border:4px #00f outset 
} 

a:hover.example 
} 
color:#fff; 
background:#fa1; 
font-size:1.2em; 
font-weight:bold; 
text-decoration:none; 
padding:0.2em; 
border:4px #00f inset 
} 

这将给你一个非常简单的按钮，当你鼠标悬停在其上时，它会显示为被按下——如果你想看看它的效果，请点击这里。要了解你可以在多大程度上扩展这个概念，请查看A List Apart上的文章。CSS文章。

3. 通过CSS

调用装饰性图像CSS可以将图像作为背景的一部分呈现，通过HTMLcode

<div class="pretty-image"></div>

还有这个CSS:

.pretty-image 
{ 
background: url(filename.gif); 
width: 200px; 
height: 100px 
}

调用。如果你有一个200px x 100px的图像，你可以使用以下

这起初可能看起来有点多余，但这项技术可以真正提高你网页的下载速度。浏览器基本上会在下载完所有其他内容后才下载背景图像。通过使用这项技术，你的文本将即时加载，你的网站用户可以在页面上自由浏览，而你的50kb的精美图像正在下载。HTML这项技术会禁用ALT属性，所以如果你真的想有一个，就用下面的

<image src="spacer.gif" class="pretty-image" alt="description" />

代码替换上面的

代码。Spacer.gif 是一个1px x 1px的透明图像。现在你有一个50字节的透明图像并且主内容先加载，你的大装饰图像，带有ALT文本，随后加载。完美。CSS请注意，此技术仅适用于装饰性图像，不适用于信息性图像。任何禁用了CSS的用户将无法看到你

——嵌入的图像（或它们的替代文本）。

4. 使用上下文选择器

<p class="text">This is a sentence</p>
<p class="text">This is another sentence</p>
<p class="text">This is yet another sentence</p>
<p class="text">This is one more sentence</p>

.text
{
color: #03c;
font-size: 2em
} 

这样效率低下

<div class="text">
<p>This is a sentence</p>
<p>This is another sentence</p>
<p>This is yet another sentence</p>
<p>This is one more sentence</p>
</div>

.text p
{
color: #03c;
font-size:2em
}

我们不必为每个段落单独分配一个值，而是可以将它们嵌套在<div>标签中，并为该标签分配一个值。CSS第二个

示例基本上表示，class="text"中的每个段落都应被赋予颜色值#03c和字体大小2em。

乍一看这似乎并不重要，但如果你能在整个文档中正确应用它，你可以轻松地减少20%的文件大小。

你可能已经注意到颜色值比平常短。#03c是#0033cc的缩写版本——你可以通过以下方式将此缩写值分配给任何颜色值。

字体

用途

font: 1em/1.5em bold italic serif

...而不是

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

Border

用途

border: 1px black solid

...而不是

border-width: 1px;
border-color: black;
border-style: solid 

背景

用途

background: #fff url(image.gif) no-repeat top left

...而不是

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

5. 使用CSS简写属性

用途

margin: 2px 1px 3px 4px (top, right, bottom, left)

...而不是

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-right: 4px

用途

margin: 5em 1em 3em (top, left and right, bottom)

...而不是

margin-top: 5em;
margin-bottom: 1em;
margin-right: 1em;
margin-right: 4em

用途

margin: 5% 1% (top and bottom, left and right)

...而不是

margin-top: 5%;
margin-bottom: 5%;
margin-right: 1%;
margin-right: 1%

外边距、内边距、边框

这些规则可以应用于margin、border和padding。

6. 最小化空白、换行符和注释标签HTML你HTML代码中的每一个字母或空格都占用一字节。听起来不多，但积少成多。我们发现，通过检查你的页面源代码并消除不必要的空白和注释，你可以将文件大小削减最多10%，甚至更多（如果你的

真的效率低下）。

7. 使用相对调用

• 尽量避免绝对调用，因为它们占用更多空间。绝对调用的例子是：<a href="http://www.URL.com/filename.htm">。更好的选择是<a href="filename.htm">。但如果某些文件与其他文件在不同的文件夹中怎么办？使用这些简写属性：
• <a href="/">——调用 http://www.URL.com
• <a href="/filename.html">——调用 http://www.URL.com/filename.html
• <a href="/directory/filename.html">——调用 http://www.URL.com/directory/filename.html
• <a href="./">——调用该目录下的index.html
• <a href="../">——调用上一级的index.html
• <a href="../filename.html">——调用上一级的filename.html

<a href="../../">——调用上两级的index.html

8. 删除不必要的META标签和META内容

大多数META标签几乎都是不必要的，而且作用不大。如果你感兴趣，可以查看可用的META标签列表。对于搜索引擎优化最重要的标签是关键词和描述标签，尽管由于滥用，它们的重要性在最近已经大大降低。使用这些META标签时，尽量将每个标签的内容保持在200个字符以内——超过这个长度会增加页面大小。冗长的META标签对搜索引擎也不好，因为它们会稀释你的关键词。CSS9. 将

和JavaScript放入外部文档CSS要将

<link type="text/css" rel="stylesheet" href="filename.css"/>

放入外部文档，请使用

<script language="JavaScript" src="filename.js" type="text/javascript">
</script>

要将JavaScript放入外部文档，请使用CSS任何外部文件都只需调用一次，然后就可以在用户计算机上缓存（存储）。与其在HTML文件中一遍又一遍地重复JavaScript或

，不如一次性在一个外部文档中写出来。CSS而且请记住，这些外部文档的数量没有限制！例如，与其制作一个巨大的

文档，不如有一个主文档以及一些特定于你网站某些区域的文档。

10. 在目录链接末尾使用斜杠“/”

<a href="http://www.URL.com/directoryname">

不要这样做

<a href="http://www.URL.com/directoryname/">

这样做URL为什么？如果URL末尾没有斜杠，服务器就不知道这个链接是指向一个文件还是一个目录。通过添加斜杠，服务器会立即知道URL指向的是一个目录，而无需花费时间去尝试判断。