免费试用 Weglot
如何改进多语言网站的核心网络活力
作者
尼克-舍费尔霍夫
审阅人
Eugène Ernoult
更新于
2024 年 4 月 8 日
2025年5月27日
核心网络活力是衡量网站用户体验质量的一系列指标。谷歌将其视为排名信号，因此它们对于（多语言）搜索引擎优化也很重要。如果忽视它们，就有可能被访问者和搜索引擎抛弃。
为了避免出现这种情况，在本篇文章中，您将了解到在多语言网站上改进这些指标所需的一切知识。我们将解释什么是核心网站指标，如何测试网站的当前性能，并逐步说明如何改进网站的各项指标。
什么是核心网络生命体征？
如前所述，Core Web Vitals 衡量网站的用户体验。所有这些指标在某种程度上都与加载速度和网站互动性有关。这些指标是谷歌在 2020 年引入的，并已成为其搜索算法的一部分。下面让我们逐一介绍。
最大含量涂料 (LCP)
第一个是最大内容填充（LCP）。它测量的是网页从加载到可查看和可用所需的时间。它通过检测网页中最大的内容元素（通常是图片或文本块）以及访客何时可以看到它来确定。
这个时间间隔以秒为单位，用作 LCP 分数。谷歌定义了一些分界点，以确定网站应达到的时间。
如上图所示，LCP 元素的加载时间不超过 2.5 秒为良好成绩。4 秒以内是可以接受的，但应加以改进，超过 4 秒，Google 就会认为时间过长。
累积布局偏移 (CLS)
下一个指标是跟踪网站布局在加载时的稳定性，即当页面上出现新元素时，网站布局的移动程度。它被称为累积布局偏移或 CLS。
这有什么关系？
高度的 CLS 会影响用户与网站的交互。除了看起来不美观之外，它还会让用户因为移动的文本而失去在页面上的位置，或者因为元素在错误的时刻移动而导致用户意外点击错误的元素。
CLS 的计算方法是查看加载时布局的移动量以及移动幅度。将这两个比率相乘即可得出分数。
CLS 分数低于 0.1 即为良好，低于 0.25 则需要改进，高于 0.25 则不可接受。
注意：用户与页面交互（如点击）后 500 毫秒内的页面移动不会影响 CLS 分数。这些被认为是有目的的。
与下一幅油漆的交互 (INP)
交互到下一次上色或 INP 是最新增加的核心网络生命指数指标。它将于 2024 年 3 月取代最初的测量指标之一--首次输入延迟 (FID)。
这两种方法都能跟踪访客与页面元素进行交互的时间以及页面元素的反应速度。当然，反应越快越好。
首次输入延迟只关注访客的首次互动，而 "互动到下一次绘画 "则跟踪访客访问期间的所有页面互动，并显示最差分数。这样，您就能更准确地了解页面的响应速度。
INP 分数应该达到多少？
最长不超过 200 毫秒是好的，最长不超过 500 毫秒是合理的；超过这个范围将对 Google 对您网站的看法产生负面影响。
如何测试网站的核心网络活力
一旦您知道了什么是核心网站生命值，下一个合乎逻辑的问题就是，如何找出您的网站所处的位置？最简单的方法就是使用PageSpeed Insights 这样的速度测试工具。
只需在顶部输入您的网站 URL 并运行测试即可。测试完成后，它不仅会告诉您的网站是否通过了核心网络活力评估，还会提供上述每个数据点的值。
如果有的话，你会得到现实生活和实验室结果的混合信息。其中包括来自CrUX 的信息，即谷歌从其 Chrome 浏览器中收集的网站用户数据。如果没有，则只能从Lighthouse 获得测量结果，而Lighthouse 会对测量结果进行特别计算。
其他可以告诉你 Core Web Vitals 性能的工具有GTmetrix、WebPageTest 或Chrome 浏览器 Web Vitals 扩展。
改进多语种网站的核心网络活力
那么，如果你的价值观不那么好，你该怎么办呢？我们现在就来谈谈这个问题。
从现在起，我们将逐步讲解如何改进多语言网站的各项核心网站活力指标。我们将介绍如何手动操作，以及借助 WPRocket 插件为 WordPress 用户提供的简便方法。
WP Rocket 让没有技术知识的人也能毫不费力地快速实现复杂的性能改进。它是功能最强大、对新手最友好的缓存插件之一。
一般性能改进
首先，让我们来看看如何确保网站快速加载的一般技巧：
- 选择一家好的托管公司--网站托管服务提供商的质量对网站加载速度有很大影响。在做出决定之前，请阅读一些速度比较和用户评论，确保选择信誉良好的提供商。
- 保持网站更新 --如果您的网站基于 WordPress 等内容管理系统，请务必保持所有内容的更新。这意味着软件本身、任何插件、主题、服务器的 PHP 版本以及属于网站的其他一切。只有这样，您才能从新的速度改进中受益。
- 少用插件- 同时，尽量不要在网站上添加过多的东西。每个插件和扩展都会带来额外的代码，有可能会降低网站的运行速度。因此，尽量减少网站上的插件。
- 使用高质量组件- 对于网站上的扩展程序，请确保其质量上乘且性能优化，例如 Weglot.
在采取更具体的措施之前，上述提示将为实现总体快速性能奠定良好的基础。
修复最大含量的油漆
改进 Largest Contentful Paint 的主要途径有两个：总体优化页面加载速度（如上所述）和加快 LCP 元素的交付速度。
您的 LCP 元素是什么？PageSpeed Insights 会在 "诊断 "中告诉你。
实施缓存和压缩
缓存和压缩是提高网站性能的两种基本技术。前者是指存储已渲染的页面数据，使访问者能更快地访问这些数据。在使用 WordPress 为网站提供动力时，这种方法尤为有效。
为什么这么说呢？
在 WordPress 这样的内容管理系统中，页面通常是通过 PHP 代码和从数据库中提取的内容动态创建的。服务器将其转化为 HTML 文档并发送到浏览器。
缓存可将网页的预渲染 HTML 版本存储在服务器上，以便直接发送给访问者，从而加快这一过程。这样可以减少每次访问的多次往返，使用户体验更快更好。
另一方面，压缩与创建压缩文件的原理相同，只不过压缩是在服务器上进行的，而不是在你的家用电脑上。它能缩小构成网站的文件，使其下载和显示速度更快。
要在服务器上激活缓存和压缩功能，需要编辑一个名为.htaccess 的文件。该文件包含网络服务器功能的重要指令，通常位于网站根目录下。
您可以复制并粘贴以下代码，激活上述两种速度优化技术：
这两个代码片段都是GTmetrix提供的，适用于 Apache 服务器。您可以在线找到其他服务器（如 NGINX）的使用说明，例如KeyCDN 的此教程。
如果这看起来很吓人，你可以使用前面提到的 WP Rocket 插件实现同样的效果。在这里，你只需安装并激活插件，它就会自动实现压缩和缓存，包括针对移动设备的压缩和缓存。
优化代码和代码交付
无论您做什么来简化网站代码的交付和处理，都将有助于改善多语言网站上的 Largest Contentful Paint。让我们来看看这方面的一些好选择：
- 删除不必要的标记 - 如果网站上有大量冗余的 JavaScript 和 CSS 代码，可以通过删除所有非必要的内容来提高性能。
- 最小化 - 即删除网站文件中的空白和注释。这样做可以缩小文件大小，加快下载和处理速度。
- CSS 和 JavaScript 优化--在此，您需要设置网站文件，使其不会阻碍网站其他部分的加载。这就是你可能会从速度测试工具中收到的臭名昭著的 "消除渲染阻塞资源"信息。为此，有两种常用工具，即defer和async属性。它们分别将 JavaScript 的执行移到加载队列的末尾，并告诉浏览器在后台下载文件，只有在文件可用时才执行。
要手动进行最小化，可以使用Minifier或Grunt 等工具。优化 CSS 和 JavaScript 通常意味着要对阻碍网页加载的因素进行大量分析。速度测试工具会让你了解有问题的脚本。
之后，您可以手动为它们添加defer和async标记。它们看起来像这样
你还可以分割一些代码，一开始只加载必要的部分。关于这一点，我们将在下文谈及 INP 优化时详细介绍。
如果您想将这些过程自动化，WP Rocket 可以对代码进行缩减、移除未使用的 CSS、延迟 JavaScript 并异步加载，只需勾选几个框即可。
优化图片
图像优化是指在不影响质量的前提下，缩小网站视觉效果的尺寸。这是一种很好的通用性能改进方法，尤其有助于改进最大内容填充（Largest Contentful Paint），因为图像通常最终会成为 LCP 元素。
如何优化网站上的图片？
- 翻译图片- 翻译网站不仅限于文字。您还必须转换图片中的文字和/或使用更符合文化习惯的图片。值得庆幸的是，Weglot 可以帮您解决这个问题。
- 压缩 --与文本文件一样，您可以从图像中剥离不必要的数据来缩小图像大小。
- 使用现代格式--新一代格式（如 WebP 或 AVIF）的图像比 JPG 或 PNG 小得多，但看起来一样漂亮。
- 正确调整视觉效果的大小--显示的图片要与网站上显示的一样大。否则，您就会让访问者加载不必要的数据。
- 开启懒加载--这种技术只加载浏览器在初始加载时实际可见的图片，并在访问者滚动页面时加载页面下方的图片。这还能避免在非 LCP 图像上浪费带宽，从而加快重要图像的加载速度。
可用工具
你可以使用TinyPNG等工具压缩图像并将其转换为其他文件格式。Image Resizer等工具还可以将图片裁剪成你需要的任何尺寸。您还可以在 WordPress 的 "设置">"媒体"下找到相关选项。
此外，如果您运行的是最新版本的 WordPress（或版本 5.4 之后的任何版本），您的网站应该默认启用了懒加载功能。
如果您需要自动解决方案，可以使用Imagify。这是一个简单的图片优化插件，与 WP Rocket 搭配使用效果极佳。它可以自动处理图片，使其更轻便，同时兼顾质量和性能。该插件可将您的图片转换成 WebP 和 Avif 格式，调整大尺寸图片的大小，并将优化后的版本自动显示在您的 WordPress 网站上。
此外，WP Rocket 不仅为图片提供懒加载功能，还为 CSS 背景和视频等嵌入式媒体提供懒加载功能。此外，您还可以在合理的情况下将媒体排除在懒加载之外。
使用 CDN
内容交付网络（CDN）由位于世界不同地区的多台相互连接的计算机组成，其中包含您的网站文件。其目的是从离您的访问者最近的地方将文件以最快的速度传送给访问者。这对于拥有国际受众的多语言网站尤为重要。
因此，Weglot 会自动设置一个 CDN，这样您就可以将翻译好的内容快速传送到世界各地。如果您不是Weglot 用户，通常需要注册一个 CDN 并为您的网站进行配置。不同的服务提供商有不同的做法，以下是示例说明。
如果您需要帮助，WP Rocket 为 Sucuri 和 Cloudflare 这两个流行的解决方案提供了专门的附加组件。它们可以更快、更方便地为你的网站配置这些内容交付网络。
您还可以在CDN设置中通过提供提供商的 CNAME 启用其他网络。
最后，WP Rocket 还拥有自己的网络，名为RocketCDN，您可以在插件内自动配置。此外，WP Rocket 收缩代码文件的功能可以减少 CDN 流量和成本。
解决累积版面移动问题
在我们的多语言网站核心网络要素清单上，下一个需要改进的是 CLS。以下是如何确保您在这方面取得成功的方法。
包含图像尺寸属性
导致 CLS 分数低的最大因素之一往往是图片没有定义高度和宽度属性。
如果不说明最终页面上的图片有多大，浏览器就无法为其预留合适的空间。因此，当实际尺寸与占位符不同时，图片就会突然出现，并压低下面的所有内容。这种情况尤其会发生在懒加载的媒体上，因为这些媒体在首次加载页面时不会显示。
因此，优化 CLS 的第一条规则就是为图片添加高度和宽度定义。怎么做呢？
在纯 HTML 中，它看起来就像这样：
如果您使用的是 WordPress 块编辑器，它会自动设置尺寸，但您也可以在创建内容时定义特定尺寸。
此外，WP Rocket 还可以在媒体文件中添加缺失的宽度和高度声明，以防遗漏。
为嵌入、Iframes 和广告位预留空间
上述规则同样适用于嵌入式元素或广告等动态内容。它们也需要高度和宽度定义，以避免在页面布局的其他部分中移动。
这里的问题是，你不一定能控制这些元素的大小，因为它们通常来自第三方。在这种情况下，好的做法是至少做一个估算，以便预留空间。即使最终的元素更大，偏移也不会那么明显，从而导致 CLS 分数降低。
在 WordPress 中，编辑器还会自动为嵌入内容添加宽度和高度。此外，如前所述，WP Rocket 还提供了懒加载嵌入式媒体的选项。这会在加载时自动保留所需的空间。
优化网络字体传输
字体也会导致布局偏移，尤其是在网站上使用自定义字体时。最常见的两个问题是
- Flash of Unstyled Text（FOUT）--这意味着访问者首先看到的是标准字体的网站文本，而在加载字体文件时，文本会发生变化，从而可能导致布局移动。
- Flash of Invisible Text (FOIT) - 在这里，一开始你根本看不到任何文字。它只会与网页字体文件一起出现。
您可以通过以下策略避免这些问题：
- 使用现代字体格式--与图像一样，字体也有较大和较小的文件格式。加载速度最快的通常是 WOFF 或 WOFF2。
- 定义相似的后备字体--放置一种与实际字体非常相似的后备字体，可以在切换时减少页面移动。你可以使用字体风格匹配器来找到好的组合。
- 预加载字体- 将网页字体文件放在文档的较早位置，并在调用时添加rel=preload，从而优先加载字体文件。这样，浏览器就能更快地加载它们。
如果您使用的是 WP Rocket，该插件自带一个预载字体文件的选项。您只需输入字体所在的路径即可。
顺便说一下，多语言网站字体优化的一部分也是使用与不同字母兼容的字体。如果您的网站提供RTL 语言（从右到左书写），这一点尤其重要。
处理动态内容
所谓动态内容，是指在页面加载完成后出现的元素。例如，懒加载的图像、横幅、表单等。
要降低它们对 CLS 分数的影响，请遵循上述同样的建议：
- 事先确定容器，并给出固定尺寸。
- 将它们的出现与用户互动联系起来。这样就可以避免 CLS 惩罚。
顺便说一下，Weglot 完全能够翻译动态内容。因此，您不必担心受众无法理解。
努力实现与下一幅油漆的互动
最后，让我们来谈谈如何确保您的 INP 准确无误。
优化 JavaScript
当涉及到与 Next Paint 交互的问题时，JavaScript 通常是主要因素之一，尤其是所谓的 "长任务"。这些 JavaScript 任务需要 50ms 以上的时间才能完成，它们会阻碍浏览器处理页面上的用户交互。此外，网站上有大量脚本也会影响页面的响应速度。
我们已经在 LCP 部分讨论过如何优化 JavaScript。对于 INP 而言，处理网站上的长任务尤为重要。如果存在这些任务，您可以在 Chrome 浏览器开发工具中找到它们。它们用红色小三角形标记。
看看能否将它们分割成小块，在不永久阻塞浏览器主线程的情况下连续加载。您可以在此web.dev 教程中找到这方面的详细信息。最小化、延迟、同步和删除不必要的代码也有助于保持浏览器对用户交互的响应。
如果您使用的是 WP Rocket，该插件允许您详细配置哪些 JavaScript 文件需要延迟加载，哪些不需要。
减少未使用的 CSS
适用于 JavaScript 的所有内容同样适用于 CSS。下载和处理样式表会让浏览器忙得不可开交，延迟对用户输入的反应。
在这里，你还可以使用速度测试工具来查找未使用的 CSS。此外，你还可以拆分样式表，先加载关键的 CSS，或将其内嵌。
如前所述，WP Rocket 有自动移除未使用 CSS 的选项。
添加懒加载
我们已经讨论过用于图像优化的懒加载。它还能对 INP 产生积极影响，因为它能释放浏览器资源，以便对用户输入做出反应。请按照上面的说明实施。
顺便提一下，如果您在翻译懒加载的图片时遇到问题，Weglot 默认会翻译添加到data-src 或 srcset 属性中的图片 URL。如果您的懒加载使用了自定义属性，Weglot 将不会翻译它们--您必须添加一个专门用于 WordPress 集成的PHP 过滤器。
如果您正在使用Weglot JavaScript 集成和/或仍无法翻译图像，请联系支持人员了解更多信息。
立即改善多语言网站的核心网络活力！
核心网站活力是多语言网站可用性的重要质量指标。不仅访客关心这个问题，核心网站生命值还会影响搜索排名。因此，您一定要认真对待网站的核心网页生命值优化问题。
正如上文所述，这并不难。主要是要确保网页加载速度快，并在此期间保持稳定和反应灵敏。为此，您可以采取一些关键措施，我们已在上文进行了详细介绍。
如果你觉得处理代码和网站文件超出了你的能力范围，也可以选择WP Rocket 这样的插件解决方案。它可以为你优化网站，无需开发或技术技能，并默认完成大量工作。
110,000 多个品牌都在用 Weglot 翻译自己的网站，赶紧加入吧！
用AI即时翻译你的网站，再通过人工编辑进行优化，几分钟内就能上线。
用 Weglot 在你的网站上试试 AI 翻译吧！
深受全球70,000+品牌的信赖
集成过程非常简单，支持团队也提供了极其高效的帮助。我向所有寻求简单且高性价比网站翻译解决方案的朋友们强烈推荐Weglot！
Mike Robertson
尼康销售运营总监
免费试用
通过我们 2 分钟的互动演示，了解 Weglot 如何运作！
通过我们 2 分钟的 互动演示，了解Weglot 如何运作！
你知道你的网站翻译项目大概要花多少钱吗？
立即用 Weglot 在你的网站上试试 AI 翻译吧！
我们深受全球110,000+个品牌的信赖。
分享
准备好开始了吗？
要了解Weglot 强大功能，最好的方式Weglot 亲自体验。免费试用，无需任何承诺。
要Weglot 强大功能Weglot 最好的方式Weglot 亲自体验。立即免费试用，无需任何承诺。
若您尚未准备好连接自己的网站，控制面板中已提供演示网站。
你可能也会喜欢这些文章
常见问题
没有找到任何内容。