未经优化的博客访问速度总是不太理想，我的博客在搬到 Github 后速度明显下降，在折腾过程中查找了许多资料如何让博客加速，积累了一些经验。全文从多个方面（涉及到博客源码修改）列出提速方法，内容较多可挑选自己关注的阅读。在涉及博客源码改造的部分一定要记住预先备份与测试
我使用的博客环境：GitHub Pages+Gridea，不过这篇文章也适用于动态网站
在访问网站之前是需要 DNS 域名解析的，自购域名的同学可以自定义此项选一个速度快的解析服务尤为重要，很多售卖域名的服务商都有提供教程，在这不详述。
私有资源（例如个人图片）的 CDN 设置建议看少数派的这篇文章 《进阶指南 | 如何让你的静态网站极速打开》 ，在浏览器中访问网站，按 F12 打开控制台中的 Network，即可看到加载一些外链资源（css、js 文件），在网站主页右键查看源码也可以来确认自己的网站使用了哪些知名的开源前端项目，可以通过替换为公共 CDN 链接来达到加速效果。
建议看这篇文章 《以全新的视角来评测公共 CDN》 来选择自己合适的公共 CDN，要记住「Ping 和 IP 数量并不是衡量公共数据的标准」，这里以 SM.MS 图床的开发者提供的 CDN 服务来做示例，该服务提供了前端 CDNJS 库及 Google Fonts、Ajax 和 Gravatar 的国内加速。用法十分简单，比如 Google Fonts 的网址 fonts.googleapis.com 替换为 fonts.loli.net。
例子：
<!--修改前--><link href='https://fonts.googleapis.com/css?family=字体名称' rel='stylesheet'>
<!--修改后--><link href='https://fonts.loli.net/css?family=字体名称' rel='stylesheet'>只需把博客主题模板代码中的相关网址替换即可，还支持替换的域名有 cdnjs.cloudflare.com、ajax.googleapis.com、*.gravatar.com 等等，更多内容见 官方博客
实测该谷歌字体反代服务，访问有时比官方更慢，因此在此只做参考，可选择其他服务
由于某些资源体积过大，在网页载入时造成阻塞使后面的内容迟迟得不到加载和渲染而造成问题（网页白屏等）。这种情况下就可以使一些不关键文件延时加载或者浏览才加载，浏览微信文章时，阅读到图片部分图片才加载，就是使用的懒加载技术。
在 html 文件中（或者有 html 语法的博客模板），将 <script> 标签放到 <body> 标签底部，不会造成页面解析的阻塞，就算加载时间过长也能看到页面而不是一片空白，这种方式适合不要求按解析顺序运行的脚本文件。而另一种方式则是利用 html5 的 defer 属性，给 <script> 标签设置 defer 属性，将脚本文件设置为延迟加载。注意只适合外部 js 引用，添加 defer 属性的 js 文件不能使用 document.write 运行
方法示例：
<!--修改前--><script src="https://example.com/xxx.js" type="text/javascript"></script>
<!--修改后--><script src="https://example.com/xxx.js" type="text/javascript" defer></script>若是不知道自己的脚本是否严格要求顺序加载，最好先备份然后测试一下。除此之外的另一种进阶方法就不展开了，可以用关键字搜索「动态创建 <script> 标签」。
不同的静态网站生成程序都有配套的插件，例如 Hexo、Hugo，这里就不用详细说明了，依个人情况来修改。主要谈一下网络字体的懒加载——因为汉字大量的字符让字体的体积异常庞大，导致中文网络字体渲染时更慢的速度。就好比字体渲染时，英文只需拿一张字母表在上面找，而中文需要拿一本厚厚的字典一个字一个字去找，所以懒加载很有必要。找到博客模板中的网络字体代码后，修改方法如下：
<!--修改前--><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=字体名称">
<!--修改后--><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=字体名称&display=swap" media="print" onload="this.media='all'">
当然，若仅仅想让固定的一段文字渲染成网络字体，可以试试 Iconfont 的 webfont服务
以下内容适用于对速度极其追求的人
如果你的网站所用的图标并不算多，推荐使用 svg 代码代替引用外部资源，例如在 Remix Icon 官网中就可以直接复制 svg 代码。把代码粘贴到需要展示的位置即可，除此之外阿里巴巴的 Iconfont 也有大量免费的矢量图标供使用。
很多浏览器都有“智能预加载”的设置，原理就是提前加载鼠标点击/悬停着的链接，减少人为的点击延迟，达到加速的效果，而 instant.page 就是这么一个网站预加载的脚本。只要在一个链接上犹豫超过 65ms，开始预加载，当然相对的流量也会增多。
这里推荐使用 JsDelivr 的 CDN 而不是官方的，原因是官方使用 Cloudflare Workers（无国内节点）。粘贴以下内容到 <body> 标签前即可。
<script src="https://cdn.jsdelivr.net/gh/instantpage/instant.page@3.0.0/instantpage.min.js"></script>
通过压缩代码减少换行可以节省浏览器的读取时间，而我使用的是 OSChina 的在线压缩，一定把 html css javascript 分开压缩，避免一些极限压缩对代码完整性的破坏。要在所有改造工作做完后进行压缩（压缩会破坏可读性），并且要留一份压缩前的备份。
作为支撑 PWA（渐进式 Web 应用）的一部分，我们只需要了解对博客加速有利的部分，给网站加上 Service Worker，就相当于告诉访客的浏览器“这个网站的 XXX 文件需要一直缓存”，只要访客不清除浏览器的数据，下次访问你的网站时 XXX 文件直接从本地载入，大大提高速度。关于配置，可以看延伸文章 《给博客加上Service Worker》
改造完成后，使用谷歌 PageSpeed Insights 来给网站诊断（还能提出后续改进建议），或者在电脑端浏览器按 F12 打开控制台>性能来查看网站速度提高了多少。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。