阳子SEO博客

雅虎网站前端网页优化的14: 14原则

如果访问速度太慢,一个内容丰富的网站是没有意义的;不管搜索引擎优化有多好,如果搜索蜘蛛抓不到它,那也没用;用户设备设计的人性化网站,如果用户看不到,就是一句空话。

因此,网页的效率优化无疑是最值得关注的方面。那么,我们如何提高网页的效率呢?在这方面,我将与你分享雅虎的网页优化的14个原则,也称为雅虎的14个原则,这是我们作为搜索引擎优化人员必须理解的。

1.减少HTTP请求的数量

据统计,80%的最终用户响应时间花在前端程序上,而大部分时间花在下载各种页面元素上,如图像、样式表、脚本和闪存。减少页面元素将减少HTTP请求的数量,这是快速显示页面的关键。

减少页面元素数量的一种方法是简化页面设计,但是有没有其他方法可以获得丰富的内容和快速的响应时间?以下是一些技术:

图像映射将多张图片组合成一张图片,并且总文件大小变化不大,但是减少了HTTP请求的数量,从而加快了页面显示速度(有关详细信息,请参见相关介绍)。这种方法只适用于连续的图片,并且坐标的定义令人讨厌并且容易出错。

CSS精灵是一种更好的方法,它可以将页面上的图片组合成一个文件,并利用CSS的背景图像和背景位置属性来实现一些需要的图片。

内联图像使用data:URL方案在页面中嵌入图片,这将增加HTML文件的大小。将内联图像合并到您的(缓存的)样式表中是一种减少HTTP请求和避免增加HTML文件大小的方法。

通过将多个脚本文件组合成一个文件,组合文件可以减少HTTP请求的数量,样式表也可以以类似的方式进行处理。虽然这种方法简单,但还没有被广泛使用。

根据收集到的数据,排名前10位的外国网站每页平均有7个脚本文件和2个样式表。当脚本和样式表在页面之间有很大差异时,这种方法会遇到很大的挑战,但是如果这样做了,它会加快响应时间。

减少HTTP请求的数量是性能优化的起点,对提高首次访问的效率起着重要的作用。根据Tenni Theurer的文章《浏览器缓存使用——暴露》,40-60%的日常访问是首次访问,因此加快首次访问的页面访问速度是用户体验的关键。

因此,建议将主页上的几十个小图标组合成一个,并通过CSS控制它们的显示,从而减少HTTP请求的数量。

2.使用CDN

用户和网络服务器之间的距离对响应时间也有很大的影响。从用户的角度来看,将内容部署到多个地理位置分散的服务器将有效地提高页面加载速度,但是我们应该从哪里开始呢?

作为实现内容地理分布的第一步,不要试图重构web应用程序以适应分布式体系结构。改变架构将导致多个周期性任务,例如同步会话状态和在多个服务器之间复制数据库事务。因此,缩短用户和内容之间距离的尝试可能会因应用程序体系结构的修订而延迟或被阻止。

我们仍然记得,80-90%的最终用户响应时间花费在下载页面的各种元素上,例如图像文件、样式表、脚本、闪存等。与重建系统的困难任务相比,最好先分发静态内容,这不仅大大减少了响应时间,而且由于CDN的存在,使得分发静态内容变得容易。

CDN是地理上分布的网络服务器的集合,用于更有效地分发内容。服务于特定用户的网络服务器通常是根据网络距离来选择的。

一些大型网站有自己的CDN,但使用CDN服务提供商,如Akamai技术、镜像互联网或聚光灯网络,将会更具成本效益。将静态内容分发到CDN可以将用户的影响时间减少20%或更多。切换到CDN时很容易更改代码,但可以提高网站的速度。

对此,建议是:还没有使用,但是根据客户的反映,广东、山东等地的网络情况相对较差。如果占据主带宽的静态资源可以通过CDN释放,我相信这会大大缓解目前网站访问速度的问题。

3.添加过期标题

网页内容越来越丰富,这意味着有更多的脚本文件、样式表、图像文件和Flash。第一次访问必须面对多个HTTP请求,但是通过使用Expires头,您可以在客户端缓存这些元素,从而避免在后续访问中出现不必要的HTTP请求。Expires头最常用于图像文件,但也应该用于脚本文件、样式表和闪存。

浏览器(和代理)使用缓存来减少HTTP请求的数量和大小,从而加速网页的加载。网络服务器告诉客户端一个元素可以通过Expires头缓存多长时间。

