Сравнение производительности Divi и Avada (2021): что быстрее?

Пытаетесь выбрать между Divi и Avada для создания своего сайта WordPress?

Эти две темы являются двумя самыми популярными премиальными темами WordPress за все время: Elegant Themes (разработчик Divi) утверждает, что у них более 806 000 клиентов, а Avada была куплена более 747 000 раз на ThemeForest. Это невероятно впечатляющие цифры и доказательство того, что у каждой темы много счастливых пользователей.

Одним из важнейших факторов успеха обеих тем являются встроенные визуальные конструкторы с функцией перетаскивания. С помощью этих конструкторов вы можете создавать красивые пользовательские сайты WordPress — код не требуется.

Но гибкость дизайна — это не единственное, что следует учитывать в теме WordPress. Вам также необходимо взвесить, насколько быстро эта тема поможет загрузить ваш веб-сайт, поскольку время загрузки веб-сайта играет роль во всем: от пользовательского опыта до SEO, коэффициентов конверсии и многого другого. .

Это еще более верно после обновления Google Page Experience, где Google начал учитывать Core Web Vitals в своем рейтинге.

С этой целью мы решили создать сравнение Divi и Avada, ориентированное на одну конкретную метрику: производительность.

То есть помогают ли Divi или Avada получить более быструю загрузку сайта? Чтобы ответить на этот вопрос, мы провели несколько собственных тестов — продолжайте читать, чтобы увидеть данные и анализ.

Примечание . Первоначально мы опубликовали этот пост и провели эти тесты в июле 2021 года. Однако в августе 2021 года Elegant Themes выпустила обновление с основными обновлениями производительности внешнего интерфейса (Divi 4.10), которое сильно влияет на производительность Divi. По этой причине мы полностью повторно провели эти тесты и собрали все новые данные и выводы в ноябре 2021 года.

Как мы будем тестировать производительность тем Divi и Avada

Прежде чем мы перейдем к данным, давайте поговорим о том, как мы собираемся тестировать производительность Divi и Avada, чтобы вы точно знали, как мы все настраиваем.

Во-первых, мы собираемся протестировать два высокоуровневых сценария:

• Тест №1 – будем тестировать только темы. То есть мы не будем использовать их встроенные визуальные конструкторы. Вместо этого мы просто протестируем «Образец страницы» по умолчанию, созданный с помощью редактора блоков.
• Тест № 2 — мы протестируем простую страницу, созданную с помощью конструктора каждой темы, поскольку визуальные конструкторы являются ключевой частью того, что делает Divi и Avada такими популярными. Мы постараемся использовать сопоставимые модули, чтобы сделать сравнение максимально равным.

Для каждого сценария тестирования высокого уровня мы также протестируем две разные настройки:

• Первая настройка связана только с самими темами и без других оптимизаций производительности.
• Вторая настройка выполняется с установленным и настроенным WP Rocket, чтобы вы могли видеть, как все выглядит, если вы применяете лучшие методы производительности WordPress.

В дополнение к кэшированию страниц и другим основным передовым методам, WP Rocket также предлагает некоторые уникальные функции, которые могут оптимизировать код каждой темы и улучшить показатели Core Web Vitals.

• Удалить неиспользуемый CSS — это позволяет вам удалять ненужный CSS с вашего сайта постранично. Это может быть особенно полезно для сокращения размера страницы таких тем, как Divi и Avada.

• Задержка выполнения JavaScript — это позволяет вам отложить выполнение JavaScript до взаимодействия с пользователем, что значительно ускоряет начальную загрузку. Вы всегда можете вручную исключить определенные скрипты, если вам нужно, чтобы они загружались немедленно .

Наши тестовые сайты размещены на дешевом дроплете DigitalOcean за 5 долларов в месяц, работающем на RunCloud и стеке, полностью состоящем из Nginx. Мы не вносили никаких улучшений производительности, кроме добавления WP Rocket в некоторые тесты, как указано выше.

Чтобы протестировать и измерить данные о производительности WordPress, мы будем использовать WebPageTest для сбора данных о производительности, ориентированных на мобильные устройства:

• Тестовое устройство — iPhone 8. Более современные устройства будут иметь более мощные процессоры для более быстрой обработки JavaScript, что может привести к немного более быстрому времени загрузки. Со старыми/маломощными устройствами все может быть наоборот.
• Скорость соединения — дросселированное соединение LTE (12 Мбит/с, 70 мс RTT). Время загрузки в реальном мире будет быстрее, если посетитель просматривает Wi-Fi, или медленнее, если у пользователя есть что-то вроде 3G-соединения.

Для каждого теста WebPageTest запустит девять отдельных тестов и возьмет медианное значение. Это помогает нам избежать вариабельности отдельных тестов и получить более стабильные результаты.

Вот четыре показателя, на которых мы сосредоточимся:

1. Largest Contentful Paint (LCP) — часть новых показателей Google Core Web Vitals и фактор ранжирования SEO в обновлении Page Experience.
2. Время до первого байта (TTFB) — измеряет, насколько быстро сервер может ответить первым байтом данных после обработки PHP сайта/темы (или доставки из кеша, в случае нашего теста WP Rocket).
3. Размер страницы — при прочих равных, меньший размер страницы всегда лучше.
4. HTTP-запросы — при прочих равных, чем меньше HTTP-запросов, тем лучше.

