World of Warcraft exhibition

你为什么不应该纠结于PageSpeed Insights的反馈

Posted onLeave a commentCategories技术文章

为什么写这篇文章

先说点无奈的事情。

最近手里带的一个项目,经过产品,开发, IT 和 QA 不懈的努力做到了服务器响应时间 200ms 以下。本来是个皆大欢喜的局面,但是不知道管理层从哪知道了 Google PageSpeed Insights 这么个测评工具,于是这东西就成了我们站点的硬性指标了。

一测我们的网站,红的黄的六七十分。我自己都不能忍。自然各种根据工具的反馈,能调的都调了一下,勉勉强强75分上下,再也上不去了。老板隔三差五的邮件催促我,说来来来小伙子加把油 fighting 一下把75分提高的85分吧。我一脸懵逼啊,照我的理解后端和 IT 架构已经非常完善了,为了提高一个工具的反馈分数好像怎么都不是一个合理的需求。然后我特么的犯了一个书生气的错误,跟老板说这个分数不能再提高了。老板当场炸了。

事实证明虽然我三十而立了,还是太 young 太 simple,有时候 naive 了。后来才知道老板背后的思路是想建立品牌。我们的网站牛不牛逼,客户才特么不会管你背后用了什么高级缓存,什么几台服务器。那怎么让客户知道网站确实牛逼呢,得有个显而易见的标准。Google PageSpeed Insights 就被选了做这个标准。

既然这玩意已经是老板眼里必须要达到的红线,那我在不知情情况下,还傻乎乎的试图从专业角度建议他放弃这个想法,bingo,撞枪口上 了。这里吐槽一下那些误人子弟的观点,比如很多软文说,你做为一个专业人员,要有责任去说服非专业的老板少做一些无用功。扯淡。全j8扯淡。俗话说尽信书不如无书,我现在的直观感受是,先尽责任婉转的告诉老板他这么做的代价是什么,其他的成不成照执行就行了。

那么谈一谈我为什么认为网站没必要继续优化了呢。其一,上面说过了,网站速度相当快,提高工具分数和网站速度没逻辑关系。其二,我的短板是对前端优化的认识不够。我们网站上有个 Render blocking 的js,非常影响分数。我从前端那里得到的反馈是不能移到网站底部。这是影响赚钱的事情。然而后来得知这个也不是非不能动,需要产品和前端商量去重构。

经过前端的一系列纯 html 页面优化调查后,确实是有分数提高空间的。但是代价真的不小。其一维护成本显著上去了。原来只是一个非常规范的 WordPress 网站的开发。我们用子主题覆盖买的商业主题的逻辑来实现自己的功能。但是前端优化后,直接把商业主题给 hack 掉了。这特么就尴尬了,我们费了好多气力来迎合 WordPress 社区最佳实践。说 hack 就 hack 掉了。现在子主题的做法就是脱裤子放屁了,因为根本没办法做父主题的更新了。

其二前端引入了一系列前端的工程化工具,比如 gulp 等。这特么也尴尬了,因为之前我们通过 WordPress 插件来实现 CSS / JS 压缩,一些简单的前端代码,身为后端开发也可以处理掉。但是现在不行了,每个组员都要去安装 gulp 并且去理解这多出来的一道工序。倒不是说这个有多少复杂,会用这些工具对个体开发者来说是好事情。但是对这个具体项目的维护来讲,百害而无一利。考虑到未来的维护成本,Wordpress 开发者的水平是很参差不齐的。你每增加一个注意点,对以后的维护者都是成倍的不友好。我接触过一个 Drupal 项目,不知道之前的开发者经历了什么,一半数据在 Mysql 里,另外一半在 Mongodb 里。开国际玩笑谁有本事维护?观点就是能做成同样的事情,尽力要用更简单的方法和更少的工具。否则长期以来是搞不下去的。

