Как отложить загрузку css wordpress
Отложенная загрузка CSS
Если вы серьезно относитесь к ускорению вашего сайта, и для работы ваших веб-страниц требуются большие CSS скрипты, то для оптимизации доставки CSS пользователю вам придется использовать технику отложенной загрузки CSS файлов. Отложенная загрузка позволяет загрузить файлы CSS после того, как ваша веб-страница (DOM) полностью сформирована.
Какие файлы CSS нужно загружать в отложенном режиме?
Вы должны отложить загрузку всех CSS файлов, которые блокируют отображение вашей страницы. Чтобы увидеть, какие файлы блокируют рендеринг, вы можете проверить свой сайт при помощи специальных сервисов, например, https://www.giftofspeed.com/.
Как определить, какую часть CSS скрипта следует перевести в отложенную загрузку?
Прежде чем вы решите воспользоваться отложенной загрузкой CSS скриптов, вы должны разобраться в том, как оптимизировать доставку CSS. После извлечения критического для рендеринга CSS у вас должен остаться CSS скрипт меньших размеров. Вставьте этот CSS скрипт в заголовок вашей веб-страницы и отложите загрузку оставшейся части оригинального CSS скрипта.
При составлении плана любых работ серьезную помощь может оказать составление алгоритма действий. Сделать это помогут онлайн-сервисы для создания блок-схем алгоритмов и диаграмм. Блок-схема алгоритмов наглядно покажет с чего начать и как оптимизировать свою работу.
Не переводите в отложенную загрузку небольшие скрипты CSS
Не стоит беспокоиться об отложенной загрузке, когда дело доходит до небольших скриптов CSS. Гораздо больший выигрыш в скорости вам даст перенос таких стилей в код самой HTML страницы.
Отложенная загрузка должна применяться только с большими CSS
Когда дело касается скорости загрузки страниц, отложенная загрузка наиболее полезна, когда приходится загружать большие файлы CSS. Однако отложенная загрузка всех CSS может пагубно сказаться на первом впечатлении пользователя. Потому что в этом случае при первом просмотре ваши посетители (особенно те, у кого медленное подключение к Интернету или которые используют мобильные устройства) вместо сайта могут увидеть пустую страницу, либо ее стиль будет ужасным. Причина этого заключается в том, что CSS еще не загружен. Вот поэтому применять отложенную загрузку для всех файлов CSS является не лучшим вариантом. Как было сказано выше, одним из способов решить эту проблему, может стать выделение тех стилей CSS, которые критичны для начального просмотра страницы. Выяснив это, вы должны вставить эти CSS стили в заголовок HTML, а оставшуюся часть вашего CSS перевести в режим отложенной загрузки.
Как сделать отложенную загрузку CSS при помощи небольшой программы Javascript
Для отложенной и асинхронной загрузки Javascript файлов есть особые HTML-инструменты, а именно атрибуты defer и async тега script. К сожалению, эти атрибуты не работают с CSS файлами. Но не стоит переживать, нам на помощь придет следующий код Javascript. Он позволяет осуществить отложенную загрузку любого файла CSS:
Вставьте этот скрипт в HTML код вашей страницы (лучше всего в футер) и замените строку «../css/yourcssfile.css» на путь к CSS файлу, загрузку которого вы хотите отложить. Если отложенная загрузка применяется только к одному файлу, то удалите секцию, относящуюся к файлу CSS #2. Если же вам нужно сделать отложенную загрузку более чем для двух файлов, то скопируйте секцию для CSS #2 и вставьте ее столько раз, сколько файлов вам нужно загрузить. При этом не забудьте заменить цифру 2 в именах переменных так, чтобы сделать их уникальными.
Обязательно в HTML теге head вставьте следующий код:
Это нужно на тот случай, если устройство или браузер пользователя не поддерживает Javascript. При этом CSS файлы все равно будут загружены.
Настройка плагина Autoptimize
Код любого сайта состоит из смеси html-кода, скриптов Java и css для правильного отображения.
Цель любой оптимизации — объединить все JavaScript в один файл и убрать его в конец страницы, объединить все стили CSS в один файл и поместить его в верхнюю часть (head). Что и делает этот плагин Autoptimize.
Если, допустим, объединить 15 файлов стилей css в один, то общее время загрузки страницы уменьшится — легче загрузить один (хоть и большой) файл, чем 15 мелких. Но видимую часть вы не увидите, пока не загрузится этот большой файл. Решение этого вопроса рассмотрим в последней части статьи.
Autoptimize опции JavaScript
Оптимизировать код JavaScript? Настройка просто оптимизирует (сокращает) код скриптов.
На этом этапе (примем его за начальный) на странице нахожу 35 JavaScript.
Объединить файлы скриптов? Настройка включает объединение файлов JavaScrip в один файл, который будет подгружаться из нижней части сайта. Это хорошо для «пузомерок», но иногда могут проявляться проблемы с отображением некоторых элементов на сайте.
Объединить встроенные JS? Этот параметр помещает все ваши скрипты в html. Увеличения производительности я не заметил, но при этом плагин создает значительно больше своих JS файлов с кэшем (и размер общего кэша растет).
Исключить скрипты из Autoptimize. Если у вас на сайте перестал работать некоторый функционал, попробуйте исключить используемый им JavaScript из оптимизации. Например, сломался баннер — ищем его скрипт-файл и добавляем.
Добавить try-catch обертывание? Если какой либо скрипт выдает ошибку, он может прервать работу последующего скрипта. Плагин оборачивает все скрипты, своим тегом, что позволяет пропустить ошибку и подгрузить все остальное правильно.
Опции CSS
Оптимизировать код CSS? Оптимизация (сокращение) кода стилей CSS.
Объединить файлы CSS? Опция включает объединение стилей-файлов CSS — они останутся загружаться в «верхней» части сайта, но вместо 10-20 файлов будет один.
Объединять встроенный CSS? Стили прописанные HTML в разных местах (не файлами css), будут объединены в один кусок HTML.
Создать данные: URI для изображений? Если у вас в файлах CSS прописываются пути к картинкам размером меньше 4 КБ, они не будут подгружаться как отдельный запрос, а будут идти в загрузке вместе с основным файлом CSS. Уменьшение количества запросов — всегда плюс для «пузомерок». Пример такой картинки — «галочка» в списках.
Встроить и отложить выполнение CSS? Самый интересный и сложный пункт. Он позволяет интегрировать в HTML только тот CSS код, который используется для отрисовки видимой части сайта. И отложить загрузку всех остальных CSS и, самое главное, переместить их из шапки.
Рассмотрим этот пункт отдельно ниже.
Встраивать все CSS? Стили из файлов CSS и HTML прописываются в шапку (head) сайта в виде HTML. Визуально большой блок кода виден в шапке, что на мой взгляд может не понравиться поисковым системам.
Исключить CSS из Autoptimize. Можно исключить из оптимизации некоторые CSS файлы, если это вызывает проблемы.
Параметры HTML
Оптимизировать код HTML? Это позволяет удалить лишние пробелы, переносы и пр. в коде страницы. Значительной производительности пункт не дает, но небольшой плюсик от поисковых систем мы получить возможно сможем.
Сохранять комментарии HTML? В коде могут присутствовать пометки. Они не нужны для правильной работы кода и служат, в основном, для удобства редактирования, дабы не вспоминать какой код за что отвечает.
Этот пункт ничего не изменяет в теме, а просто берет код и добавляет его в свой единый файл и именно в нем их не будет. Поэтому галочку можно не ставить, т.к. это лишние килобайты.
Критический CSS
Это тот пункт который я обещал рассмотреть отдельно. Помещая в шапку сайта только ту часть CSS, которая необходима для отрисовки видимой части первого экрана мы имеем:
Этот минус, обычно, никак не сказывается на рейтинге «пузомерок», да и вы скорее не заметите разницу в скорости загрузки сайта. А за удаление из хедера файла CSS, поисковая система погладит нас по головке.
Я считаю этот пункт наилучшим компромиссом, который может предложить Autoptimize, в данном разделе.
Как найти код для интеграции в критический CSS?
1. Перейдите на любую станицу, нажмите правую кнопку мыши «просмотр кода страницы» или ctrl+u (для Google Chrome). Найдите css-файл созданный плагином, для этого воспользуйтесь поиском по странице (ctrl+F), введите: autoptimize.
Название примерно такое: autoptimize_6f0ee70cc9b84a1d501e9aee91e4e9a6.css. Откройте этот файл и скопируйте его содержимое.
2. Воспользуйтесь сервисом Critical Path CSS, во второй раздел которого поместите код всех стилей, скопированный ранее.
3. В первое поле введите URL любой записи вашего сайта и нажмите «Create Critical Path CSS».
4. После чего мы наконец получим, критический CSS для той страницы, URL которой Вы вводили. Осталось дело за малым, вставить полученный код в Autoptimize и сохранить настройки.
Отзывы
Неприятно удивило то, что на pagespeed/insights цифры стали хуже, чем были. Сейчас плагин отключила, но скриншоты сделала. Показательно — два огромных файла Autoptimize (JS и CSS) кушают ресурсов больше, чем куча мелких.
Очень много жалоб что файлы кэша разрастаются до огромных размеров. Юзал данный плагин несколько дней, все пытался подобрать оптимальную для меня конфигурацию, благо настроек много. На каком-то этапе Autoptimize перестал отрабатывать, не вываливается в ошибку, а просто не выполняет свои функции.
В настоящее время использую Fast Velocity Minify, который на дефолтных настройках показывает примерно те же результаты.
Отложенная загрузка стилей и встраивание критического CSS
Улучшить и ускорить отображение страницы сайта поможет отложенная загрузка стилей и встраивание критического CSS. По умолчанию браузер загружает все файлы стиля сразу и визуализация контента происходит с задержкой. Тестируя сайт инструментом PageSpeed Insights, мы получаем рекомендацию от Google: удалить ненужные правила из таблиц стилей и отложить загрузку кода CSS, который не используется в верхней части страницы.
Как известно, высокая производительность загрузки сайта снижает количество отказов. Эти три шага оптимизации рендеринга, помогут решить проблему с замедленным отображением контента.
1. Отложенная загрузка блокирующих стилей
Preload (предварительная загрузка) — это новый веб-стандарт, направленный на повышение эффективности и обеспечение детального контроля загрузки сайта. Кроме того, есть и другие директивы (prefetch, subresource, prerender) помогающие веб-разработчикам регулировать те или иные процессы.
Иными словами, с помощью preload мы отложим загрузку некоторых ресурсов. Браузер загрузит все таблицы в фоновом режиме, что не повлияет на рендеринг. Атрибут as укажет браузеру, какой тип файла он будет обрабатывать. Возможные значения as: style, script, font, embed, image и т.д.
Чтобы добавить rel=«preload» на сайт WordPress без плагина, вставьте этот код в файл functions.php.
Обратите внимание, что в день написания этой статьи, предварительная загрузка (preload) не работает в браузерах Firefox и Safari. Выходом из этой ситуации может стать загрузка стилей в двух вариантах атрибута rel — с preload и stylesheet. Пример:
На самом деле все эти шаги оптимизации взаимосвязаны, так как выполнив первый шаг, страницы сайта могут выглядеть без стилей. Поэтому вы пока не добавляйте preload без создания критического CSS.
Критические стили необходимы для ускорения отрисовки страницы при ее загрузке в браузере.
2. Генерация критического стиля
Переходим на страницу бесплатного генератора. Вводим URL своего сайта и ждем генерации критического CSS. В результате мы получим вот такой текст, который необходимо будет скопировать.
Данный способ генерации может сделать неправильными относительные пути (Url) файлов. Поэтому скопируйте код в текстовый блокнот и поправьте все ссылки. Для многостраничных сайтов воспользуйтесь платным инструментом criticalcss.com. Если разрабатываете сайт с нуля, то проще всего автоматизировать процесс в Gulp пакетом Critical.
3. Встраивание критического CSS в
Для WordPress применим функцию:
Также в WordPress есть несколько плагинов для осуществления отложенной загрузки стилей и автоматического создания критического CSS. Например: Autoptimize, Fast Velocity Minify, WP Critical CSS, WP Rocket ASYNC CSS или премиальный плагин WP Rocket. Плагин LiteSpeed совместно с CDN сервисом QUIC.cloud выделяет кредиты на асинхронную загрузку CSS. Этого лимита вполне достаточно для проведения теста.
И в заключение надо сказать, что отложенная загрузка стилей и встраивание критического CSS не улучшает время загрузки страницы, но имеет огромное значение для того, как пользователь воспримет загруженную страницу.
Autoptimize
Первое что нужно сделать для оптимизации скорости загрузки страницы — это уменьшить количество http запросов. Один из способов сделать это в WordPress — это собрать все подключаемые скрипты и стили в один. Такая операция называется конкатенация (объединение, сцепление). Сделать такое объединение поможет плагин Autoptimize или его аналог. Об этом поговорим ниже.
Обновление: В последнее время разочаровался в плагине Autoptimize. С этого сайта его пришлось удалить, потому что он создает лишние файлы. Например, если у вас есть динамичный скрипт на странице, то плагин будет создавать сборную копию скриптов для каждого измененного скрипта. В итоге получается чуть ли не отдельный огромный js файл для каждой страницы.
С этим можно бороться исключениями динамических скриптов в настройках плагина, но это муторно.
Вам рекомендую: поставить Autoptimize и по прошествии нескольких дней зайти в настройки и посмотреть сколько файлов в кэше. Если мало, то все отлично! Если много (100+), то рекомендую поискать другой плагин.
После установки плагин ничего не сжимает, все функции нужно включать отдельно. Для этого нужно зайти на страницу настроек плагина (Настройки > Autoptimize). Она переведена на русский, правда, почему-то, частично, но этого достаточно чтобы разобраться. Настроек у плагина не много:
После включения необходимых типов сжатия, нужно проверить сайт и убедится что все скрипты работают как прежде, иногда с ними возникают проблемы. Проблемные скрипты можно исключить, читайте ниже.
Решения проблем
Если возникли проблемы с работой скриптов или стилей, то можно попробовать настроить плагин. Для этого на странице настроек нажимаем на кнопку «Show Advansed Settings» и нам откроются дополнительные настройки.
Exclude scripts from Autoptimize
Add try-catch wrapping?
Genegate data: URLs for images?
Defer CSS loading?
Inline all CSS?
Exclude CSS from Autoptimize:
П.С. Автор плагина работает над своим детищем постоянно и совсем скоро ожидается новая версия 1.9.0.
Асинхронная загрузка CSS и JavaScript
Асинхронная загрузка внешних CSS- и JS-ресурсов способствует увеличению скорости загрузки сайта и отображения веб-страниц в браузере, обеспечивая загрузку и выполнение файлов в фоновом режиме без блокировки рендеринга
Содержание
Прежде, чем приступать к реализации асинхронной загрузки CSS- и JS-файлов, рекомендуем ознакомиться со значением структуры кода веб-страниц по отношению к скорости загрузки сайта.
Что такое асинхронная загрузка?
Процесс отображения страницы сайта в браузере сопровождается задержками (Render Blocking) всякий раз, когда браузер обнаруживает внешние CSS- и JS-ресурсы в тегах link и script соответственно. Это приводит к тому, что некоторое время пользователь находится в ожидании отображения веб-страницы на экране до момента, пока не загрузятся и не выполнятся файлы, препятствующие её отображению.
Например, блок head веб-страницы имеет следующее содержание:
Во избежание задержки отображения страницы применяется асинхронная загрузка файлов CSS и JavaScript, обеспечивающая безостановочный процесс отображения страницы в браузере.
Асинхронная загрузка JavaScript
Тег SCRIPT без атрибутов (синхронная загрузка JS)
Задержка рендеринга страницы в браузере обеспечивает выполнение скриптов в порядке их указания в HTML-коде.
Тег SCRIPT с атрибутом ASYNC (асинхронная загрузка JS)
Атрибут async обеспечивает асинхронную загрузку внешнего JS-файла: файл будет загружен и выполнен в фоновом режиме без задержки отображения страницы.
При применении тегов script с атрибутом async следует помнить, что порядок выполнения скриптов (если JS-файлов несколько) не сохраняется: они будут выполняться по окончании их загрузки вне зависимости от их порядка в HTML-коде. Это может привести к ошибкам и несрабатыванию скриптов.
Решением является объединение кода всех JS-файлов в один, или применение атрибута defer, если проблема касается только внешних файлов.
Тег SCRIPT с атрибутом DEFER (отложенная загрузка JS)
Атрибут defer обеспечивает отложенную загрузку внешнего JS-файла: файл будет загружен без задержки отображения страницы и выполнен по окончанию рендеринга.
Следует учитывать, что атрибут defer (как и async ) не откладывает выполнение встроенных в страницу скриптов: они будут проанализированы браузером и в случае, если файл JS-библиотеки, которую они используют, не будет загружен и исполнен, то и скрипты будут проигнорированы:
Для сайтов на CMS
Асинхронная загрузка CSS
Загрузка и обработка браузером внешних файлов стилей также сопровождается блокировкой рендеринга страницы, избежать которую можно посредством их асинхронной загрузки. Сложность в том, что реализовать асинхронную загрузку CSS с помощью атрибутов тега, как это делается для JS-файлов, нельзя. Решить поставленную задачу можно различными способами с помощью JavaScript.
Посредством JS
Обеспечить асинхронную загрузку внешних CSS-файлов можно с помощью JavaScript без применения сторонних библиотек.
Для этого можно использовать следующую JS-функцию:
После объявления функции в коде нужно её вызвать соответствующее количеству CSS-файлов число раз:
Для применения данного способа разместите функцию и её вызов(ы) в теге script перед закрывающим тегом body :
С помощью jQuery
Если на странице применяется JS-библиотека jQuery, то для асинхронной загрузки CSS-файла можно применить следующий код:
Если требуется асинхронно загрузить несколько файлов стилей, нужно перечислить их в JS-функции:
При этом, если JS-файл с jQuery будет загружаться асинхронно (с применением атрибута async или defer ), то скрипт асинхронной загрузки CSS также не сработает, т. к. парсер браузера уже минует данный скрипт, не имея данных для его выполнения (jQuery в этот момент будет только на стадии загрузки):
Чтобы асинхронно загрузить JavaScript (jQuery) и CSS, можно применить следующий приём:
С помощью скрипта headJS
Существует ряд скриптов, созданных для реализации асинхронной загрузки как CSS-файлов, так и JS-файлов. Одним из таких скриптов является headJS.
Для его применения нужно скачать JS-файл и подключить его к странице:
Все перечисленные файлы будут асинхронно загружены и выполнены в указанном порядке.
Чтобы загружать асинхронно в том числе скрипт headJS, можно применить следующий способ:
Т. к. все перечисленные способы реализации асинхронной загрузки CSS-файлов реализуются посредством JavaScript, для подстраховки в код желательно вставить ссылки на эти файлы в теге noscript на случай, если браузер не выполняет JS-код:
Отложенная загрузка стилей
Каждый из предложенных способов откладывает загрузку стилей, в результате сперва происходит отрисовка страницы без их применения, после чего стили резко применяются, преображая страницу.
Для сайтов на CMS
Обеспечить асинхронную загрузку CSS для сайтов на Joomla, WordPress, Magento и Drupal можно с помощью платной версии плагина JCH Optimize.
Плагин JCH Optimize Pro способен:
Выводы и заключение
Асинхронная загрузка: