20 种提升网页速度的技巧
的有关信息介绍如下:您希望加快网页的加载速度吗?了解如何通过缩短加载时间来改善拨号上网用户的浏览体验,在某些情形下,加载时间最多可缩短 80%。
不是所有人都能够使用高速 Internet 连接。即使每个人都能够使用高速网络,也会因为各种各样的原因使您的 Web 应用程序看起来运行缓慢。在这个宽带速度不断提高的时代,您应当关注一下页面加载时间。将珍贵的页面加载时间缩短几秒,将更加珍贵的请求和响应时间缩短几毫秒。您将为访问者创造一种更好的体验。
阅读完本文之后,您将能够较好地了解网页加载时间优化的基本知识。您还能够使用工具和知识更好地识别和判断加载缓慢的页面部分和瓶颈。
【先决条件】
在理想情况下,您应该安装了 Mozilla Firefox。您还应该大体了解 Web 开发。本文涉及的主题并不复杂,但是如果您了解超文本标记语言(Hypertext Markup Language,HTML)、层叠样式表(Cascading Style Sheet,CSS)以及 ™ 编程语言等主题,那么在学习本文时将更加得心应手。不需要使用集成开发环境(IDE),只需使用您喜爱的编辑器。
您必须在浏览器中启用了 JavaScript。另外,要学习与 Firebug 和 YSlow 相关的内容,您需要安装 Firefox Web 浏览器。
【假设您没有宽带】
许多人通过某种形式的宽带连接访问 Internet,这些形式可能是 DSL、网线、光纤或其他方法。但是,无法使用这类技术的用户不得不使用拨号连接。您一定已经忘记拨号上网是什么感觉了,但您可以试着回想一下网页逐行加载时的情形。
幸运的是,这些可怜的人们现在已经能够获得一些帮助。您可以通过缩短加载页面的时间来改善他们的体验。但是,拨号连接并不是降低加载和响应速度的惟一原因。许多 Web 设计人员错误地认为高速 Internet 连接的到来会使网站性能优化变得没有必要。这种观点是不对的。例如,过去使用桌面软件执行的许多任务现在可以在线执行。在 Web 应用程序中获得像桌面软件那样的高速响应体验非常困难,因此性能优化非常重要。幸运的是,一些工具和最佳实践可用于缩短响应和加载时间,提供更加流畅的体验。
【安装 Firebug】
两个 Firefox 扩展的安装过程都非常简单。要安装 Firebug,执行以下步骤:
打开 Firefox,转到Firebug 主页。
安装最新版的 Firebug。
如果 Firefox 配置为阻止弹出窗口,单击Allow允许打开安装窗口。否则,单击Install Now。
重启 Firefox。
您现在可以从 Tools 菜单访问 Firebug。可以在新窗口或现有窗口中打开 Firebug
【安装 YSlow】
安装 Firebug 之后,接下来安装 YSlow。为此,执行以下步骤:
打开 Firefox,然后转到YSlow 主页。
安装插件,然后重启 Firefox。
注意:与许多其他 Firefox 扩展不同,YSlow 不会自动启动。必须首先激活它。
要激活 YSlow,在状态栏右键单击其图标,然后单击Autorun。
下图 显示了 YSlow 性能分析的结果。
【常识:牢记设计规则】
令人惊讶的是简单的设计规则通常会被忽视,最终产生未经优化的、下载缓慢的网页。牢记以下规则,页面的加载速度将会更快。
使用良好的结构
可扩展 HTML (XHTML) 具有许多优势,但是其缺点也很明显。XHTML 可能使您的页面更加符合标准,但是它大量使用标记(强制性的
如果您确实不得不使用 XHTML,试着尽可能对它进行优化。例如,删除空格并采用严格的 XHTML 编码实践,提高下载和解析速度。要严格执行 XHTML Strict 规则,向文档中添加以下doctype语句:
XHTML 1.0 Strict 与 Strict HTML 4.01 是等效的,包含的属性和元素没有出现在 HTML 4.01 规范的反对内容中。记住,有两个标记能够在 XHTML Transitional 中使用,但不能在 XHTML Strict 中使用,例如:
【不要使布局超载】
在博客(和新的站点)流行起来之前,让页面水平滚动甚至垂直滚动被认为是糟糕的实践。页面越小,越难以(但并不是不可能)完好地填充屏幕。现在,对于博客和内容驱动的网站,不时可以看到几百 Kb 大小的长页面。是的,您需要填充更多空间,但是这并不意味着您必须使用大的背景图像、大量表格或者许多内容来填充。坚持简约原则:少即是多。页面中充斥着各种类型的图像、视频、广告等,这大大违背实用性原则,因此,在增加页面的内容时请三思。
不要使用图像来表示文本
我们很少会控制字体在不同浏览器中的显示方式,与字体不同的是,图像总是精确地按照其设计方式来显示。但这不能当作使用图像来表示文本的借口。
使用图像表示文本的最常见示例就是在导航栏中。美观的按钮更加具有吸引力,但是它们的加载速度很慢。此外,图像仍然不能由搜索引擎直接索引,因此,使用图像进行导航不利于搜索引擎优化(search engine optimization,SEO)。当无需图像就可以通过大量 CSS 技巧创建漂亮的按钮时,绝不使用图像来表示文本。
一种适用于 CSS 样式的特定导航类型就是选项卡式导航,