网站访问优化之-内容篇-避免404s

没有404s

HTTP请求是昂贵的,所以提出一个HTTP请求并得到一个无用的响应(即404 Not Found)是完全没有必要的,并且会减慢用户体验而没有任何好处。

有些网站有帮助404s“你的意思是X?”,这对用户体验很好,但也浪费了服务器资源(如数据库等)。特别糟糕的是,当连接到外部JavaScript的错误,结果是404。首先,这个下载将阻止并行下载。接下来,浏览器可能会尝试解析404响应正文,就好像它是JavaScript代码一样,试图找到可用的东西。

减小Cookie大小

HTTP cookie由于各种原因(如身份验证和个性化)而被使用。有关cookie的信息在Web服务器和浏览器之间的HTTP标头中交换。尽可能降低cookies的大小,以尽量减少对用户响应时间的影响,这一点很重要。

欲了解更多信息,请 点击 Tenni Theurer和Patty Chi的“当cookie崩溃”。这项研究的结果:

消除不必要的cookie
尽可能降低Cookie大小,以尽量减少对用户响应时间的影响
请注意在相应的域级别设置Cookie,以便其他子域不受影响
适当地设置过期日期。较早的过期日期或不更早删除cookie,提高用户响应时间

为组件使用无Cookie域

当浏览器发出一个静态图像的请求,并将cookie与请求一起发送时,服务器对这些cookie没有任何用处。所以他们只是没有理由地创建网络流量。你应该确保静态组件被请求与无cookie的请求。创建一个子域,并在那里托管你所有的静态组件。

如果你的域名是www.example.org,你可以托管你的静态组件static.example.org。但是,如果你已经在顶级域名设置cookie example.org,而不是www.example.org,那么所有的请求, static.example.org将包括这些cookie。在这种情况下,您可以购买一个全新的域名,在那里托管您的静态组件,并保持此域名无cookie。雅虎 使用yimg.com,YouTube使用ytimg.com,亚马逊使用images-amazon.com等。

在无Cookie域上托管静态组件的另一个好处是,某些代理可能会拒绝缓存使用cookie请求的组件。在相关说明中,如果您想知道是否应将example.org或www.example.org用于您的主页,请考虑cookie的影响。省略www让你别无选择,只能写cookies *.example.org,所以出于性能原因,最好使用www子域名并将cookies写入该子域名。

最小化DOM访问

使用JavaScript访问DOM元素的速度很慢,所以为了获得更响应的页面,您应该:

缓存对访问元素的引用
更新节点“离线”,然后将它们添加到树中
避免使用JavaScript修复布局
有关更多信息,请查阅下载 Julien Lecomte 的YUI视频的 “高性能Ajax应用程序”。

开发智能事件处理程序

有时候,由于附加到DOM树的不同元素上的事件处理程序太多,页面的响应速度就会降低,而这些处理程序过于频繁地执行。这就是为什么使用事件代表是一个好方法。如果你在a里面有10个按钮div,那么只能把一个事件处理程序附加到div包装器,而不是每个按钮的一个处理器。事件冒泡,所以你可以捕捉事件并找出它起源于哪个按钮。

您也不需要等待onload事件才能开始使用DOM树。通常你所需要的是你想访问的元素在树中可用。您不必等待所有图像被下载。 DOMContentLoaded是您可能会考虑使用而不是onload的事件,但是直到它在所有浏览器中都可用,您可以使用YUI Event实用程序,该实用程序有一个onAvailable方法。

有关更多信息,请查阅下载 Julien Lecomte 的YUI视频的 “高性能Ajax应用程序”。

通过@import选择<link>

以前的最佳实践之一表明,CSS应该是最高的,以允许渐进式渲染。

在IE中的@import行为与<link>在页面底部使用的行为相同,所以最好不要使用它。

避免过滤器

IE专有的AlphaImageLoader过滤器旨在解决IE版本<7中的半透明真彩色PNG的问题。该过滤器的问题在于,在图像下载过程中,它会阻止渲染并冻结浏览器。这也增加了内存消耗,并应用于每个元素,而不是每个图像,所以问题倍增。

最好的办法是AlphaImageLoader完全避免使用PNG8而不是完美的降级,这在IE中是很好的。如果您绝对需要AlphaImageLoader,请使用下划线黑客_filter来惩罚您的IE7 +用户。

优化图像

在设计人员为网页创建图像之后,在将这些图像传输到Web服务器之前,仍然可以尝试一些操作。

您可以检查GIF并查看它们是否使用与图像中的颜色数相对应的调色板大小。使用imagemagick很容易检查使用
identify -verbose image.gif
在调色板中使用4色和256色“插槽”显示图像时,还有改进的空间。
尝试将GIF转换为PNG并查看是否有保存。往往不是,有。由于浏览器支持有限,开发人员经常不愿意使用PNG,但现在已经过去了。唯一真正的问题是真彩色PNG中的alpha透明度,但是再次,GIF不是真实的颜色,也不支持可变的透明度。所以GIF可以做的事情,调色板PNG(PNG8)也可以做(除了动画)。这个简单的imagemagick命令会产生完全安全的PNG:
convert image.gif image.png
“我们所说的只是:给PiNG一个机会!”
在所有PNG上 运行pngcrush(或任何其他PNG优化工具)。例:
pngcrush image.png -rem alla -reduce -brute result.png
在所有JPEG上运行jpegtran。该工具可以进行旋转等无损JPEG操作,也可以用来优化和删除图像中的注释和其他无用的信息(如EXIF信息)。
jpegtran -copy none -optimize -perfect src.jpg dest.jpg

优化CSS Sprites

