Progressive Web Apps

行動網站學習筆記 (2)

教學目標

初步了解如何提升行動版網站載入速度,此篇主要為學習筆記。(註: 2017/7/2 已通過行動網站認證。)

重點概念

首先若我們想要行動網站提升效能,請先將使用者下載的資料量降至最低,第一可以先從資料最佳化開始,第二要提高程式碼效率,必須先了解如何轉譯相關資源,第三當效能提升之後,則必須要有測試的方式。 我們透過 Chrome 的開發者工具進行使用者操作體驗的模擬設定,例如: 勾選「Disable Cache」功能,以及模擬「Regular 3G」的網路速度。然而當我們發現載入畫面過久之後,則要分析請求,找出頁面載入過久的原因,基本上有兩種方式,第一是找出阻擋轉譯的程式碼,改善方式可以將程式碼移至 最下方,並且標記 async 以避免程式碼阻擋頁面載入,第二是找出大量的請求,改善方式可以將圖示改為 SVG 以降低檔案大小。接著我們會針對更新的頁面驗證修正的成果。

接著瞭解行動網站在連線不穩定或速度緩慢的情況下,要如何透過工具以高延遲時間和低頻寬和模擬網路限速進行調整。相關工具主要有瀏覽器工具、系統工具和裝置模擬,當然也可以透過線上工具 WebPagetest 以不同地點和網路進行測試。此外連線不穩定的情形,有個專有名詞為「lie-fi」是指瀏覽器的反應好像是有連到網路,但是其實沒有,且原因也不明。此時會以為連線造成相當差的使用者體驗,為了解決該問題我們會以逾時方式處理間斷性的網路連線。

再來透過關鍵指標可以判定行動網站是否達到高標,主要有三大關鍵指標,分別為:

  1. 可用時間: 主要為客戶希望能夠盡快看到不需捲動的內容。
  2. 頁面大小: 主要為建立畫面所需要的所有資源大小,建議不超過 1 MB。
  3. 要求總數: 主要為建立畫面必要的資源要求總數,數量應在 80 至 100 之間。
主要元素 要求範圍目標
JavaScript <20
CSS <5
圖片 <30
字型 <3
總計 80~100

最佳化關鍵轉譯路徑是指優先顯示與目前使用者操作相關的內容。從一開始收到 HTML 、 CSS 和 JavaScript 位元組,再對程式碼進行必要的處理,至最後轉變為顯示像素的過程,我們需要了解過程中所有的步驟活動進行效能最佳化,也就是所謂關鍵轉譯路徑。若我們將關鍵轉譯路徑最佳化,可大富縮短初次轉譯網頁的時間,以及以理想情況每秒 60 FPS 進行互動更新操作。轉譯網頁過程中瀏覽器需要先建立 DOM 和 CSSOM 樹狀結構,因此我們必須儘快將 HTML 與 CSS 提供給瀏覽器,處理 HTML 和 CSS 標記主要皆有四個步驟。

  1. 轉換: 瀏覽器從網路中讀取 HTML/CSS 原始位元組,然後根據指定的檔案編碼格式,像是 UTF-8,將其轉換為相應字元。
  2. 標記: 瀏覽器將字串轉換為 HTML/CSS 標準的標記,每個標記附具有特殊的含義和專屬的規則。
  3. 語法分析: 識別出標記轉換為定義所相關屬性的物件。
  4. 建立文件/樣式表物件模型: 因為 HTML/CSS 標記定義不同標記之間的關係,建立的物件會在樹狀資料結構中連結起來,並且透過樹狀資料結構定義標記之間上下層級的關係。

當我們產生文件物件模型 (DOM) 和樣式表物件模型 (CSS) 之後,將會進行結合轉譯為樹狀結構,主要應用於計算每個呈現元素的版面配置,至於如何將描述內容和描述樣式兩個互相獨立物件結合之後呈現像素,接著進行版面配置。此外當我們需要解決關鍵轉譯路徑效能方面的瓶頸時,則可以最佳化關鍵轉譯路徑,重點在於儘快完成初次轉譯,常見步驟主要為:

  1. 分析及描述關鍵路徑: 將關鍵資源數量、關鍵位元組數和關鍵路徑長度降至最低。
  2. 儘可能減少關鍵資源數量: 刪除資源、延遲下載、標記為非同步資源。
  3. 儘可能減少關鍵位元組數: 縮短下載時間,往返次數。
  4. 最佳化剩餘關鍵資源的載入順序: 儘早下載所有關鍵資源,以縮短關鍵路徑長度。

最後要如何最佳化內容效率,主要有五種類型:

  1. 刪除不必要的下載
  2. 將編碼與傳輸大小最佳化
  3. 圖片最佳化
  4. 網站字型最佳化
  5. HTTP 快取