其三,同样是因为用了 gulp 这类工具处理 CSS ,我们必须硬编码 CDN 链接。这个不是什么大事,就是疙瘩,也是时间长了容易引起困惑的地方。

上面废话说了那么多,其实总结一句话,老板想做的东西,必须想办法坚决执行下去。每个项目都有当前的关注点,其他的考虑都得为这个关注点让步。提高 PageSpeed Insights 分数就是当前的关注点,其他的方面说的再天花乱坠也没有用。我觉得很无奈,但这是事实。那么,就只能无条件提高分数了。

本站 PageSpeed Insights 分数

我这个博客现在的 Google PageSpeed Insights 分数还是蛮高的,前前后后投入了不少私下的时间来达到这样一个分数。

Desktop View Google PageSpeed Insights grade of https://blog.54zxy.com @ 2017-06-30
Desktop View 97
Mobile View Google PageSpeed Insights grade of https://blog.54zxy.com @ 2017-06-30
Mobile view 87

 

 

 

 

 

但是看了这分数,也没觉得有什么特别实际的意义。其一是这个站就是为了测分数而建立的。其二本站没什么人访问分数再高又如何。秉着好奇的态度在网上对 Google PageSpeed Insights 做了一些调查,发现不仅仅我一个人认为这个工具给的反馈其实是很有限的。

链接:Why you shouldn’t care about Google PageSpeed Insights

上面链接的文章深得我心,大意如下(加了一些我的理解和评论):

你为毛不应该鸟 Google PageSpeed Insights

作为一个网站作者,你知道应该要把你的站弄快点。你读了很多给 WordPress 提速的文章,装了一坨这类的插件来完成任务。你很大可能装了个缓存插件,比如 (WP Rocket,W3TotalCache,WP Super Cache 等)。然后你想看看到底有什么变化。

老多的文章告诉你,你应该去 Google PageSpeed Insights 测一测分数。然后你不测不要紧,一测测出来下面一大坨:

  1. 这些红的黄的是些什么鬼
  2. 为毛我的分不高呢
  3. 这些修改建议到底什么意思

你原以为加了缓存插件后,Google PageSpeed Insights 会给你一个比较好看的分数。或者你会想为什么缓存插件没自动修复这些建议。老多的人会问分数不高,是不是缓存插件做的不好。其实简单的真相是:

你的 Google PageSpeed Insights 分数,没有卵用。

你的 Google PageSpeed Insights 分数,没有卵用。

你的 Google PageSpeed Insights 分数,没有卵用。

国际惯例,重要的事情先说三遍再解释。

速度的需求

缓存插件的作用是让你的网站变快。速度,也就是网站加载速度是最重要的尺度。用户体验度和 SEO 都受这个指标影响。当 Google 机器人爬你的网站时,它看不到分数,只知道你网站的加载速度。

你知不知道 Google PageSpeed Insights 不测量你网站的加载速度呢?

咱再读一遍:

Google PageSpeed Insights 压根不测量你网站的加载速度。

我们喜欢用 Pingdom 来测量网站的加载速度:如何正确的测量网站加载速度
回头想想你的上学期间的事情,是不是你考了个很高的分数就证明你很聪明呢?不一定啊,这只能证明你知道怎么考出一个好分数。很多聪明的家伙根本就考不出一个像样的分数。

所以就像考试分数不能反映聪明度一样,Google PageSpeed Insights 分数也不是一个测量网站速度的正确指标。原文举了3个网站的 Google PageSpeed Insights 例子,加载速度差不多 465ms ~ 596ms 的三个网站,分别得了 91,58, 77 分。另外有个站加载时间有3秒多缺得了一个很高的分数。

所以现在你知道了吧,Google PageSpeed Insights 分数和你网站的速度半毛钱关系都没有。

追求某个分数是浪费时间的行为

没一个网站能达到满分的,实际上根本不可能达到。(这个有一定道理,挂个 google analytics js 就减1分)并且这分数和网站的加载速度没半毛钱关系,为什么费这力气。

