为了让我们的网站能达到更高的评分(咦,为什么变成刷分了),我们最后需要进行用户体验和性能的优化。
页面加载性能
我们需要尽可能把其他所有页面做成异步的,如:
function getSubmitCase(nextState, callback) {
require.ensure([], (require) => {
callback(null, require(‘./containers/case/SubmitCasePage‘).default);
}, ‘SubmitCasePage‘);
}
<Route path="submit" getComponent={getSubmitCase} />
通过把非首页面路由给大部分变成异步化的后:
原来都是黄色红色的,现在大部分变成了绿色。
渐进式增强
页面在脚本(JavaScript)不可用的时候仍然包含一些内容,即便它只是一个给用户的警告,官方文档见:no-js。
复杂地话,我们需要能输出静态页面,但由于我们是纯粹的客户端渲染,没办法那么做,所以一切从简,考虑直接在无法使用 JS 的时候输出提示。
具体怎么做呢?不用急,还真有个标签可以直接拿来用:
<noscript>Your browser does not support JavaScript!</noscript>
放在 body 里面就好了。
辅助功能
考虑到应用场景,这个就不加了(更何况报的一些其实是 ant design 的问题)。
还有一个是我们 form 表单没有使用 label(因为使用了 icon 来示意),这个提示有点傻逼,无视它。
性能指标
请求链路的优化,主要是因为一些静态文件的依赖比较多(css、js、图片)。没有想到特别好的方法,官方解释见:Critical Request Chains,应该需要尽量做成异步非阻塞的,并减少 roundtrips 数量。
避免影响用户体验的 APIs
CSS 文件大,容易导致阻塞,因为 CSS 会被默认处理为渲染阻塞的资源。
可以先阅读 Google 的这一篇文档:Render Blocking CSS。
因为通常在 CSS 文件未正确加载前,我们的页面会无法正常使用,所以唯一的优化方案就是让加载 CSS 变得更快。
可是具体怎么做呢?其实 link stylesheet 有一个标签 —— media,也就是我们熟知的 media query:
<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
- 第一个 stylesheet 就是我们以往常用的,被应用在所有场景,总是会阻塞渲染。
- 第二个 stylesheet 在内容被打印后才应用 —— 可能你会想要重新排版布局,改变字体等等,所以不会阻塞页面的首次加载。
- 第三个使用了 media query,会被浏览器执行,如果条件负责,则会阻塞到该 stylesheet 被下载并处理完毕。
再来看几个例子:
<link href="style.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css" rel="stylesheet" media="print">
- 第一个申明在所有条件下都是渲染阻塞的。
- 第二个申明和第一个其实等价,因为如果没有指定 media type 的话,他其实就是 “all”。
- 第三个申明有一个动态 media 查询,在页面加载时进行评估。依赖于加载时设备的方向,portrait.css 可能会阻塞渲染。
- 最后一个在页面被打印时才应用,所以不会在首次加载页面时阻塞渲染。
最后要注意的是,阻塞渲染仅仅涉及到浏览器是否要等待资源加载后才进行首次渲染,在任何场景下,浏览器还是会下载该 css 资源的,只不过对非阻塞资源的优先级会低一点。
GitLab 也存在这个问题,见:https://gitlab.com/gitlab-org/gitlab-ce/issues/26080。
找了一下没找到对应的工具,回头试试看:https://github.com/WatchBeam/split-css-loader,暂且先放着了,毕竟目前 CSS 文件还不算太大。
尾声
最后的优化结果,竟然达到了97分,还是让我吓了一跳的。
PWA 实践系列到了这里就是尾声了,大家下回见。