是非常重要的搜索引擎优化目的您的网站加载尽可能快;用户想要快速看到你的网页，如果你不能给他们这一点，他们就会去其他地方。在本文中，您将看到关于五个简单有效的技巧为加速你的网页．
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，
和图片。
添加过期报头: 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)让您深入了解为提高站点速度所做的努力产生了什么结果。在这里，您可以看到加载某些文件需要多长时间，这些文件是否被gziped，响应时间，以及它们是否被缓存到用户机器中，以及它们的缓存何时过期。这有助于检查站点的组件，测量它们的性能并优化它们的速度。
最后，我们有数据选项卡(图5)。
这个选项卡显示了下载文件和缓存文件的所有HTTP请求。空缓存显示浏览器为了呈现页面必须下载的文件。另一方面，Primed Cache是用户浏览器缓存中已经存在的文件列表，从而使浏览器不必再次下载这些文件。
图5:Stats选项卡。
2.使用CSS精灵减少HTTP请求
CSS Sprites可能是最酷的东西特斯拉发明了电，我说过吗…哦,我的意思爱迪生．
不完全是，但很接近了。
CSS精灵可以通过合并CSS背景图像来减少页面向服务器发出的HTTP请求的数量，从而减少页面加载时间。
大多数教程只教你如何使用CSS Sprites进行导航，而我要说的是将其用于站点的整个用户界面。
首先，让我们快速浏览一下YouTube及其如何使用CSS Sprites(图6)。
你可以在这里找到YouTube的CSS Sprite:
- master-vfl87445.png
图6:YouTube的“主”CSS Sprite。
所发生的是，使用CSS, YouTube设置一个类与此图像作为背景(上图)。然后，对于需要使用这些图像的元素，将相应地设置它们的类背景位置CSS属性设置以正确对齐该元素的顶部和左侧。
让我们试一试。我们将以YouTube Image为例。
在下面的例子中，我们将YouTube Logo渲染到屏幕上。
使用相同的精灵类和相同的图像，我们将创建一个简单的翻转图标。
现在我们所做的是允许所有静态站点资产来自一个HTTP请求，这大大减少了页面负载
当你在精灵中使用悬停时，它可以实现无缝过渡，不像你在悬停状态下加载文件时，在加载文件之前会留下空白。