Оптимизация скриптов и стилей

Почему необходимо оптимизировать скрипты и стили

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

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

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

к содержанию ↑

Как проверить текущую скорость загрузки сайта

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

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

Анализ скорости загрузки сайта в Gtmetrix.com

Я специально отключил плагин Autoptimize на своем сайте, чтобы вам был виден эффект.

Еще хочу заметить, что на сайте используется легковесная тема, основанная на Underscore (_s), и она не перегружена теми функциями, которые могут быть во многих премиум темах. Ваш результат может отличаться в зависимости от установленной темы, и/или от количества дополняющего функционала посредством плагинов.

к содержанию ↑

Что в себя включает оптимизация скриптов и стилей

Сокращение количества JS и CSS файлов (путем отсекания лишнего функционала);

Объединение их в один или два файла, для уменьшения количества запросов;

Минификация (убирание пробелов, пустых строк);

Очередность загрузки, снятие блока загрузки страницы;

Сокращение и оптимизация кода;

Мы постараемся реализовать практически все выше перечисленные пункты, с помощью одного из двух плагинов Autoptimize и JS & CSS Script Optimizer, за исключением последнего пункта, потому что он предназначен для веб-разработчиков, которые хорошо разбираются в коде.

к содержанию ↑

Выключите все ненужные плагины и скрипты

Для получения помощи, откройте инструмент Developer Tools в вашем браузере (Инструменты разработчика), перейдите на вкладку Network (Сеть) и загрузите или обновите вашу страницу. Вы увидите таблицу загрузки, поставьте фильтр JS (то же самое, вы можете сделать позже для стилей, и для картинок).

Анализ загрузки на вкладке Network в Developer Tools

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

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

Отключите плагины, которые вам действительно не нужны!

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

к содержанию ↑

Оптимизация скриптов и стилей с помощью плагина Autoptimize

Важно: Если вы используете плагин кэширования W3 Total Cache, отключите в нём настройки минификации. Плагин Autoptimize производит данный функционал.

Не забывайте во время тестирования чистить кэш! (пункт Perfomance -> Purge from cache)

Итак, поехали.

Настройки плагина Autoptimize

Ставите галочки:

Оптимизировать код HTML?

Оптимизировать код JavaScript?

Оптимизировать код CSS?

Открываете сайт. Тестируете. Если всё работает, делаем так, чтобы перестал работать пробуем сделать дополнительные настройки.

Перевод некоторых пунктов:
Принудельно грузить JavaScript в <head>. JavaScript будет грузиться раньше, помогая избежать некоторых JS ошибок, но при этом будет блокировать отображение документа. Вы можете отключить опцию, если не агрегируете встроеный на страницу код JavaScript, и хотите только, чтобы его загрузка была отложена.

Нужно ли агрегировать встроенный на страницу JS? Отметьте эту опцию, если хотите включить в оптимизацию встроенный JS код на странице HTML. Если эта опция не включена, возможно, вы захотите Принудельно грузить JavaScript в <head>.

Попробуйте отключить Принудельно грузить JavaScript в <head> и включить Агрегировать встроенный на страницу JS. Как показано на скриншоте.

Это хороший вариант, и вы можете его оставить, если ваш сайт продолжает стабильно работать.

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

Многие популярные плагины учитывают, конечно, скорость и порядок загрузки скриптов. Но такое бывает не всегда.

Если это ваш случай, наиболее простой способ разрешить этот вопрос заключается в том, чтобы исключить обнаруженный код или скрипт из оптимизации в настройках Autoptimize. В поле с одноименным названием Exclude scripts from Autoptimize (Исключить скрипты из оптимизации), через запятую можно добавить jquery.js, например, если вы выяснили, что его загрузка необходима вам в начале страницы.

Конечно, вы всегда можете включить опцию Принудельно грузить JavaScript в <head>, но это не самый лучший вариант.
Многое зависит конкретно от функционального устройства вашего сайта. Тестируйте.

Еще хочу отдельно остановиться на одной опции в настройках оптимизации CSS

Inline and Defer CSS? — что означает, встроить важные для отображения стили непосредственно на страницу, остальное грузить позже.
Скриншоты остались из прошлой редакции настройки Autoptimize, логика осталась та же, поэтому я их сохранил.

Переходим на адрес Pagespeed Insights.

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

Провекра скорости загрузки на мобильной вкладке PageSpeed Insights

Поможет в этой ситуации следующий бесплатный инструмент. Critical Path CSS Generator.

Открываем блокирующие файлы CSS, копируем всё содержимое, вставляем в нужные поля, записываем адрес сайта и нажимаем ‘Create Critical Path CSS’

Critical Path CSS Generator - by Jonas Ohlsson

Полученный код копируем-вставляем обратно в настройки Autoptimize.

Опции Autoptimize CSS Inline ‹ wp-best — WordPress

Тестируем еще раз PageSpeed. Радуемся :)

На этом продвинутую настройку Autoptimize можно считать завершенной.

к содержанию ↑

Оптимизация скриптов и стилей с помощью плагина JS & CSS Script Optimizer

После установки, плагин нужно включить.

Настройки плагина JS CSS Script Optimizer

Настройки аналогичны тем, которые мы увидели в плагине Autoptimize.

Здесь можно отметить две настройки.

Агрегирование JavaScript:

Объединить все скрипты в два файла (в заголовок и подвал)

Объединить все скрипты и переместить в подвал

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

Каким плагином пользоваться, смотрите на ваше усмотрение. Плагин JS & CSS Script Optimizer я устанавливал на несколько сайтов, проверял его работу, но мне не довелось тщательно протестировать его. На текущий момент пользуюсь Autoptimize.

Протестируйте оба, и оставьте тот, который на ваш взгляд стабильнее работает конкретно в вашей ситуации.

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

Поделитесь материалом в соц.сетях, если вам понравилось его содержание.

Желаю вашим сайтам славного полета и стабильной работы! :)