PWA 漸進式實踐 (1) - Lighthouse in Action

不知道大家還記不記得之前的四篇 PWA 系列翻譯:

  • 知乎專欄
  • 知乎專欄
  • 知乎專欄
  • 知乎專欄

不過這畢竟是老外他們自己的實踐,而且相對來說是從科普角度來描述了 PWA 的實踐,對想要直接進行 PWA 優化的,可能會覺得比較啰嗦。

恰好我司最近使用 React 全家桶開發了一個網站:海綿保保,所以乾脆就拿它開刀,來進行 PWA 優化,順便記錄一下點滴。

作為切入的工具,Lighthouse 見:Lighthouse Chrome 插件。

Lighthouse

首先我看了下 taobao 的評分,21/100,恩…這樣一來,就有信心了,再怎麼我們肯定比它高不是?

測了一下,嗯…果然還算看得過去,66分,至少及格了不是?

我們的目標就是能把它優化到90分以上!(作為 PWA 模範的 mobile.twitter.com,就達到了90分)

作為系列第一篇,我們先來看看有哪些問題導致了網站評分不夠高,其產生原因和大概的解決策略。

App在離線/間斷網路下的載入

第一類就是 Service Worker 導致的問題:

簡單描述 Service Worker 的話,可以理解為一個本地的 server,在客戶端(瀏覽器)發起請求的時候,可以直接監聽到它並直接進行響應。

當然,它不僅僅是這麼一個攔截器,本身作為一個後台運行的任務,它還能進行預載入,離線響應(返回200),甚至進行 push 提示。

頁面載入性能

各種性能指標不夠過關啦。

漸進式增強

即 JavaScript 被禁用的時候,頁面仍然應該有內容,即便那只是提示用戶需要打開 JavaScript 以使用 app。

添加到主屏幕

manifest 其實我已經加上了,還是因為 service worker 沒有註冊,所以最後沒有生效。

避免影響用戶體驗的 APIs

一些 css 標籤放在 header 里,阻塞影響到了頁面體驗。

輔助功能

對比度啦,標籤啦,還有那麼幾個預設了的。

性能指標

載入鏈太長。

奇妙的東西

總而言之就是一些新特性。

然而好像是插件還是 sw-tools 導致的。

預告

本篇中我們大致看到了哪些問題導致了我們的 webapp 的 PWA 評分不夠高,下一次,我們會開始逐個開刀,解決這些問題。對本話題感興趣的朋友,也可以使用 Lighthouse 插件,對自家的網站或者其他網站來評評分,看看做得有多好(其實我們的66分真的已經挺高了)。


推薦閱讀:

前端性能優化:客戶端從輸入到展示講解
DNS Prefetching的兩三事
移動 H5(PC Web)前端性能優化指南
前端緩存策略與基於Webpack的靜態資源版本管理

TAG:前端开发 | 前端性能优化 | React |