WordPress divi主题

Divi 的关键 CSS 功能如何提高网站速度

by | Apr 27, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

不用说,在使用您选择的任何工具构建网站时,速度是最重要的事情之一。 在优雅的主题中,我们优先考虑使速度使我们与所有其他 WordPress 主题和/或构建器区分开来。 在我们最近的性能更新中,我们介绍了许多可帮助您提高页面速度得分的改进。 其中一项改进是使用 关键的 CSS. 在这篇文章中,我们将深入探讨这个主题,并向您展示这种改进将如何帮助您达到最高的页面速度结果。 这种快速的结果将很快导致更好的搜索引擎排名和整体用户体验。

google广告开户

让我们深入了解它!

了解关键 CSS

当您访问一个网站时,您希望尽快看到一个页面。 这是几秒钟的问题,最好是几毫秒。 用于尽快显示内容的流行技巧称为关键 CSS。 关键 CSS 不会一次性加载整个页面的样式表。 相反,它非常有选择性。 它首先显示需要显示的内容,并在初始交互后加载其余内容。

这个怎么运作

通常,您在页面上看到的第一件事是标题和英雄。 根据设计,我们很可能最多讨论三个部分。 如果您将用于这些部分的 CSS 与用于整个页面的 CSS 进行比较,您会发现它只是其中的一小部分。 那么,如果访问者没有立即看到页面的最大部分,为什么要一次加载所有 CSS? 关键 CSS 优先考虑第一次交互所需的所有 CSS. 它允许您通过加载影响用户体验的 CSS “首当其冲” 内容。 这意味着只加载与立即显示在屏幕上的内容相关的 CSS,对于屏幕,我们指的是在视口宽度和高度之间创建的比率。

如果您的首屏内容由标题、段落、按钮和图像组成,则只有与这些元素相关的 CSS 才会在您的访问者加载页面时被加载。

divi 批判性 css

当然,其余的 CSS 也需要加载,但不是在第一次交互时加载,这就是所谓的非关键 CSS。 非关键 CSS 没有理由影响访问者和搜索引擎进入网站的方式. 在访问者开始滚动之前它是不可见的,因此延迟它只会帮助您提高页面速度并提高排名。

divi 批判性 css

Divi 中的关键 CSS

Divi 中关键的 CSS 性能的最好的事情之一是它的自动检测。 通常,当开发人员想要为他们的网站使用关键的 CSS 方法时,他们会手动选择 CSS,或者使用工具来帮助他们实现目标。 使用 Divi,您无需付出任何努力即可实现. 这使您可以专注于最重要的事情; 设计一个达到其目标的直观网站。

这极大地使 Divi 与竞争对手区分开来。 您让 Divi 控制您的页面速度,Divi 并没有让您失望。 我们相信这是您的网站应得的产品。 如果您想更进一步,您也可以优化首屏内容。 您可以在此处找到一些实用技巧。

WordPress divi主题

视觉示例

添加新页面

让我们着眼于一个具体的例子,以帮助您更好地理解这个概念。 将新页面添加到您的 WordPress 网站并切换到 Visual Builder。

divi 批判性 css

上传您选择的 Divi 预制布局

我们选择 Creative CV Landing 页面布局来说明关键的 CSS。 继续并在您创建的页面上使用此布局。

divi 批判性 css

关键 CSS:首屏

一旦布局被添加到新页面,我们看到的都是关键 CSS 的一部分。 这是需要立即加载的 CSS,因此我们可以立即与网站及其样式进行交互。

divi 批判性 css

在实际层面上,这意味着这两个部分的 CSS 以及它们的子元素的 CSS 会在您进入页面后立即加载。 当然,标题也会被加载。

非关键 CSS:首屏

一旦我们通过页面的第二部分,我们就进入了“非关键 CSS”区域。 页面上所有剩余的 CSS 将延迟呈现。 当访问者浏览您的前两个部分时,其他部分所需的 CSS 将就位。

divi 批判性 css

Divi 中的关键 CSS——让您设计智能页面

这只是性能更新带来的改进的一部分,但它是非常重要的一项。 一旦你意识到关键的 CSS,它也会改变你设计页面的方式。 关键 CSS 允许您在设计时考虑到用户体验。 它可以帮助您在设计和优化之间建立平衡感。 在这篇关于如何构建最快的 Divi 页面的帖子中,您可以了解有关改进首屏内容的方法的更多信息。 享受!

fiverr建站WordPress程序员

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题