只做了两个小操作,让我的网站秒开了

昨天把自己业余时间写的web app极客微博放出来之后,自己又点了好几次进去看。然而每一次都觉得很慢,有一次使用Chrome DevTools查看,居然花了30秒多,这无论如何也是无法接受的。刚开始以为是我家里的网络原因,换成4G之后,确实有所提升,打开速度大概在3秒作用。然后查看资源文件,发现最大的js bundle有200多KB:
CE5A3557-99CF-4F87-B746-60568FB1B8E6
这还是太慢了,于是使用Google PageSpeed Insights分析,并根据里面的几个建议调整了一下。目前,我自己使用Cmd+Shift+R(跳过缓存)试了几次,都可以算是“秒开”了。
Google PageSpeed Insights desktop速度也达到了100分
Jietu20201018-155912

具体来说,只做了两件事情。

缩减图片的大小

根据Google PageSpeed Insights的提示,在展示一条微博的时候,geekweibo.com使用的是图片的原始尺寸:
B0330109-124F-4E0E-A7FA-670731D4DA7D
我自己的头像达到500多K,这无疑增加了加载时间。
我的图片是放在阿里云OSS上面的,根据阿里云的api文档,加上自动裁剪的参数,就搞定:
<img :src=“${tweet.user.avatar}?x-oss-process=image/resize,m_fill,h_100,w_100” />

启用gzip压缩

在nginx config里面加上:

    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
      gzip_static on;
      expires max;
      add_header Cache-Control public;
    }

也就搞定了。
再次刷新,立刻能感觉到,网站打开的速度快多了。在使用chrome devtools查看,资源小了很多:
8E3FCFB9-C1C3-4D4E-A688-5129255E378B

Google PageSpeed Insights、图片使用适当大小、gzip压缩,这些对于一个web开发来说,都是最基本的常识。不过,如果刚开始接触这个领域的话,这些东西,还真不一定知道。

Leave a Reply