19

提高 Hexo 加载速度

 3 years ago
source link: https://rapiz.me/2020/improve-pagespeed-insight/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

提高 Hexo 加载速度

提高 PageSpeed Insights 得分

In DEV By Rapiz 2020-08-23 Hexo, SEO PageSpeed Insights,disqus,懒加载,百度爬虫,GitHub Pages

PageSpeed Insights

试了试 Google Search Console 里的 PageSpeed Insights 发现得分只有四十多——我还一直觉得自己网站加载挺快的呢。

仔细一看基本上是 Disqus 拖累了网站的加载。 Sukka 写了一个懒加载 Disqus 的脚本，可以在屏幕滑倒评论框的时候再去加载 Disqus。复制粘贴之，手机版性能评分达到 40+， 电脑版达到 100。

顺带一提，还没优化前，PageSpeed Insights 给出的加载时间和百度爬虫的“爬取诊断”所耗时间差不多，我留心了一下。百度爬虫一直要用大概 3 秒的时间爬取页面。我还以为是因为百度服务器到 GitHub Pages 访问较慢的原因。但 GitHub Pages 最近加了几台服务器，在大陆的访问情况也挺好的，百度爬虫怎么就爬不好呢？其实还是 Disqus 加载速度太慢的原因。

用了 Sukka 的脚本之后，再次爬取诊断，加载速度降低到 0.8s，效果拔群。

我一直也觉得百度对本站收录一直非常少，也有加载速度慢的原因。以后再看看吧。

静态资源压缩

html, css, js 这些资源是可以通过 gulp 等工具进行压缩的。这里有一个 Hexo 插件 hexo- neat 自动化了压缩流程。 不过在我的博客上 js 压缩没有起作用。可能是插件的一个 Bug。

Reference

使 Disqus 不再拖累性能和页面加载


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK