当前位置:首页 > 学习 > 正文

网站优化

网站优化

之前在制作徽章的时候,把工信部、公安备案的图标加到里面去了,这就造成了生成后的svg代码很多,一大坨。主要是图标文件的base64编码比较多,无论是公安备案的svg代码...

之前在制作徽章的时候,把工信部、公安备案的图标加到里面去了,这就造成了生成后的svg代码很多,一大坨。主要是图标文件的base64编码比较多,无论是公安备案的svg代码还是icp备案的代码,都是一大坨。

将这两个备案代码贴到网站页脚,网站大小一下子增加了不少,虽然套了CDN和开启了Gzip压缩,但服务器带宽小禁不住这样搞啊。为了测试博客首页有多少字节,特地用工具测了下,看看博客首页文件有多大:

将byte换算成Kilobyte,压缩前是23kb,压缩后是7.2kb,体积不小。对于我这种小带宽的博客,每一个byte甚至每一个bit都要精打细算。

在网上找资料的时候,突然想到:svg代码可以作为图片渲染啊!这一下子,思路就清晰了——把svg代码保存成为svg文件,放到网站文件下。然后用 img 标签插入svg文件并链接到相应的网站!!!

完成相应的前置工作后,插入img图片:

<a href="https://beian.miit.gov.cn/" target="_blank">
<img src="https://jul.cn/beian/icp.svg"  alt="icp备案" style="margin: 0 auto;"/></a>
<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42011702000715">
<img src="https://jul.cn/beian/ga.svg" alt="公安备案" style="margin: 3px auto;"/></a>

在几个浏览器里面测试一下,显示效果一样,没有样式不对的地方,哈哈,完美解决。再来看看优化后的首页大小:


压缩前:18155byte,大约17kb左右。压缩后:4558byte,大约4.4kb左右。这一下子就优化出4928byte,开心

发表评论

最新文章

取消
扫码支持 支付码