核心网络生命力：优化网站的 5 种方法

rabia375 · 發表於 2024-1-24 18:55:48

谷歌宣布推出 Web Vitals。这是一组新的指标，用于衡量网站的速度和用户体验 (UX)。在这些 Web Vitals 中，有一个指标子集，称为Core Web Vitals。在这种情况下，它具体是一组三个现实世界的、以用户为中心的指标。三个核心 Web 生命周期中的每一个都代表用户体验 (UX) 的不同方面。 2021年谷歌将使用Core Web Vitals作为新的SEO定位因素。尽管网站拥有高质量的内容和许多入站链接，但其排名可能会很差。目录[隐藏] 核心 Web Vitals 的三个要素是什么？优化网站核心网络生命力的 5 种方法 1.优化图片，提高页面速度 2. 优化JavaScript和CSS 3. 针对移动设备优化您的模板 4.优化网站安全 5.优化字体核心 Web Vitals 的三个要素是什么？对于当前的 Core Web Vitals 集，Google 确定了三个具体焦点：收费互动性视觉稳定性有三个新的相应指标来衡量这三个焦点： 1.最大内容涂料（LCP）。LCP 测量网页加载的感知速度。它意味着页面加载和呈现屏幕上所有内容的速度。理想的阈值是将 Largest Contentful Paint 保持在 2.5 秒以下。 LCP超过4秒被认为较差，这将影响2021年的SEO定位。 LCP - 最大的内容绘制 - Core Web Vitals 2.首次输入延迟(FID)。FID 测量浏览器响应用户发起的交互所需的时间。也就是说，它衡量网站的交互性和响应性。低 FID 可确保页面可用。理想的 FID 应小于 100 毫秒。 FID - 首次输入延迟 - Core Web Vitals 3.累积布局偏移(CLS)。CLS 测量视觉稳定性。当页面元素在呈现给用户后移动时，布局就会发生变化。CLS 测量受运动影响的屏幕百分比。理想的 CLS 应小于 0.1。 CLS - 累积布局转变 - 核心网络生命现在我们已经了解了构成 Core Web Vitals 的三个指标，接下来让我们看看针对这些 Core Web Vitals 优化网站的五种方法：优化网站核心网络生命力的 5 种方法 1.优化图片，提高页面速度对于任何网站，大图像通常代表最高的 LCP（最大内容绘制）。

平均而言，图片占网站总权重的 21%。图像优化有助于提供更好的用户体验、更快的加载时间和额外的排名机会。以下是一些优化图像的方法： 1.1. 图片 CDN。图像 CDN 专门从事图像优化、转换和交付。图像 CDN 使用图像 URL 来指示 WhatsApp 数据 应加载哪些图像。它们显示图像信息，例如大小、格式和质量。您可以使用的一些顶级图像 CDN 包括 AWS CloudFront、Akamai 和 Fastly。 1.2. 网页P格式。它是 Google 推荐的图像格式，包含无损和有损压缩的图像数据。与 JPEG 和 PNG 图像相比，它可以将图像尺寸缩小最多 34%。您可以通过cwebp工具或Imagemin WebP插件将图像转换为 WebP 格式。 1.3. 延迟加载。延迟对象的加载和初始化是为了提高性能和节省系统资源的一种做法。显示图像占位符，并在您滚动页面时将其替换为实际的全尺寸图像。启用 LazyLoad 仅在用户登陆页面时呈现初始图像集。这提供了无缝的用户体验。 2. 优化JavaScript和CSS 减少 JavaScript 和 CSS 文件的大小对网站的加载时间有相当大的影响。以下是优化 JavaScript 和 CSS 以使网站加载速度更快的三种方法。 2.1. 减少资源。这是从 JS 和 CSS 文件中删除空格和其他多余字符的过程。删除它们可以减少网站加载时间和带宽使用。您可以手动缩小 JS 和 CSS 文件。但是，如果有许多和/或大文件，最好使用优化插件。WordPress 的两个最好的插件是 Fast Velocity Minify 和 Autoptimize。 2.2. 减少渲染阻塞。渲染阻塞 JavaScript 和 CSS 脚本会降低网页速度。浏览器尝试一次加载所有内容，包括这些脚本。因此有必要消除阻塞渲染的脚本。首先，您需要使用PageSpeed Insights来识别哪些脚本导致了问题。我们将获得阻止渲染的 JavaScript 和 CSS 脚本的列表。您必须使用 WP Rocket、JCH Optimize 或 Speed Booster Pack 等插件来消除这些脚本。 3.3. 将 CSS 放在开头，将 JS 放在末尾。

最好将 JavaScript 放在网页底部，将 CSS 放在<head>部分的顶部。这允许浏览器先加载 CSS，然后再加载页面的其余部分。这样我们就可以确保用户在加载时可以看到网站的内容。如果反过来，用户将看到一个空白页面，直到 JavaScript 完成加载。这意味着在 JavaScript 下载完成之前，网站的视觉元素不会出现。 3. 针对移动设备优化您的模板 2020 年第三季度，移动设备产生了全球网络流量的 50.81%。评估网站在移动设备上的可用性主要有两种方法： 3.1移动可用性报告。查看 Google Search Console 移动可用性报告。此报告将显示内容不适合屏幕或文本太小的问题，并显示受每个问题影响的 URL 列表。 3.2. 谷歌移动友好测试。使用 Google 的移动设备友好性测试来测试您的关键页面模板。这是检查各个页面的好方法。当链接太近、文本太小而无法阅读或未针对移动设备调整视口时，网站通常会无法通过移动设备友好型测试。 4.优化网站安全除了加载时间和移动可用性之外，网站安全性在决定页面体验方面也发挥着重要作用。谷歌非常关注安全性并从搜索结果中删除潜在有害的网站。主要的安全问题来自包含恶意或欺骗性内容的网站。这可能是恶意软件、间谍软件、社会工程诈骗、网络钓鱼或虚假信息。当用户尝试访问存在安全问题的页面时，搜索结果中会显示带有警告标签的页面。检查网站是否存在可能使用户面临风险的问题的最佳方法之一是使用Google Search Console 安全问题报告。还提供了如何解决该问题的说明。 5.优化字体字体是大文件，需要一些时间才能加载。加载字体的延迟会导致文本显示的延迟。因此，LCP 度量增加。要解决此问题，您可以执行以下操作： 5.1. 防止字体加载期间文本不可见。您可以使用字体显示。它是一个 CSS 交换属性，通知浏览器使用此字体的文本应立即使用系统字体显示。

		自動登錄	找回密碼
密碼			立即註冊