优化网页加载速度技巧及网站优化工

　　优化网页加载速度技巧是每个站长都应该掌握的，网页加载速度的快慢直接影响网站的流量和搜索引擎的排名。那么如何有效的优化网页的加载速度呢？下面介绍几种实用的优化网页加载速度技巧及网站优化工具。合理利用这些优化技巧和网站优化工具可以大大缩短网页加载的时间改善用户的浏览体验。

　　那么网页优化从哪里开始呢？对于所有与网页优化相关的任务，必须使用网站优化工具来诊断瓶颈和识别问题。现在在web开发中使用最广泛的两个工具是firebug和yslow(whyslow)它们都是开源免费的firefox插件。在学习网页优化之前请先安装 firefox浏览器吧！如果你想要的优化不是传统意义简单对网页的优化，那么也可以使用谷歌google网站优化工具，使用该工具，无需投入任何费用就可以提高现有网站的价值和点击量。通过使用网站优化工具对网站内容和设计进行测试和优化，不管您是营销新手还是专家，都可以轻松快捷地增加收入和投资回报率。

　　firebug

　　firebug是最流行的firefox扩展之一，该应用程序能够使web开发人员的工作更加轻松。它包含许多非常有用的功能，比如：

　　javascript调试

　　javascript命令行

　　监视javascript性能和跟踪xmlhttprequests

　　登录firebug控制台

　　跟踪

　　检查html元素和动态编辑html代码

　　动态编辑css文档

　　安装firebug

　　两个firefox扩展的安装过程都非常简单。要安装firebug，执行以下步骤：

　　1.打开firefox，转到 firebug 主页。

　　2.安装最新版的firebug。

　　3.如果firefox配置为阻止弹出窗口，单击allow允许打开安装窗口。否则，单击installnow。

　　4.重启firefox。

　　您现在可以从tools菜单访问firebug。可以在新窗口或现有窗口中打开firebug（参见图1）。

　　图1

　　yslow

　　yslow分析网页，并根据yahoo!起草的高性能网站规则，告诉您网页加载缓慢的原因。yslow是一个与firebug集成的firefox插件，因此您需要首先安装firebug，然后才能安装和使用yslow。

　　安装yslow

　　安装firebug之后，接下来安装yslow。为此，执行以下步骤：

　　1.打开firefox，然后转到yslow主页。

　　2.安装插件，然后重启firefox。

　　注意：与许多其他firefox扩展不同，yslow不会自动启动。必须首先激活它。

　　3.要激活yslow，在状态栏右键单击其图标，然后单击autorun。

　　图2显示了yslow性能分析的结果。

　　图2

　　常识：牢记设计规则令人惊讶的是简单的设计规则通常会被忽视，最终产生未经优化的、下载缓慢的网页。牢记以下规则，页面的加载速度将会更快。

　　1.使用良好的结构

　　可扩展html(xhtml)具有许多优势，但是其缺点也很明显。xhtml可能使您的页面更加符合标准，但是它大量使用标记（强制性的<start>和<end>标记），这意味着浏览器要下载更多代码。所以，事情都有两面性，尝试在您的网页中使用较少的xhtml代码，以减小页面大小。

　　如果您确实不得不使用xhtml，试着尽可能对它进行优化。例如，删除空格并采用严格的xhtml编码实践，提高下载和解析速度。要严格执行xhtmlstrict规则，向文档中添加以下doctype语句：

　　<!doctypehtmlpublic“-//w3c//dtdxhtml1.0strict//en”

　　“abcdw3.org/tr/xhtml1/dtd/xhtml1-strict.dtd”>

　　xhtml1.0strict与stricthtml4.01是等效的，包含的属性和元素没有出现在html4.01规范的反对内容中。记住，有两个标记能够在xhtmltransitional中使用，但不能在xhtmlstrict中使用，例如：

　　<center>

　　<font>

　　<iframe>

　　<strike>

　　<u>

　　2.不要使布局超载

　　在博客（和新的站点）流行起来之前，让页面水平滚动甚至垂直滚动被认为是糟糕的实践。页面越小，越难以（但并不是不可能）完好地填充屏幕。现在，对于博客和内容驱动的网站，不时可以看到几百kb大小的长页面。是的，您需要填充更多空间，但是这并不意味着您必须使用大的背景图像、大量表格或者许多内容来填充。坚持简约原则：少即是多。页面中充斥着各种类型的图像、视频、广告等，这大大违背实用性原则，因此，在增加页面的内容时请三思。

