brain-hole

使用WebP和静态公共库优化博客提高访问速度

小茗同学本文共:525 字 阅读需要:2 分钟 加载中...

在搭建博客平台的过程中,我一直在不断学习并优化网站的访问速度,毕竟,良好的访问速度能为访问者提供更好的体验。以下文章仅供参考,并非专业对网站优化。

图片压缩

WebP优点:

更小的文件大小:比 JPEG 和 PNG 文件小 25%-35%,减少页面加载时间。

支持透明度:可以像 PNG 一样支持透明背景,同时文件更小。

支持动画:可以替代 GIF,且文件更小。

广泛的浏览器支持:大多数主流浏览器(Chrome、Firefox、Edge)都支持 WebP。

WebP缺点:

兼容性问题:有部分较旧的浏览器不完全支持。

工具支持较少:不像 JPEG 和 PNG 那样被广泛支持的图像编辑工具。

示例图片:尺寸1080px*1920px 分辨率72

以上示例均为同一张照片PNG高达3.3MB、JPG大小为1.62MB、而WebP仅950KB,当然我们可以再把WebP再按75%压缩,就只剩230K了,且肉眼基本难以察觉。(第3-6张为WebP)

推荐使用cdn对图床进行加速,并设置合适的缓存时间。

使用静态公共库

除了图片,HTML、CSS 和 JavaScript 、字体文件的大小也直接影响着网页的加载速度。如果文件过大可以考虑使用CDN。根据服务对象选择合适的CDN节点,下面我推荐几个我常用的js、css公共库。(以下cdn公共库及私人加速库较适合国内网站使用)

字节跳动静态资源公共库   bootcdn   staticfile

如果是私人的css或者js需要加速可以考虑以下几个,只需要将文件上传到github,按照链接格式填写即可:

jsdmirror   jsdelivr

注意:切勿使用支持私人加速的服务来加速较大的文件及图片。有些网站本身就是公益性质、免费发电本就不易。

总结

优化网站速度是一个持续的过程,需要不断监测、分析和调整。通过压缩图片、使用CDN、优化前端代码、设置合适的缓存策略等方法,可以有效地提高网站的加载速度,改善体验。