WordPress Gutenberg 提高了网站性能

WordPress 缓存插件发布商 WP Rocket 使用 Gutenberg 重新设计了他们的网站并提高了网站性能。 他们发现 Gutenberg 编写的代码出奇地轻巧,但也表示有一些需要注意的地方。

PageSpeed Insights 得分截图

在古腾堡编辑更容易

Gutenberg 的目标一直是创建一个编辑界面,使所有技能水平的出版商都能轻松发布网站。

创建一个直观的界面可以降低进入的门槛,让几乎任何人都可以轻松地创建一个网络存在,最重要的是,它可以帮助内容创建者专注于创建内容,而不是管理和担心代码。

根据 官方 WordPress 古腾堡页面

“无需成为专家开发人员,您也可以构建自己的自定义帖子和页面。”

WordPress 开发者页面 勾勒出古腾堡的愿景 像这样:

“Gutenberg 将编辑器重塑为一种工具,用户只需点击几下即可写作丰富的帖子并构建漂亮的布局——无需任何技术知识。 WordPress 将成为一个强大而灵活的内容工具,所有人都可以使用。”

编辑器使用一种称为“块”的概念,可以将其排列形成自定义布局。

这种专注于让任何人都可以轻松专注于内容的做法解释了为什么 WP Rocket 的营销团队会立即对新界面表示赞赏。

根据 WP Rocket 的说法:

“对于营销团队来说,从经典编辑器切换到古腾堡编辑器毫不费力。 更重要的是,我们开始享受一些让我们的工作更轻松、更快捷的功能。”

截图 PageSpeed Insight 得分

Page Speed Performance 得分为 98 分(满分 100 分)的屏幕截图

使用 Gutenberg 构建改进的性能

WP Rocket 报告说,与 Gutenberg 建立一个网站可以使网站更快、性能更好。

WP Rocket 使用 Gutenberg 构建的页面表现异常有两个原因:

  1. 更轻的 HTML (内置于古腾堡)
  2. 按需 CSS 和 JavaScript (不是古腾堡的特色)

更轻的 HTML 代码是 Gutenberg 的开箱即用功能。

不利的一面是,加载不必要的 CSS 也是 Gutenberg 的内置功能。 正因为如此,WP Rocket 创建了一个解决方法来自动化按需 CSS。

Gutenberg 旨在加载每个样式块所需的所有 CSS。 因此,第一个挑战是创建一种仅在需要时自动加载 JavaScript 和 CSS 的方法。

古腾堡出人意料地强大

坦率地说,我有点惊讶 WP Rocket 对古腾堡全押。 我感到惊讶的原因是因为古腾堡还没有完全完成。

完整的网站编辑体验要到 2021 年 6 月才能推出。然而 WP Rocket 发现用 Gutenberg 重新设计他们的整个网站是正确的选择。

我请 WP Rocket Team 分享他们的经验。

WP Rocket 专访

古腾堡 WP 火箭

开发团队是否面临挑战并且必须想出解决方法来应对这些挑战?

“是的!

首先,我们对 Gutenberg 自定义块的开发经验为零,而且我们读到的关于该主题的所有内容一开始都非常令人沮丧。

不用说,学习曲线非常陡峭。

具体来说:作为一个缓存插件,我们的主要开发问题之一是对性能的需求。 在这方面,Gutenberg 存在一个缺点:默认样式表包含所有本机块的 CSS。

这是一个问题,因为所有页面上都加载了未使用的 CSS(这不遵循“删除未使用的 CSS 资源”PageSpeed Insights 建议)。

在我们的案例中,我们弃用了几个未使用的块。 我们创建了一个自定义排队系统,仅在需要时才加载 CSS 和 JS 块。 我们只花了几分钟就开发了这个系统。

我们还决定不使用 Gutenberg CSS 文件。 相反,我们将我们实际需要的 CSS “迁移”到我们自己的样式表中,到一个专用的 CSS 文件中。 那成功了。”

Gutenberg 是否觉得它已经完成并准备好用于生产现场?

“好吧,我们设法用 Gutenberg 构建了我们的网站(禁止页眉和页脚)。 我认为这说明了古腾堡的发展方式及其准备情况。

