优化网页速度-SEOs和Web开发者可执行的技巧

我确信你们大多数人都非常清楚，网页速度已经成为搜索引擎的排名因素。虽然对于搜索引擎来说，它不是一个关键因素，但是对访问者来说，我一直感觉它是的。

伴随着大量的人们使用超快的宽屏(并且数量在增长中)，对于缓慢载入网站的耐心正在消耗。个人来说，我讨厌等待一个页面的载入，并且我相信我的访问者也是这样的。

这是为什么如果你投入大量的时间和金钱来提高你应得的排名，你不能因为有一个速度慢的网站而拖累它。

这是为什么我想要分享一些我从优化自己网站载入速度中学到的实用性的建议。如果你没有运营一个网站的背景，没关系，我将把一切解释清楚(如果不是，就传给你的网站团队吧)。我们开始吧。

使用的工具

正如每个SEO知道的，工具使得我们的生活更加便利。在这个情况下，也是一样的。我觉得最简单的工具就是用户火狐Firebug扩展的YSlow和Page Speed插件。

• 你可以通过 - https://addons.mozilla.org/en-US/firefox/addon/firebug/ 下载 Firebug
• 你可以通过 - https://addons.mozilla.org/en-US/firefox/addon/YSlow/ -下载YSlow
• 你可以通过- https://code.google.com/speed/page-speed/download.html 下载 Page Speed

如果你使用谷歌浏览器，下可以去谷歌官方下载类似功能的插件，我在WP Smush.it插件使用说明:WordPress 图片优化 一文中有类似应用，你可以参考一下。

Page Speed插件便利的是，如果你点击进入每个部分，它可以给你额外的信息并且每个部分都按照优劣程度被标记上了颜色。红色表示坏的，黄色表示OK,绿色表示非常好，足够简单了吧。

你能做什么

以下是我见过人们没有优化的一些最常见的地方。我将会每个都过一遍并解释你可以怎么样去修改。

压缩CSS

CSS(cascading style sheets;使你的网站美观的文件)是通常被忽视的，对任何合理的网站来说，CSS文件可以拥有两百到几万行代码。每个 tab, space, 额外的逗号,换行符 & 代码注释增加你文件的大小。虽然它们使得人们更便于在代码中工作，但是也会降低你网站的速度。

解决的办法是为开发者地工作保持原始样本的，然后让他们为这个有活力的网站压缩代码（删除所有不必要的bits）。你可以期望平均节省20-30%。这在超大的文件上很有帮助。

通过最大程度的压缩，可以实现更高的储蓄。

压缩JavaScrip

很多人们也会忘记压缩他们的JavaScrip，所有这些空间加起来，可以在大文件上使用很多的空间。最近更是这样，现在如jQuery和MooTools 的JavaScript库已很普遍了。

PageSpeed​​也有一个内置显示节能压缩器。

减少文件请求数据量

你的网站向服务器提出获取文件的服务器，会减缓页面载入速度。所以请求数量越多，网站速度会越慢。

当你去搭建一个网站的时候，想想在哪里你可以为了效益避免使用图片并代替使用CSS。只是少数的例子是渐变，按钮，圆角和其他更多。所有这些都可以使用CSS。

这也包括你对CSS文件和JavaScript文件的请求。考虑到以下：

在这里你可以看到很多JavaScript文件的请求。所有这些都可以合并成一个文件，被请求一次。

我们可以讨论更多关于在CSS 脚本中为图片缩小文件请求的。

使用浏览器缓存

你不仅可以缩小文件，你也可以使的用户的浏览器缓存你的文件（或下载并使用一个本地副本），而不是每次重新加载他们。这就减少了请求并且使回复访问者的加载更快。

检查Google页面的缓存 https://code.google.com/speed/page-speed/docs/caching.html

减少重定向

重定向需要时间。你有的重定向越多，用户要到达重定向的页面所要花的时间越多。

尽可能避免重定向。

优化图片

这也经常被忽视。如果你的网站有很多图片或者大图片，他们会花很多时间去加载。知道哪种文件类型去节省你的图片是成功的一半。在 Photoshop 或Fireworks上，图像导出向导会告诉你文件有多少字节或千字节。

简单的图像往往是在PNG格式小，而更复杂的图像往往是JPG更好。也有质量不同水平程度的图片可以导出。如果这个和媒介之间没有明显区别的话，为什么导出最高质量的JPG呢。

检查先前的图片可能会花一些时间，但是保存很有帮助。尤其是当你有一个热门的网站并为宽带支付的时候。

