I/O ’18 筆記 / Web performance made easy

Yi-Peng Tseng
May 13, 2018 · 14 min read

讓網頁越趨笨重遲鈍的是什麼?

使用者如何評估速度?


運送少一點東西!

Lighthouse 新的稽核規則

修正網頁效能問題就像畫一隻馬一樣容易

Google I/O 戲院網頁範例 (演講專用)

第一個效能挑戰 — 不必要的資源

不稱職的快取策略

移除不必要的資源並且別發送兩次(以上)的解決方案


第二個效能挑戰 — 未使用的 JS & CSS 程式碼

從關鍵路徑移除未使用的 JavaScript & CSS 程式碼的解決方案


第三個效能挑戰 — 臃腫的網頁

lighthouse 可偵測極大的網路傳輸資料

JavaScript 打包檔稽核工具


第四個效能挑戰 — 等到天荒地老的 JavaScript 啟動時間

瀏覽器如何處理 JavaScript

範例網頁的 JavaScript Boot-up time 偏高,1.8 秒

快速 JS 的解決方案

第五個效能挑戰 — 未優化的圖片:

圖片優化工具

動畫 GIF 的問題

Carousels 時常載入不必要的圖片

別傳輸未優化或不必要的圖片給你的使用者

https://images.guide

第六個效能挑戰 — 資源探索與遞送延遲

<link rel="preload" as="font" href="webfont.woff2" type="font/woff2" crossorigin="anonymous">

幫助瀏覽器儘早遞送關鍵資源的解決方案

實驗性功能:Priority Hints

問題:當 Web Fonts 載入時,文字看不見

Web Font 載入策略的解決方案

問題:禁止轉譯的 JavaScript (Render-blocking scripts)

關鍵渲染路徑優化

減少禁止轉譯的 JS & CSS 的解決方案

Oodle Lab 範例網頁優化前後對照

企業網站案例研討 — Nikkei (日本最大媒體公司)

One More Thing — 機器學習 + 網站效能


結語

Yi-Peng Tseng

Written by

期許自己常保學習熱情的軟體工程師。 https://about.me/afutseng

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade