Categories
未分类

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

昨天把自己业余时间写的web app极客微博放出来之后,自己又点了好几次进去看。然而每一次都觉得很慢,有一次使用Chrome DevTools查看,居然花了30秒多,这无论如何也是无法接受的。刚开始以为是我家里的网络原因,换成4G之后,确实有所提升,打开速度大概在3秒作用。然后查看资源文件,发现最大的js bundle有200多KB: 这还是太慢了,于是使用Google PageSpeed Insights分析,并根据里面的几个建议调整了一下。目前,我自己使用Cmd+Shift+R(跳过缓存)试了几次,都可以算是“秒开”了。 Google PageSpeed Insights desktop速度也达到了100分 具体来说,只做了两件事情。 缩减图片的大小 根据Google PageSpeed Insights的提示,在展示一条微博的时候,geekweibo.com使用的是图片的原始尺寸: 我自己的头像达到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查看,资源小了很多: Google PageSpeed Insights、图片使用适当大小、gzip压缩,这些对于一个web开发来说,都是最基本的常识。不过,如果刚开始接触这个领域的话,这些东西,还真不一定知道。