　　3不要使用图像来表示文本

　　我们很少会控制字体在不同浏览器中的显示方式，与字体不同的是，图像总是精确地按照其设计方式来显示。但这不能当作使用图像来表示文本的借口。

　　使用图像表示文本的最常见示例就是在导航栏中。美观的按钮更加具有吸引力，但是它们的加载速度很慢。此外，图像仍然不能由搜索引擎直接索引，因此，使用图像进行导航不利于搜索引擎优化（searchengineoptimization，seo）。当无需图像就可以通过大量css技巧创建漂亮的按钮时，绝不使用图像来表示文本。

　　一种适用于css样式的特定导航类型就是选项卡式导航，如图3所示。

　　图3.选项卡式导航

　　除了体积较小之外，这种实现导航的方式也更加符合web标准。

　　遵循统称为web标准的一组最佳实践的网站具有精简性、可访问性、搜索引擎友好性、适用性和基于css的特征。

　　清单1和清单2中的代码以纯css/xhtml的形式实现基于选项卡的导航功能。

　　清单1.基于选项卡导航的css文档

　　#nav{

　　float:left;

　　width:100%;

　　background:#e7e5e2;

　　font-size:95%;

　　line-height:normal;

　　border-bottom:1pxsolid#54545c;

　　}

　　#navul{

　　margin:0;

　　padding:10px10px050px;

　　list-style:none;

　　}

　　#navli{

　　display:inline;

　　margin:0;

　　padding:0;

　　}

　　#nava{

　　float:left;

　　background:url(“tableftk.gif”)no-repeatlefttop;

　　margin:0;

　　padding:0004px;

　　text-decoration:none;

　　}

　　#navaspan{

　　float:left;

　　display:block;

　　background:url(“tabrightk.gif”)no-repeatrighttop;

　　padding:5px15px4px6px;

　　color:#fff;

　　}

　　/commentedbackslashhackhidesrulefromie5-mac\/

　　#navaspan{float:none;}

　　/endie5-machack/

　　#nava:hoverspan{

　　color:#fff;

　　background-position:100%-42px;

　　}

　　#nava:hover{

　　background-position:0%-42px;

　　}

　　#nava:hoverspan{

　　background-position:100%-42px;

　　}

　　清单2.基于选项卡导航的html代码

　　<divid=”nav”>

　　<ul>

　　<li><ahref=”#”title=”link1″><span>link1</li>

　　<li><ahref=”#”title=”link2″><span>link2

　　</li>

　　<li><ahref=”#”title=”link3″><span>link3</li>

　　<li><ahref=”#”title=”longerlinktext”><span>longerlinktext</li>

　　<li><ahref=”#”title=”link5″><span>link5</li>

　　</ul>

　　</div>4.检查cookie使用情况

　　cookie可能是很小的文件，但是浏览器仍然需要下载它们。较大的cookie所需的下载时间更长，进而增加了浏览器加载网页的时间。正因为如此，尽可能缩小cookie来最小化对浏览器响应时间的影响非常重要。

　　此外，设置一个较早的expire日期或者根本不设置expire日期，会缩短响应时间。要在php语言中设置cookie的expire日期，使用以下代码：

　　<?php

　　$expire=2592000+time();

　　//add30day’stothecurrenttime

　　setcookie(userid,“123rrw3”,$expire);

　　?>

　　这段代码设置cookieuserid，并将expire日期设置为自当前日期之后30天。

　　5.不要包含不必要的javascript代码，尽可能将其外部化

　　与cookie类似，javascript文件的下载也需要时间，这不可避免地会降低整个页面的加载速度。因此，明智地使用javascript（仅在真正必要时才使用）并优化脚本的大小和速度。

　　缩短javascript下载时间的另一种方式是使用外部文件，而不是包含脚本内联。这种方法也适用于css，因为浏览器会缓存外部化的文本，而（在html页面自身中）以内联方式编码的css或javascript每次都会随html一起加载。要通过在html中引用css和javascript代码来外部化它们，可以使用具有以下形式的代码：

　　<linkhref=”/stylesheets/mystyle.css”media=”all”rel=”stylesheet”type=”text/css”/>

　　<scriptsrc=”/javascripts/myjavascript.js”type=”text/javascript”></script>

