Самый быстрый сайт: 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 почти во всех тестах производительности, которые мы провели для этой статьи. Гутенберг загружает минимум ресурсов и требует меньше ресурсов по сравнению с другими конструкторами страниц. Что касается производительности внешнего интерфейса, Гутенберг – победитель, хотя он все еще новичок и становится лучше с каждым днем. Вы можете ожидать гораздо лучших результатов в будущем. Мы – одними из первыми на рынке ввели его в коммерческую работу и гордимся скоростью работы проектов, реализованных на нем!