Оптимизация скорости загрузки сайта на Divi

Очередная (4.10) версия Divi и Extra уменьшает размер страницы сайта и ускоряет ее загрузку. Новые функции Divi будут повышать скорость сайтов, построенных на этой теме. Они являются лишь частью огромного обновления оптимизации производительности Divi, которое позволит сайту достичь «зеленых» показателей Google PageSpeed.

Что такое раздувание сайта?

Раздувание сайта представляет собой увеличение размера любой заданной статической веб-страницы (HTML) в сочетании со другими файлами, которые она использует для стилизации страницы (CSS) и добавления сложных функций, таких как всплывающие окна и эффекты движения (JavaScript).

Но это не всё. Сайты, построенные на темах WordPress (и Divi не исключение), динамически отображают HTML на странице, используя файлы PHP. Поэтому, когда мы говорим о раздувании, мы должны учитывать размер и эффективность этих файлов PHP, которые динамически отображают HTML на странице.

Если сайт раздут, то это означает что страницы

1. загружают и/или обрабатывают информации больше, чем необходимо для отображения,
2. загружают и/или обрабатывают ее неэффективно.

Как «тяжелые «страницы влияют на скорость сайта

Когда сайт загружает информации больше, чем ему надо для данной страницы, время загрузки ее увеличивается, что приводит к замедлению всего сайта. Например, если есть таблица стилей с 3000 строками CSS и она загружается вся на странице, которая использует только 300 строк. Тогда получается, что 2700 строк не нужны и время на их загрузку потрачено впустую.

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

Но это только часть проблемы увеличения размера страницы, помимо неиспользуемых CSS и JS. Файлы PHP сайта запускают множество функций, которые определяют, какой контент подается на страницу. Пусть файл functions.php содержит 25000 строк кода и сотни функций. Перед доставкой контента на страницу он весь просматривается, что является излишним, особенно если страница требует выполнения только нескольких из этих функций.

Все это время, потраченное на «прочесывание» ненужных CSS, JS и PHP влияет на общую скорость сайта.

Как решена проблема оптимизации страницы в Divi

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

Чтобы решить проблему раздувания, разработчик темы Elegant Themes применил логику «антираздувания» к новым функциям. И это решение сделало проблему уменьшения «веса» страницы Диви полностью решенной. Благодаря этим функциям Divi стала теперь чрезвычайно эффективной в обработке и рендеринге только того, что нужно странице. И ничего лишнего не загружается более.

Функции темы Divi против раздувания

Четыре ключевые функции, которые уменьшают фактическую скорость загрузки сайта на Divi, включают:

Dynamic Module Framework

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

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

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

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

Уменьшает вес страницы за счет загрузки определенного подмножества шрифтов иконок, которые использует страница, вместо загрузки их всех без необходимости.

Оптимизация JavaScript с динамическими библиотеками JS

Устраняет проблему раздувания JavaScript, оптимизируя основной скрипт Divi.js (теперь он вдвое меньше) и динамически загружая внешние библиотеки JavaScript на страницу только в том случае, если ей нужно ее использовать. Никакие другие ненужные библиотеки JS не будут запускаться.

Эти функции можно включить/выключить, перейдя в раздел Divi (Extra) (1) > Настройки темы (2). Затем на вкладке Общие (3) выберите подвкладку Производительность (4). Там видны все доступные варианты производительности, включая четыре упомянутых выше.

Там видны все доступные варианты производительности, включая четыре упомянутых выше. Их можно включить и выключить

Помогу в создании блога, интернет-магазина или лендинга на премиальной теме WordPress Divi. Обучу администрированию сайта. Окажу техническую поддержку.

Обращайтесь, буду рад помочь Вашему бизнесу или хобби.