在使用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怎么改字体?

相关文章

  • 国际SEO

    国际SEO是什么及优化策略

    国际SEO是一种向全球多个国家展示搜索排名结果的过程,外贸建站商家主要可以通过国际站点的URL结构、hreflang标签、关键词研究、本地化内容等方式实现国际SEO优化策略的制定。相较于本地SEO而言,国际SEO可能对大家来说有点陌生,所以下文将为大家具体介绍国际SEO是什么及优化策略的内容。 一、国际SEO是什么 国际搜索引擎优化是提高网站在不同语言和国家的搜索引擎结果页面 (SERP) 上的知名度的过程。它涉及从目标区域中的受信任站点获取链接、创建本地化内容以及构建站点以有效覆盖全球受众等技…

    网站SEO 2025年 3月 20日
  • 关键词研究工具

    9个实用的SEO免费和付费关键词研究工具

    工欲善其事必先利其器,想要顺利进行关键词研究,离不开正确的关键词研究工具的支持。在这篇文章中,我们将介绍九种实用的SEO免费和付费关键词研究工具,用于为网站内容进行关键字研究。 一、免费关键词研究工具 1、谷歌关键词规划师(Google Keyword Planner) Google有一些工具可以帮我们进行关键词研究,它们的免费AdWords工具称为Keyword Planner就是其中之一,尤其是如果在一些广告活动中使用AdWords。(注意: 需要设置一个AdWords账户才能使用Keywo…

    网站SEO 2024年 4月 29日
  • 独立站SEO

    独立站SEO怎么做 独立站SEO可以做哪些?

    独立站SEO怎么做?用户可以通过站内SEO优化、站外SEO优化和技术SEO优化实现外贸独立站SEO优化的工作。做好独立站的SEO优化工作不仅有利于网站排名的提高,而且有助于商家品牌的宣传与推广。对于SEO新手来说,繁杂的SEO工作可能会有一些难以上手,不过不要担心,本文将从三个方面为大家仔细梳理独立站SEO的优化,希望可以为大家的外贸建站工作提供一个参考。 独立站SEO可以做哪些一:站内SEO优化 1、文章内容优化 高质量独特的内容是获得良好排名的关键,内容要提供真正有价值的信息,解决潜在用户的…

    网站SEO 2024年 10月 22日
  • Google关键词规划工具

    独立站SEO优化:关键词拓展工具有哪些?

    谈到独立站关键词的优化,离不开关键词拓展这一话题,那么随着跨境电商独立站的搭建到发展的不断深化,用户该如何进行围绕目标关键词进行关键词的挖掘呢,用户可以通过Google关键词规划工具、SEMrush、Ahrefs关键词拓展工具实现关键词的拓展与分析,下文将为大家具体介绍几款关键词拓展工具为大家提供一个使用参考。 关键词拓展工具一:Google关键词规划工具 特点:是Google官方的关键词研究工具,尽管主要用于谷歌搜索广告,但其数据对其他平台的SEO推广也有一定的实际意义。可帮助发现与网站相关的…

    网站SEO 2024年 11月 20日
  • SEO外链建设方法

    独立站外链怎么做 SEO外链建设方法有哪些?

    独立站外链怎么做?做独立站外链首先需要用户熟悉SEO外链建设的四种方法,之后针对自己的情况,选择合适的外链建设方法,初期应该以Add外链为主,在资金允许或者资源充足的基础上,可以做Ask,之后经过长期高质量外链的积累和内容创作,便可获得Earn外链和Outreach的机会。下文将为大家具体呈现SEO外链建设方法的有关内容,希望可以为大家的外贸建站工作提供一个有价值的参考。 SEO外链建设方法一:Add(添加外链) 添加外链是一个主动把自己网站在支持放置链接的网站去提交的一个过程,这些网站往往包括…

    网站SEO 2024年 12月 17日
  • 网站锚文本

    WordPress优化教程:网站锚文本怎么做

    在进行WordPress优化时,用户经常会忽视网站锚文本的优化,但网站锚文本通常也会影响到网站在谷歌搜索引擎中的索引权重,那么既然网站锚文本那么重要,网站锚文本到底该怎么做呢?各位站长可以通过保持锚文本的简洁和精准性,又或是通过关注锚文本周围的上下文语境等实现锚文本的优化,对于WordPress网站锚文本优化感兴趣的用户,可以通过阅读下文了解详细操作。 一、网站锚文本是什么 锚文本(也称为链接文本)是一段可见且可点击的文本,用作从一个页面到另一个页面的超链接,它通常通过具有不同的颜色或下划线来区…

    网站SEO 2025年 2月 3日
联系我们

联系我们

0551- 62586667

邮件:service@spiderltd.com

工作时间:周一至周日,9:00 - 21:00,节假日不休息

在线客服
微信客服
微信客服
分享本页
返回顶部