加快页面响应时间的五种方法

是非常重要的搜索引擎优化使你的网站加载速度尽可能快;用户想要快速浏览你的网页，如果你不能提供给他们，他们就会去别的地方。在本文中，您将看到关于5个简单有效的技巧为加快你的网页速度．

1.使用YSlow来配置和测量你的网站加载时间

知道你的网站需要多长时间来加载是确定错误的第一步。它还可以让你知道你是否需要对你的网站做出改变以加快速度。

在开始之前，如果您尚未安装YSlow，请先安装。它是一个Mozilla Firefox扩展，可在以下链接中找到：

首先，让我们导航到六次修订网站，所以我们都与相同的例子(只是在一个新的标签或浏览器窗口打开它)。

在浏览器的右下角，有一个带有里程表的栏(参见图1)。在该栏旁边，在页面完全加载后，您将看到' YSlow '后面跟着一个数字。这个数字是站点在浏览器中加载所花费的时间(以秒为单位)。我们希望这个数字越低越好。

图1:YSlow图标和显示页面加载时间的里程表。

通常情况下，导致页面加载时间如此之长的原因是以下原因之一或组合:

• HTTP请求过多
• 未压缩(或未缩小)的JavaScript文件
• 静态图形文件没有过期头

我们一会儿再谈这一切。

要熟悉网站加载时间的性能，可以浏览一些网站。看看谷歌的主页、Facebook和一些你最喜欢的博客/网站，你会发现网站使用的图片或JavaScript越多，页面响应时间就越长。

使用YSlow的特性

除了测量页面加载的速度外，YSlow还可以让您了解如何提高站点的性能，以及站点的加载性能不足之处。

下图是“性能”选项卡(图2)。当你点击它时，它会启动每个影响加载时间的区域的详细评分，并给出一个整体性能评分。

图2:Performance选项卡。

最主观的领域是使用CDN（内容交付网络）。CDN对于较大的站点更有用。他们所做的是将一个站点的内容传播到各个地区的多个服务器上。在加载网站时，当物理服务器靠近用户时，页面加载速度更快。因此，本质上，使用CDN进行内容交付服务的是来自服务器的文件，该服务器距离访问页面的用户较近。

图3:性能选项卡显示了字母等级(a, B, C, D, F)和百分比等级(1-100)。

除了使用CDN(这可能是昂贵的)，其他一切都是可行的。

放坡区

让我们来看看每个评分因素。这里有一个简短的描述，这些分级区域是什么，以及如何
解决这些问题以获得最佳性能。

减少HTTP请求：每当网页从服务器请求文件时，就会发生HTTP请求
服务器。其中包括脚本、CSS文件、图像和异步客户端/服务器端请求(Ajax和其他技术变体)。
这是性能最关键的部分，也是一个很容易解决的问题，只需要一点点的努力。例如，缓存文件
在用户的机器上，以及巩固脚本、CSS、
和图片。

添加Expires标头: 80%的页面加载时间集中在下载脚本、图片、
和CSS。大多数情况下，这些元素不会在用户的机器上更改。通过
在.htaccess文件中添加一些代码可以缓存冗余文件
在用户本地机器上(我们将在本文后面讨论如何做到这一点)。

Gzip部件: Gziping或压缩JS文件，图像，HTML文件，CSS文件等，允许用户下载一个小得多的版本的文件，提高页面加载的速度。这可以减少服务器的负担，但是解压缩组件可能会导致页面响应时间变慢，这取决于用户的浏览器。

将CSS放在顶部:把CSS文件放在你的文档的顶部可以让你的网站
在其他组件（如图像和脚本）仍在加载时，尽快呈现网页。

把JS放在底部:将CSS放在文档的顶部，在关闭文件之前插入JS文件当这些脚本在后台传播时，标记允许您向用户呈现似乎是一个完整的页面。

避免CSS表达式:我个人从不使用CSS表达式(也称为动态属性)，这是一种只适用于ie的专有方法，用于向CSS添加编程概念(如控制/条件结构)。从IE8开始，基于trident的布局引擎(IE中使用的)将不再被支持，所以无论如何使用它们都不是一个好主意。相反，我使用PHP编写脚本
根据不同的条件加载不同的CSS样式规则，可以是随机数，
一天的时间，或浏览器。

使JS和CSS外部:将JS和CSS放在外部文件中可以让浏览器缓存它们
使页面加载速度比每次内联加载的文件快
该页面称为。

减少DNS查找:当用户在浏览器地址栏中输入域名时，浏览器将对该IP执行DNS解析
地址。你的网站需要更多的位置
访问时，必须进行更多的DNS查找。尽你最大的努力保存这些
低，平均需要60 - 100毫秒进行DNS查找。

贬低JS:不像常规的gzip压缩，缩小JavaScript文件是删除
不必要的空格、制表符和其他各种选定字符
减少文件的整体大小。用一个更小的文件，你可以
有一个更快的页面加载。您可以使用一来减少JavaScript。

避免重定向不管你是做了一个服务器端头重定向，一个JS重定向，还是一个HTML元重定向，你的网站都将继续
要加载带有空白页面的页眉，然后加载新页面，会增加用户到达他们想要访问的实际页面所需的时间–因此
无论如何都要完全避免这种情况。

删除重复的脚本:让你的浏览器加载相同的脚本两次将增加你的页面
负载。这是简单的数学。更多的文件等于更多的加载时间。仔细检查
你的网站，确保你没有调用jQuery 2或3次或任何
关于那件事的剧本。

唷…这太多了，让我们先进入YSlow的下一个选项卡，然后再学习一些其他技术来提高网站的性能。

图4:Components选项卡。

的组件标签（图4）让您了解提高站点速度的努力产生了什么效果。在这里，您可以看到加载某些文件所需的时间，这些文件是否为gzip，响应时间，以及它们是否缓存在用户计算机中以及缓存何时过期。这有助于检查站点的组件、测量它们的性能和优化它们的速度。

最后，我们有统计选项卡(图5)这个选项卡显示了下载文件和缓存文件的所有HTTP请求。Empty缓存显示浏览器为了呈现页面而必须下载的文件。另一方面，Primed Cache是用户浏览器缓存中已经存在的文件列表，这样浏览器就不必重新下载这些文件。

图5:Stats选项卡。

2.使用CSS精灵减少HTTP请求

CSS Sprites可能是最酷的东西特斯拉发明了电，我说过…哦,我的意思爱迪生．

不完全是，但相当接近。

CSS精灵可以通过整合CSS背景图像，减少页面向服务器发出的HTTP请求量，从而减少页面加载时间。

大多数教程只教你如何使用CSS Sprites来导航，而我要说的是将它用于站点的整个用户界面。

首先，让我们快速浏览一下YouTube以及他们如何使用CSS Sprite(图6)。

• master-vfl87445.png

图6:YouTube的“master”CSS Sprite。

所发生的是，使用CSS, YouTube设置一个类与这个图像作为背景(见上图)。然后，对于需要使用这些图像的元素，将相应地设置它们的类背景位置CSS属性设置为正确对齐该元素的顶部和左侧。

让我们试一试。我们将以YouTube图像为例。

在下面的例子中，我们将YouTube Logo渲染到屏幕上。使用相同的精灵类和图像，我们将创建一个简单的滚动图标。

现在我们所做的是允许所有静态站点资产来自单个HTTP请求，这大大减少了页面加载

当你将鼠标悬停与精灵一起使用时，它将实现无缝过渡，而不像当你在鼠标悬停状态加载文件时那样，在文件加载之前会留下空白。