Услуги по созданию сайтов

Выбор редактора сайта на WordPress в преддверии Core Web Vitals

Материал был обновлен: 18 февраля, 2022

В 2019 году я сравнила редакторы WordPress Elementor и WPBakery по скорости загрузки страницы и чистоте кода по валидатору. Так же я потом провела отдельное тестирование редактора SiteOrigin по скорости и чистоте кода и сравнила с ранее полученными результатами. С тех пор требования к сайтам изменились, так же мы все ждем обещанного апдейта Google – Core Web Vitals, который должен изменить поисковое ранжирование как раз по параметрам скорости и “стабильности” отображения сайта. При изготовлении коммерческого сайта опять встает вопрос: с помощью какого редактора его собирать?

Для блогов пока лучшие показатели дает технология AMP со “штатным” редактором Вордпресс, но для коммерческих сайтов на данный момент эта технология имеет ряд ограничений.

Выбор редактора для сайта

Основное условие для тестирования было: используем бесплатную базовую версию плагина, разворачиваем на чистом сайте. Для тестирования используется поддомен одного из сайтов, сервер на хостинге один.

По запросу “Builder” в Плагинах выводятся популярные бесплатные плагины, с указанием количества активных установок и датами обновлений.

Видим много мусора и 4 редактора – Elementor, Beaver, SiteOrigin, Visual Composer. Так как мне редактор нужен для коммерческого сайта, то важно наличие дополнений к редактору, поэтому Beaver Builder покидает наш список тестирования. Visual Composer – покидает наш список тоже по причине малого числа загрузок. Если бы в самом начале я не ввела условие – бесплатно, то в списке должен был появиться WPBakery. Итак, на тестирование остается 2 плагина – Elementor и SiteOrigin. Плагины очень разные, но имеющие коммерческое применение, например: при покупке платных тем.

В нашем эксперименте используется бесплатная тема – Astra. Мой выбор остановлен на ней по ряду причин и 2 главные для данного эксперимента – скорость и чистота кода.

Тестирование Elementor под Core Web Vitals.

При штатной распаковке WordPress есть страница – Sample Page с одинаковым текстом ее и будем использовать как наполнение страницы. К ней добавим тяжелую одинаковую фотографию без оптимизации:

  • Тип файла: image/jpeg
  • Размер файла: 804 КБ
  • Размеры: 2560 на 1440 пикселей

Устанавливаем штатный Elementor. Открываем страницу в нем, разбиваем готовый блок на 2 столбца (1-текст, 2-фото). Сохраняем. Смотрим.

 

Открываем DevTools (правая клавиша мышки “Посмотреть код”), переходим в Lighthouse запускаем Представление для Мобильных.

Ждем окончания тестирования и получаем результаты.

Результат – 82.

First Contentful Paint (FCP) – время с начала загрузки до полной загрузки страницы, подробнее о FCP тут. Находится в желтой зоне что плохо, но не критично. Но нам надо не забывать что при создании страницы у нас не будет минимума текста и картинка тоже будет не одна.

Largest Contentful Paint (LCP) – время отрисовки самого большого элемента на странице, подробнее о LCP тут. Тоже находится в желтой зоне, радует что не в красной так картинка реально большая и тяжелая.

SiteOrigin проверяем параметры в Lighthouse

Делаем чистый Вордпресс на поддомене, ставим SiteOrigin. И вот тут у нас есть 2 момента отличающиеся от установки Elementor:

  1. Для того чтобы отредактировать существующую страницу в SiteOrigin без Classic Editor, пришлось повозится с настройками плагина.
  2. Штатный набор виджетов ставится отдельно.

Это конечно большая недоработка, но не самая страшная.

Аналогично первому тесту добавляем туже фотографию и разбиваем на 2 столбца.

Не вооруженному глазу почти не видны отличия в верстке, но они немного есть. Мое целью не стояла сделать 1 в 1 поэтому оставляем так. Проверяем через DevTools->Lighthouse.

Результат – 100! Все параметры в зеленой зоне.

Какой редактор ставить для лучших показателей Core Web Vitals

Чистый эксперимент говорит об однозначном выборе SiteOrigin. Но нам нужно не забывать что, при создании сайта есть и другие параметры влияющие на выбор редактора:

  1. Дизайн сайта – если нужно много графических элементов и “натянуть” дизайн на верстку, то проще использовать Elementor.
  2. Заказчик хочет “потом все сам править” – не специалисту проще освоить Elementor.
  3. Последующее продвижение сайта – SiteOrigin позволяет больше допиливать элементы страницы под задачи.
  4. Другие факторы.

Выбор за вами я просто протестировала данные редакторы Elementor и SiteOrigin по показателям Core Web Vitals через DevTools->Lighthouse.