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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Не забывайте во время тестирования чистить кэш!

Настройки плагина 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

Помогут в этой ситуации следующие бесплатные инструменты.

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

CSS Above the fold — 3 метода исправления

Бесплатный онлайн сервис

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 можно считать завершенной.

PageSpeed Insights Result

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

Скрипт bookmarklet в Chrome

Вставляем текст скрипта и перетаскиваем получившийся Bookmarklet в панель закладок Chrome.

  • Открываем сайт и запускаем bookmarklet

Скрипт отобразит CSS в консоль. Ctrl-Shift-J чтобы открыть консоль браузера.

  • Вставляем скопированный CSS в поле Above the fold плагина Autoptimize

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

Плагин My above the fold CSS

  • Скачиваем и активируем плагин

  • В настройках убедимся что настройка «Enable Above The Fold CSS Display ?» стоит в «yes», и сохраняем.

  • Открываем сайт, в подвале должен появиться код CSS

  • Копируем его в плагин Autoptimize

1
Оставить комментарий

avatar
1 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
1 Авторы комментариев
Эван Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Эван
Гость
Эван

Может возникнуть проблема со скриптами. Например, у меня отключились disquss комментарии и яндекс счетчик.
есть два решения: либо каждый из этих скриптов добавить в исключения на странице настройки Autoptimize;
либо включить опцию на той же странице «Look for scripts only in ?» (при этом в настройках плагина disquss отмечен пункт «Output JavaScript in footer», и код счетчика, разумеется тоже в подвале). Это решило проблему.