在水平方向上将图像排列在水平方向而不是垂直方向通常会导致较小的文件大小。
在精灵中组合相似的颜色可以帮助您将颜色数量保持在较低的水平,理想情况下在256色以下,以适应PNG8。
“移动友好”,不要在精灵图像之间留下很大的差距。这不会影响文件大小,但需要较少的内存供用户代理将图像解压缩为像素图。100×100图像是10万像素,其中1000×1000是100万像素

不要在HTML中缩放图像

不要使用比您需要更大的图像,因为您可以在HTML中设置宽度和高度。如果你需要,
<img width=”100″ height=”100″ src=”mycat.jpg” alt=”My Cat” />
那么你的图像(mycat.jpg)应该是100x100px,而不是缩小的500x500px图像。

使favicon.ico小和缓存

favicon.ico是保留在服务器根目录下的映像。这是一个必要的罪恶,因为即使你不关心它,浏览器仍然会请求它,所以最好不要回应404 Not Found。另外,由于它在同一台服务器上,每次请求时都会发送Cookie。这个图像还会干扰下载顺序,例如在IE中,当您在onload中请求额外的组件时,会在这些额外的组件之前下载favicon。

所以要减轻有favicon.ico的缺点确保:

它很小,最好在1K以下。
设置过期标题与你感觉舒适(因为你不能重命名,如果你决定改变它)。您几乎可以在将来安全地设置Expires标题。你可以检查你当前的favicon.ico的最后修改日期做出明智的决定。
Imagemagick可以帮助你创建小图标

保持组件低于25K

这个限制与iPhone不会缓存大于25K的组件有关。请注意,这是未压缩的大小。这就是缩小比较重要的地方,因为gzip本身可能是不够的。

欲了解更多信息,请访问Wayne Shea和Tenni Theurer的“ 性能研究,第5部分:iPhone缓存 – 让它坚持下去 ”。

将组件打包成多部分文档

将组件打包成多部分文档就像带有附件的电子邮件一样,它可以帮助您用一个HTTP请求获取多个组件(请记住:HTTP请求是昂贵的)。当你使用这种技术,首先检查用户代理是否支持它(iPhone不)。

避免空的图像src
标签:服务器

具有空字符串src属性的图像会发生超过一个人的期望。它以两种形式出现:

直接的HTML
<img src =“”>
JavaScript的
var img = new Image();
img.src =“”;
两种形式都会产生相同的效果:浏览器向您的服务器发出另一个请求

Internet Explorer向该页面所在的目录发出请求。
Safari和Chrome向实际页面本身发出请求。
Firefox 3和更早版本的行为与Safari和Chrome相同,但版本3.5解决了此问题[错误444931],不再发送请求。
遇到空的图像src时,Opera不会做任何事情。

为什么这种行为不好?

通过发送大量意外流量来瘫痪您的服务器,特别是对于每天获得数百万页面浏览量的页面。
浪费服务器计算周期,生成一个永远不会被查看的页面。
可能损坏的用户数据。如果您在请求中跟踪状态,无论是通过Cookie还是其他方式,都有可能销毁数据。即使图像请求没有返回图像,浏览器也会读取并接受所有标题,包括所有的Cookie。当其余的回应被抛弃时,损害可能已经完成。

这种行为的根本原因是在浏览器中执行URI解析的方式。此行为在RFC 3986 – 统一资源标识符中定义。当遇到一个空字符串作为URI时,它被认为是一个相对URI,并根据5.2节定义的算法解析。这个特定的例子,一个空字符串,在5.4节列出。Firefox,Safari和Chrome都按照规范正确解析了一个空字符串,而Internet Explorer解决了这个问题,显然符合RFC 2396 – 统一资源标识符(这已被RFC 3986废弃)的早期版本, 。所以从技术上讲,浏览器正在做他们应该做的事来解析相对的URI。问题是在这方面,

HTML5增加了对标签src属性的描述,以指示浏览器不要在4.8.2节中提出额外的请求:

src属性必须存在,并且必须包含引用非交互式(可选动画)图像资源的有效URL,该资源既不是页面也不是脚本。如果元素的基本URI与文档的地址相同,则src属性的值不能是空字符串。
希望浏览器将来不会有这个问题。不幸的是,<script src =“”>和<link href =“”>没有这样的条款。也许还有时间进行调整,以确保浏览器不会意外地执行此行为。
雅虎的JavaScript大师尼古拉斯·C·扎卡斯(Nicolas C. Zakas)启发了这个规则。欲了解更多信息检查他的文章“ 空图像src可以破坏您的网站 ”。

网站访问优化之-内容篇-减少DOM元素的数量

减少DOM元素的数量

复杂的页面意味着需要下载更多的字节,这也意味着JavaScript中的DOM访问速度较慢。当你想要添加一个事件处理程序时,如果在页面上循环500或5000个DOM元素,这是有区别的。

大量的DOM元素可能是一个症状,应该通过页面的标记来改进,而不必删除内容。你是否使用嵌套表进行布局?你只是抛出更多<div>的东西来解决布局问题?也许有一个更好,更正确的方法来做你的标记。

对于布局的帮助很大的是YUI CSS工具:grids.css可以帮助您完成整体布局,fonts.css和reset.css可以帮助您剥离浏览器的默认格式。这是一个重新开始并考虑标记的机会,例如<div>只有在语义上有意义时才使用s,而不是因为它会呈现新行。

DOM元素的数量很容易测试,只需输入Firebug的控制台:
document.getElementsByTagName(‘*’).length

多少DOM元素太多?检查其他具有良好标记的类似页面。例如,Yahoo!主页是一个非常繁忙的页面,仍然低于700 elements (HTML tags).

网站访问优化之-内容篇-组件加载

后加载组件

你可以仔细看看你的页面,并问自己:“为了最初渲染页面,哪些是必须需要的?”。其余的内容和组件可以等待。

