网站性能核心之CSS
CSS样式和CSS布局的方式对网站性能的影响非常大，大到了我们必须将其列入网站核心技术之一。CSS对累积布局移位(CLS)和首次渲染时间(LCP)这个两个指标的影响尤其巨大．
本文很硬，将介绍与CSS相关的优化内核的技术和方法。我们将分别优化页面的不同部分：布局、图像、字体、动画和加载。下面就是我们用来当作实验目标的小白鼠页面。
布局
将新内容插入DOM中
在页面的内容已经加载后，将一部分内容插入到页面中。页面上的其他内容依次往下推。这将导致页面布局发生明显的移动．
Cookie的通知，特别是那些放在页面顶部的各种通知，是这种现象的常见例子。其他经常导致这种布局变化的页面元素包括广告和嵌入的iframe。
如何检测呢？
LightHouse“避免大型布局移动”的检测项能够自动识别已经转移的页面元素。对于这个小白鼠，测试结果如下所示:
在这些发现中没有列出cookie通知，因为cookie通知本身在加载时没有移动。相反，它会导致页面下面的项目(即，div.hero和正文)向下移动。
我们可以把Cookie通知放在单独一个悬浮层上，这样就可以轻松解决这个问题。（虎翼和起飞页都支持这种悬浮Cookie通知）
图片
图像和最大内容的绘制(LCP)
图像通常是页面上最大的Contentful Paint (LCP)元素。其他页面元素，可以是LCP元素包括文本块和视频海报图像。LCP单元加载时间决定LCP。
需要注意的是，页面的LCP元素会随着页面加载的而变化，这取决于首次显示页面时用户可见的内容。例如，在这个演示中，cookie通知的背景、英雄图像和文章文本是一些潜在的LCP元素。
在示例中，cookie通知的背景图像实际上是一个较大的图像。为了改进LCP，你可以用CSS来绘制渐变，而不是加载图像来创建效果。这可以显著降低页面的加载时间哦。鸽认为，能够使用CSS当背景，就不要用图片，这显示了职业素养。最不济可以用个SVG么。
问题：图像和布局的改变
浏览器只能在图像加载后才能确定图像的大小。如果图像加载发生在页面已呈现之后，但没有为图像保留空间，则在图像出现时将发生布局移位。在演示中，当英雄图像加载时，会导致布局发生变化。
不明确地识别图像宽度和高度，使用LightHouse的“图像元素有明确的宽度和高度”检测项。
在这个例子中，英雄图像和文章图像都缺失了宽度和高度属性。设置宽度和高度属性，就可以轻松避免布局变化。
字体
字体会延迟文本呈现并导致布局变化。因此，快速下载的字体是很重要的。
延迟文本渲染
默认情况下，浏览器不会显示未加载字体的对应文字。这可以阻止“因为缺乏样式的文本闪屏”(FOUT)．但在许多情况下，这会延迟首次内容绘制(FCP)． 在某些情况下，这甚至会延迟最大内容绘制(LCP)。如果相关的网页字体没有加载的话，chrome和Firefox浏览器将阻止文本渲染高达3秒；而Safari将无限期地阻止文本渲染。当浏览器请求web字体时，阻塞时间开始。如果字体仍然没有加载结束块期间，浏览器将使用默认字体呈现文本。网页字体一旦加载好并可用，浏览器会对其自动交换。
布局位移
字体交换虽然对于快速向用户显示内容非常有效，但也有可能导致布局变化。当网页字体和后退字体在页面上占用的空间不同时，就会发生这种布局变化。使用类似比例的字体将最小化这些布局变化的大小。
若要查看正在加载到特定页面上的字体，请打开网络选项卡中的DevTools和过滤器字体． 字体可以是大文件，所以只有使用更少的字体通常对性能更好。
要查看请求字体所需的时间，请单击时机选项卡。字体越早被要求，它就能越早被加载和使用。
要查看字体的请求链，单击Initiator选项卡。一般来说，请求链越短，可以越快地请求字体。
这个演示使用了谷歌字体API。谷歌字体提供了两种加载字体方式。一种是通过
这些
动画
动画影响网站核心性能的主要方式是引起布局变化。有两种类型的动画你应该避免使用:触发布局的动画以及移动页面元素的“类似动画”效果。通常，这些动画可以用更多的性能等价物替换，如使用CSS属性变换，不透明度,过滤器等。简单的说，就是你自己动可以，不要影响其它人。
灯塔“避免非合成动画”检测项有助于识别非性能动画。
例如我们可以这样修改动画
关键的CSS
样式表是会阻塞呈现主线程的render-blocking。这意味着浏览器每遇到一个样式表，它将停止下载其他资源，直到浏览器下载并解析了这个样式表才会进行下一步。CSS样式表这会延迟最大内容绘制时间LCP。为了提高性能，一定要控制好CSS文件的体积大小。
结论
好运。