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

　　日期：2009.12.06分类：网站制作标签：google,优化网页加载速度,网站优化,网站优化工具,网页优化<iframeid="google_ads_frame1"style="left:0px;position:absolute;top:0px"name="google_ads_frame"marginwidth="0"marginheight="0"src="abcdgoogleads.g.doubleclick.net/pagead/ads?client=ca-pub-8224895832055171&format=300x250_as&output=html&h=250&w=300&lmt=1260648646&channel=6574597791&ad_type=text&alt_color=ffffff&color_bg=ffffff&color_border=ffffff&color_link=f47a0e&color_text=555555&color_url=888888&flash=9.0.124.0&url=http%3a%2f%2fabcdfendou.info%2fweb-design%2foptimize-speed-of-the-webpage-load.html&ui=rc%3a0&dt=1260648646362&correlator=1260648646362&frm=0&ga_vid=210091258.1260647362&ga_sid=1260647362&ga_hid=737830672&ga_fc=1&u_tz=480&u_his=1&u_java=1&u_h=768&u_w=1024&u_ah=710&u_aw=1024&u_cd=32&u_nplug=0&u_nmime=0&biw=1008&bih=597&ref=http%3a%2f%2fabcdfendou.info%2fweb-design%2fmulticolr-for-design-webpage.html&fu=0&ifi=1&dtd=110&xpc=sbo4tbxmvl&p=http%3a//abcdfendou.info"frameborder="0"width="300"scrolling="no"height="250"allowtransparency="allowtransparency">

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

　　那么网页优化从哪里开始呢？对于所有与网页优化相关的任务，必须使用网站优化工具来诊断瓶颈和识别问题。现在在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）。

　　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="abcdblog.soso.com/qz.q/#"title="link1″><span>link1</span></a></li>

　　<li><ahref="abcdblog.soso.com/qz.q/#"title="link2″><span>link2</span></a></li>

　　<li><ahref="abcdblog.soso.com/qz.q/#"title="link3″><span>link3</span></a></li>

　　<li><ahref="abcdblog.soso.com/qz.q/#"title="longerlinktext"><span>longerlinktext</span></a></li>

　　<li><ahref="abcdblog.soso.com/qz.q/#"title="link5″><span>link5</span></a></li>

　　</ul>

　　</div>

　　4.检查cookie使用情况

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

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

　　<?php

　　$expire=2592000+time();

　　//add30daystothecurrenttime

　　setcookie(userid,"123rrw3",$expire);

　　?>

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

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

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

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

　　<linkhref="abcdblog.soso.com/stylesheets/mystyle.css"media="all"rel="stylesheet"type="text/css"/>

　　<scriptsrc="abcdblog.soso.com/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>

　　expiresactivetype="text/css"href="abcdblog.soso.com/body.css"/>

　　<linkrel="stylesheet"type="text/css"href="abcdblog.soso.com/side.css"/>

　　<linkrel="stylesheet"type="text/css"href="abcdblog.soso.com/footer.css"/>

　　我们可以将其合成一个：

　　<linkrel="stylesheet"type="text/css"href="abcdblog.soso.com/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="abcdblog.soso.com/qz.q/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这样的工具的价值是无法衡量的，尽管其站点宣称它"可能令您备受挫折"，因为它向您提供了所有的潜在代码缺陷，这些缺陷不但使调试更加困难，而且可能导致更长的响应时间。