JavaScript是onload事件之前和之后分裂的理想选择。例如,如果您有JavaScript代码以及可拖放和动画的库,那么可以等待,因为在初始渲染之后拖动页面上的元素。其他地方寻找候选人后加载包括隐藏的内容(用户行动后出现的内容)和图像下方的图像。

工具可以帮助您完成工作:YUI Image Loader允许您延迟折叠下方的图像,YUI Get实用工具是一种轻松包含JS和CSS的简单方法。在野外的例子看看雅虎!雅虎主页与Firebug’s Net Panel打开。

性能目标与其他Web开发最佳实践保持一致是很好的。在这种情况下,渐进增强的想法告诉我们,JavaScript支持时可以改善用户体验,但是即使没有JavaScript,也必须确保页面能够正常工作。因此,在确定页面正常工作之后,您可以使用一些后期加载的脚本来加强它,从而为您提供更多的细节,如拖放和动画。

预加载组件

预加载可能看起来像后加载的相反,但它实际上有一个不同的目标。通过预加载组件,您可以利用浏览器处于空闲状态的时间,并请求将来需要的组件(如图像,样式和脚本)。这样,当用户访问下一页时,可以使大部分组件已经在缓存中,并且用户的页面加载速度会更快。

实际上有几种类型的预加载:

无条件的预加载 – 一旦onload激发,你继续前进,并获取一些额外的组件。请查阅google.com了解如何请求加载精灵图像的示例。此精灵图片在google.com主页上不是必需的,但是在连续的搜索结果页面上需要此图片。
有条件的预加载 – 根据用户的行为,你可以猜测用户下一步的行为,并相应的预加载。在search.yahoo.com上,您可以看到在开始在输入框中输入内容后,如何请求一些额外的组件。
预期的预加载 – 在启动重新设计之前提前预加载。它经常发生在重新设计之后,您会听到:“新网站很酷,但速度比以前慢”。部分问题可能是用户使用完全缓存访问您的旧网站,但新的缓存总是空的。您甚至在启动重新设计之前,可以通过预载一些组件来减轻这种副作用。您的旧网站可以使用浏览器闲置的时间,并请求将由新网站使用的图像和脚本

网站访问优化之-内容篇-使Ajax可缓存

使Ajax可缓存

Ajax引用的好处之一是它为用户提供即时反馈,因为它从后端Web服务器异步请求信息。但是,使用Ajax并不能保证用户不会在等待那些异步的JavaScript和XML响应返回时扭动他的拇指。在许多应用程序中,用户是否在等待取决于如何使用Ajax。例如,在基于Web的电子邮件客户端中,用户将不断等待Ajax请求的结果,以查找与其搜索条件相匹配的所有电子邮件。记住“异步”并不意味着“即时”。

为了提高性能,优化这些Ajax响应非常重要。提高Ajax性能的最重要方法是使响应可缓存,如添加过期或缓存控制头中所述。其他一些规则也适用于Ajax:
Gzip组件
减少DNS查找
缩小JavaScript
避免重定向
配置ETags

我们来看一个例子。Web 2.0电子邮件客户端可能使用Ajax来下载自动完成的用户地址簿。如果用户自上次使用电子邮件Web应用程序以来尚未修改通讯录,则可以从缓存中读取以前的地址簿响应(如果该Ajax响应可以使用未来的Expires或Cache-Control标头进行缓存)。必须通知浏览器何时使用先前缓存的地址簿响应与请求新的响应。这可以通过向地址簿Ajax URL添加时间戳来指示用户最后一次修改她的地址簿,例如,&t=1190241612。如果地址簿自上次下载以来没有被修改,则时间戳将是相同的,地址簿将从浏览器的缓存中读取,从而消除额外的HTTP往返。如果用户修改了地址簿,则时间戳会确保新的URL与缓存的响应不匹配,浏览器将请求更新的地址簿条目。

即使您的Ajax响应是动态创建的,并且可能只适用于单个用户,但它们仍可以被缓存。这样做会使您的Web 2.0应用程序更快。

尽早的释放缓冲

当用户请求页面时,后台服务器可能需要200到500毫秒的时间来拼接HTML页面。在此期间,浏览器在等待数据到达时处于空闲状态。在PHP中,你有函数flush()。它允许您将部分就绪的HTML响应发送到浏览器,以便浏览器可以在您的后端忙于HTML页面的其余部分时开始获取组件。这个好处主要是在繁忙的后台或前台看到的。

考虑刷新的好地方就在HEAD之后,因为头部的HTML通常更容易生成,并允许您包含任何CSS和JavaScript文件,以使浏览器在后端仍在处理的同时开始并行读取。

例:

... <! - css,js - >
 </ HEAD>
 <?php flush(); ?>
 <BODY>
 ... <! - content - >

雅虎 搜索率先研究和真正的用户测试,以证明使用这种技术的好处。

使用GET进行AJAX请求

在雅虎 邮件小组发现,在使用时XMLHttpRequest,POST在浏览器中分两步实现:首先发送邮件头,然后发送数据。所以最好使用GET,它只需要一个TCP数据包发送(除非你有很多的cookie)。IE中最大的URL长度是2K,所以如果你发送超过2K的数据,你可能无法使用GET。

一个有趣的副作用是POST没有实际发布任何数据的行为像GET。基于HTTP规范,GET是为了检索信息,所以当你只是请求数据时使用GET(在语义上)是有意义的,而不是发送数据到服务器端存储。

网站访问优化之-内容篇-减少DNS查找

减少DNS查找

域名系统(DNS)将主机名映射到IP地址,就像电话本将人名映射到他们的电话号码一样。当您在浏览器中键入www.yahoo.com时,浏览器联系的DNS解析器会返回该服务器的IP地址。DNS有成本。DNS通常需要20-120毫秒才能查找给定主机名的IP地址。直到DNS查找完成,浏览器才能从此主机名下载任何内容。