如果服务器是Apache,您可以使用过期默认设置基于当前日期的过期日期,如过期默认“访问加10年”,并将过期时间设置为请求时间的10年。

请记住,如果使用很长的过期时间,您必须在内容更改时修改文件名。我们经常把重命名作为发布的一个步骤:版本号嵌入在文件名中,比如Yahoo 2 . 0 . 6 . js

为此,建议Apache配置有JS、CSS和图像缓存。如果静态资源需要更新,采用修改文件版本号的方案,确保客户端获得最新版本。

4.压缩页面元素

通过压缩HTTP响应内容,可以缩短页面响应时间。从HTTP/1.1开始,web客户端通过HTTP请求中的Accept-Encoding头指示支持的压缩类型,如accept-encoding :gzip、deflate。

如果网络服务器检查接受编码头,它将使用客户端支持的方法来压缩HTTP响应并设置内容编码头,如:内容编码: gzip。

Gzip是目前最流行、最有效的压缩方法。其他方法,如放气,并不有效,也不够普及。通过Gzip,内容通常可以减少70%;对于Apache,您需要在1.3版中使用mod_gzip模块,在2.x版中,您需要使用mod_deflate。

网络服务器根据文件类型决定是否压缩。大多数网站压缩HTML文件,但是压缩脚本文件和样式表是值得的。事实上,压缩任务文本信息是值得的,包括XML和JSON。不应压缩图像文件和PDF文件,因为它们最初是以压缩格式存储的。压缩它们不仅会浪费CPU,还会增加文件的大小。

因此,压缩尽可能多的文件类型是减少页面大小和改善用户体验的简单方法。

在这方面,建议是:600 K以上的ext2包,每个人都会想到压缩它,压缩效果还不错,只有150 K以上。此外,JS,CSS和HTML也尽可能压缩(这里,我们也推荐一个简单的工具来压缩CSS代码:http://*/zyxz/zxgj/CSS . HTML),你知道我们的许多客户仍然存在。

5.把样式表放在你的头上

HTML、XHTML和CSS都是解释语言,而不是编译语言,因此当CSS启动时,浏览器可以在解析结构时呈现页面,所以它不会出现。页面结构首先暴露出来,然后是CSS渲染,页面突然变得华丽,这是太“戏剧性”的页面浏览体验。

我们发现将样式表移动到HEAD部分可以提高界面的加载速度,因此它使页面元素按顺序显示。

在许多浏览器中,例如IE,将样式表放在文档底部的问题是它禁止网页内容的顺序显示,并且浏览器阻止显示以避免重绘页面元素,因此用户只能看到空白页面,并且Firefox不会阻止显示,但是这意味着一些页面元素可能需要在下载样式表后重绘,这导致闪烁问题。

HTML规范明确要求样式表在HEAD中定义。因此,避免空白屏幕或闪烁的最好方法是遵循HTML规范,将样式表放在HEAD中。

在这方面,建议是:你还没有遇到过在文档后面放样式表的情况吗?

6.将脚本文件放在底部

像样式文件一样,我们需要注意脚本文件的位置,并且我们需要尽可能地将它们放在页面的底部,这样它们一方面可以顺序显示,另一方面可以并行下载。

在下载样式表之前,浏览器会阻止显示,因此我们需要将样式表放在HEAD部分,而对于脚本,脚本后面内容的顺序显示将被阻止,因此将脚本尽可能放在底部意味着可以快速显示更多内容。

脚本导致的第二个问题是它会阻止并行下载的数量。HTTP/1.1规范建议每个浏览器主机的并行下载数量不应超过2。因此,如果您将图像文件分发到多台机器,您可以实现2次以上的并行下载。但是,下载脚本文件时,浏览器不会启动其他并行下载,甚至其他主机的下载也不会启动。

在某些情况下,将脚本移到底部并不容易。例如,脚本使用document.write方法插入页面内容,可能会出现域问题,但在许多情况下,仍然有一些方法。

另一种方法是使用延迟脚本。延迟属性表示脚本不包含document.write,表示浏览器应该始终继续显示。不幸的是,火狐不支持延迟属性。在工业工程中,脚本可能会延迟,但可能不会得到所需的长时间延迟。

另一方面,如果脚本可以延迟,它可以放在底部。

在这方面,建议是:每个人可能以前都没有意识到这一点,但是我们已经在我们的XCube XUI中实现了这一规则,这被认为是进一步提高页面访问性能。

7.避免CSS表达式

CSS表达式是一种动态设置CSS属性的强大方法。IE支持版本5中的CSS表达式,例如back葫芦-Color :表达式)。获取小时% 2?" # b8d4ff" : "# f08a00 "),即背景颜色每小时切换一次。