　　6.尽可能避免使用表格

　　表格被用作网页的主要构建块，但是作为页面布局元素，使用表格现在被认为是糟糕的做法。有时候，您必须使用表格（并且它们被认为是显示表格数据的出色实践）。如果是这样，明确地指定表格单元格、行和列的宽度和高度，否则，浏览器必须执行许多操作来计算如何显示它们，这会降低页面加载速度：

　　<tdwidth=”50px”height=”10px”>…</td>

　　7.删除任何不必要的元素

　　可能这是所有技巧中最显而易见的一个，但是它也是最容易忘记的一个技巧。我曾经提到过“少即是多”：这不仅是为了真正吸引更广泛的用户，还意味着需要下载和处理的东西更少。如果您真正需要在网页上放置许多内容，考虑将网页分为2个、3个或更多的独立页面。

　　优化网页加载速度技巧可以使用许多方法来优化您的网页，包括压缩javascript文件，使用超文本传输协议（hypertexttransferprotocol，http）压缩，以及设置图像大小。

　　1.压缩和缩小javascript文件

　　javascript文件可能非常大，这意味着在某些情形中，它们的下载时间可能比所有其他组件下载时间之和还长。解决此问题的一种方法是压缩javascript文件。您可以使用gnuzip(gzip)来完成此任务，因为许多浏览器都支持这种压缩算法。

　　另一种替代方法是缩小文件。这种方法删除代码中所有不必要的字符，比如制表符（tab）、新行和空格。它删除代码中的注释和空白，进一步缩小文件大小。外部和内部样式表都可以缩小。两种最流行的缩小工具是jsmin和yuicompressor。

　　2.使用http压缩，并始终使用小写的div和类名

　　可以使用http压缩来减少服务器与浏览器之间的通信量。可以在apache中配置http压缩（.htaccess文件）

　　<ifmodulemod_expires.c>

　　expiresactiveon

　　expiresdefaulta600

　　expiresbytypeimage/x-icona2592000

　　expiresbytypeapplication/x-javascripta2592000

　　expiresbytypetext/cssa604800

　　expiresbytypeimage/gifa2592000

　　expiresbytypeimage/pnga2592000

　　expiresbytypeimage/jpega2592000

　　expiresbytypetext/plaina86400

　　expiresbytypeapplication/x-shockwave-flasha2592000

　　expiresbytypevideo/x-flva2592000

　　expiresbytypeapplication/pdfa2592000

　　expiresbytypetext/htmla600

　　</ifmodule>

　　text/css之类代表文件类型，a2592000表示在浏览器中的缓存时间，2592000秒=30天

　　或者可以将其包含到页面中（对于php，可以使用一个http_accept_encoding选项）。但是请注意：不是所有浏览器都支持压缩。即使是支持压缩的浏览器，压缩和解压缩都会加重处理器的负载。要在apache中启用地毯式（blanket）压缩（即压缩所有文本和html），使用以下命令：

　　addoutputfilterbytypedeflatetext/htmltext/plaintext/xml

　　另外，考虑一下您想要压缩的内容。图像、音乐和视频在创建时已经进行了压缩，因此您可以将压缩对象限制为html、css和javascript文件。

　　另一种减少压缩工作的技巧是使用小写形式的<div>元素和类名。由于大小写敏感性，并且使用的是无损压缩，<header>与<header>不同，它们被压缩为两个不同的标记。在下面的例子中，对于压缩程序来说，important类与important类是不同的，这意味着对于压缩程序，它们表示不同的对象，因此被分别压缩为两段不同的文本。

　　<div>readthis!</div>

　　<div>thiswillcostyousomevaluableloadtime</div>

　　留意细节似乎无关紧要。但是当您优化文件时，所有细微的细节都应考虑在内。

　　3.设置图像大小

　　与表格单元格、行和列一样，当您未明确设置图像大小时，浏览器需要执行计算来显示图像，这会降低处理速度。此外，在某些情形下，图像大小的计算结果可能不正确，因此图像会发生变形。

　　4.将css图像映射用于装饰功能

　　使用图像映射代替多个图像，这是另一种缩短加载时间的方式，因为同时下载图像的各个独立部分能够加快整个页面的下载进度。或者，您可以使用某种名为csssprites的工具（参见参考资料）。csssprites可帮助减少http请求的数量。一个图像可以包含装饰或布置页面所需的所有图像元素。您使用css来选择（通过调用某些位置和维度）用于特定元素的映射。

