用來診斷網站的線上工具
Critical Render Path
HTML
- 在 <head> 中先載入 style.
- 在 </body> 前才載入 script.
CSS
- 只載入需要用到的, 不用一次載一大包 style 進來.
- 先載入使用者第一眼會看到的, 剩下的等到 window.onload 後再載入.
- 使用 media query.
- 不要寫太長的 style, 例如:
.container .card .card-title div .is-active { … }
JavaScript
- 如果主要功能需要用到這段 JavaScript, load it with async.
- 如果主要功能不會用到這段 JavaScript, load it with defer.
- 減少使用 JavaScript 操作 DOM.
- 避免要跑很久的 JavaScript, 會造成使用者有卡卡的感覺.
Optimized Code
Code Splitting
目前的開發方式大部分是將所有的程式碼, 打包成一整包的 bundle,
這是一個好方法, 可是當有一天, 我們的 bundle 越來越大包的時候,
我們就不會想讓用戶一開始就載入整坨 bundle.
例如 :
有些程式碼只在”聯絡我們”這個頁面需要被載入 ;
又或者, 我們有一個地圖的元件藏在網站的深處, 這個地圖元件用到很大包的資源,我們想在最後再去載入這個元件所需要的資源.
因此, 我們可以使用 code splitting 來解決這個問題.
- 我的範例, 可以打開 devTool, 在 network 中去觀察 js 載入的情形.
- React code splitting document
- react-loadable
React Performance
如果你寫的是 React, 可以在 localhost url 加上 ?react_perf, 就可以在 devTool 中的 Performance 觀察我們的網頁.
React Re-render
在 React 中依靠每個元件的 shouldComponentUpdate 回傳的值來決定是否需要重新渲染它, 每一個元件的 shouldComponentUpdate 預設都是 true, 如果非常確定這個元件不需要被重新渲染, 可以回傳 false; 如果想要在某些情況下才重新渲染, 可以參考下面的寫法.
但必須注意的是, 我們在 shouldComponentUpdate 中加入了判斷條件, 這也會對效能造成影響, 所以並不是每一個元件都加上 shouldComponentUpdate 就好, 而是要經過判斷這個動作的必要性後再加上去.
Progressive Web Apps
HTTPS
App Manifest
Service Worker
可以把它當成一個 network proxy, 當用戶要向伺服器要檔案之前, 都會先問問 Service worker 有沒有他要的檔案, Service worker 就會去看 Cache 裡面有沒有這些檔案, 如果有就可以很快的傳回去給用戶.
相關連結
Minimize Files
Minimize Text
把多餘的空白跟換行都去掉, 讓原本易讀的程式碼變成醜醜的樣子.
Minimize Images
- 將圖片無失真壓縮, 可以使用 TinyPNG, JPEG-optimizer 等線上工具.
- 對 JPEG 圖片進行失真壓縮 (30%~60%).
- 根據顯示器的寬度去調整圖片大小,
例如: 要在手機上顯示的圖片不需要 width=4000px 的圖片,
因此要製作不同大小的圖片,
再利用 media query 或是 react responsive … 來決定要丟出的圖片. - 移除圖片的 metadata, 可以使用 Verexif.
