网页的加载速度是评估网站质量一个重要指标,原因在于大多数用户能够容忍的网页加载时间只有几秒,如果超出了访客的忍受范围他们会毫不留情地关掉你的网页,所以网页载入速度会极大地影响网站的流量和访问。
我们在访问一些网站时,总是感觉页面加载的速度不够快,这是什么原因导致的呢?作为网站的开发者又能做哪些网站优化来提高页面的加载速度呢?
以下马海祥博客总结了几种可以明显提高网站加载速度的初步简单技巧方式,如果你的网站存在载入速度慢的问题不妨以此为参考对网页做些初步优化。
1、使用良好的结构
可扩展 HTML (XHTML) 具有许多优势,但是其缺点也很明显。XHTML 可能使您的页面更加符合标准,但是它大量使用标记(强制性的 <start> 和 <end> 标记),这意味着浏览器要下载更多代码。
所以,事情都有两面性,尝试在您的网页中使用较少的XHTML代码,以减小页面大小。
如果您确实不得不使用XHTML,试着尽可能对它进行优化。
2、不要使布局超载
坚持简约原则:少即是多。页面中充斥着各种类型的图像、视频、广告等,这大大违背实用性原则(具体可查看马海祥博客《提高网站速度的6种网站前端优化方法》的相关介绍)。
3、不要使用图像来表示文本
使用图像表示文本的最常见示例就是在导航栏中,美观的按钮更加具有吸引力,但是它们的加载速度很慢。
此外,图像仍然不能由搜索引擎直接索引,因此,使用图像进行导航不利于搜索引擎优化,当无需图像就可以通过大量 CSS 技巧创建漂亮的按钮时,绝不使用图像来表示文本。
4、检查cookie使用情况
设置一个较早的 expire 日期或者根本不设置 expire 日期,会缩短响应时间。
要在 PHP 语言中设置 cookie 的 expire 日期,使用以下代码:
<?php
$expire = 2592000 + time();
// Add 30 day’s to the current time
setcookie(userid, “123rrw3”, $expire);
?>
这段代码设置cookie userid,并将 expire 日期设置为自当前日期之后30天。
5、不要包含不必要的JavaScript代码,尽可能将其外部化
应该明智地使用JavaScript(仅在真正必要时才使用)并优化脚本的大小和速度,缩短JavaScript下载时间的另一种方式是使用外部文件,而不是包含脚本内联,这种方法也适用于CSS,因为浏览器会缓存外部化的文本,而(在HTML页面自身中)以内联方式编码的 CSS 或 JavaScript 每次都会随 HTML 一起加载。
6、尽可能避免使用表格
表格被用作网页的主要构建块,但是作为页面布局元素,使用表格现在被认为是糟糕的做法,有时候,您必须使用表格(并且它们被认为是显示表格数据的出色实践),如果是这样,明确地指定表格单元格、行和列的宽度和高度,否则,浏览器必须执行许多操作来计算如何显示它们,这会降低页面加载速度。
7、删除任何不必要的元素
可能这是所有技巧中最显而易见的一个,但是它也是最容易忘记的一个技巧。如果您真正需要在网页上放置许多内容,考虑将网页分为2个、3个或更多的独立页面。
8、一些优化网页的技巧
可以使用许多方法来优化您的网页,包括压缩JavaScript文件,使用超文本传输协议(Hypertext Transfer Protocol,HTTP)压缩,以及设置图像大小。
例如:访客点击访问这样一个目录地址:,去打开这个目录下的index.html文档,当服务器收到请求后它需要消耗一些时间来分析这是一个文件还是一个目录,但是如果我们在最后加上一个斜杠(/),服务器就知道你是在访问一个目录地址,然后就直接加载默认文档index.html或index.php就行了,这样服务器就不用花时间来分析这个地址,也起到了一定加速的作用(更多的技巧,可查看马海祥博客《提升网站页面打开速度的12个建议》的相关介绍)。
9、压缩和缩小JavaScript文件
您可以使用 GNU zip (gzip) 来完成此任务,因为许多浏览器都支持这种压缩算法。
另一种替代方法是缩小文件,这种方法删除代码中所有不必要的字符,比如制表符(tab)、新行和空格,它删除代码中的注释和空白,进一步缩小文件大小。外部和内部样式表都可以缩小。两种最流行的缩小工具是 JSMin 和 YUI Compressor。
10、使用HTTP压缩,并始终使用小写的div和类名
可以使用HTTP压缩来减少服务器与浏览器之间的通信量,可以在Apache中配置HTTP压缩(.htaccess 文件),或者可以将其包含到页面中(对于PHP,可以使用一个 HTTP_ACCEPT_ENCODING 选项)。
但是请注意:不是所有浏览器都支持压缩,即使是支持压缩的浏览器,压缩和解压缩都会加重处理器的负载,要在 Apache 中启用地毯式(blanket)压缩(即压缩所有文本和 HTML),使用以下命令:
AddOutputFilterByType DEFLATE text/html text/plain text/xml
另外,考虑一下您想要压缩的内容。图像、音乐和视频在创建时已经进行了压缩,因此您可以将压缩对象限制为 HTML、CSS 和 JavaScript 文件。
另一种减少压缩工作的技巧是使用小写形式的 <div> 元素和类名,由于大小写敏感性,并且使用的是无损压缩,<header> 与 <Header> 不同,它们被压缩为两个不同的标记。
11、设置图像大小
与表格单元格、行和列一样,当您未明确设置图像大小时,浏览器需要执行计算来显示图像,这会降低处理速度。
你会给每个图片加上height和width属性吗?这两个属性可以让浏览器在加载图片之前就知道图片的长和宽,并预留出指定的长宽待图片加载后显示,如果没有这两个属性,浏览器还需要在读取图片成功后再处理一次页面布局样式,这无疑减慢了网页加载速度,所以在固定图片大小的情况下最好都使用上长和宽属性。
12、将CSS图像映射用于装饰功能