随着本站的功能逐渐完善,开发工作告一段落。接下来是解决一些用户体验的问题,根据我本人的访问体验以及他人的反馈,我会对站点逐步进行优化。下面是关于访问速度和性能方面的优化。
本文以本站点为例,记录优化过程。本站是由 gatsby 构建的、部署在 netlify 上的静态网页(部分动态)。因此以下经验也适用于相同技术的站点优化。
技术关键词
- gatsby
- netlify functions
- netlify caches
- PWA
优化工作主要参考 gatsby 以及 netlify 的文档。参见
https://www.gatsbyjs.org/docs/performance/
https://www.netlify.com/docs/netlify-toml-reference/
缓存
根目录下添加 netlify.toml
文件,可以控制 netlify 的请求行为(当然还有很多其它功能)。
JS、 CSS 和 静态文件都需要缓存。但是 sw.js 不能缓存,这一点在 gatsby 的文档中有提到。
[[headers]]
for = "*.js"
[headers.values]
Cache-Control = "public, max-age=31536000,immutable"
[[headers]]
for = "/sw.js"
[headers.values]
Cache-Control = "public, max-age=0, must-revalidate"
[[headers]]
for = "*.css"
[headers.values]
Cache-Control = "public, max-age=31536000,immutable"
[[headers]]
for = "*.jpg"
[headers.values]
Cache-Control = "public, max-age=31536000,immutable"
[[headers]]
for = "*.png"
[headers.values]
Cache-Control = "public, max-age=31536000,immutable"
不知道能不能写正则(待求证)
网络优化
目前博客首次加载的的速度非常慢,在较差的网络环境下sw 的安装长达4分钟之久。这对初次访问站点的用户非常不友好。
虽然首屏渲染的时间不长,但是 JS 等文件未加载成功。因此很多操作无法进行。这造成了较差的用户体验。
观察了到某次网络请求,大部分请求的 TTFB 长达 10s 之久。netlify 的表现不尽人意。比较了一下速度,跟 github page 不相上下。可能真的需要上国内 CDN 了。
写在后面的碎碎念
我个人比较推崇 serverless,从本站的实现和部署就可以看出来。我根本不想操心任何服务器的事情,所以全用的第三方服务。
但是这也有缺点,缺点就是你不能随心所欲的控制服务端了。可能也算不上缺点吧,某种意义上来说操心的东西变少了,未尝不是一件好事。只不过相对而言牺牲了一定的自由度。
有好有坏吧,服务端的优化能插手的地方比较少。只能照着文档来,别人给什么就用什么吧。
下一篇会从客户端的角度继续优化。