随着 计划于 2021 年 6 月进行全站编辑,我相信人们将有能力使用古腾堡块编辑网站的所有元素。”

使用它有学习曲线吗?

“绝对地。 而且我认为对于那些习惯于视觉页面构建器的人来说尤其如此。

也就是说,我们对古腾堡的视觉效果感到惊喜。 后端可以很好地预览前端,这意味着即使对于像我这样的非技术人员来说,也可以轻松地对页面进行一些更改或从头开始构建新页面。”

有了现在从您的经验中获得的知识,您对那些考虑转向古腾堡的人有什么建议?

“去吧!

我们的两个主要收获如下:

  1. 开始考虑古腾堡的新网页设计。 这将为您节省大量时间,并且您最终会变得更有效率。 (这不是我们做的事情,因为我们在没有决定编辑器的情况下开始设计……)
  2. 根据您的业务仔细考虑您需要多少块。 想想它们是否都必须是定制的。 使用古腾堡时,块会产生真正的不同。 (我们提出了 20 多个自定义块,这与平均水平相差甚远。您可能只需要几个)。

在切换到古腾堡之前要考虑的首要考虑因素是什么?

“古腾堡不一定适合所有人。

如果您对免费主题感到满意,那就太好了。 您可以创建您想要的所有块并享受古腾堡。

但是,如果您想要特定的设计和特定的块,则需要开发人员来帮助您进行布局。 它可能不会像我们一样花费你那么多时间。

尽管如此,它仍会使您的新网站的开发时间比平时更长且成本更高,因为您需要一些帮助。 您还应该意识到前方陡峭的学习曲线。

也就是说,古腾堡确实是 WordPress 的核心,并且每天都有贡献者努力改进它。

选择另一个选项时,您会冒着在 WordPress 进行更改时不会更新它的风险。 此外,使用 Gutenberg 构建的 WordPress 网站总是更容易找到帮助您的人。

我们相信 Gutenberg 是 WordPress 的未来,而且它是免费和开源的。”

什么样的出版商应该三思而后行转向古腾堡?

“这是我们在博客文章中提到的:

如果您是自由职业者或经营一家小公司,您仍然可以使用不需要任何开发人员帮助或额外费用的页面构建器。

如果您经营一家更大的公司并需要特定的发展——那么是的,古腾堡是您的正确解决方案,毫不犹豫。”

三种可能的不便

据我了解,至少有三个不便之处。

  1. 学习曲线
    但这是学习任何新事物的一部分。 尽管如此,因为 Gutenberg 可能是 WP 的未来,所以创建一个桌面实例来玩玩可能不是一件坏事。
  2. 古腾堡直到 2021 年 6 月才完成
    我相信 Gutenberg 的导航菜单和小部件区域仍在建设中。 完整站点编辑计划在 2021 年 6 月之前发布。
  3. 加载所有 CSS 和 JS 文件
    显然,Gutenberg 会在每个页面上加载所有样式和 JS 代码,包括未使用的块的代码。 所以这可能会导致不必要的膨胀。

WordPress 古腾堡是未来

当 WP Rocket 说古腾堡是未来时,他们提出了一个有效的观点。 目标是让出版商少关注代码,多关注内容。 古腾堡全站编辑目前计划于 2021 年 6 月首次亮相。

多亏了 WP Rocket 的团队,我们现在知道 Gutenberg 确实有一个很有前途的编辑用户界面,并且可能有助于提高网站性能。

从现在到 2021 年 6 月,创建虚拟桌面实例并熟悉使用 Gutenberg 创建和发布站点可能很有用,以便至少在需要时准备好在第一天进入它。

引文

阅读关于使用 Gutenberg 重新设计网站的 WP Rocket 文章:

为什么 WP Rocket 选择 Gutenberg 以及性能如何提高

给TA打赏
共{{data.count}}人
人已打赏

将 PPC 添加为收入来源的数字代理商的 6 个定价技巧

2021-12-16 4:40:57

Facebook 广告的 5 个很棒的新功能

2021-11-24 14:07:59

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索