　　5.尽可能延迟脚本加载

　　在前面提到过，移除完全不需要的javascript代码能够加快加载和处理速度。但是如果代码已经非常精简并且必须在页面中包含javascript代码的话，该怎么办？

　　在这种情形下，一种提升页面下载速度的潜在方式是将脚本放在页面的底部，使页面加载更迅速。通常，浏览器只能（从同一个域）下载不超过两个并行对象，如果一个对象是一段javascript代码，那么在该脚本下载完之前，其他页面组件的下载将会暂停。如果将javascript代码放在页面底部，（在大多数情况下）它将在最后下载，这时所有其他组件都已下载完。

　　使用firebug扩展跟踪加载缓慢的文件，你的javascript文件是下载最慢的文件。压缩javascript文件会有所帮助，但是仅仅这样可能还不够。你可以使用以下代码片段延迟javascript的加载：

　　vardelay=5;

　　settimeout(“heavy();”,delay1000);

　　这段代码将对heavy()方法的调用延迟了5秒。您可以将这段代码与下面的技巧结合使用来延迟整个javascript文件的加载。

　　6.按需加载javascript文件

　　要按需加载javascript，使用import()函数，如清单3所示。

　　清单3.import()函数

　　function$import(src){

　　varscriptelem=document.createelement(’script’);

　　scriptelem.setattribute(’src’,src);

　　scriptelem.setattribute(‘type’,text/javascript’);

　　document.getelementsbytagname(‘head’)[0].appendchild(scriptelem);

　　}

　　//importwitharandomqueryparametertoavoidcaching

　　function$importnocache(src){

　　varms=newdate().gettime().tostring();

　　varseed=“?”+ms;

　　$import(src+seed);

　　}

　　7.验证函数加载

　　也可以验证一个函数是否被加载，如果没有，加载javascript文件。为此，使用清单4中的代码。

　　清单4.验证函数是否被加载

　　if(myfunction){

　　//thefunctionhasbeenloaded

　　}

　　else{//functionhasnotbeenloadedyet,soloadthejavascript.

　　$import(‘abcdyourfastsite.com/myfile.js’);

　　}

　　注意：可以使用defer属性，但不是所有浏览器（包括firefox）都支持它。

　　8.优化css文件

　　如果经过适当优化和维护，css文件不一定很大。例如，具有很多独立类的css文件会影响下载速度。与javascript文件一样，您需要优化css文件，使其包含所需的所有内容，同时保持合理的大小。另外，使用外部文件代替内联定义来适应浏览器的缓存机制。

　　1、去除一些不必要的对象。

　　2、将临近的两张图片合成一张。

　　3、合并css文件

　　看看下面这段代码，需要加载三个css文件：

　　<linkrel=”stylesheet”type=”text/css”href=”/body.css”/>

　　<linkrel=”stylesheet”type=”text/css”href=”/side.css”/>

　　<linkrel=”stylesheet”type=”text/css”href=”/footer.css”/>

　　我们可以将其合成一个：

　　<linkrel=”stylesheet”type=”text/css”href=”/style.css”/>

　　从而减少http请求。

　　9.使用内容分布网络

　　内容分布网络（content-distributionnetwork，cdn）是另一种缩短下载时间的好方法。当您将静态图像放在internet上的许多服务器上时，用户能够从离他们最近的服务器下载这些图像。此外，大多数cdn都在快速服务器上运行，因此无论服务器的加载速度如何，其响应速度都比小型的超载服务器快。

　　10.对资产使用多个域来增加连接

　　cdn的另一个优势是它们是独立的域。因为您的浏览器将并发连接的数量限制到一个单一的域，因此无论何时加载一个页面，都很容易占满所有线程。因此，到其他资产的连接被延迟了。然而，您的浏览器能够打开新线程或到其他域的连接，这样，从另一个域加载的任何资产都可以与其他所有资产同时加载。

　　11.在合适的时候使用googlegears

　　使用googlegears（参见参考资料）是避免用户反复下载同一内容的另一种好方法。gears允许用户离线访问web应用程序，但是也允许将页面元素持久化到用户的计算机上。因此，频繁加载但未进行更新的内容可以存储在gears数据库中，该数据库是一个sqlite3关系数据库管理系统。对同一内容的所有next请求都可以从数据库（而不是服务器）直接加载。

