Найшвидший сайт: Gutenberg VS Page Builders

У цій статті ми пропонуємо серію тестів, які порівнюють редактор WordPress Gutenberg з конструкторами сторінок. Відібрано лідерів ринку у світі WordPress. Ми порівняємо продуктивність WordPress Gutenberg Editor з популярними конструкторами сторінок Elementor та Divi.

Тут продемонстровано діаграми порівняння Гутенберга та інших конструкторів сторінок

Тест простої сторінки

Цей перший тест виконується на стандартній сторінці зразка, дефолтна в новій установці WordPress. Було активовано конструктора та зібрано сторінку. Просто, щоб переконатися, що ресурси компонувальника сторінок завантажені. І ось результат.

Як бачите, тут переможцем став Гутенберг, який отримав всього вісім запитів і всього 24,9 КБ розміру сторінки. І Elementor завантажує багато ресурсів, але, схоже, вони добре оптимізували ресурси. Тема Divi має тут максимальний розмір сторінки.

Зверніть увагу, що тема також завантажуватиме тут ресурси, і не всі запити будуть викликатись конструктором сторінок (крім теми Divi, яка є темою із вбудованим Divi Builder).

Тест цільової сторінки

Це тест цільової сторінки, який включає більше блоків / елементів компонувальника, включаючи зображення і т. д. Все ж таки маленька сторінка не є великою цільовою сторінкою, але ви можете побачити різницю з простою.

Цікаво, що Гутенберг не викликає додаткових запитів Javascript, CSS або Font в цьому тесті. Якщо ви порівняєте результат із простим тестом сторінки вище, ви помітите, що Elementor та Divi поміщають у чергу додаткові файли CSS та JS. Це може бути через блоки, які використовуються в цих конструкторах сторінок, однак це все ще мінімальна цільова сторінка без будь-яких незвичайних речей, таких як слайд-шоу, форми або будь-які інтерактивні елементи.

Знову ж таки, Gutenberg – переможець, оскільки він завантажує найменшу кількість ресурсів та мінімальний розмір сторінки. Порівняно з попереднім тестом кількість запитів на ресурси Гутенберга (JS, CSS, Fonts) не збільшилася. І Elementor, і Divi викликають додаткові ресурси. Більше того, Gutenberg здається набагато продуктивнішим, ніж конструктор сторінок Elementor.

Тест сторінки магазину WooCommerce

Тепер порівняємо продуктивність Gutenberg з конструкторами сторінок у магазині WooCommerce. Для цього тесту ми включили WooCommerce плагін і створили магазин з однаковими продуктами на всіх сайтах. Ось результати.

Ще один сюрприз: тут Гутенберг та Elementor дуже близькі конкуренти. Майже така сама статистика. Це пов’язано з тим, що на цій сторінці не використовуються елементи конструктора сторінок, а використовується шорткод WooCommerce за промовчанням. Таким чином, ми не використовуємо певні блоки WooCommerce/Product на цій сторінці (ми зробимо це у наступному тесті). Тим не менш, завдяки такій увазі Гутенберг також зберігає виграшну позицію в цьому тесті.

Тест сторінки блоку WooCommerce

Тепер давайте спробуємо використовувати блоки WooCommerce від цих розробників для створення сторінки користувацьких продуктів. Для Gutenberg ми використовували стандартні блоки Gutenberg WooCommerce, які поставляються із самим плагіном WooCommerce. Працюючи з Elementor та Divi, використовували відповідні блоки продуктів в обох конструкторах сторінок.

Тепер подивіться на різницю, порівнявши його із попереднім тестом сторінки WooCommerce, який насправді був сторінкою магазину WooCommerce за замовчуванням. Це те, що роблять більшість користувачів. Вони створюють сторінки магазину, що настроюються, використовуючи різні блоки WooCommerce, які надає конструктор сторінок. І просто згадаємо, що це ще проста сторінка магазину, на якій лише 1 магазин/блок продуктів з останніми продуктами. Жодних модних блоків слайдерів продуктів або будь-яких незвичайних блоків WooCommerce не використовується.

Тож Гутенберг тут теж переможець. Elementor & Divi Theme має свої плюси та мінуси, наприклад, ресурси Elementor виглядають більш оптимізованими за замовчуванням, оскільки вони менше впливають на швидкість завантаження сторінки та розмір сторінки. Але Elementor також має максимальну кількість запитів.

Методологія тестування

Щоб тести були чесними, ми застосували деякі справедливі методики щодо таких порівнянь. Всі тестові сайти використовують одну й ту саму тему (крім теми Divi) та додаткові плагіни (крім тієї, яку ми тестуємо). Кожен веб-сайт розміщений на одному хмарному хості з одним і тим же центром обробки даних і будь-якими конфігураціями. Усі кешування відключено на всіх сайтах, і на цих сайтах немає оптимізації. Всі мають нову установку WordPress з однаковим контентом (повідомлення, продукти, зображення тощо. буд.).

Ми використовували GTMetrix для перевірки швидкості та переконалися, що встановили однакові налаштування (місце розташування, браузер тощо) у всіх тестах.

Тому ми можемо запевнити вас, що всі тести були чесними і проводилися з використанням тих самих конфігурацій/налаштувань, наскільки це можливо.

Остаточний вердикт – за результатами тестування

Як бачите, Gutenberg перевершує Elementor і Divi майже у всіх тестах продуктивності, які ми провели для цієї статті. Гутенберг завантажує мінімум ресурсів та вимагає менше ресурсів у порівнянні з іншими конструкторами сторінок. Що стосується продуктивності зовнішнього інтерфейсу, Гутенберг – переможець, хоча він все ще новачок і стає краще з кожним днем. Ви можете очікувати набагато кращі результати в майбутньому. Ми – одними з першими на ринку ввели його в комерційну роботу та пишаємося швидкістю роботи проектів, реалізованих на ньому!