為了讓我們的網站能達到更高的評分（咦，為什么變成刷分了），我們最后需要進行用戶體驗和性能的優化。

頁面加載性能

我們需要盡可能把其他所有頁面做成異步的，如：

通過把非首頁面路由給大部分變成異步化的后：

原來都是黃色紅色的，現在大部分變成了綠色。

漸進式增強

頁面在腳本（javaScript）不可用的時候仍然包含一些內容，即便它只是一個給用戶的警告，官方文檔見：no-js。

復雜地話，我們需要能輸出靜態頁面，但由于我們是純粹的客戶端渲染，沒辦法那么做，所以一切從簡，考慮直接在無法使用 JS 的時候輸出提示。

具體怎么做呢？不用急，還真有個標簽可以直接拿來用：

放在 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：

再來看幾個例子：

最后要注意的是，阻塞渲染僅僅涉及到瀏覽器是否要等待資源加載后才進行首次渲染，在任何場景下，瀏覽器還是會下載該 css 資源的，只不過對非阻塞資源的優先級會低一點。

GitLab 也存在這個問題，見：https://gitlab.com/gitlab-org/gitlab-ce/issues/26080。

找了一下沒找到對應的工具，回頭試試看：https://github.com/WatchBeam/split-css-loader，暫且先放著了，畢竟目前 CSS 文件還不算太大。

尾聲

最后的優化結果，竟然達到了97分，還是讓我嚇了一跳的。

PWA 實踐系列到了這里就是尾聲了，大家下回見。