如何达到 Yahoo! ySlow GradeA 速度指标(二)

上篇文章针对 ySlow 的前 7 项指标做了说明,这里继续后面的 7 项指标。虽然网页显示速度对于 SEO 或许意义没有那么重大,但对于用户体验却十分有意义,有统计表明网页如果在 5 秒钟内没有下载完成则会丢失一半以上的用户,之后下载时间与用户流失成指数比例增长。这里将继续补充 ySlow 在 Small Site or Blog 标准下的后 7 项指标解释及如何达到 GradeA 指标……

yslow-grade-a

这里继续描述剩下的 ySlow 技术指标:

8、Avoid URL redirects

避免 URL 跳转:避免网址跳转,如一些较旧的站点喜欢做网站的引导页,然后里面加上例如 http-equiv=”refresh” 的 meta 标签用来跳转到默认栏目等等。如果刷新时间过短这种方式甚至会被搜索引擎认为作弊对于 SEO 也同样不利。

具体措施:如果因为网站文件结构变化或其他栏目变化而需要改变旧的链接地址可使用 301 重定向或 简洁链接 解决。

9、Remove duplicate JavaScript and CSS

移除重复代码:随着网站代码的积累,或多个开发人员的共同协作,不可避免在代码里面会出现一些重复代码,最为常见的就是 CSS 的重复定义,甚至 JavaScript 中也有可能出现函数的重复问题。

具体措施:在修改 CSS 或 JS 文件时务必删除旧的部分,不要一直在后面累加代码,添加新代码的同时需要删除旧的重复代码。

10、Reduce the number of DOM elements

减少 DOM 元素:减少文档对象模型(DOM)数量,这其实也是一种提高页面信息熵的手段,通常大小的页面其有用信息内容所占比例越高,页面信息熵也越高对于 SEO 非常有用,同时也意味着用最少的 DOM 节点数量实现需要的效果。

具体措施:减少 DOM 元素需要 HTML 和 CSS 经验的积累,实现同样的视觉效果必定不止一种两种方法,但哪种方法使用的 DOM 节点最少就需要长时间经验的积累。

11、Avoid HTTP 404 (Not Found) error

避免 404 错误:所谓 404 页面错误通常是浏览器访问不存在的页面时服务器返回的错误代码,在正常浏览中这种情况是不应该出现的。

具体措施:一旦网站成型开始内容填充,就不要轻易改变网站 URL 结构,特别是对于搜索引擎已抓取的页面,修改 URL 地址时务必使用 301 重定向代码导向正常的页面,尽量修改页面内容而不是删除。

12、Avoid AlphaImageLoader filter

避免 AlphaImage 滤镜:道理跟前面的第五条类似,由于 CSS 滤镜属性只有 IE 浏览器支持且需要消耗较多浏览器资源。

具体措施:删除所有 CSS 滤镜,替换为图片背景或符合 W3C 的 CSS 属性。

13、Do not scale images in HTML

禁止在缩放图片:在页面 HTML 里应禁止缩放图片,其实在页面结构修饰部分是不推荐使用 img 标签插入图片的,当然更不用说是缩放。这样会导致你的页面下载多余的文件流。

具体措施:基于用多大的图片就做多大思想,尽量避免在 html 中插入 img 图片,修饰部分尽量使用 CSS 背景来出效果。

14、Make favicon small and cacheable

制作小的缓存图标:浏览器通常会对服务器跟目录请求 favicon.ico 图标,如果没有将出现一个 404 错误见前面 11 条。

具体措施:由于 favicon.ico 将做为 cookie 存储,更小的 cookie 将减少服务器和客户端对 cookie 的浏览。使用专业的图标及图片优化工具,使用压缩的文件格式处理等等方法都可以大大减小图标文件的大小。

至此,关于 Yahoo! ySlow 里面 Small Site or Blog 标准里面的 14 项指标全部介绍完毕,这也是提高网站速度最基本的 14 项措施,在以后的文章里将继续介绍用于 Classic v1 标准及 ySlow v2 标准的其他一些指标,这些指标对于中大型网站将非常有用。

如何达到 Yahoo! ySlow GradeA 速度指标(二)》有1个想法

  1. J.C.

    Reduce the number of DOM elements这条还是不明白。我的站这个是B但是不知道怎么优化

    字面意思应该是建议减少 DOM 元素,也就是说你页面 HTML 里面使用了过多的标签。如果是版式需求,我个人觉得不用为了一个 A 而修改你的页面,现在你的页面看起来就非常整洁大方。

评论已关闭。