一些CSS設置能讓你的網站加載速度更快：

1:使用font-display: swap;

自定義字體會讓瀏覽器等待加載完成才渲染文字,從而影響頁面加載，讓用戶感覺頁面打開速度比較慢。可以這樣來設置css：

@font-face {
  font-family: 'YourFont';
  src: url('YourFont.woff2') format('woff2');
  font-display: swap;
}

這相當于告訴瀏覽器：先顯示備用文字，等自定義字體加載好了再替換。

2：用will-change減少繪制

鼠標懸停按鈕時整個元素卡頓，那是因為瀏覽器沒準備好。可以在按鈕樣式里這樣來設置css：

.button:hover {
  will-change: transform, opacity;
}

3：使用prefers-reduced-motion

你愛酷炫動畫。有些人不喜歡。尊重這點，加上這段代碼：

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

4：用content-visibility懶加載背景圖，延遲繪制那些還沒滾動到視窗內的元素。

.card {
  content-visibility: auto;
}