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

标签: 译文 搜索优化SEO 网页分析优化 | 发表时间:2011-07-14 21:59 | 作者:龙君 Jimmy
出处:http://semwatch.org

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

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

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

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

使用的工具

正如每个SEO知道的,工具使得我们的生活更加便利。在这个情况下,也是一样的。我觉得最简单的工具就是用户火狐Firebug扩展的YSlow和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
无觅

相关 [优化 网页 速度] 推荐:

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

- Jimmy - SEM WATCH
我确信你们大多数人都非常清楚,网页速度已经成为搜索引擎的排名因素. 虽然对于搜索引擎来说,它不是一个关键因素,但是对访问者来说,我一直感觉它是的. 伴随着大量的人们使用超快的宽屏(并且数量在增长中),对于缓慢载入网站的耐心正在消耗. 个人来说,我讨厌等待一个页面的载入,并且我相信我的访问者也是这样的.

sqlite插入速度优化方案

- - CSDN博客移动开发推荐文章
先贴上SQLiteOpenHelper的代码,我们创建测试的表是user,它有四个字段id,name,age,height,remark,测试用的小米2,默认条数为100行. // 必须要有这一个构造方法. // 当数据库第一次创建的时候被调用,. // 当调用getReadableDatabase ()或getWritableDatabase 的时候.

【转】优化eclipse运行速度

- - 开源软件 - ITeye博客
转载: http://www.iteye.com/topic/756538. 作者:beckrabbit. 首先建立评估体系,将workspace里所有的项目close掉,关闭eclipse. 优化的用例就是启动eclipse,open一个项目,eclipse会自动build这个项目,保证没有感觉到明显的卡,也就是没有full GC.

Kraken.io:网页优化最佳工具

- - TechWeb 新酷网站 RSS阅读
  Kraken Web Optimizer 是一个集图片压缩、ICO图片格式转换、JavaScript 检查等功能于一体的在线网页优化工具. 如果你想优化网站速度、加快网站的开启速度或是减少浏览浪费的话,把图片压缩一下就是会个不错的方法,可达到立竿见 影的效果. 倘若网站使用了不JavaScript、CSS 或 HTML,Kraken.io 也能针对这些程序代码进行优化.

Windows 8 – 再一次,我们优化了启动速度

- Dylen - 爱范儿 · Beats of Bits
微软(Microsoft)前几天放出了一段视频,展示了 Windows 8 在一台老笔记本上的启动速度,效果相当不错,跟崭新的 Macbook air 可以相提并论了,看起来,长期以来困扰 Windows 用户的启动速度问题终于得到了优化. 不过呢,有人觉得这话听起来很耳熟,于是他翻阅了 Windows 之前各个版本的宣传词,发现了一些有趣的东西:.

优化listview的加载速度getview写法

- - Web前端 - ITeye博客
在android开发中Listview是一个很重要的组件,它以列表的形式根据数据的长自适应展示具体内容,用户可以自由的定义listview每一列的布局,但当listview有大量的数据需要加载的时候,会占据大量内存,影响性能,这时候就需要按需填充并重新使用view来减少对象的创建. 最快的方式是定义一个ViewHolder,将convetView的tag设置为ViewHolder,不为空时重新使用即可 static class ViewHolder { TextView text; ImageView icon; }.

如何优化与外部设备传输数据的速度?

- - 极客范 - GeekFan.net
在电脑和外部设备之间传输数据是一项常见的任务,照片,视频,重要文件,数据备份,它们时常会被来来回回传输很多次. 这就是为什么传输速度会让人不爽. 如果你需要马上带着几个GB的数据去参加一个会议,没人想等上十分钟来拷贝这些数据,马上就要迟到了. 幸运的是,有几种简单的方法来提高数据传输的速度. Windows的默认USB驱动使用“快速移除”数据传输策略,它会关闭写入缓存,导致数据传输变慢.

优化 WordPress 数据库,提高 WordPress 速度

- - 我爱水煮鱼
WordPress 的机制是主要使用 wp_posts 表来存储所有数据,包括日志,页面,附件,导航菜单等等,所以 WordPress 使用了一定时间之后,数据量一大还是有点慢,除了 对 WordPress 进行全方面的优化之外,我们还可以对数据表进行减肥和优化,来提高 WordPress 的速度.

优化WordPress速度 为服务器和访客减压

- - 神刀网
如果你用wordpress来做CMS站点那么你如果用主机托管那么一定杯具了,用VPS内存小了宽带小了也麻烦. 其他人都是教了一招,这次我汇集百家所长,十招齐发,十管齐下,勇者无敌. 大家多说时间就是生命,可能几秒钟的等待就会让网站失去一个访客,对于网站的速度你不能等. 1.Cookie的静态化制作 约有80%至90%的时间,访客要花费大量的时间等你的WordPress加载静态内容.

页面加载速度优化的12个建议

- - Web前端 - ITeye博客
Radware发布的2014年春季电商页面速度与Web性能”调查报告强调了电商页面加载速度的重要性,同时指出很多网站都没有利用最佳的页面优化技术,页面加速速度都存在很大缺陷. 那么该如何补救,提高网站页面的加载速度呢. 报告给出了12个页面加载速度优化的补救措施,用以改善加载时间,改善站长浏览者的用户体验.