DNS查找缓存更好的性能。这种缓存可以在由用户的ISP或局域网维护的特殊缓存服务器上发生,但是在个人用户的计算机上也存在缓存。DNS信息保留在操作系统的DNS缓存(Microsoft Windows上的“DNS客户端服务”)中。大多数浏览器都有自己的缓存,与操作系统的缓存分开。只要浏览器在自己的缓存中保存了一条DNS记录,就不会因操作系统请求记录而烦恼。

按照DnsCacheTimeout注册表设置的指定,Internet Explorer默认缓存DNS查找30分钟 。Firefox缓存DNS查找1分钟,由network.dnsCacheExpiration配置设置控制。(Fasterfox将其更改为1小时。)

当客户端的DNS缓存为空(对于浏览器和操作系统)时,DNS查找的数量等于网页中唯一主机名的数量。这包括页面URL,图像,脚本文件,样式表,Flash对象等中使用的主机名。减少唯一主机名的数量可以减少DNS查找的次数。

减少唯一主机名的数量有可能减少页面中发生的并行下载量。避免DNS查找会缩短响应时间,但减少并行下载可能会增加响应时间。我的准则是将这些组件分成至少两个但不超过四个主机名。这在减少DNS查询和允许高度平行下载之间取得了很好的折衷。

缩小JavaScript和CSS

缩小是从代码中删除不必要的字符以减小其大小从而缩短加载时间的做法。代码缩小时,所有注释都将被删除,以及不需要的空白字符(空格,换行符和制表符)。在JavaScript的情况下,由于下载的文件的大小减小,所以这提高了响应时间性能。JSMin和YUI Compressor是用于缩小JavaScript代码的两个流行工具。YUI压缩机也可以缩小CSS。

混淆是可以应用于源代码的替代优化。它比缩小更复杂,因此更容易由于迷惑步骤本身而产生错误。在对美国十大网站的调查中,缩小比例达到了21%,而混淆度达到25%。尽管混淆的尺寸减小了很多,但缩小JavaScript的风险较小。

除了缩小外部脚本和样式之外,内嵌<script>和<style>块也可以并且应该被缩小。即使你用gzip脚本和样式,缩小它们的大小也会减少5%或更多。随着JavaScript和CSS的使用和大小的增加,通过缩小代码所节省的成本也会增加。

避免重定向

重定向是使用301和302状态码完成的。以下是301响应中HTTP标头的示例:

HTTP / 1.1 301永久移动
 位置:http://example.com/newuri
 内容类型:文本/ HTML

浏览器自动将用户带到在该Location字段中指定的URL 。重定向所需的所有信息都在标题中。响应的主体通常是空的。尽管他们的名字,301,也不是一个302响应在实践中被缓存,除非额外的头,如Expires或Cache-Control,表明它应该是。元刷新标记和JavaScript是将用户引导到其他URL的其他方法,但是如果您必须执行重定向,则首选技术是使用标准的3xx HTTP状态代码,主要是为了确保后退按钮正常工作。

要记住的主要是重定向减慢用户体验。在用户和HTML文档之间插入重定向会延迟页面中的所有内容,因为页面中没有任何内容可以呈现,并且在HTML文档到达之前不会开始下载任何组件。

最浪费的重定向之一经常发生,Web开发人员通常不知道。当一个URL中应该有一个尾部的斜杠(/)时,就会发生这种情况。例如,访问http://astrology.yahoo.com/astrology会得到一个301响应,其中包含http://astrology.yahoo.com/astrology/的重定向(注意添加的尾部斜线)。如果您使用的是Apache处理程序,则在Apache中通过使用Aliasor mod_rewrite或者DirectorySlash指令修复。

将旧网站连接到新网站是重定向的另一个常见用途。其他包括连接网站的不同部分,并根据一定的条件(浏览器类型,用户帐户类型等)指导用户。使用重定向连接两个网站很简单,只需要很少的附加代码。尽管在这些情况下使用重定向会降低开发人员的复杂性,但会降低用户体验。这种重定向的替代方案包括使用Alias和mod_rewrite如果两个代码路径托管在同一台服务器上。如果域名更改是使用重定向的原因,另一种方法是与Alias或组合创建一个CNAME(一个DNS记录,用于创建从一个域名指向另一个域名的别名)mod_rewrite。

删除重复的脚本

在一个页面中包含两次相同的JavaScript文件会使性能受损。这不像你想像的那么不寻常。对美国十大网站的回顾显示,其中两个包含重复的脚本。两个主要因素增加了在单个网页中复制脚本的几率:团队规模和脚本数量。当发生这种情况时,重复的脚本通过创建不必要的HTTP请求而损害了性能,并浪费了JavaScript执行。

不必要的HTTP请求发生在Internet Explorer中,但不在Firefox中。在Internet Explorer中,如果外部脚本包含两次并且不可缓存,则会在加载页面期间生成两个HTTP请求。即使脚本是可缓存的,当用户重新加载页面时,也会发生额外的HTTP请求。

除了产生浪费的HTTP请求之外,浪费时间多次评估脚本。无论脚本是否可缓存,这种冗余JavaScript执行都会在Firefox和Internet Explorer中发生。

避免意外包含同一个脚本两次的一种方法是在模板系统中实现一个脚本管理模块。包含脚本的典型方法是在HTML页面中使用SCRIPT标签。

<script type =“text / javascript”src =“menu_1.0.17.js”> </ script>

PHP中的一个替代方法是创建一个名为的函数insertScript。

<?php insertScript(“menu.js”)?>

