首页加载速度优化方案

仲平 发表于 1 月前 共 818 字、阅读约 2 分钟

自己一条龙研发的 Halo 博客主题 Redemption 最近也是发布了首个正式版,在博友杜郎俊赏提供的 CleanCSS 工具下麻溜地搞定了,同时又添加了一些自己的想法。主要思路是首页做减法:删减无用代码文件、压缩静态资源体积,同时完全不影响首页的内容展示。

问题场景

整体未优化前

如上图博客首页未优化的加载速度,需要 2.03 秒并且存在可优化的余地。优化方案主要从静态资源、样式表、字体这三个方面出发。整套操作步骤下来,实测速度提升了近 5 倍。

0.内容分发(CDN)

傻瓜式优化就是 CDN,各个云服务厂商都有提供。最简单最省事最有效,CDN 具体优化步骤可根据厂商提供的文档操作。(有的要钱有的不要钱,有的好用有的不好用)

1.静态媒体资源

图片优化效果

首页如果有媒体资源,例如图片、Logo 等。那么最简单的方法就是压缩图片体积,便捷高效的提升首页加载速度。

2.CSS/JS 代码

如果想优化 CSS/JS 代码文件,可以尝试在博友杜郎俊赏提供的 CleanCSS 中一键优化代码。

CleanCSS 第一次直接优化了之后提升明显,但是发现 remixicon.css 字体图标有问题。然而这个优化还是最大问题,毕竟加上字体 1.3s,遂又找了其他方法实现(后来发现是我没用明白 CleanCSS 🤣)。

后来在 GitHub 上找到开源项目 UnCSS ,其提供了简单的在线优化,使用了一下满足需求足够用了。最后再利用在线 CSS/JS 压缩体积工具,就大功告成!

css优化

3.优化字体

常见的优化就是 CDN、静态资源、CSS/JS 代码,这里我为了追求更极致的速度,将字体文件也进一步优化。优化方向稍微偏激了,根据实际情况来。

因为 remixicon.css 的字体图标文件只用了几个,所以我利用 Github 上 font-spider 将无用的字符进行删减。如下图所示可以发现,字体删减优化是质的改变,体积缩减了近 70 倍!

font-spider优化

优化后

整体优化后

在特定问题场景下,通过一套操作优化后的首页体积仅仅 35kB,加载时间 597 毫秒。就连 CDN 都不用套,全国平均访问延时 0.6s。需要注意的地方是,优化字体比较偏激可能导致页面显示不正常。其次我为了避免其他页面出现未知错误,利用代码进行判断仅仅对首页进行了优化。

现在 H5 的 CSS 样式库越来越多了,网页效果越来越优美了,同时也变得臃肿了起来。不过只要网速快,优化个毛线!奥里给!!!

退回首页 留下一言