大家普遍认为，开设个人博客时，页面的加载速度和图片的展示效果至关重要。今天，我想和大家分享我在处理博客静态页面及图片方面的经验和技巧。
选用Netlify托管
1
2
3
4
link(rel='stylesheet', type='text/css', href=url_for(theme.css) + '/normalize.min.css')
link(rel='stylesheet', type='text/css', href=url_for(theme.css) + '/pure-min.min.css')
link(rel='stylesheet', type='text/css', href=url_for(theme.css) + '/grids-responsive-min.css')
script(type='text/javascript', src=url_for(theme.js) + '/jquery.min.js')
我这里没有选择GitHub Pages来托管静态页面，而是采用了Netlify。原因在于Netlify提供了免费的CDN加速服务，无论是国内还是国外，访问速度都相当不错。此外，它的部署过程也相当简便。我将博客中的HTML文件上传，借助Netlify提供的CDN进行加速，这样一来，无论是国内还是国外的访问速度都得到了显著提高。
Font – Awesome弃用原因
1
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css')
Font Awesome这个库，它得引用css文件中的字体文件，而且还得在主题的css目录里添加一堆字体文件，挺麻烦的。后来我发现，cdn上的图标字体文件出了问题，一直没人来修复，看来只能放弃了。
图片原存储方式
我博客中的图片最初存储于腾讯云COS，浏览时直接使用COS链接。但访问速度和显示效果尚有提升空间。图片优化是一项庞大工程，我们先从CDN加速说起，之后再来讨论图片压缩和自适应调整。
CDN刷新预热
CDN 拥有一个实用功能，即缓存刷新。比如，博客中一张图片已被缓存至 CDN，若我更新图片并重新上传至 COS，此时便可在相应位置刷新缓存，确保 CDN 中的缓存为最新图片。另外，我还发现使用 Cloudflare 的 R2 存储与 CDN 加速结合，对个人博客而言，免费额度应当足够。
图片加载优化
接入CDN后，通过PageSpeed Insights工具检测，发现图片加载耗时较长。针对这一问题，可以采取两种优化措施：首先，将博客中现有的图片全部转换为WebP格式，并重新上传至COS，同时更新文章中的图片链接；其次，利用腾讯云COS提供的图片处理功能，通过在图片链接后添加参数来实现图像格式的转换。
自适应处理
途中遇到了一个小问题，有些转换成的webp格式的图片链接无法打开，显示404错误，但COS上的文件确实存在。可以借助一个工具，将其添加到浏览器标签中，进入博客文章页面后，点击“Lint Images”标签，这个工具便可以模拟不同尺寸的设备来访问页面，检查浏览器请求的图片是否恰当。图片自适应的核心方法是为每张图生成不同尺寸的版本，依据媒体查询和视口尺寸等属性来决定适用于不同设备的图片。在hexo生成页面时，只需运行脚本调整图片属性即可。处理完毕后，可在浏览器开发者模式中选取不同屏幕尺寸，观察浏览器实际选择了哪个图片版本。
撰写个人博客时，大家是否遇到过类似困扰？欢迎在评论区分享你的经历，同时别忘了点赞并转发这篇文章！