博客升级 23.12.2

前段时间百度云CDN发来消息说停止提供免费的CDN加速服务了，所以后面就变得龟速，访问起来会比较慢，打开网页的平均耗时在5-10秒左右，相较于之前有cdn加速的秒开，还是比较慢的。所以这段时间我也一直在着手于优化网站，最近就没分享什么资源，这期的分享主要分享我这段时间优化网站的一些思路和解决方法吧。

我在网上找了很多优化网站速度的方法，总结了几个网站访问慢的主要原因：网站带宽的限制、阻塞问题。

网站带宽限制

这几点原因最主要的还是网站带宽的限制，目前我的博客用的是腾讯云轻量化服务器，只有3M的带宽，加上现在缺少了CDN的加速，而我的博客里面的内容主要都是以图片为主。目前的解决方法就是把网站的图片转换成jpg格式，尽可能的缩小图片的体积，减少带宽的占用。

还有就是把js、css以及相关的框架都替换成cdn静态资源库的链接加载，从而减少带宽的占用。同时启用常用页面的预加载，比如网站侧边栏的这些页面，在打开首页时就会预先加载这里面的页面，以便访问这些页面时能达到快速加载的效果。

图片改用图床加载

因为图片比较大，在没有CDN的情况下会比较占用网站的带宽，同时大部分图床都是免费的，所以一些大图、缩略图等放到图床里，用图床来加载图片是最为实用的一种方式。

虽然大部分图床是免费的，但速度都比较慢，放到一个龟速的图床说不好会出现适得其反的效果，这时候我灵光一现，突然想到是不是可以用Alist挂载网盘的方式，将网盘当作一个个人图床，同时这个图床的图片外链还自带CDN加速的效果。于是说干就干，在服务器里安装好Alist，并运行它。

因为我的网站是开启了HTTPS的，所以还需要在宝塔后台给Alist后台页面分配一个域名，设置好反向代理，同时给这个域名开启HTTPS

然后进入Alist，挂载一个网盘，我这里挂载的是一刻相册，因为它的图片外链也是https的，这样我的网站在加载图片时才不会出现浏览器策略问题。

挂载完成后上传图片，并复制图片链接，逐一替换到博客里，此时就大功告成了

最后测试了一下，目前加载一切正常

阻塞问题

因为博客里的图片比较多，它除了在加载时会阻塞画面，同时在解码时也会阻塞画面，所以我给所有文章缩略图的img标签都加上了decoding=”async” 属性，让图片异步解码，不再阻塞页面的加载，加快打开网站的速度，如：

<img loading="lazy" decoding="async" src="{$article.pic}" alt="{$article.pic}">

同时我还将一些不必要的js，例如网站数据统计、百度统计类的js全部采用异步加载的方式，避免页面阻塞。

其他优化

添加浏览器内核检测页面
打开这个页面可以让检测当前的浏览器内核版本，以及相关的UA信息，同时展示一些主流浏览器的下载链接。
链接：https://www.huib.top/?custom=browser

更新“关于”页面

这个页面主要是一些有关本站以及我的一些介绍，还有本站的基础信息，感兴趣的老铁们可以去看一下。
链接：https://www.huib.top/?custom=about

添加公众号关注页面

这个页面仅用于提示关注公众号时用到。

添加跳转过渡动画

在点击网页内的链接在当前标签页跳转时，会弹出过渡动画，让页面切换更加自然流畅。