网站速度优化记录

最后更新于:2020 七月 24日 , 星期五 , 17:10 下午

图片加速

WebP格式图片

  • 使用Honeyview转其它图片格式为webp,品质选择60 ,压缩效果喜人🤪
  • Honeyview对gif转webp不友好,找找在线工具例如又拍云GIF转webp

高速图床

  • 封面图:上传到微博相册,引用缩略图地址,似乎不容易挂。
  • 文章配图:使用GitHub+jsDeliver创建高速图床
    其它免费图床硬伤太多,不适合长期使用…

Jsdelivr CDN

  • 页面头图全部使用jsd加速
    例如https://cdn.jsdelivr.net/gh/forliuyifei/[email protected]/img/gy.webp
  • 还有部分加载慢的js文件
    例如说说页面的Artitalk.js
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/artitalk"></script
  • 本地搜索local-search.xml加载太慢

    修改fluid_config.yml
    search: # 搜索栏
    enable: true
    path: https://cdn.jsdelivr.net/gh/forliuyifei/[email protected]/local-search.xml # 文件引用地址,默认是下方生成位置,也可以将生成后的 local-search.xml 上传到其它位置引用(缺点是影响本地实时预览),如:https://www.example.com/local-search.xml
    generate_path: /local-search.xml # 文件生成位置,必须为相对位置
    field: post
    content: true

Cloudflare

  • 浏览器缓存 TTL:确定 Cloudflare 指示访问者的浏览器缓存文件的时长。在此期间,浏览器会从其本地缓存中加载文件,从而提高页面加载速度。
  • Auto Minify:减小网站上源代码(JavaScript CSS HTML)的文件大小。
  • Brotli:应用 Brotli 压缩,加快访问者的 HTTPS 流量的页面加载时间。

<script>标签的defer属性

今天注意到有些js文件比如canvas-neat.min.js在手机上加载特别慢,严重拖慢网站速度

image.png

尝试

  • async 替换为defer

image.png

  • 顺便给一言的今日诗词也加个defer

image.png

  • 观察一段时间看看有没有效果

有些第三方库,要求在header中引入(这就意味着第三方插件库会优先加载),但是我们并不需要在页面加载之初就用到这个插件。那么我们可以加上defer属性使之最后加载。同理,如果页面加载的同时需要用到第三方插件,那么我们引用的时候可以加async属性,这样网站内的资源就可以与插件资源异步加载。这中方法会给网站其他资源的加载节省出一些时间,不失为一种页面优化的方法。


外部js文件加载太慢

  • 如图

放入本地

  • 找到源码, Ctrl+S,保存为自己的js文件,或者直接复制粘贴
//canvas-nest背景动态线条效果
!function(){function o(w,v,i){return w.getAttribute(v)||i}function j(i){return document.getElementsByTagName(i)}function l(){var i=j("script"),w=i.length,v=i[w-1];return{l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","0,0,0"),n:o(v,"count",99)}}function k(){r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function b(){e.clearRect(0,0,r,n);var w=[f].concat(t);var x,v,A,B,z,y;t.forEach(function(i){i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>r||i.x<0?-1:1,i.ya*=i.y>n||i.y<0?-1:1,e.fillRect(i.x-0.5,i.y-0.5,1,1);for(v=0;v<w.length;v++){x=w[v];if(i!==x&&null!==x.x&&null!==x.y){B=i.x-x.x,z=i.y-x.y,y=B*B+z*z;y<x.max&&(x===f&&y>=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())}}w.splice(w.indexOf(i),1)}),m(b)}var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){window.setTimeout(i,1000/45)},a=Math.random,f={x:null,y:null,max:20000};u.id=c;u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;j("body")[0].appendChild(u);k(),window.onresize=k;window.onmousemove=function(i){i=i||window.event,f.x=i.clientX,f.y=i.clientY},window.onmouseout=function(){f.x=null,f.y=null};for(var t=[],p=0;s.n>p;p++){var h=a()*r,g=a()*n,q=2*a()-1,d=2*a()-1;t.push({x:h,y:g,xa:q,ya:d,max:6000})}setTimeout(function(){b()},100)}();

image.png

  • 地址改为自己的仓库地址
<script defer src="https://liuyifei.club/js/canvas-nest.mini.js" color="0,0,0" opacity='0.35' zIndex="-1" count="150"></script>

image.png

  • 执行
hexo clean&&hexo g&&hexo d
  • 刷新网页, 成功!
  • 2020.05.22 16:41 自己仓库的这个js又加载不出, 不想时刻挂梯子, 继续改回去用别人的🤷‍🤦‍♂️
  • 2020.06.27 同样可以套个jsd。但不实用的东西最好还是关闭,徒增卡慢。

测速工具

国内省份测速🐌 谷歌速度分析 备用 17ce.com 测吧 Pingdom Host-Tracker

参考:



 目录

既见君子 云胡不喜