为了更好的浏览体验,请不要在本页面禁用 Javascript 🙂

优化部署在 Netlify 上的 Gatsby 站点(一)—— Cache-Control

随着本站的功能逐渐完善,开发工作告一段落。接下来是解决一些用户体验的问题,根据我本人的访问体验以及他人的反馈,我会对站点逐步进行优化。下面是关于访问速度和性能方面的优化。
本文以本站点为例,记录优化过程。本站是由 gatsby 构建的、部署在 netlify 上的静态网页(部分动态)。因此以下经验也适用于相同技术的站点优化。
技术关键词
gatsby
netlify functions
netlify caches
PWA
优化工作主要参考 gatsby 以及 netlify 的文档。参见
缓存
根目录下添加 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"
OCaml
不知道能不能写正则(待求证)
网络优化
目前博客首次加载的的速度非常慢,在较差的网络环境下sw 的安装长达4分钟之久。这对初次访问站点的用户非常不友好。
虽然首屏渲染的时间不长,但是 JS 等文件未加载成功。因此很多操作无法进行。这造成了较差的用户体验。
观察了到某次网络请求,大部分请求的 TTFB 长达 10s 之久。netlify 的表现不尽人意。比较了一下速度,跟 github page 不相上下。可能真的需要上国内 CDN 了。
写在后面的碎碎念
我个人比较推崇 serverless,从本站的实现和部署就可以看出来。我根本不想操心任何服务器的事情,所以全用的第三方服务。
但是这也有缺点,缺点就是你不能随心所欲的控制服务端了。可能也算不上缺点吧,某种意义上来说操心的东西变少了,未尝不是一件好事。只不过相对而言牺牲了一定的自由度。
有好有坏吧,服务端的优化能插手的地方比较少。只能照着文档来,别人给什么就用什么吧。
下一篇会从客户端的角度继续优化。
每次抽象都必然会带来更高的学习成本 —— Lea VerouCSS Secrets
Build with gatsby,react,material-ui and Copyright 2019 Mayne Powered by gine-blog