目录
优化字体
怎么修复
Google字体的字体显示
呈现可以首先看到的内容
这个怎么运作？
考虑元素初始高度
奖励：本地延迟加载图像和iframe（HTML方式）
结论
在本文中，我们将讨论如何仅用几行CSS声明（也许只有一行）轻松地大幅度提高您的网站（或页面）速度。
您将学习如何最大程度地利用CSS的功能来使您的网站更快！Web变得越来越容易访问，并且供应商现在正在花费更多时间来利用其浏览器来使开发变得更容易。随着Web世界越来越关注速度和可访问性，Web开发机构和浏览器供应商逐渐意识到它的性能，将大部分页面速度优化工作交给了自己，而对代码编写者（您）的关注却很少。
让我们开始吧！
在编程世界中，曾经有一个术语“异步编程”（如果您不是程序员的一部分，对不起），但这意味着通过继续前进以非阻塞方式执行动作“A”的一种方式。处理下一个任务，并在将来准备就绪时返回“A”的结果。这样可以更快地完成任务，无需等待其他任何行动。在编程领域，这已经是一个伟大的游戏规则改变者，并且所有编程语言都大都采用了它。
现在是时候使用CSS方式了。但是在此之前，让我们先谈谈加载外部字体的副作用。
毫无疑问，在您的网页中加载字体会阻止渲染，字体属性（如权重，磅值）都会影响字体的字节大小，这样Google字体可以通知您在选择字体时字体是如何影响速度的。
但是，直到Google Fonts警告之前，每次尝试将字体加载到您的网站：
向字体服务器发出请求（如果字体与您的网站不在同一服务器上）：在这里服务器的响应时间很重要。下载字体：此处的字体字节大小（KB）至关重要，服务器的响应时间也是如此。仅在完成以上列出的过程后，您的网页字体才会正确呈现。这听起来并不构成威胁，但是什么时候发生：
字体字节非常大服务器响应时间很慢或者用户使用低端移动设备并且互联网速度很慢？这些都是您的招标网站的壁垒。
幸运的是，您可以使用CSS font-display属性修复此问题。只需将其放在您的@font-face定义中即可。
就我自己而言：
@font-face { font-family: 'CustomFont'; src: url('mycustomfont.woff2') format('woff2'), url('mycustom.woff') format('woff'); font-display: swap; }字体显示属性还有更多值可与字体渲染设置混合使用。
如果您使用的是Google字体，则可以使用导入URL上的参数使设置字体显示更加容易： display=swap
范例网址
https://fonts.googleapis.com/css2?family=Open+Sans&display=swapCSS content-visibility属性将改变CSS 可以惊人地积极改善网站速度的方式。
这可以比作新颖的延迟加载想法。关键CSS有其自身的缺点，因为它要求您首先了解将需要的样式，而这并非像所提到的那样容易，它需要进行实时分析以使其正确。关键的CSS还要求您使用一些JavaScript代码，而不是每个人都总是有好心情写JavaScript的。
幸运的是，content-visibility是来营救的。
content-visibility让浏览器跳过元素的渲染，这种渲染模式包括网页的布局和绘画，直到用户滚动到该页面为止。这样可以节省合理的页面加载时间，尤其是当您的内容中有较长部分处于非首屏状态时。该content-visibility属性使初始用户加载快得多。这使得网页的交互和响应更加迅速。
在页面上启用了内容可见性的情况下会发生什么：
浏览器仅加载和绘制折叠上方的元素。当用户将其滚动到视口时，会折叠并显示折叠下的其余内容。要使用该content-visibility属性，只需将其放置在包含渲染的最外面的父元素中。就我自己而言：
body { content-visibility: auto; }就是这样！
因为内容的渲染结果可能会影响元素的大小，例如在完全渲染元素时滚动条移动，所以最好先使用contain-intrinsic-size属性设置元素的自然大小。这应该是渲染时元素的预期大小（高度和宽度）的估计。
例：
body { content-visibility: auto; contain-intrinsic-size: 500px; }该content-visibility属性提供了更多值以利用此功能，您可以阅读Web.dev的文章。
浏览器支持？
在撰写本文时，Chromium 85仅支持content-visibility属性，Firefox当前也正在讨论该属性。
我将其标记为奖励，不是因为它是最少的实践，而是因为它不是CSS方法。图像和iframe延迟加载在页面速度优化中起着重要作用。
“图像延迟加载”在Web开发世界中并不是一个新词，但这是很久以前用JavaScript片段完成的，直到最近。现在，我们可以使用延迟加载图像和使用loading="lazy"的iframe。
简单吧？是的，你是对的！就这么简单。
一个典型的例子：
<img src="beautify.jpg" loading="lazy" />对于iframe：
<iframe src="external.html" loading="lazy" />页面速度和与CSS的交互优化只是页面速度优化的一部分。优化网站页面加载时间和用户互动时，还需要考虑其他因素。这不仅使您的用户满意，而且使您在SEO中赢得了巨大的胜利。我们希望CSS继续提供更多功能来为网络的这一方面做出贡献。