除了防止多次插入相同的脚本之外,该函数还可以处理脚本的其他问题,例如依赖性检查和将版本号添加到脚本文件名以支持将来的Expires头文件。

配置ETags

实体标签(ETags)是Web服务器和浏览器用来确定浏览器缓存中的组件是否与源服务器上的组件匹配的机制。(“实体”是另一个词“组件”:图像,脚本,样式表等)ETag被添加来提供一种机制来验证比上一次修改日期更灵活的实体。ETag是唯一标识组件特定版本的字符串。唯一的格式约束是字符串被引用。源服务器使用ETag响应头指定组件的ETag 。

HTTP / 1.1 200 OK
 Last-Modified:Tue,2006年12月12日03:03:59 GMT
 ETag:“10c24bc-4ab-457e1c1f”
 内容长度:12195

之后,如果浏览器必须验证组件,则使用If-None-Match标头将ETag传递回原始服务器。如果ETag匹配,则返回一个304状态码,这个例子减少了12195字节的响应。

GET /i/yahoo.gif HTTP / 1.1
 主持人:us.yimg.com
 If-Modified-Since:星期二,2006年十二月12日03:03:59 GMT
 If-None-Match:“10c24bc-4ab-457e1c1f”
 HTTP / 1.1 304未修改

ETags的问题在于它们通常是使用属性来构建的,这些属性使得它们对于托管站点的特定服务器是唯一的。当浏览器从一台服务器获取原始组件时,ETag将不匹配,并且稍后尝试在另一台服务器上验证该组件,这种情况在使用服务器集群处理请求的网站上非常常见。默认情况下,Apache和IIS都将数据嵌入到ETag中,这大大降低了在具有多个服务器的网站上进行有效性测试的几率。

Apache 1.3和2.x的ETag格式是inode-size-timestamp。虽然给定的文件可能位于多个服务器的相同目录中,并且具有相同的文件大小,权限,时间戳等,但是其inode不同于一个服务器。

IIS 5.0和6.0与ETags有类似的问题。IIS上ETags的格式是Filetimestamp:ChangeNumber。A ChangeNumber是用于跟踪对IIS的配置更改的计数器。ChangeNumber网站后面的所有IIS服务器都不可能是相同的。

最终的结果是由Apache和IIS生成的ETags完全相同的组件不会从一台服务器到另一台服务器。如果ETag不匹配,用户不会收到ETags设计的小而快的304响应; 相反,他们会得到一个正常的200响应以及组件的所有数据。如果您只在一台服务器上托管您的网站,这不是一个问题。但是,如果您有多台托管您的网站的服务器,并且您使用的是默认的ETag配置的Apache或IIS,那么您的用户的页面速度会变慢,您的服务器负载也会增加,消耗的带宽也会越来越多,高效地缓存您的内容。即使你的组件有一个更远的Expires标题,每当用户点击刷新或刷新时,仍然会发出条件GET请求。

如果您没有充分利用ETags提供的灵活验证模型,最好只删除ETag。该Last-Modified头验证基于对组件的时间戳。删除ETag会减少响应和后续请求中的HTTP头的大小。此Microsoft支持文章介绍如何删除ETags。在Apache中,只需将以下行添加到Apache配置文件即可完成:

FileETag没有

网站访问优化之-内容篇-减少HTTP请求 二

Gzip组件

通过网络传输HTTP请求和响应所花费的时间可以通过前端工程师做出的决策大大减少。确实,最终用户的带宽速度,互联网服务提供商,对等交换点的接近度等都超出了开发团队的控制范围。但是还有其他一些影响响应时间的因素。压缩通过减少HTTP响应的大小来缩短响应时间。

从HTTP / 1.1开始,Web客户端通过HTTP请求中的Accept-Encoding标头指示对压缩的支持。

Accept-Encoding:gzip,deflate

如果Web服务器在请求中看到这个头部,它可以使用客户端列出的方法之一压缩响应。Web服务器通过Content-Encoding头在响应中通知Web客户端。

内容编码:gzip

Gzip是目前最流行和最有效的压缩方法。它是由GNU项目开发的,由RFC 1952标准化。你可能看到的唯一的其他压缩格式是压缩,但效果不好,不太受欢迎。

Gzipping通常将响应大小减少大约70%。目前大约90%的互联网流量都是通过支持gzip的浏览器传播的。如果使用Apache,配置gzip的模块取决于您的版本:Apache 1.3使用mod_gzip,而Apache 2.x使用mod_deflate。

浏览器和代理存在已知的问题,这些问题可能导致浏览器期望的不匹配以及与压缩内容有关的接收不匹配。幸运的是,随着使用旧浏览器的情况下降,这些边缘情况正在减少。Apache模块通过自动添加适当的Vary响应头来提供帮助。

服务器根据文件类型选择要压缩的内容,但是通常压缩的内容太有限。大多数网站gzip他们的HTML文件。gzip脚本和样式表也是值得的,但很多网站都错过了这个机会。事实上,压缩包括XML和JSON的任何文本响应都是值得的。图像和PDF文件不应该被压缩,因为它们已经被压缩了。试图gzip他们不仅浪费CPU,但可能会增加文件大小。

尽可能多地缩放文件类型是减少页面重量和加速用户体验的简单方法。

把样式表放在最上面

虽然研究在雅虎的表现!我们发现,移动样式表文件HEAD使页面看起来要加载速度更快。这是因为将样式表放在HEAD中允许页面逐步呈现。

关注性能的前端工程师希望页面逐步加载; 也就是说,我们希望浏览器尽快显示它所拥有的任何内容。这对于有很多内容的网页和Internet连接速度较慢的用户尤其重要。进度指标等给用户视觉反馈的重要性已经得到很好的研究和记录。在我们的例子中,HTML页面是进度指示器!当浏览器逐渐加载页面时,页眉,导航栏,顶部的标志等都作为等待页面的用户的视觉反馈。这改善了整体用户体验。