第一刪除不必要的下載重點在於清點網頁上所有自有和第三方資產,評估每個資產的成效,並且判斷資源是否提供了足夠的價值。第二將編碼與傳輸大小最佳化,主要是將整體下載大小縮減至最小,可以透過最佳化和壓縮多餘或不必要的資料來達成此目標,此外最佳方式是直接刪除資料,但是我們不能隨意刪除資料,所以在某些情況之下,我們需要清楚掌握資料格式及相關屬性的內容專屬資訊,這時刪除資料經常會有顯著縮緘負載的大小,且不影響實際的意義。第三圖片最佳化,主要重點在於優先選用向量格式、縮減及壓縮 SVG 資源、選擇最佳的圖片格式、實驗找出最適合圖片的品質設定、移除不必要的圖片中繼資料以及提供縮小的圖片。第四網站字型最佳化,主要重點在於查核和覽控字型使用的情況、針對字型資源進行部分擷取、為每個瀏覽器提供最佳化的字型格式、指定重新驗證和最佳快取政策以及使用 Font Loading API 最佳化關鍵轉譯路徑。第五 HTTP 快取,主要重點在於使用一致的網址、確認伺服器提供驗證標記、確認中繼快取可以快取哪些資源、確定每項資源的最佳快取效期、確定網站的最佳快取階層以及盡量減少變動。

總結針對提升行動版網站載入速度我們主要針對關鍵路徑和最佳化內容效率進行優化,以利達到效能的目標。

相關資源

行動網站學習筆記 (1)

教學目標

初步了解行動版網站與其重要性,此篇主要為學習筆記。(註: 2017/7/2 已通過行動網站認證。)

重點概念

目前使用者對於行動裝置的依賴度越來越高,因此建立適合行動裝置瀏覽的網站已經成為掌握商機的關鍵,我們稱之為行動網站,所謂行動網站是指具備網際網路功能和可為行動裝置提供特定網際網路功能的資源。

首先為什麼使用者會喜歡使用行動網站,主要有三大特點:

  1. 容易搜尋: 行動網站透過搜尋方式可見度較高。
  2. 容易使用: 使用者比較熟悉行動網站的運作方式。
  3. 精簡輕巧: 不需要安裝,可以節省行動裝置記憶體。

接著至於行動網站可以為企業帶來好處,主要有三大特點:

  1. 適用於各種作業平台和靈活度高: 行動網站可以在不同平台上顯示,建立回應式網站,同時服務行動裝置和平板電腦的使用者。
  2. 縮短開發時程和開發成本低: 使用者不需要在裝置上進行更新或安裝,同時行動網站僅採用單一網頁語言 (HTML5) 建立而成,所以建立成本低。
  3. 網路為公共資源和容易追蹤: 不需要取得任何核准和加入市集即可建立行動網站,同時可以透過分析追蹤功能導入客戶的行動網站,不需要安裝開發套件 (SDK)。

若是網頁載入速度緩慢則會導致跳出率增加,此時將會讓使用者體驗不佳,簡單來說只要網頁載入時間下降,則每秒轉換率就會增加,接著收益就會隨之提高。更進一步來說就是使用者體驗非常重要,第一只要善用客戶現有的網站流量,就能夠達到最佳化的使用者體驗和轉換率目標,符合成本效益。第二只有轉換率增加一倍,就等於是將單次客戶開發成本減半。第三隨著企業獲利的增加就代表有更多資金可以用來開發全新使用者,使得行銷活動更加全面。第四只要分析特定網頁或網站的銷售流程進行小小的改變,就能帶來超乎預期的成效。

再來只要減少使用者停留在空白畫面的時間,就能增加與客戶網站互動的機會,更進一步提高每位使用者/單次瀏覽所帶來的價值。為了解決上述問題行動網站效能逐漸成為加速行動版網頁 (Accelerated Mobile Pages, AMP) 和漸進式網頁應用程式 (Progressive Web Apps, PWA),主要重點為開發人員在設計網站時就應該進行載入時間的考量。根據 Google 意見調查將發現第一使用行動裝置上網時有 46% 近半數受訪者表示網頁載入速度太慢是最令人頭痛的情況,第二有 60% 的行動裝置使用者預期行動網站在 3 秒內載入完畢,第三若是行動網站的載入時間超過 5 秒,則 75% 的使用者就會放棄瀏覽。

最後針對網站的知名度進行搜索最佳化,主要是利用網站結構與 robot.txt 檔案,改善搜尋引幗最佳化的成效。以及提升網站在於社群網路的曝光程度,主要是在每個網頁中加上幾行就能夠讓使用者預覽詳細的資訊,更進一步為網站吸引更多的使用者。

相關資源