Ускорение сайта на темах WordPress Divi и Extra

Ускорение сайта на темах WordPress Divi и Extra

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

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

Тема теперь сама автоматически определяет критические CSS, откладывая некритические стили и сокращая вывод CSS в Divi Builder за счет объединения дублирующихся стилей.

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

Вот какие показатели скорости на тестовом сайте.

Проверка скорости сайта на Divi

Понятно, что на тестовом сайте нет ни плагинов, ни форм, он пустой. Я решил проверить скорость своего сайта на старой версии темы Extra (v. 4.9.11) и после обновления на версию 4.10.1., ничего не делая.

Вот такие результаты я получил, используя сервис Google PageSpeed Insights.

До обновления

 

Скорость сайта с темой Extra v. 4.9.11

После обновления темы

Скорость сайта с темой Extra v. 4.10.1

То есть, я сразу ничего не делая получил приращение на 17%. Конечно, надо еще работать и работать над этим вопросом, но обновление радует.

В этом посте я подробно расскажу обо всех функциях, повышающих производительность, которые добавили в обновление темы и объясню, как Divi обходит конкурентов по скорости.

Из тяжеловесов в легковесы

В этом тестовом сайте, который был создан для новой версии Divi, размер CSS был уменьшен на 94%. Все блокирующие рендеринг активы были полностью устранены, а размер JavaScript в Divi был сокращен вдвое. Это потому, что новая версия Divi устраняет нагромождения и дает свободу в создании быстрых, легких сайтов.

Почти идеальные показатели PageSpeed из коробки

Было легко создать сайт Divi, который получил 100 баллов в Google PageSpeed Desktop, 99 в Google PageSpeed Mobile и 100% в GTmetrix, используя стандартный хост WordPress и CDN без дополнительных плагинов производительности. Это потому, что новые функции Divi по увеличению скорости устраняют запросы, блокирующие рендеринг, удаляют ненужные запросы к ресурсам и позволяют контенту сразу же отображаться.

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

Divi устраняет разрастание кода

Уменьшение кода в теме Extra

Новая версия Divi устраняет раздутость и дает лучшее из двух миров: мощь визуального конструктора страниц  Divi Builder с легкостью темы.

Динамический PHP фреймворк

Новая платформа Dynamic Framework от Divi обрабатывает только логику, необходимую для отображения модулей и функций, используемых на конкретной странице. Все остальное вырезается.

Если страница использует только 5 из более чем 50+ модулей, Divi обрабатывает только функции, необходимые для этих 5 модулей и пропускает остальные. Если эти 5 модулей не используют некоторые из многих функций визуального редактора, таких как, эффекты прокрутки, анимации, липкие параметры, параметры границ и другие, Dynamic Framework также не обрабатывает эти функции. Все очень просто.

Тема Divi теперь намного стройнее, чем когда-либо, потому что удаляется все то, что сейчас не используется на лету.

Динамический CSS

Такая же логика антираздувания применяется и к таблице стилей Divi. Как это реализовано?

Каждый большой CSS-файл разбивается на сотни мелких компонентов. На странице эти компоненты CSS объединяются в уникальную таблицу стилей, содержащую только части, необходимые для стилизации этой конкретной страницы на основе модулей, функций модуля и параметров макета темы. Результатом является резкое уменьшение размера CSS-файла на каждой странице, которая создается с помощью Divi. Нет раздувания, потому что неиспользуемый CSS не загружается. На тестовом сайте размер CSS Divi был уменьшен с 860 Кб до всего лишь 54 Кб.

Умные стили

CSS, созданный конструктором Divi Builder, также был оптимизирован для уменьшения повторяющихся стилей и общего размера файла. Теперь Divi идентифицирует повторяющиеся стили и объединяет селекторы в один список. Используя Divi Presets можно создавать очень легкие страницы, потому что каждый модуль, использующий пресет не имеет свой собственный уникальный блок стилей, а вместо этого пользуется общими стилями пресета.

Оптимизация JavaScript

В новой версии модулировали огромную часть файла JavaScript Divi, позволяя теме загружать каждую библиотеку JavaScript по требованию только тогда, когда это необходимо конкретным модулям, которые используются на странице. Были изменены некоторые функции Divi, такие как Sticky Options и Motion Effects, загружая эти части только при необходимости.

Кроме того, были удалены большие куски ненужного кода и, в конце концов, сокращен базовый размер файла JavaScript Divi в два раза.

Критический CSS для Divi

Критический CSS для Divi

Новая система Critical CSS в Divi определяет CSS, необходимый для стилизации контента над сгибом и откладывает все остальное. Поскольку при первой загрузке страницы нужны только критические стили, а блокирующие рендеринг активы играют такую важную роль в скорости страницы, способность Divi автоматически разделять критические и некритические стили дает ей преимущество перед другими темами и конструкторами WordPress. 

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

Новые возможности повышения скорости сайта на Divi

Новые возможности повышения скорости сайта

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

Кэширование шрифтов Google

Шрифты Google теперь кэшируются и определяются строке заголовка. Это устраняет блокирующий рендеринг запрос и ускоряет время загрузки. Также добавлена возможность удаления устаревших файлов шрифтов для уменьшения нагрузки.

Удаление эмодзи в WordPress

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

Отсрочка таблицы стилей Gutenberg Stylesheet Deferral

По умолчанию Divi теперь будет лениво загружать таблицу стилей блока Gutenberg на страницах, где вместо него используется Divi Builder. Он все еще будет загружаться на всякий случай, но он больше не будет блокировать рендеринг.

Динамические иконки

Divi теперь поставляется с подмножествами шрифтов иконок, которые загружаются по требованию в зависимости от используемых модулей и функций. Это уменьшает размер шрифта базовой иконки Divi с 90 кб до 6 кб. Полный набор значков загружается только при необходимости.

Отсрочка jQuery

Divi перемещает jQuery из заголовка и загружает его асинхронно в футер, когда он не нужен в заголовке. Это устраняет блокирующий запрос на рендеринг и ускоряет время загрузки. Если в заголовке находится сценарий, требующий jQuery, он будет перемещен обратно в заголовок, чтобы избежать конфликта. Этот параметр можно отключить, если он вызывает проблемы.

Строчная таблица стилей

Когда включена функция Dynamic CSS, базовый файл Divi style.css становится крошечным. Загрузка в линию устраняет блокирующий рендеринг запрос и улучшает показатели Google PageSpeed. Если включены опции Critical CSS, Dynamic CSS и In-Line Stylesheet, все блокирующие рендеринг запросы CSS удаляются.

Divi против конкурентов

Сравнение Divi с другими визуальными конструкторами

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

Использовали каждую пару для создания идентичного сайта, позаботившись о том, чтобы сделать каждый сайт максимально эффективным и быстрым, используя собственные опции, доступные в каждом продукте. Все эти сайты были размещены в одной многосайтовой сети с использованием SiteGround и Cloudflare.

Проводилось тестирование таких пар (визуальный конструктор + тема):

  • Elementor + тема Hello,
  • Gutenberg с плагином Ultimate Gutenberg Add-ons + тема Astra,
  • Beaver Builder + тема Kadence,
  • Fusion Builder + тема Avada.

Затем созданные сайты протестировали с помощью Google PageSpeed, чтобы сравнить показатели скорости. Каждый сайт тестировался шесть раз и оценка усреднялась по 5 лучшим результатам. Самый «плохой» результат выкидывался. Конечно, эти результаты могут меняться по мере обновления продуктов, но на данный момент можно видеть, что Divi удобно расположился на вершине списка во всех категориях.

С оценкой Google PageSpeed в 99 баллов для мобильных устройств и 100 баллов для настольных компьютеров, скорость Divi просто на высоте.

Магия темы Divi

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

Оставьте ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *