LCP (Largest Contentful Paint)

網頁可視區域中最大的元件載入時間，也就是主要內容被使用者看到所需的時間，作為速度指標。

納入評量的 dom 如下

• img

• svg 中的 img

• video

• css url 載入的 background image

• 包含 text node 或是 inline-level text 子元素的 block-level 元素

優化方式如下

1. 減少 server response time

   1. 主機效能優化

   2. 比較近的 CDN Cache

   3. Browser Cache

   4. 提早載入第三方資源

2. 降低 CSS 以及 JS 的 blocking time

3. 加快資源載入時間

   1. 圖片大小優化

   2. 預先載入重要資源

   3. 文字檔壓縮

   4. 不同網路狀態取得不同資源

   5. Service Worker

4. 避免 CSR

   1. 要用 CSR 的話要做 JS 優化避免 render 時使用太多資源

   2. 盡可能在 server 端 render