From dd26433ff6de83ca29113edf8d571b1fee92ccba Mon Sep 17 00:00:00 2001 From: 7Wate Date: Thu, 3 Nov 2022 15:37:06 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8D=9A=E5=AE=A2=EF=BC=9A=E9=A6=96=E9=A1=B5?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E9=80=9F=E5=BA=A6=E4=BC=98=E5=8C=96=E6=96=B9?= =?UTF-8?q?=E6=A1=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blog/首页加载速度优化方案.md | 58 ++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 blog/首页加载速度优化方案.md diff --git a/blog/首页加载速度优化方案.md b/blog/首页加载速度优化方案.md new file mode 100644 index 00000000..a4441666 --- /dev/null +++ b/blog/首页加载速度优化方案.md @@ -0,0 +1,58 @@ +--- +title: 首页加载速度优化方案 +description: 个人网站首页加载速度优化的一些心得 +keywords: +- 网站 +- 加速 +- 优化 +tags: +- 技术 +authors: +- 7Wate +date: 2022-11-03 +--- + +自己一条龙研发的 Halo 博客主题 [Redemption](https://blog.7wate.com/?p=85) 最近也是发布了首个正式版，在博友[杜郎俊赏](https://dujun.io/)提供的 [CleanCSS](https://dujun.io/cleancss-remove-unused-css.html) 工具下麻溜地搞定了，同时又添加了一些自己的想法。主要思路是首页做减法：删减无用代码文件、压缩静态资源体积，同时完全不影响首页的内容展示。 + +## 问题场景 + +![整体未优化前](https://static.7wate.com/img/2022/11/03/d6937e7965c76.png) + +如上图博客首页未优化的加载速度，需要 2.03 秒并且**存在可优化的余地**。优化方案主要从静态资源、样式表、字体这三个方面出发。整套操作步骤下来，实测速度提升了近 5 倍。 + +## 0.内容分发（CDN） + +傻瓜式优化就是 CDN，各个云服务厂商都有提供。最简单最省事最有效，CDN 具体优化步骤可根据厂商提供的文档操作。（有的要钱有的不要钱，有的好用有的不好用） + +## 1.静态媒体资源 + +![图片优化效果](https://static.7wate.com/img/2022/11/03/21dfc74958c26.png) + +首页如果有媒体资源，例如图片、Logo 等。那么最简单的方法就是压缩图片体积，便捷高效的提升首页加载速度。 + +## 2.CSS/JS 代码 + +如果想优化 CSS/JS 代码文件，可以尝试在博友[杜郎俊赏](https://dujun.io/)提供的 [CleanCSS](https://dujun.io/cleancss-remove-unused-css.html) 中一键优化代码。 + +CleanCSS 第一次直接优化了之后提升明显，但是发现 remixicon.css 字体图标有问题。然而这个优化还是最大问题，毕竟加上字体 1.3s，遂又找了其他方法实现（**后来发现是我没用明白 CleanCSS 🤣**）。 + +后来在 GitHub 上找到开源项目 [UnCSS](https://github.com/uncss/uncss) ，其提供了简单的在线优化，使用了一下满足需求足够用了。最后再利用在线 CSS/JS 压缩体积工具，就大功告成！ + +![css优化](https://static.7wate.com/img/2022/11/03/66db14b415323.png) + +## 3.优化字体 + +常见的优化就是 CDN、静态资源、CSS/JS 代码，这里我为了追求更极致的速度，将字体文件也进一步优化。**优化方向稍微偏激了，根据实际情况来。** + +因为 remixicon.css 的字体图标文件只用了几个，所以我利用 Github 上 [font-spider](https://github.com/aui/font-spider) 将无用的字符进行删减。如下图所示可以发现，字体删减优化是质的改变，体积缩减了近 70 倍！ + +![font-spider优化](https://static.7wate.com/img/2022/11/03/df6df212fd9ac.png) + +## 优化后 + +![整体优化后](https://static.7wate.com/img/2022/11/03/2d8b01670d07d.png) + +在特定问题场景下，通过一套操作优化后的首页体积仅仅 35kB，加载时间 597 毫秒。就连 CDN 都不用套，全国平均访问延时 0.6s。需要注意的地方是，优化字体比较偏激可能导致页面显示不正常。其次我为了避免其他页面出现未知错误，利用代码进行判断仅仅对首页进行了优化。 + +现在 H5 的 CSS 样式库越来越多了，网页效果越来越优美了，同时也变得臃肿了起来。**不过只要网速快，优化个毛线！奥里给！！！** +