深入比較古騰堡Gutenberg編輯器與頁面構(gòu)建器 – 哪個更好更快？

您可以使用 WordPress 構(gòu)建網(wǎng)站，無需太多編碼技能，甚至無需接觸任何代碼行。原因在于許多出色的工具可以幫助您輕松完成。毫無疑問，最受歡迎的工具是古騰堡（ Gutenberg ）和頁面構(gòu)建器/頁面生成器。目前，它們各有利弊，因此很難決定哪一個是最好的。

但是，仍然可以對Gutenberg 和頁面構(gòu)建器進(jìn)行一般的外觀和誠實(shí)的審查、比較。因此，我們將按照以下標(biāo)準(zhǔn)對它們進(jìn)行比較、深入分析：

• 突出特點(diǎn)
• 便于使用
• 反應(yīng)靈敏
• 實(shí)際表現(xiàn)

至于 Gutenberg 與頁面構(gòu)建器的性能比較，我們將比較 Gutenberg 和最近知名的頁面構(gòu)建器 – Oxygen。

該性能測試是根據(jù)一些標(biāo)準(zhǔn)客觀完成的，我將在測試方法部分為您提供更多詳細(xì)信息。無論如何，我必須承認(rèn)我不是網(wǎng)站速度測試的專家，因此可能很難避免意外錯誤。因此，請留下您的意見，以幫助這篇文章更全面。

此外，在開始這個比較之前，要說明的是，我們不完全支持古騰堡或本文中的任何頁面構(gòu)建器。在將這些 WordPress 工具用于不同的項(xiàng)目后，我將寫下我的經(jīng)驗(yàn)。

廢話不多說，讓我們開始吧！

古騰堡簡介

眾所周知，2018 年 6 月 12 日，WordPress 5.0 發(fā)布了一個重大變化：新編輯器名為 Gutenberg。

Gutenberg 最初是作為基于塊的編輯器推出的 – 所以我們稱之為塊編輯器。您可以通過拖放來移動塊，將它們放在列中以更改布局，將塊分組，……每個塊也有自己的設(shè)置，以便您可以輕松自定義。Gutenberg 還集成了許多預(yù)先構(gòu)建的塊和塊模式，因此用戶可以立即使用它們并更改其內(nèi)容。

嗯，所以可以看出 Gutenberg 可以幫助您以比以前的 TinyMCE 更直觀的方式創(chuàng)建內(nèi)容。

隨著時間的推移，古騰堡得到了發(fā)展和升級。它現(xiàn)在不僅僅是一個編輯器。它提供了很多高級塊，如按鈕、表格、嵌入等，以及構(gòu)建整個網(wǎng)站的元素，如站點(diǎn)徽標(biāo)、導(dǎo)航等，正如我在前面介紹的那樣，在完整站點(diǎn)編輯(FSE) 發(fā)布時就出現(xiàn)了文章區(qū)塊。多虧了他們，Gutenberg 已成為構(gòu)建整個網(wǎng)站的工具，而且顯然無需編碼。

現(xiàn)在，讓我們看看 Gutenberg 和頁面構(gòu)建器之間的區(qū)別是什么。

突出特點(diǎn)

首先，我在下表中總結(jié)了古騰堡和頁面構(gòu)建器的高亮功能的區(qū)別：

通過這張表，我們可以看到頁面構(gòu)建器的優(yōu)勢在于它們能夠創(chuàng)建復(fù)雜的布局和強(qiáng)大的可定制性。

雖然頁面構(gòu)建器超越了文章或頁面編輯器，可以幫助用戶編輯整個網(wǎng)站，但古騰堡現(xiàn)在仍在測試完整站點(diǎn)編輯。但是，Gutenberg 發(fā)展很快，誰知道它是否會在很短的時間內(nèi)趕上頁面構(gòu)建器，甚至超過它們。

易用性

古騰堡

Gutenberg 的界面非常清晰簡單，因此非常易于使用。

處理塊也很容易和快速。例如，只需單擊 (+) 號即可添加新塊。

右側(cè)用于自定義塊的設(shè)置選項(xiàng)卡為您提供了每種塊類型的許多配置。但是，它們主要是基本設(shè)置，清晰且易于處理。

有帶有詳細(xì)說明和直觀示例的工具提示，向用戶展示如何使用塊類型。

頁面構(gòu)建器

當(dāng)然，每個頁面構(gòu)建器都有不同的界面，但它們的使用方式非常相似。所以我會以O(shè)xygen為例。