Наконец, вот номера версий для всего, что мы тестируем:

• Тема Авада – 7.5
• Строитель Авада – 3.5
• Тема Диви — 4.13.1
• WP Ракета – 3.10.3.

Тесты скорости Divi против Avada

Теперь давайте перейдем к нашим практическим тестам производительности Divi и Avada.

Тест №1: Только темы

В этом первом тесте мы тестируем только темы без использования визуальных конструкторов:

• Divi — просто тема Divi, поскольку Divi уже поставляется в Divi Builder.
• Avada — мы также установили плагины Avada Core и Avada Builder, так как они необходимы для ядра. Однако мы не устанавливали никаких дополнительных плагинов.

Фактический контент — это «Образец страницы», который поставляется со свежей установкой WordPress. Он построен с помощью собственного редактора блоков.

Вот данные по темам сами по себе:

Вы можете видеть, что Divi является довольно явным победителем, когда дело доходит до времени наибольшей отрисовки содержимого, поскольку время Avada на 50% выше.

Почему разница?

Что ж, мы собираемся предположить, что большая часть более высокой производительности Divi связана с тем, что размер страницы Avada составляет 544 КБ, а Divi — всего 201 КБ. Имейте в виду, что это для страницы, которая не была создана с помощью визуального конструктора — это всего лишь образец страницы по умолчанию, созданный с помощью редактора блоков.

Теперь посмотрим на данные после добавления WP Rocket:

Вы можете видеть, что с оптимизацией WP Rocket обе темы работают намного быстрее , и разница во времени наибольшей отрисовки контента между Divi и Avada очень мала. Divi по-прежнему немного быстрее, но разница настолько мала, что может быть просто нормальной изменчивостью теста.

Более того, WP Rocket смог значительно уменьшить размер страницы обеих тем благодаря функциям удаления неиспользуемого CSS и задержки выполнения JavaScript. Вы можете видеть, что размер страницы Divi уменьшился более чем наполовину, а размер страницы Avada уменьшился более чем на 200 КБ.

Эти улучшения, наряду с кэшированием и другими настройками, привели к увеличению времени LCP.

Тест №2: со строителями

В этом втором тесте мы использовали визуальный конструктор каждой темы, чтобы создать сопоставимую страницу, используя примерно те же модули. Дизайн очень простой — мы добавили только три элемента, чтобы все было как можно равномернее:

• Текстовый редактор с идентичным содержимым lorem ipsum
• Кнопка
• Встречный круг

Идея здесь в основном состоит в том, чтобы увидеть, какой дополнительный «вес» добавляется к странице, когда вы активируете конструктор каждой темы.

Вот данные только для тем/конструкторов:

В целом, вы можете видеть, что результаты почти такие же, как и выше. Divi заметно меньше с точки зрения размера страницы и, как следствие, имеет более быстрое время наибольшей отрисовки содержимого.

Более того, ни одна из тем не добавляет дополнительного веса странице только потому, что вы активировали визуальный конструктор, а это означает, что на самом деле нет никаких штрафов за использование конструктора вместо собственного редактора ( по крайней мере, для простых страниц ).

Вот данные после добавления WP Rocket:

С WP Rocket вы можете увидеть тот же результат, что и в первом тесте. Теперь время крупнейшей отрисовки содержимого Divi и Avada намного быстрее и схоже по производительности, хотя Divi снова немного быстрее. Помимо значительного сокращения времени наибольшей отрисовки содержимого, WP Rocket также смог добиться такого же уменьшения размера файла, как и в первом тесте.

Заключительные мысли о производительности Divi против Avada

Divi и Avada похожи тем, что оба дают вам возможность создавать собственные веб-сайты, используя их визуальные конструкторы перетаскивания.

Однако, хотя они оба дают вам этот контроль, Divi теперь заметно быстрее с точки зрения производительности «из коробки».

Разница была небольшой, когда мы впервые запустили тесты производительности Divi и Avada. Однако после обновления производительности Divi 4.10 в августе 2021 года Divi теперь намного меньше, чем Avada по умолчанию, что приводит к тому, что стандартное время наибольшей контентной отрисовки Divi составляет примерно две трети от Avada.

Однако, если вы используете WP Rocket с его кэшированием и новыми функциями для удаления неиспользуемого CSS и задержки выполнения JavaScript, вы можете значительно улучшить обе темы.

Хотя Divi все еще был немного быстрее с включенным WP Rocket, разница была гораздо более минимальной, и Avada по-прежнему работала нормально.

Это говорит о том, что, хотя Divi немного быстрее, вы все равно можете создать сайт с быстрой загрузкой с помощью Avada, если вы реализуете передовые методы повышения производительности WordPress с помощью такого инструмента, как WP Rocket.

Конечно, эти две темы — не единственные два варианта. Если вы сосредоточены на скорости и производительности, вы можете проверить наши коллекции самых быстрых бесплатных тем WordPress или самых быстрых тем WooCommerce, если вы создаете магазин электронной коммерции.

Вы можете найти даже более быстрые темы, чем эти две, включая тему Astra, которая хорошо показала себя в нашем сравнении производительности Divi и Astra ( хотя разница не так велика благодаря новым улучшениям производительности Divi ).

У вас все еще есть вопросы о Divi и Avada, когда речь идет о скорости и производительности? Спросите нас в комментариях!