优化字体

怎么修复

Google字体的字体显示

呈现可以首先看到的内容

这个怎么运作？

考虑元素初始高度

奖励：本地延迟加载图像和iframe（HTML方式）

结论

在本文中，我们将讨论如何仅用几行CSS声明（也许只有一行）轻松地大幅度提高您的网站（或页面）速度。

您将学习如何最大程度地利用CSS的功能来使您的网站更快！Web变得越来越容易访问，并且供应商现在正在花费更多时间来利用其浏览器来使开发变得更容易。随着Web世界越来越关注速度和可访问性，Web开发机构和浏览器供应商逐渐意识到它的性能，将大部分页面速度优化工作交给了自己，而对代码编写者（您）的关注却很少。

让我们开始吧！

优化字体

在编程世界中，曾经有一个术语“异步编程”（如果您不是程序员的一部分，对不起），但这意味着通过继续前进以非阻塞方式执行动作“A”的一种方式。处理下一个任务，并在将来准备就绪时返回“A”的结果。这样可以更快地完成任务，无需等待其他任何行动。在编程领域，这已经是一个伟大的游戏规则改变者，并且所有编程语言都大都采用了它。

现在是时候使用CSS方式了。但是在此之前，让我们先谈谈加载外部字体的副作用。

毫无疑问，在您的网页中加载字体会阻止渲染，字体属性（如权重，磅值）都会影响字体的字节大小，这样Google字体可以通知您在选择字体时字体是如何影响速度的。

但是，直到Google Fonts警告之前，每次尝试将字体加载到您的网站：

向字体服务器发出请求（如果字体与您的网站不在同一服务器上）：在这里服务器的响应时间很重要。
下载字体：此处的字体字节大小（KB）至关重要，服务器的响应时间也是如此。

仅在完成以上列出的过程后，您的网页字体才会正确呈现。这听起来并不构成威胁，但是什么时候发生：

字体字节非常大
服务器响应时间很慢
或者用户使用低端移动设备并且互联网速度很慢？

这些都是您的招标网站的壁垒。

怎么修复

幸运的是，您可以使用CSSfont-display属性修复此问题。只需将其放在您的@font-face定义中即可。

就我自己而言：

@font-face {font-family: 'CustomFont';src:  url('mycustomfont.woff2') format('woff2'),url('mycustom.woff') format('woff');   font-display: swap;
}

字体显示属性还有更多值可与字体渲染设置混合使用。

Google字体的字体显示

如果您使用的是Google字体，则可以使用导入URL上的参数使设置字体显示更加容易： display=swap

范例网址

https://fonts.googleapis.com/css2?family=Open+Sans&display=swap

呈现可以首先看到的内容

CSScontent-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当前也正在讨论该属性。

奖励：本地延迟加载图像和iframe（HTML方式）

我将其标记为奖励，不是因为它是最少的实践，而是因为它不是CSS方法。图像和iframe延迟加载在页面速度优化中起着重要作用。

“图像延迟加载”在Web开发世界中并不是一个新词，但这是很久以前用JavaScript片段完成的，直到最近。现在，我们可以使用延迟加载图像和使用loading="lazy"的iframe。

简单吧？是的，你是对的！就这么简单。

一个典型的例子：

<img src="beautify.jpg" loading="lazy" />

对于iframe：

<iframe src="external.html" loading="lazy" />

结论

页面速度和与CSS的交互优化只是页面速度优化的一部分。优化网站页面加载时间和用户互动时，还需要考虑其他因素。这不仅使您的用户满意，而且使您在SEO中赢得了巨大的胜利。我们希望CSS继续提供更多功能来为网络的这一方面做出贡献。

以CSS方式提高您网站的速度相关推荐

CSS中的emmet语法（使用缩写的方式提高书写html编写速度）
使用CSS的emmet语法:使用缩写的方式提高书写html编写速度. (1)快速生成html结构语法: 如果想要生成多个相同的标签,加上"*"就可以了,如div*3,生成三个div ...
启用Gzip压缩(IIS)提高客户端网站访问速度
IIS上启用Gzip压缩(HTTP压缩) 详解一.摘要本文总结了如何为使用IIS托管的网站启用Gzip压缩, 从而减少网页网络传输大小, 提高用户显示页面的速度. 二.前言. 本文的知识点是从互联 ...
打开html文件图片为什么没有_提高网站打开速度秘诀:压缩html,Javascript和CSS文件...
微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号 ...
网页速度很慢优化方案：如何提高网页加载速度，提升网站加载速度
网站加载速度的快慢,直接影响用户的去留.这里为大家持续更新我的经验,帮你解决网页速度很慢,慢在哪里,该怎么优化的问题.希望对你有所帮助! 1. 网站空间要好:网站需要一个稳定的服务器或者虚拟机,可以 ...
提高网站打开速度的7大秘籍
很多站长使用虚拟主机来做网站,网页内容一旦很多,网站打开速度就会特别慢,如果说服务器.带宽.CDN这类硬指标我们没有经济实力去做,不妨通过网页代码优化的方式来提高速度,卢松松总结了一些可行性的方法. ...
如何让提高网站访问速度
如何让提高网站访问速度整理方案一: 网站访问速度可以直接影响到网站的流量,而网站的访问量几乎与网站的利益直接挂钩,因此网站的速度问题成为企业及站长十分关注的问题.现在网站越来越多,不少朋友的网站打开 ...
提高网站访问速度方案
很多站长使用虚拟主机来做网站,网页内容一旦很多,网站打开速度就会特别慢,如果说服务器.带宽.CDN这类硬指标我们没有经济实力去做,不妨通过网页代码优化的方式来提高速度. 1: 缩小Javascript ...
提高网站打开速度的7大秘诀
最近都在研究公司某个巨慢网站怎么优化,看到这边文章很不错.收藏过来转载地址:http://lusongsong.com/reed/360.html 很多站长使用虚拟主机来做网站,网页内容一旦很多,网 ...
提高网站打开速度的7大秘籍（转）
很多站长使用虚拟主机来做网站,网页内容一旦很多,网站打开速度就会特别慢,如果说服务器.带宽.CDN这类硬指标我们没有经济实力去做,不妨通过网页代码优化的方式来提高速度,卢松松总结了一些可行性的方法. ...

以CSS方式提高您网站的速度

优化字体

怎么修复

Google字体的字体显示

呈现可以首先看到的内容

这个怎么运作？

考虑元素初始高度

奖励：本地延迟加载图像和iframe（HTML方式）

结论

以CSS方式提高您网站的速度相关推荐

最新文章

热门文章