提升网站加载速度的几个css技巧

一些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;
}