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

相关文章

  • GoogleSEO插件

    谷歌SEO插件有哪些?

    谷歌SEO插件根据插件的具体功能可以分为扩展话题、站内优化、技术优化、外链联系、外链挖掘等六种类型,具体有14种谷歌SEO插件。而说到网站SEO优化,大家首先想到的便是基于谷歌进行的搜索引擎的算法排名。所以如何针对谷歌算法,对网站的SEO进行优化,是每位站长在外贸建站时应该思考的重中之重。而本文将基于此,为大家详细介绍一下关于谷歌SEO优化的插件有哪些? 一、扩展话题 1、Ubersuggest Ubersuggest是一个免费的SEO工具,虽然每天只有3次搜索次数,但它能够提供更多的信息。例如…

    网站SEO 2024年 7月 8日
  • Website-speed-measurement

    外贸建站必备:5款免费网站测速工具

    在外贸建站的过程中,不免会出现网站访问速度变慢、压面加载卡顿等问题,但是对于一些建站新手或者是建站预算有限的用户来说,如何以简单低廉的方式,为用户提供流畅的网络体验,减少网站用户流失量,是一个值得思考的问题,而本文节接下来将为大家介绍5款简单易用并且性价比较高的网站测速工具,帮助大家更好的优化网络性能,提高SEO排名。 1、Google PageSpeed Insights 这是谷歌官方提供的网站速度测试工具。既可以测试PC端,也可以测试移动端,可以分析网站的性能问题,并给出性能评分/加载时间/…

    网站SEO 2024年 7月 15日
  • SEO优化获得高质量外链

    外贸网站建设如何获得高质量外链推广?

    在进行外贸网站建设时,站长可以通过付费或者提高网站竞争力的方式获得高质量外链的推广。而高质量的外链关乎网站的SEO排名,所以,如何获得高质量的外链是各位站长在外贸建站的过程中,必须要关注的问题。那么今天就来和大家聊一聊,外贸网站如何获得高质量的外链推广。 一、高质量外链的特点 1、权威性:权威性实际上就是信任背书,跟网红营销是一样的。这是一种信任转移,如果能够在权威网站上发布外链,那么客户包括搜索引擎都会将这种信任转移到自己的跨境独立站上。 如今不靠谱的网站不在少数,可信任的网站排名自然会升高。…

    网站SEO 2024年 7月 16日
  • Google的移动友好测试工具

    如何优化跨境电商独立站页面

    跨境电商独立站页面的优化不仅可以从从网站加载速度、移动设备兼容性入手,更包括设置合适的内部链接、外部链接和定期技术优化等方法。一个好的网站页面是提高网站SEO和用户体验的重要手段,而如何进行跨境独立站页面的优化呢?将是本文接下来要叙述的内容。 一、提升外贸网站加载速度 1、压缩图像 使用工具如TinyPNG来压缩图片文件。具体步骤是,首先将需要压缩的图像上传到TinyPNG网站,工具会自动压缩图片文件而不损失质量,然后下载压缩后的文件并替换外贸网站上的原始图片。这样可以大幅减少图像的大小,提高页…

    网站SEO 2024年 8月 12日
  • SEO竞争对手分析

    如何进行SEO竞争对手分析

    在之前的文章中我们提到过SEO竞争对手分析的重要性,这篇文章来详细探讨一下竞争对手分析的内容。 一、什么是 SEO 竞争对手分析 SEO 竞争对手分析(又称为竞争分析)是研究直接搜索的竞争对手以了解其目标关键字、内容策略、反向链接配置文件等的过程,目的是将这些策略中最成功的元素逆向导入到自己的 SEO 策略。 无需猜测要定位哪些关键字、要创建哪些内容或要构建哪些链接,而是可以研究竞争对手,分析哪些内容已经对他们有效,并在成功的基础上再接再厉。 二、SEO 竞争对手分析的重要性 排名更高。获得更多…

    网站SEO 2024年 5月 22日
  • 网站标签的优化技巧

    HTML标签的作用 网站标签的优化技巧

    HTML标签是在外贸网站建设过程中必不可少的优化内容,因为HTML标签不仅有利于优化用户体验,而且在提高网站排名,增加网站索引机会等方面发挥这巨大作用,所以用户应该注重网站标题标签、元描述标签和图片ALT标签等方面的优化技巧,为了帮助大家更好的了解网站HTML标签的有关内容,下文将为大家介绍HTML标签的作用及优化技巧的知识。 一、什么是HTML标签 HTML标签是用来构建网页的基本组成部分,用于定义Web浏览器如何格式化和显示网页,主要由标签和结束标签构成,例如<html> 是开始…

    网站SEO 2025年 1月 15日
联系我们

联系我们

0551- 62586667

邮件:service@spiderltd.com

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

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