使用Fireworks多于Photoshop来导出图片也是一种节省。这篇文章完美地阐述了这点(http://webdesignerwall.com/general/fireworks-vs-photoshop-compression).

这里有个对于节省时间的归纳总结(这里只说背景图片)：

“如果我用Fireworks导出北京图片，我能减少20kb的文件大小。我一天平均有16000的访问量。20 kb x 16, 000 = 320, 000 kb.是的，每天有 320 megabytes

避免错误CSS

CSS很容易就学会了，但是难以掌握。有一些很棒的网站可以去学习怎么写更好的CSS，那些CSS代码更有效益，值得你或者你的开发者阅读学习。我几乎可以保证每个人都可以学到一些东西。

有个很棒的网站去学习更多的CSS知识，叫做 CSS Tricks，但如果你去做Google搜索，会发现成千上百个。

启用压缩

你也可以在你的服务器上启用Gzip或者 deflate 。这将会减小向你的访问者呈现html、CSS等文件大小。再说一次，更小的文件=更快的载入速度。

你在这里能学习到更多关于压缩(https://code.google.com/speed/page-speed/docs/payload.html#GzipCompression)

使用CDN

Content Distribution Networks是一个在你网站上呈现媒体的极妙并且便宜的方法。从例如 Amazon’s S3 服务器的CDN上载入图片，而不是使用你的网站来发送给你的访问者。他们取消关闭服务器的负载，使其能够为更多的访问者服务。

CDNs更适合中等至较大的网站，如果你正服务于每天上万或者上十万的访问者，差异会很显著。

使用一个缓存系统

现在几乎所有的网站使用数据库。电子商务网站和博客是最好的例子。正如我们讨论过，您对服务器的每个请求，减慢了页面的加载，这完全与数据库相同。每次你载入一个页面，向数据库请求信息，然后返回给访问者。

在服务器处于尝试向每个人提供他们请求的信息的压力下而崩溃之前，服务器每秒只能处理这么多的请求。这就是缓存系统开始发挥作用的地方了。

一个缓存系统将请求的信息例如每小时一次，并“保存”的结果，而不是每次人们打开一个页面就请求的信息。每个游客将得到保存的版本，直到它再次更新。这原则就像Facebook的网站处理数向数据库发出每秒以百万计的请求。

这种战术通常适用于中等至较大的网站，但如果你使用如Wordpress或Magento安装包来搭建网站，那么你可以很容易实现缓存。

WordPress

我最喜欢的WordPress缓存插件是hyper cache 。这是一个五分钟的安装/配置，并会帮助您处理您可能会收到的大量的traffic或高峰traffic，如果您网站上内容安置例如Digg的功能。链接是http://wordpress.org/extend/plugins/hyper-cache/

通过快速搜索来发现也有许多其他以类似的方式工作WordPress的缓存插件。

电子商务

大多数电子商务软件包伴随着缓存插件。例如Magento有一个很好的缓存系统的构成。如果你已经创建您自己的电子商务软件，并发现它加载速度非常慢。那么你应该考虑实施例如memcache的一个缓存系统。

使用CSS Sprites

这也许是我最喜欢的小把戏。CSS Sprites是一个很好的方式，不仅减少你做出的图像请求，但也减少了图像的整体规模。

这个概念很简单和优雅。使用一个图片作为一个“模板”，然后选择“模板”中的一小部分。

以上是一个CSS sprite。这一幅图像作为网站上很多按钮，nav headings,icons等得模板。通过使用 sprite，请求的数量下降，所以整体文件减小。

很酷吧？

写出好的代码

这可能似乎是显而易见的的，但编写干净的代码，没有不必要的重演可以让你的网站更快。如果您有定制软件，那么它很可能是值得移动到一个预先建立的解决方案或系统重建，如果没有上面所说的来提高您的网站速度。

即使 你的前台效益再好，不佳的后端优化的代码肯定会减慢您的网站。

如果这还不够

所以，你做了上述所说的并且您的网站仍然加载缓慢。你还有什么可以做？

检查您的硬件

如果您正试图在一个的共享主机上的运行运行20000产品的一个电子商务商店，那么这很可能是你的问题。服务器硬件和配置，你有可能是你的速度慢的原因。

它可能无法跟上你日复一日的负载。升级您的服务器或一个更强大的服务器，可能是解决方案。这也可能是一个选项，以购买更多的服务器和分离的负荷。即一台文件的服务器，一个数据库的服务器，等等。

更新您的软件（如：WordPress的更新）

如果您使用的是预先内置软件，如WordPress，那么您可能就需要更新。常常将已开发编写更高效的代码，并解决了很多问题。如果您使用的是旧版本，那么您将无法受益于他们的改善。

请谨慎使用，当你升级的时候，一个单独的服务器上进行升级测试。不要只升级您现在的网站，并希望没有任何损坏，因为往往出现这种情况… …这将损坏。

截止思考

我希望这给了你如何优化你的网站加载速度的启发。这不是一个全面的指南，所以我敢肯定存在没有被列入肯定会帮助你的事东西。

我的建议是，简单的工作页面速度，试图得到尽可能正确。你永远也不会打100/100（我相信我已经试过了 – 我最近的是98/100），但它必将给你一​​个路径去走。

对于这一长期的那些重视的人，你可能会疑惑，为什么我还没有谈到YSlow的。YSlow的和PageSpeed​​执行类似的任务，既可以提供额外的一点见解，如果你深入到他们内部的标签。YSlow在bar的附带上也便捷显示了的加载时间，当你想提高你的速度的时候。

————————————————————————————————————

龙君点评:原文链接

1、正如原文所说的，本文只是一篇简单介绍如何优化页面，提高网页载入速度的文章。本文在基于Page Speed这一功能展开，比较浅显的阐述查看页面各项指标和对应优化的方法。但是如何详细去操作，这里并没有记叙。如果读者想要更深一步了解优化页面的方法，请查看SEMwatch或本博客的相关文章。

2、译者将会深入了解本文提到的部分内容，请继续关注本博客的更新。

3、译文或许会出现翻译问题，请读者参考原文，如果编译有误，请提醒译者，SEMwatch团队表示感谢。

您可能也喜欢：
Avinash：搜索引擎优化指标&分析的问与答	页面SEO的8种简单优胜法	面包屑设计：以用户还是以 SEO 为中心？	2010年终：信息架构与SEO
无觅