　　安装gears之后，获取gears_init.js文件，以便轻松访问gears工厂和应用程序编程接口（api），将其保存为gears_init.js，通过以下方式在您的代码中引用它：

　　<scripttype=”text/javascript”src=”gears_init.js”></script>

　　要确定是否已安装gears，使用清单5中的代码。

　　清单5.确定是否已安装gears

　　<script>

　　if(!window.google!google.gears){

　　location.href=“abcdgears.google.com/?action=install&message=<welcomemessage>”

　　+“&return=<returnurl>”;

　　}

　　</script>

　　如果未安装gears，代码将向您提供下载gears的url。

　　当所有元素都通过验证并且gears已安装之后，您可以测试gears的极其有用的数据库功能，使用清单6中的javascript代码。

　　清单6.测试数据库功能

　　<scripttype=”text/javascript”>

　　vardb=google.gears.factory.create(‘beta.db’);

　　db.open(‘database-test’);

　　db.execute(‘createtableifnotexiststest’+

　　‘(phrasetext,timestampint)’);

　　db.execute(‘insertintotestvalues(?,?)’,[monkey!,newdate().gettime()]);

　　varrs=db.execute(’selectfromtestorderbytimestampdesc’);

　　while(rs.isvalidrow()){

　　alert(rs.field(0)+‘@’+rs.field(1));

　　rs.next();

　　}

　　rs.close();

　　</script>

　　这段代码在您的计算机或服务器上创建一个本地数据库db。如果表test不存在，则创建一个，然后插入测试数据（monkey!和时间）。代码从数据库获取数据，并在浏览器中以警告的形式呈现出来。

　　想像一下可能发生的结果！

　　12.使用png格式的图像

　　graphicinterchangeformat(gif)和jointphotographicexpertsgroup(jpeg)图像格式都已过时了：portablenetworkgraphic(png)是未来流行的格式。当然，您可以说gif和jpeg已经消亡，或者png没有任何缺陷，但是所有事物都有各自的优缺点，png以最佳的文件大小提供了出色的质量。因此，如果进行选择的话，应该尽可能使用png图像。

　　13.保持ajax调用简短、准确

　　当统称为asynchronousjavascript+xml(ajax)的技术在两年前出现时，这些技术为处理页面请求和响应提供了一种革命性方法。然而，拨号用户可能从来没机会体验其真正的优势，因为在许多情形下，ajax需要在浏览器与服务器之间大量通信。因此，如果您能够保持ajax调用简短和准确，可以避免用户花费无止尽的时间来等待元素刷新或响应。

　　进行一次较大的ajax调用并在本地处理客户机数据

　　如果不能进行简短的ajax调用，或者如果这些调用不能提供期望的结果，可以考虑一种替代方法：进行一次大的ajax调用来获取所需的一切内容，然后让客户机在本地处理数据。通过这种方式，客户机只需等待一次（获取传入的数据），但是在此之后（当浏览器与服务器之间没有必要通信时），处理速度将更快。当然，还有大量ajax优化技术，本教程无法一一列出。如果想要了解关于ajax的更多信息，请查看参考资料。

　　14.在沙箱中测试代码

　　还有一个经常被遗忘的常用技巧。尽管清醒的web开发人员通常会在启动应用程序之前对其进行测试，但是有时候测试会使他们不那么重视维护任务，或者新功能添加得太快，并且未经过充分考虑或测试。结果，余下的脚本减缓了应用程序的速度。

　　如果您添加一项新功能，可以首先在沙箱里（完全脱离了应用程序的其余部分）进行测试，查看它作为单个函数的行为。通过这种方式，您可以反复检查，并分析性能和响应时间，无需考虑web应用程序的其余部分。然后，当新功能的行为符合预期时，可以将其引入到应用程序的其余部分中，运行其他测试，保证功能本身的行为符合预期。

　　15.分析站点代码

　　在许多场景中，自我反省是一个不错的建议。幸运的是，在开发过程中，我们可以使用工具来帮助反省，并尽可能客观地进行实践。像jslint这样的工具的价值是无法衡量的，尽管其站点宣称它“可能令您备受挫折”，因为它向您提供了所有的潜在代码缺陷，这些缺陷不但使调试更加困难，而且可能导致更长的响应时间。