WordPress优化：WordPress如何让进行字体优化？

在使用WordPress进行外贸建站的过程中，不少商家为了追求网站的美观，会选择安装一些内存比较大的字体，但这往往会造成网站响应速度的延迟，那么如何在WordPress上对字体进行优化呢？商家除了使用一些网站缓存插件之外，还可以通过添加短代码实现字体的异步加载或者是通过添加HTML标签来实现WordPress字体的优化。

一、WordPress字体如何影响网站优化

1、CLS

布局偏移（CLS）测量页面加载时页面上的布局偏移量，字体加载缓慢将导致页面布局在呈现字体时发生偏移，从而增加 CLS。

2、LCP

LCP 是指在网页上加载最大内容元素所需的时间。这个最大的内容元素可以是图像或视频，但也可以是文本标题或段落。因此如果字体需要大量时间来加载，并且最大的内容痛是文本，会导致页面渲染将有明显的延迟，这将增加 LCP。

3、FID

首次输入延迟 （FID）指标衡量用户与网页的首次交互时间，例如单击按钮或填写输入字段。如果字体加载速度非常慢并且渲染阻塞（不是异步或延迟），则会增加 FID，因为它会延迟页面变为交互式所需的时间。

二、WordPress如何让进行字体优化

1、使用插件

字体优化插件提供帮助的一些方法包括但不限于以下内容：

• 减小字体文件的大小，从而提高性能，WP Optimize 是一个很棒的插件，可以压缩和优化字体文件，从而减小字体文件大小。
• 通过使用一种称为 font-display 的 CSS 技术来帮助更高效地加载字体，该技术可以决定在加载时字体最初应如何显示，这有助于防止 FOIT 和 FOUT。优化 Webfonts和LoadCSS 插件也称为 OWS（优化 Webfonts Speed），是使用字体显示来帮助更有效地加载字体的一个很好的插件示例。
• 一些插件还允许为不同的设备或屏幕尺寸指定不同的字体，例如 Easy Google Fonts、Use Any Font、Better Font Awesome 等。当希望网站全屏响应时，这特别有用，因为它可以提高可读性和带宽。

2、异步加载网页字体

可以使用 ‘async’ 或 ‘defer’ 属性来指示浏览器异步加载字体文件。这实质上意味着字体文件将在后台加载，而网页的其余部分则呈现到浏览器，这将帮提高网站的性能，因为现在不会因为字体文件而阻止网页渲染，以下代码片段分别演示了 async 和 defer 的用法：

<link rel=“stylesheet”href=“my-custom-font.css”async>

<link rel=“stylesheet”href=“my-custom-font.css”defer>

3、使用 preload header

使用 preload 标头，可以指示浏览器尽快开始加载字体文件。如果在网页的初始呈现中使用字体，这可能是一种有用的技术，因为它将减少显示字体所需的时间。

使用 preload 标头非常简单，需要做的就是在 HTML 文件的 ‘head’ 中添加一个 ‘link’ 元素，将 ‘rel’ 属性设置为 ‘preload’，将 ‘as’ 属性设置为 ‘font’，并将 ‘href’ 属性设置为需要预加载的字体路径，以下代码片段为将用户提供了如何执行此操作的代码级演示。

<link rel=“preload”as=“font”href=“/fonts/my-font.woff2”type=“font/woff2“crossorigin>

推荐阅读：《WordPress字体设置 WordPress怎么改字体？》