CSS表达式的问题在于它们的执行频率比大多数人预期的要高。它们不仅会在页面显示和调整大小时进行计算,还会在页面滚动甚至鼠标在页面上移动时进行重新计算。

减少CSS表达式执行时间的一种方法是一次性表达式,也就是说,当表达式第一次被执行时,它们会被显式数值替换。如果必须动态设置它们,可以使用事件处理函数。如果您必须使用CSS表达式,请记住它们可能会被执行数千次,这将影响页面性能(有关详细信息,请参见相关介绍)。

对此,建议是:目前CSS的维护主要由UI人员承担,他们已经尽力避免这种情况。

8.将JavaScript和CSS放入外部文件中

上述许多性能优化规则都是基于外部文件进行优化的。现在,我们必须问一个问题:JavaScript和CSS应该包含在外部文件还是页面文件中?

在现实世界中,使用外部文件会加快页面显示速度,因为外部文件会被浏览器缓存。如果在页面中内置了JavaScript和CSS,HTTP请求的数量将会减少,但是页面的大小将会增加。

另一方面,如果使用外部文件,它们将被浏览器缓存,并且页面大小将在不增加HTTP请求数量的情况下减少。

因此,一般来说,外部文件是一种更可行的方式,唯一的例外是嵌入式方法对主页更有效,比如雅虎!还有我的雅虎!他们都使用嵌入式方法。一般来说,在会话中,此时很少有主页访问,因此嵌入式方法可以实现更快的用户响应时间。

建议如下:ext2代码得到了很好的指导。目前,前端开发人员非常重视客户端模块的封装和重用,试图以外部JS的形式提高代码的重用,当然,注意不要引入太多的外部资源,因为这违反了规则1。

目前,CSS封装也不错,但它主要针对IE系列解决方案。您可以考虑引入CSS框架,如YAML和蓝图,以轻松解决浏览器兼容性问题。

此外,我们应该提醒每个人JavaScript和css文件放在外面,而不是嵌入在网页中。同时,我们应该考虑将样式表放在头部,脚本文件放在底部。应该注意的是,不应该尽可能多地使用css表达式,因为浏览器很容易装死。

9.减少域名系统查询的数量

域名解析系统用于映射主机名和IP地址,一次解析通常需要20 ~ 120毫秒。为了获得更高的性能,域名解析通常被缓存在多个级别上,例如由互联网服务提供商或局域网维护的缓存服务器、本地机器操作系统的缓存(例如窗口上的域名解析客户端服务)、浏览器和互联网的默认域名解析缓存时间为30分钟,火狐的默认缓存时间为1分钟。

减少主机名可以减少DNS查询的数量,但可能会导致并行下载的数量减少。避免DNS查询可以减少响应时间,而减少并行下载的数量可能会增加响应时间。一个可行的折衷方案是将内容分发到至少2个,最多4个不同的主机名。

出于这个原因,建议是:为了绕过浏览器对下载线程数量的限制,我们为静态资源启用了多个域名,但是这样做违反了这个规则。然而,对于windows IE,DNS缓存可以缓解这个问题。

10.最小化JavaScript代码

最小化JavaScript代码意味着删除JS代码中不必要的字符,从而减少下载时间。两个流行的工具是#JSMin和YUI压缩机。

混淆是最小化源代码的另一种方法。像最小化一样,它通过删除注释和空格来减少源代码的大小。同时,它也会混淆代码。作为混淆的一部分,函数名和变量名被替换为短字符串,这使得代码更紧凑,更难阅读和逆向工程。Dojo Compressor是最常见的混淆工具。

最小化是一个安全而直接的过程,而混淆更复杂,更容易出现问题。根据对前10大国外网站的调查,文件可以减少21%,而混淆可以减少25%(详见相关介绍)。

除了最小化外部脚本文件,嵌入的脚本代码也应该最小化。即使脚本是根据规则4压缩和传输的,最小化脚本也会将文件大小减少5%或更多。

建议是:我们不直接使用JS压缩,而是使用很多组件,比如ext2、jquery等。已经为我们实践了这条规则。

11.避免重定向

重定向功能通过两个HTTP状态代码301和302来完成,例如:

HTTP/1.1 301永久移动

位置: http:///newuri

内容-键入:文本/html

浏览器会自动将请求重定向到位置指定的网址。重定向的主要问题是它降低了用户体验。

最消耗资源、最频繁且最容易被忽略的重定向之一是最后一个丢失的网址/。例如,访问http://*/占星术将被重定向到http://*/占星术/。在Apache下,这个问题可以通过别名、mod_rewrite或目录刷新来解决。

有经验的软件架构师已经为我们考虑过这个问题,建议是:您可以在在线环境中查看Apache配置文件

12.删除重复的脚本文件

在一个页面中包含重复的JS脚本文件会影响性能,也就是说,它会创建不必要的HTTP请求和额外的JS执行。

不必要的HTTP请求发生在IE下,而火狐不会生成冗余的HTTP请求,额外的JS执行将发生在IE或火狐下。

避免脚本文件重复的一个方法是使用模板系统来设置脚本管理模块。该模块除了防止脚本文件重复外,还可以实现依赖检查,并在脚本文件名中增加版本号,从而实现较长的过期时间。

在这一点上,建议在旧版本的Xplatform中这个问题是严重的,但是我相信新版本的XCube不会重复同样的错误。

此外,提醒每个人一定要谨慎使用一些javascript框架和javascript包,至少要问一下:这个js工具包给我们带来了多大的便利,工作效率提高了多少,然后将它与冗余和重复代码带来的负面影响进行比较。

13.配置ETags

实体标签,这和你经常在网上看到的标签云标签有点不同。这个ETAG不是给用户的,而是给浏览器缓存的。

Etag是服务器告诉浏览器缓存中的内容是否已经改变的机制。通过Etag,浏览器可以知道缓存中的内容是否是最新的,以及是否需要再次从服务器下载。这类似于“最后修改”的概念。不幸的是,作为一名网页开发者,他对此无能为力,但他仍然是网站服务器员工的工作。

ETags是一种用于确定浏览器缓存中的元素是否与网络服务器中的元素匹配的机制,它是一种比上次修改日期更灵活的元素验证机制。

ETag是一个字符串,用于唯一表示元素的版本,需要用引号括起来。网络服务器首先在响应中指定ETag:

HTTP/1.1 200正常

2006年12月12日星期二03:03:59格林尼治标准时

ETag: '10c24bc-4ab-457e1c1f '

内容-长度: 12195

稍后,如果浏览器需要验证一个元素,它会使用“如果不匹配”头将ETag返回给网络服务器。如果ETag匹配,服务器返回304代码,从而节省下载时间:

获取/i/yahoo.gif

主机:

如果-修改-自2006年12月12日星期二03:03:59格林尼治标准时起

if-None-Match : ' 10 c24 BC-4 ab-457 E1 c1f '

HTTP/1.1 304未修改

ETags的问题在于它们是基于服务器唯一性的一些属性构建的,例如Apache1.3和2.x,它们的格式是索引节点大小时间戳,而在IIS5.0和6.0中,它的格式是文件时间标记:变更号。

这样,同一元素的ETag在不同的网络服务器上是不同的。在多个web服务器的环境中,浏览器首先从服务器1请求一个元素,然后向服务器2验证该元素。因为ETag不同,缓存无效,必须重新下载。

因此,如果你不使用ETag系统提供的灵活认证机制,你最好删除eTag。删除ETag将减少http响应和后续请求的HTTP头大小。Microsoft支持文章描述了如何删除ETag,而在Apache下,您只需要在配置文件中设置文件ETag none。

在这方面,建议是:定制ETag的生成策略,以最小化探测规则的生成时间。由于没有采用服务器的默认ETag,所以不存在这个问题。如果您以前没有注意过它,请快速检查Apache中的配置。

14.缓存Ajax

现在,Ajax似乎有点像神话。似乎如果网页只需要Ajax,就不会有效率问题。事实上,这是一个误解。Ajax使用不当不会让你的网页更有效率,但会降低你的网页效率。

在我看来,Ajax确实是一件好事,但是请不要过分强调它,并且在使用Ajax时要考虑上面的指导原则。

此外,性能优化规则也适用于web 2.0应用程序。提高Ajax性能的最重要的方法是使其响应可缓存。正如“规则3添加过期标题”中所讨论的,以下其他规则也适用于Ajax。当然,规则3是最有效的方法。

cache
Processed in 0.009398 Second.