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

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分真的已經挺高了)。

想了解更多關於 Facebook 與 Google 廣告投放?

Lighthouse | Chrome 團隊開源的網站性能評測工具

波特五力模型案例分析