您有一個用于實(shí)時預(yù)覽的區(qū)域，以了解您的網(wǎng)站究竟是什么樣子。

Oxygen 在左側(cè)有一個元素列表（其他頁面構(gòu)建器也有該列表）。要將這些元素添加到您的站點(diǎn)，只需雙擊它們。這很簡單。

添加元素時，左側(cè)邊欄將自動轉(zhuǎn)到具有此元素的許多選項(xiàng)的設(shè)置區(qū)域。

對于大多數(shù)頁面構(gòu)建器，元素都有各種設(shè)置。一般來說，它們比古騰堡更復(fù)雜。但這也意味著您具有更高的可定制性。

如果您想查看網(wǎng)站上的順序或排列元素，只需轉(zhuǎn)到Structure。您可以通過將元素拖放到此處而不是在預(yù)覽區(qū)域中來復(fù)制、刪除或移動元素。

然而，這僅適用于 Oxygen 。其他頁面構(gòu)建器可能不同。某些工具可以讓您直接在預(yù)覽區(qū)域上拖放元素。總的來說，我發(fā)現(xiàn)這個拖放功能仍然不是很流暢，甚至有時很難將元素拖到想要的地方。

總結(jié)：

您可以看到每個工具都有自己的界面，每個頁面構(gòu)建器也是如此。因此，很明顯，每種工具都有不同的使用和交互方式。此外，難易取決于用戶的習(xí)慣和愛好。在我看來，我認(rèn)為 Gutenberg 比頁面構(gòu)建器的界面更簡單、更容易使用并且更容易習(xí)慣。

自適應(yīng)

越來越多的人使用智能手機(jī)和平板電腦等移動設(shè)備瀏覽網(wǎng)頁。據(jù)Statista 統(tǒng)計(jì)，有 42.8 億人使用移動設(shè)備上網(wǎng)，占互聯(lián)網(wǎng)用戶總數(shù)的 90%。因此，響應(yīng)能力現(xiàn)在是網(wǎng)站帶來更好用戶體驗(yàn)的強(qiáng)制性要求。在這方面，頁面構(gòu)建器似乎比 Gutenberg 做得更好。

頁面構(gòu)建器通常為用戶提供非常強(qiáng)大的功能，可以在不同設(shè)備上預(yù)覽和自定義網(wǎng)站的顯示。即便如此，您還可以為每個設(shè)備設(shè)置字體大小、填充、邊距、動畫……。

對于古騰堡，手機(jī)和平板電腦上的實(shí)時預(yù)覽尚未可用。因此，我認(rèn)為很難確保您的布局在其他設(shè)備上看起來不錯。

性能

加載速度測試

我將使用兩個網(wǎng)站來測試和比較它們的加載速度。一個是用 Gutenberg（使用TT1 Blocks，一個基于塊的主題）構(gòu)建的，另一個是用Oxygen（最新版本）構(gòu)建的。

我選擇 Oxygen 是因?yàn)榇隧撁鏄?gòu)建器完全停用了主題，因此該站點(diǎn)將從頭開始構(gòu)建。這就是為什么 Oxygen 被認(rèn)為有助于顯著提高網(wǎng)站加載速度的原因。選擇 Oxygen 將有助于這篇文章更加客觀。

此外，我將遵循以下標(biāo)準(zhǔn)：

• 為兩個網(wǎng)站使用相同的共享主機(jī)；
• 兩個網(wǎng)站使用相同的結(jié)構(gòu)和內(nèi)容；
• 禁用兩個網(wǎng)站的緩存；
• 使用最新的 WooCommerce 版本為兩個網(wǎng)站構(gòu)建產(chǎn)品頁面；
• 使用Google PageSpeed Insights和GTMetrix測試工具，測試時我在同一個位置；
• 使用索引：速度得分、總頁面大小 (kB)、完全加載次數(shù)和必要請求數(shù)、JS、CSS 文件和加載的字體。

網(wǎng)站的總體表現(xiàn)

在對網(wǎng)站的總體性能進(jìn)行測試后，我得到了以下結(jié)果：

著陸頁的表現(xiàn)

轉(zhuǎn)到每個網(wǎng)站上的著陸頁，其中有許多圖像和復(fù)雜的布局，以下是性能結(jié)果：

博客存檔頁面的性能

我還測試了兩個網(wǎng)站查詢服務(wù)器以在博客頁面上顯示帖子列表時的性能。在此處查看結(jié)果：

商店存檔頁面的性能

我使用 WooCommerce 為兩個站點(diǎn)創(chuàng)建商店頁面。

下面是測試兩個店鋪頁面性能后的結(jié)果：

產(chǎn)品頁面的性能

在最后一部分中，我將檢查使用 WooCommerce 創(chuàng)建的兩個產(chǎn)品頁面的性能。這些頁面通常具有更復(fù)雜的布局，并且需要更多的 CSS 和 JS 代碼才能為客戶提供所需的功能。

查看此表中的比較：

結(jié)論

通過上面的性能對比表，你可以看到在大多數(shù)情況下，用古騰堡建的網(wǎng)站往往比用氧氣建的網(wǎng)站有更好的結(jié)果。與 Oxygen 相比，使用 Gutenberg 構(gòu)建的網(wǎng)站加載最少的 JS、CSS 文件、字體以及使用更少的資源和加載速度。

因此，通過測試，Gutenberg 表明它在速度和性能方面可以超越 Oxygen。

如果我們總體上看一下，Gutenberg 與 Full Site Editing 一起變得更加強(qiáng)大，并為用戶提供了更多功能以輕松構(gòu)建網(wǎng)站。與此同時，Gutenberg 仍然為每個用??戶保留了簡單易用的方法以及網(wǎng)站的良好性能。這些是古騰堡的巨大優(yōu)勢。

如果您想保持一切簡單，優(yōu)化網(wǎng)站性能，又不想涉及太多第三方插件，那么最好的選擇就是Gutenberg。我們的團(tuán)隊(duì)還使用 Gutenberg 構(gòu)建了titanweb.vn。這個網(wǎng)站的加載速度非常快。此外，使用古騰堡也不難，所以我們覺得還可以。

但是，我認(rèn)為這些功能對于古騰堡來說還不夠。目前，它仍然缺乏很多東西來適應(yīng)網(wǎng)站開發(fā)人員的所有高級需求。另一方面，頁面構(gòu)建器非常擅長這些事情。所以如果你想構(gòu)建一個布局復(fù)雜、自定義程度更高的網(wǎng)站，我們?nèi)匀粦?yīng)該考慮使用頁面構(gòu)建器，至少目前是這樣。

我們還需要等待未來整站編輯器的高級功能。或許，在 整站編輯器 正式版中，古騰堡會在各個方面完全超越頁面構(gòu)建器。

最后總結(jié)

有了以上信息，您是否有自己的選擇來構(gòu)建您的網(wǎng)站？古騰堡或任何其他頁面構(gòu)建器？

畢竟，您絕對應(yīng)該根據(jù)您網(wǎng)站的每個功能和要求仔細(xì)考慮。并請注意，在撰寫本文時，本文中的信息是真實(shí)的。當(dāng)頁面構(gòu)建器或古騰堡中的任何人使用新功能升級新版本時，每個工具的特權(quán)可能與我們列出的不同。

非常感謝您花時間閱讀這篇文章。如果您喜歡這篇文章或?qū)@篇文章有任何評論，請告訴我們。

注：本文出自 metabox.io，由 WordPress大學(xué) 翻譯整理。

倡萌注：雖然古騰堡編輯器一直為國人嘲弄，但是不得不承認(rèn)，它的確在慢慢成長，倡萌也使用古騰堡為少數(shù)幾個客戶做過網(wǎng)站開發(fā)，結(jié)合一些第三方的增強(qiáng)插件，還是可以滿足一般的網(wǎng)站需求的，而且性能上的確要優(yōu)于采用其他可視化編輯器制作的網(wǎng)站。正如本文所說的，做復(fù)雜一些的網(wǎng)站，目前還不推薦采用古騰堡，畢竟它的功能還是比較弱。

推薦閱讀：

• 3個不錯的WordPress可視化頁面生成器比較
• WordPress 古騰堡區(qū)塊設(shè)計(jì)選項(xiàng)增強(qiáng)插件 EditorPlus
• WordPress 古騰堡編輯器的可重用區(qū)塊終極指南
• WordPress 5.4的古騰堡編輯器鍵盤快捷鍵
• WordPress使用PDF Block在古騰堡編輯器中插入并顯示PDF文件
• WordPress自定義古騰堡編輯器的顏色調(diào)色板
• WordPress自定義古騰堡編輯器的漸變色
• 如何禁用WordPress中古騰堡編輯器的全屏模式
• WordPress古騰堡編輯器相冊/畫廊增強(qiáng)插件WP Gallery Enhancer
• Code Syntax Block：為古騰堡的代碼區(qū)塊添加高亮顯示
• WordPress 禁用Gutenberg古騰堡編輯器