如果你非要达到一个完美的分数,实现所有 Google PageSpeed Insights 的建议,你的网站的健康度会急速下降。(这尼玛真是说到我心坎里去了。

不吹不黑,你不能把所有 Google PageSpeed Insights 的建议都优化掉。因为有些建议是不现实或不可能的。举个例子,它可能会让你去给一个不是你网站的文件进行压缩或者设置过期头。(这个确实扯的有点远,google-analytics.js 的过期头,只能是 Google 它自己去设置的

再举个例子,如果你的站运用了 CDN 技术,Google PageSpeed Insights 可能会扣你一点分数。这个扯得更远了,因为 CDN 存在的意义就是加快用户的加载速度啊。Google PageSpeed Insights 给你扣分的点是,有某个图片可以压缩个 1KB的空间… (这个比较赞同,我专门去处理了几十个 GB 的老图片,才提高几分,并且编辑很快就在新的内容里用超大的图片,分数又降下去了。

Render-blocking Javascript and CSS

Google PageSpeed Insights 通常会建议你
在第一屏可视位置去除掉 Render-blocking 的 Javascript 和 CSS.
并且一般提供两部分的建议:

1.Remove Render-blocking Javascript

从性能上考虑,为了不阻塞其他页面元素的下载,通常把 Javascript 文件放到页尾或者异步加载是比较好的实践。但是呢 Google 没考虑到的情况是有时候你没办法把所有的东西都 load 到页尾去,特别是当你不是一个开发者并且你是用的一个现成的 WordPress 主题。

如果你经过一系列优化仍然看到 “remove redner-blocking Javascript” 提示,这意味着有些 JS 文件还是在头部加载。但是这可能是主题或者插件的作者有意而为之的事情。部分情况下如果你坚持把 Javascript 文件挪下去,你可能会破坏一些功能。(特别是 jquery 文件,如果加载顺序不对的话,很有可能出问题。

2.Optimize CSS Delivery of following

Google 建议你 “Optimize CSS delivery”。

从本质上他们希望你把你页面的第一部分用到的 CSS 隔离出来,直接贴到你的页面代码里,而不是放到一个统一的 CSS 文件里。所以你能看出来,这还是蛮繁琐的,基本需要你重新编码你的主题。并且这种优化要求是每个网站都不一样的,就不存在那种点一下就优化掉的缓存插件。

如果你是个开发者倒是可以采用这种策略。尽管它对整体的加载时间没有什么显著的改善。但是确实可以提高 Google PageSpeed Insights 分数,让你的网站看上去好像快了一点,因为你的第一屏加载的更早。这种微调会被诸如亚马逊之类的网站采用,因为10ms的差别都会影响他们的底线。然而绝大多数的小站点,这种优化是没有任何影响的。

那么 Google PageSpeed Insights 应该怎么用呢

Google PageSpeed 可以是个非常有用的工具,前提是你不要迷信把它当最重要的工具。有时候它会给你指出你网站上存在的问题。比如它能检测到你的页面内容没经过 GZIP 压缩。或者它会告诉你你的网站有太多的超大的,可以压缩的图片。下面是一个非常好的你可以实施的建议:Image Optimization – An Easy Win For A Faster Site

所以最好把 PageSpeed 仅仅当成你的一系列工具集的其中一个。它能给你一些重要指标,但是你的目标应该集中在提高真实的加载速度,而不是所谓的 “PageSpeed“ 分数。

使用 PageSpeed 准则

  1. 别盲目相信 Google PageSpeed 或者认同其表面价值。
  2. 永远要仔细阅读其建议并且评估是不是值得实施。如果需要你做你根本做不了的事情,无视之。
  3. 千万别忘记你的目标是提供网站加载速度而不是提高一个分数。
  4. 使用一些真正的测试网站加载速度的工具,比如 Pingdom 来看看你的改动对网站性能的影响。

发表评论

电子邮件地址不会被公开。 必填项已用*标注