将样式表放到文档底部附近的问题是,它禁止在许多浏览器(包括Internet Explorer)中进行渐进式呈现。这些浏览器会阻止渲染,以避免在样式更改时重新绘制页面的元素。用户被困在查看空白页面。

的HTML规范明确指出,样式表是被包括在网页的HEAD:“与A,[LINK]可以仅出现在一个文档的HEAD部分,尽管它可能出现任意次数”。这两种替代方案,空白屏幕或无风格内容的闪光都是值得冒险的。最佳解决方案是遵循HTML规范,并将样式表加载到文档HEAD中。

把脚本放在底部

脚本造成的问题是阻止并行下载。的HTTP / 1.1规范建议的浏览器下载不超过两种组分在每主机名平行。如果您从多个主机名提供图像,则可以同时进行两个以上的下载。然而,当脚本正在下载时,浏览器将不会启动任何其他下载,即使在不同的主机名上。

在某些情况下,将脚本移动到底部并不容易。例如,如果脚本使用document.write插入页面内容的一部分,则不能在页面中移动较小的内容。也可能有范围问题。在许多情况下,有办法解决这些情况。

经常出现的另一个建议是使用延迟脚本。该DEFER属性指示该脚本不包含document.write,并且是浏览器可以继续呈现的线索。不幸的是,Firefox不支持该DEFER属性。在Internet Explorer中,该脚本可能会被延期,但不会像预期的那样多。如果一个脚本可以被延期,它也可以被移动到页面的底部。这将使您的网页加载速度更快。

避免使用CSS表达式

CSS表达式是动态设置CSS属性的一种强大而又危险的方法。从版本5开始,它们在Internet Explorer中受到支持,但是从IE8开始已弃用。例如,可以使用CSS表达式将背景颜色设置为每隔一小时交替一次:

background-color:expression((new Date())。getHours()%2?“#B8D4FF”:“#F08A00”);

如此处所示,该expression方法接受一个JavaScript表达式。CSS属性设置为评估JavaScript表达式的结果。该expression方法被其他浏览器忽略,因此在Internet Explorer中设置需要跨浏览器创建一致体验的属性非常有用。

表达的问题在于,他们比大多数人的期望更频繁地被评估。它们不仅在页面呈现和调整大小时进行评估,而且在页面滚动时甚至当用户将鼠标移到页面上时也进行评估。向CSS表达式添加一个计数器可以让我们跟踪CSS表达式被评估的时间和频率。在页面上移动鼠标可以轻松生成超过10,000个评估。

减少CSS表达式计算次数的一种方法是使用一次性表达式,在第一次计算表达式时,它将style属性设置为一个显式值,该值将替换CSS表达式。如果style属性必须在页面的整个生命周期中动态设置,那么使用事件处理程序而不是CSS表达式是另一种方法。如果您必须使用CSS表达式,请记住它们可能会被评估数千次,并可能影响您的页面的性能。

使JavaScript和CSS由外部调用

许多这些性能规则涉及如何管理外部组件。然而,在出现这些问题之前,您应该提出一个更基本的问题:JavaScript和CSS应该包含在外部文件中还是包含在页面本身中?

在现实世界中使用外部文件通常会产生更快的页面,因为浏览器会缓存JavaScript和CSS文件。每次请求HTML文档时,都会下载HTML文档中内联的JavaScript和CSS。这减少了所需的HTTP请求数量,但增加了HTML文档的大小。另一方面,如果JavaScript和CSS处于由浏览器缓存的外部文件中,则在不增加HTTP请求数量的情况下减小HTML文档的大小。

关键因素是外部JavaScript和CSS组件相对于所请求的HTML文档数量的缓存频率。这个因素尽管难以量化,但可以使用各种指标来衡量。如果您的网站上的用户每个会话有多个页面浏览量,并且许多网页重复使用相同的脚本和样式表,则缓存的外部文件可能会带来更大的潜在收益。

许多网站都处于这些指标的中间。对于这些网站,最好的解决方案通常是将JavaScript和CSS部署为外部文件。首选内联的唯一例外是主页,例如Yahoo!的首页和My Yahoo! 。每个会话只有很少(可能只有一个)页面视图的主页可能会发现内联JavaScript和CSS会导致更快的最终用户响应时间。

对于通常是许多页面视图中第一个的首页,有一些技术可以减少内联提供的HTTP请求,以及通过使用外部文件实现的缓存优势。其中一种方法是在首页内嵌JavaScript和CSS,但在页面加载完成后动态下载外部文件。后续页面将引用应该已经在浏览器的缓存中的外部文件。

网站访问优化之-内容篇-减少HTTP请求 一

最小化HTTP请求

最终用户响应时间的80%用于前端。大部分时间都是在下载页面中的所有组件:图像,样式表,脚本,Flash等。减少组件数量又减少了呈现页面所需的HTTP请求数量。这是加快页面访问的关键。

减少页面中组件数量的一种方法是简化页面的设计。但是,有没有办法构建更丰富的内容页面,同时实现快速的响应时间?以下是一些减少HTTP请求数量的技术,同时还支持丰富的页面设计。

组合文件是一种通过将所有脚本合并为一个脚本来减少HTTP请求数量的方法,同样将所有的CSS合并到一个样式表中。当脚本和样式表因页面而异时,将文件组合起来更具挑战性,但是使这部分发布过程改进了响应时间。

CSS精灵是减少图像请求数量的首选方法。将您的背景图像组合成单个图像,并使用CSSbackground-image和background-position属性来显示所需的图像片段。

图像映射将多个图像组合成单个图像。整体大小大致相同,但减少HTTP请求的数量加速了页面。如果图像在页面中连续存在,则图像地图才起作用,例如导航栏。定义图像映射的坐标可能很乏味且容易出错。使用图像地图进行导航也无法访问,所以不推荐。

内嵌图像使用data:URL方案将图像数据嵌入到实际页面中。这可以增加您的HTML文件的大小。将内嵌图像合并到缓存的样式表中是减少HTTP请求并避免增加页面大小的一种方法。所有主流浏览器都不支持内联图片。

减少页面中的HTTP请求数量是开始的地方。这是提高首次访问者性能的最重要的指导方针。正如Tenni Theurer的博客文章“ Browser Cache Usage – Exposed!,您的网站的每日访问者的40-60%进来一个空的缓存。让您的页面快速访问这些首次访问者是更好的用户体验的关键。

使用内容交付网络

用户与Web服务器的距离对响应时间有影响。在多个分布在不同地理位置的服务器上部署您的内容将使您的网页从用户的角度更快加载。但是你应该从哪里开始呢?

作为实现地理上分散的内容的第一步,不要尝试重新设计您的Web应用程序以在分布式架构中工作。根据应用程序的不同,更改架构可能包括艰巨的任务,如同步会话状态和跨服务器位置复制数据库事务。尝试缩短用户与内容之间的距离可能会延迟或不能通过此应用程序体系结构步骤。

请记住,80-90%的最终用户响应时间用于下载页面中的所有组件:图像,样式表,脚本,Flash等。这是性能黄金法则。而不是从重新设计应用程序体系结构的艰巨任务开始,最好先分散您的静态内容。这不仅实现了响应时间的更大缩短,而且由于内容交付网络的缘故,这更容易实现。

内容传送网络(CDN)是分布在多个位置的网络服务器的集合,以更有效地向用户传送内容。选择用于将内容递送给特定用户的服务器通常基于网络邻近度的度量。例如,选择网络跳数最少的服务器或响应时间最快的服务器。

一些大型互联网公司拥有自己的CDN,但使用CDN服务提供商(如Akamai Technologies,EdgeCast或level3)是具有成本效益的。对于创业公司和私人网站来说,CDN服务的成本可能会很高,但是随着目标受众的规模越来越大,变得更加全球化,CDN是实现快速响应的必要条件。在雅虎,将静态内容从其应用程序Web服务器移到CDN(如上所述的第三方以及雅虎自己的CDN)的属性将最终用户的响应时间提高了20%甚至更多。切换到CDN是一个相对简单的代码更改,将显着提高您的网站的速度。

添加一个Expires或一个Cache-Control Header

这个规则有两个方面:

对于静态组件:通过设置远期Expires标题实现“永不过期”策略
对于动态组件:使用适当的Cache-Control标题来帮助浏览器提供有条件的请求

网页设计越来越丰富,这意味着更多的脚本,样式表,图像和Flash页面。首次访问您的页面可能需要发出多个HTTP请求,但是通过使用Expires头文件,您可以使这些组件可缓存。这可以避免后续页面浏览中不必要的HTTP请求。过期头文件通常与图像一起使用,但是它们应该用于包括脚本,样式表和Flash组件的所有组件。

浏览器(和代理)使用缓存来减少HTTP请求的数量和大小,使网页加载更快。Web服务器使用HTTP响应中的Expires标头告诉客户端可以缓存组件的时间。这是一个很远的将来Expires标题,告诉浏览器,这个回应将不会陈旧,直到2010年4月15日。

到期时间:2010年4月15日星期四20:00:00 GMT

如果您的服务器是Apache,请使用ExpiresDefault指令设置相对于当前日期的到期日期。这个ExpiresDefault指令的例子将Expires日期从请求时间设置为10年。

过期默认“访问加10年”

请记住,如果你使用了一个远期的Expires头文件,那么只要组件的改变,你就必须改变组件的文件名。在Yahoo! 我们经常使这一步成为构建过程的一部分:版本号被嵌入到组件的文件名中,例如yahoo_2.0.6.js。

使用远期未来只有在用户已经访问过您的网站后,才会影响页面浏览。当用户首次访问您的网站并且浏览器的缓存为空时,它对HTTP请求的数量没有影响。因此,这种性能改善的影响取决于用户多久访问一次带有缓冲区的页面。(一个“引导缓存”已经包含了页面中的所有组件。)我们在Yahoo! 并发现带有引导缓存的页面浏览量为75-85%。通过使用远期未来的Expires头,您可以增加浏览器缓存的组件数量,并在后续页面浏览中重新使用,而不会通过用户的Internet连接发送单个字节。

图像优化如何减少页面加载时间

最近的Imperva Incapsula调查显示,消费者期望网站快速渲染,62%的用户只愿意等待五秒钟(或更少)来加载一个页面。只有4%的受访者表示愿意等待20秒以上离开您的网站。

在互联网曙光的时候,一个充满图像的网页可能会花费过多的时间在浏览器中渲染 – 如果它的图像不是以某种方式进行优化,通常是通过压缩。今天,图像压缩只是改进页面加载时间的一部分。

图像优化包括几种其他方法来优化图形以减轻页面,减少加载时间并减少对网络资源的负担 – 包括与移动数据计划相关的数据简化。

搜索引擎可能会评估网页排名时的页面加载时间。更快的加载页面获得更高的位置。反过来,这样优化的页面可以为更广泛的用户群体提供站点可见性,同时在点击页面链接后也增强他们的体验。

优化方法

您的网页布局和结构应该确定优化方法。这些可以包括使用光图像格式,减少图像大小并限制访问者浏览器加载所需的图形数量。

图像压缩 – 通用光栅文件格式为.JPG(.JPEG),.GIF和.PNG,后者是一种无损,非专利的格式,取代了.GIF。矢量文件格式(如.PDF,.SVG和.EPS)不是使用单个像素的集合,而是使用坐标和图形参数来构成比其栅格对应物更小的图像。
将光栅图像转换为矢量格式是减少页面渲染时间同时保持完整图像质量的一种方法。但最好保留给像几何图形这样的图形,不适合照片(后者提供复杂的细节)。

矢量图像 – 矢量图像,如.pdf,.ai,.eps使用坐标和图形参数来构建图像。矢量图像通常小于其光栅对应物。使用矢量图像替换光栅图像可减少页面加载时间,但不会降低图像质量。

这适用于几何形状和图形的图像,但不适合那些比较复杂的图像,例如照片。

图像缓存 – 在代理服务器上存储图像可以快速访问。调用图像缓存,大大提高了页面渲染速度。
代理缓存将映像文件的副本放在区域性存在点(PoP)服务器上。如果它们只驻留在您的原始服务器上,则更容易获得,访问者的浏览器中的图像渲染将再次加速。对于使用几个图像的网站,在给定时间内保持不变,并在页面之间共享(例如,企业品牌,页眉和页脚),代理缓存可能特别有利。

在访问者的浏览器中缓存图像今天也经常使用。它限制重复的HTTP请求,同时还减少显示给定图像所需的下载位数。

图像优化和CDN

自动图像压缩 – 使用内容传送网络(CDN)可让您的网站访问者享受图像优化的优势,而无需任何人员单独操作文件。您可以确定图像质量与页面呈现速度之间的平衡。
渐进渲染 – 高级CDN可以在浏览器中快速呈现每个图像的高像素化版本。在接下来的几个时刻,它被几个变种所替代,每一个都提供了更高的质量。访客的看法是减少了页面时间。

自定义规则和策略 – 功能齐全的CDN可以为为您的站点服务的所有代理服务器建立缓存策略。许多还允许您逐个设置规则,以及某些文件类型和文件组。
Incapsula CDN使用高级代理缓存来保存整个网站内容的副本 – 包括图像。拥有超过30个PoP策略性地位于世界各地,您的网站访问者由最接近他们的数据中心迅速提供内容。我们的自定义策略,快速缓存清除和传递规则可让您确定特定文件的缓存方法。

网站优化有哪些误区?

对于搭建网站的站长来说,网站的优化直接关系到搜索引擎的排名,在网站优化过程中,我们常常存在着很多的误区,据了解,大概分为以下几种。

一、随意修改网站

多数网站在发展趋于稳定之前,都会经历长时间的波动,而经过数次大动作的调整的网站也有很多。众多的站长便会到百度上咨询:百度权重怎么又下降了等之类的问题。于是,很多站长们便开始去除友情链接,更换网站的主题,甚至为了优化内链,把以前写的伪原创文章都删除,殊不知这样会造成了大量的404页面(死链接),而这样的页面对网站排名是致命的伤害。

百度排名和谷歌不一样,谷歌一般都是循坏渐进的提升,比较稳定而且收录也很好,而百度排名不仅挑剔且波动性非常大。虽然搜索引擎排名是波动的,但是它钟爱于比较稳定的老字号网站。百度一般一周一次小更新,每隔一个月对网站进行重新评估。所以大家尽量以平稳的心态面对这些排名波动。重点声明:搜索引擎最忌讳频繁修改删除的网站!

二、页面关键字过度

在很多工具上,都告诉我们优化页面的关键词尽量控制在3-5个之间,可很多站长会想方设法的放大量的关键词,其实放这么多的关键词无疑是对客户体验有很大的伤害!百度这些年对于客户体验重视度提升,它把权重更多的分配给了客户体验度高的网站。

三、一味追求外链数量

站长现在在淘宝上也可以看到很多的外链工具,还称在一瞬间可以发送几千万条的外链,很多新手站长懒得去发放外链,就直接去购买、使用这些外链工具。其实这些外链工具主要利用各大查询平台去查询我们的网站,然后让网页生成缓存,这些缓存很容易被搜索引擎收录,所以造成了domain外链增多的现象。但是,笔者要说的是,这些外链来的快,去的也快,而且相关性质量差,所以站长们在优化网站时,一定要掌握怎样的操作方法才是对网站的优化长期有利。

优化网站有哪些方法?

如果您已经搭建了一个小型的商业网站,接下来需要考虑的是搜索引擎优化,这点非常重要,当网站访客进入您的网站时,他们会根据您网站的首页了解您的业务。下面为您提供4个优化网站的简单方法。

谷歌分析

安装Google Analytics(分析)是对目标网站进行访问数据统计和分析最简单的方式。

提示:将Google ID附加到您的网站时,请确保选择一个可靠的插件。并始终保持所有插件都是最新版,以保持您的网站安全。

标题标签和元描述

一个好的网站标题关键词和描述有利于搜索引擎找到,并为您提供相应的流量。

提示:尽可能的为您的网站添加关键词。这些关键词可以帮助您创建品牌声誉,并添加您的搜索引擎页面排名。

文章内容

建议在网站初期坚持每天发布文章,并尽量撰写原创,好的文章会有利于收录。

提示:提供易于使用的WordPress主机,适用于任何商业或个人网站。

移动优化

确保您的网站在各种尺寸的屏幕上都看起来舒服很重要,这样能更好的方便用户。

提示:我们的网站制作工具具有响应式设计,能让您在移动、平板电脑和台式电脑查看。

如果您遵循以上五个步骤优化您的网站,那么您就可以完成网站优化。有关如何让您的网站在搜索引擎页面排名中靠前,请给我留言,我会努力帮您解答,轻松地帮你提高您网站的SEO排名。