通过Google Analytics 报表加快你的网页载入速度

一、每个页面都要处理

通常我们使用「PageSpeed」检测时,只会看首页的分数。但实际上,部落格每篇文章的页面,分数都是不一样的。

也许你会觉得每个页面载入的程式码都差不多,所以测过首页的分数,其他的应该也相去不远。而且,如果文章有几百、几千篇的话,哪有时间每篇都测呢?

听起来满有道理的,不过实测后就会发现差距还不少,后面会提供数据。

既然网站文章太多了,不会有时间优化每个页面的载入速度,那么我们把握一个重点即可:

  • 先从网站最热门的文章开始改善

而如何知道网站的热门文章有哪些?可以借助Google Analytics(以下简称GA) 的报表分析。

二、利用GA 筛选热门文章

1.其他筛选工具

如果看Blogger官方后台数据,或是官方「热门文章」工具,最多只有10篇而已。
不过免费的方案也是有,就是利用GA报表。

2. GA

GA有个功能很强大,可以一次显示出10个网页的PageSpeed分数,不用我们一个个手动输入,以下来看看怎么操作。

进入「 GA官网」,选择你的网站后,按以下步骤:

  • 「行为」→「网站速度」→「速度建议」

  • 如上图,显示了本站最近一星期,浏览数前10 名的网页。
  • 不断按下一页,就能看到其余的热门文章网页。
  • 也可依自己需求,选择不同时间间隔,例如最近3个月、最近1年等。
  • 红框标示处,第6 名代表首页,结果本站首页只有66 分,比第7 名足足少了20 分

其实有这样的结果我并不意外,因为本站最近改版之后,首页放了轮播、标签文章等工具,导致图片使用量大增,所以分数降低算是在意料之中。

得到优化名单后,那么接下来,你可以依据每个网页的PageSpeed分数,先从比较低的来进行优化,有更多时间时再处理较高分数的网页。

PS如果对报表上的数字感到纳闷,例如觉得载入时间的数据怪怪的,请参考GA官方说明文件「关于网站速度」。

三、调整图片尺寸

1.图片处理原则

其实我并不鼓励一眛追求网页载入速度,而强制裁减图片尺寸、或压缩图片,因为得到了速度,你可能失去更多东西。

依据不同网站性质,访客对图片的需求也不一样。例如:

  • 旅游、摄影性质的网站,如果图片尺寸太小,读者应该会看不过瘾,对吧!
  • 美食、介绍产品的网站,如果图片压缩到失真,那么食物看起来不美味,产品也很难卖出去吧!

所以我之后分享的图片处理流程,不见得适合所有网站,请读者自行拿捏。

2.首页+轮播+封面图

以下这些区块的图片,必须有较佳的品质呈现、来吸引目光,我不在意PageSpeed的分数,会另外处理:

  • 首页
  • 轮播
  • 文章封面图

尺寸可以大一些,压缩比例可以小一些。

3.文章内的图片

因为本站为教学性质,文章内的图片,画素不需要太好,压缩比例高一点也没关系,读者能辨识出图片内容就好。

我的处理流程是这样:

  • 使用「XnView」这个软体可批次处理大量图片
  • 设定图片尺寸自动缩小为850px 宽,但小于850px 则维持原尺寸
  • 设定一律压缩为75%
  • XnView 可储存设定细节,要处理时载入设定档即可

可自行调整你的参数,不一定要跟我一样。以上就是对于提高PageSpeed 分数,图片部分我们能做的事情。

四、精简网站功能

处理完影响PageSpeed分数最多的「图片」,接下来处理影响因素第2大的「Javascript」,也就是精简网站功能。

1.侧边栏

很多站长侧边栏挂了非常多工具,那么现在可以好好评估一下,是不是每个工具都有必要安装?

如果你找资料时,喜欢看「没有侧边栏」的网站,版面比较清爽,那么代表侧边栏的工具,在某种程度上不是那么重要。

想想去逛同类型网站时,你会使用别人家哪些侧边栏工具呢?如果有某些工具是你根本不会去看、去用的,那么可以考虑从自己家下架。

如果不是以图片为主的网站,侧边栏工具例如「热门文章」、「最新文章」等等,可以不显示缩图,加快网页载入速度。

以本站为例,纯粹自己要看的「最新文章」、「最新回应」、「友格+关注」等工具,则用分页功能隐藏起来。需要使用时,点击分页才会执行这些外挂。

2.广告

每个「广告单元」都会花费很多载入时间,那么不用说,如果一个页面放了4、5个广告,网页读取是不是会很卡?

如果多放广告能增加收入,而且你的网站也需要这样的收入,那么我建议不要在意PageSpeed的分数,毕竟钱赚得少会比较痛。

如果广告收入没那么重要的话,我会建议放1~2个广告单元就好了,而且你会立刻感受到,PageSpeed分数的上升。

3.其他外挂

还有很多外挂,装了看起来很炫、或心情上比较好,但没有装也不影响网站运作,例如:

  • 数字分页
  • 随机文章
  • AddThis 这类的社群分享按钮外挂
  • 灯箱
  • 留言板外挂(用官方预设的就好)
  • 即时显示线上人数
  • 即时线上客服

以上是大略举例,可根据自己需求决定是否移除这些外挂。

五、减少FB 外挂、内嵌工具

1. FB外挂

因为FB出的外挂太多了,独立一个章节说明:

  • 如果有经营FB 粉丝团的话,粉丝团算是必要外挂,比较难割舍。
  • 而FB 留言板,如果使用率真的不高,建议可以移除,使用部落格原生留言板就好。
  • 赞按钮我发现几乎没有人按,所以本站已经移除。

2.内嵌Iframe

许多旅游、美食网站因为需要介绍店家位置,会在文末内嵌「Google地图」,这会增加网页载入时间,建议改用超连结即可。

一些FB经营得不错的站长,会在文章内嵌FB相关留言或贴文,一样会增加载入时间。不过运用得好的话,内嵌贴文有其效果存在,站长可自行评估。

总之,要提升网页载入速度的话,任何内嵌Iframe都是可以考虑开刀的对象。

六、总结

最重要的是,是否优化、或割舍这些项目,都不是绝对的,也没有标准答案,一切取决于你的需求。

鱼与熊掌一次只能拿一个,没有说又想增加PageSpeed分数,又想获得好处这回事。

其实抉择也很简单,究竟保留现有的状态,获得的利益会比较大,还是移除了某个外挂,分数上升心情会比较好,那么答案就出来了。

405 次浏览

发表评论

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