Как сделать асинхронную загрузку CSS плюсы и минусы разных способов


Содержание материала:

Асинхронная загрузка CSS

1 комментарий:

  • © 2020, 4X_Pro
  • Правила
  • Обо мне
  • Все проекты
  • Достижения

Здесь можно задать мне вопрос или спросить совета по любой теме, затронутой в блогах или на форуме. После того, как я отвечу, вопрос и ответ появятся в соответствующем разделе. Но не забываем, что я — сторонник slow life, поэтому каких-либо сроков ответов не обещаю. Самые интересные вопросы станут основой для новых тем на форуме или записей в блоге.
Сразу предупреждаю: глупости, провокации, троллинг и тому подобное летит прямо в /dev/null.

Отложенная загрузка 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 файлы все равно будут загружены.

20 способов ускорить загрузку сайта в 2020 году

Почему это важно

Время загрузки сайта — один из важнейших показателей, влияющий на поведение пользователей сайта. Давайте разбираться.

Снижение скорости загрузки страницы на 1 секунду влечет за собой:

  • уменьшение числа просмотров на 11%;
  • снижение показателя удовлетворенности пользователя на 16%;
  • уменьшение конверсии до 6%.

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

Пара лишних секунд времени загрузки сайта уменьшают шансы заинтересовать посетителей и осуществить продажи.

KISSmetrics провела исследование на тему того, как скорость загрузки сайта сказывается на поведении пользователей и покупателей:

  • 47% пользователей ожидают, что страница откроется меньше чем за 2 секунды;
  • 40% пользователей закрывают сайт, если он загружается дольше 3 секунд;
  • 79% покупателей, которые остались недовольными удобством сайта, скорее всего, не будут покупать через него в дальнейшем;
  • 44% интернет-покупателей расскажут своим знакомым о сайтах, которые их не удовлетворили.

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

Терпение пользователей мобильного интернета

Увеличение скорости загрузки сайта как способ увеличить конверсию

Время загрузки сайта влияет на конверсию. Рассмотрим на примере сети Walmart.

Зависимость показателя конверсии от времени загрузки страницы

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

По итогам Walmart выявило, что уменьшение времени загрузки страницы на секунду способствует повышению конверсии до 2%.

Влияние оптимизации загрузки сайта на органический трафик

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

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

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

Обобщая вышесказанное делаем вывод, что ускорение сайта приводит к:

  1. росту конверсии;
  2. снижению показателя отказов (процентное соотношение количества посетителей, покинувших сайт прямо со страницы входа или просмотревших не более одной страницы сайта);
  3. подъему в поисковых системах.

20 способов как ускорить загрузку сайта

1. Сократить число HTTP запросов

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

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

Топ-пост этого месяца:  WhatsApp ограничит пересылку сообщений пятью получателями


Проверить, сколько HTTP запросов генерируется, можно очень просто — воспользоваться панелью разработчика браузера.

Рассмотрим процесс на примере браузера Google Chrome.

Первым шагом мы заходим на анализируемую страницу, правой кнопкой кликаем по любой пустой области страницы и выбираем в контекстном меню пункт “Просмотреть код”. В нижней части экрана откроется панель Chrome DevTools. Переходим во вкладку Network и перезагружаем страницу. Мы видим список всех запросов, статусы их ответов и время загрузки файлов.

2. Объединить и минифицировать CSS и JS-файлы

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

Самый простой способ сократить количество запросов — объединить и минифицировать (сжать) HTML, CSS и JavaScript файлы. Правильнее всего поставить эту задачу разработчикам. Если нет такой возможности, можно попробовать сделать это самостоятельно.

Открываем любой текстовый редактор, вставляем в него содержимое всех используемых css-файлов в том порядке, в котором они подключаются в шаблоне. Далее, воспользовавшись любым сервисом минификации (например, CSSminifier), сжимаем код.

В результате у нас сокращается число запросов, а из финального кода удаляются незначимые для интерпретатора символы (пробелы, табы, переносы строк и т.п.).

3. Реализовать асинхронную загрузку CSS и JS

Все мы привыкли загружать CSS файл в HTML посредством вставки тега

Однако не все куски кода настолько критичны, что их следует загружать сразу. Например, на сайте есть редко используемый компонент сравнения товаров. Имеет смысл подгружать стили и js-код для него непосредственно в тот момент, когда пользователи захотят воспользоваться таким функционалом.

Реализовать асинхронную загрузкуу CSS и JS часто под силу только профессиональным разработчикам. Отметим лишь то, что смотреть нужно либо в сторону использования значения preload атрибута rel в совокупности с атрибутом onload, либо подгружать стили js-скриптом.

4. Настроить отложенную загрузку javascript-кода

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

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

Чтобы реализовать отложенную загрузку, а точнее обработку, такого скрипта, нам всего навсего необходимо прописать атрибут defer тегу

Асинхронная загрузка JavaScript — ускоряем загрузку страниц

Современные веб-страницы сильно перегружены файлами javascript. Это ведет к замедлению загрузки и последующего отображения страницы. В худших условиях (медленное подключение к Интернету, много javascript файлов) посетителю сайта приходится ждать до 30 секунд.

HTML устроен так, что веб-страница загружается, синхронно (строка за строкой) загружая по очереди все включенные в html-код элементы. Таким образом, загрузка тормозится в местах с javascript строками.

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

Есть несколько подходов. Начну по порядку.

JavaScript: синхронная загрузка скрипта

Загрузка javascript файла осуществляется так:

Асинхронная загрузка скрипта HTML5

Стандарт HTML5 поддерживает возможность асинхронной загрузки скриптов, что может значительно ускорить общее время получения страницы. Просто добавьте async или defer.

Чем же отличаются атрибуты async и defer

В обоих случаях мы получаем асинхронную загрузку скриптов. Разница заключается только в моменте, когда скрипт начинает выполнятся. Скрипт с атрибутом async выполнится при первой же возможности после его полной загрузки, но до загрузки объекта window. В случае использования атрибута defer – скрипт не нарушит порядок своего выполнения по отношению к остальным скриптам и его выполнение произойдет после полной загрузки и парсинга страницы, но до события DOMContentLoaded объекта document.

К сожалению, этот механизм на сегодняшний день не работает во всех браузерах (особенно это касается IE). Также не будет работать, если в файле script.js есть строки document.write.

Асинхронная загрузка javascript скриптом от Google

Как известно всем мастерам, Google уделяет особое внимание скорости загрузки сайтов, и понижает медленные в поисковой выдаче. Что бы помочь, Гугл разработал специальный скрипт, при помощи которого можно сделать асинхронную загрузку javascript.

Чтобы использовать, просто заменяем

В самых старых версиях IE (6 и ниже) асинхронная загрузка к сожалению не работает, но таких пользователей уже практически нет. Все остальные браузеры и сервисы успешно пользуются современной ускоренной загрузкой web-страниц.

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Асинхронная загрузка CSS

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

Загрузка с jQuery

Если Вы используете jQuery, Вы можете загрузить css асинхронно таким образом:

Этот код необходимо выполнить после загрузки документа и jQuery соответственно, например в методе ready:

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

# В теге style необходимо задать минимальное количество стилей, необходимое для сохранения внешнего вида

Определение используемого CSS на странице

Что такое minify и как его использовать

Как работает сжатие gzip и как его включить

Минификация (minify) JS/CSS

Методы оптимизации сайтов на стороне браузеров

Minification of JS/CSS/HTML in PHP

Как включить и использовать сжатие gzip в Nginx

Cache control в Nginx, как настроить и использовать

Где находится nginx.conf и пример настроек

Как исправить ошибку Primary script unknown в Nginx

Примеры ad-hoc запросов и технологии для их исполнения

Как эффективно использовать цикл foreach в PHP

Анализ скорости сайта с помощью Google Pagespeed

Ускорение PHP приложений на платформе YII в несколько раз

Как использовать Cache-control c изменяемыми файлами


Как настроить Nginx на максимальную эффективность

Основы оптимизации работы Web сервера

8 составляющих эффективной системы выкатки Web сайтов

Основные ньюансы и методы мобильной оптимизации

Асинхронная загрузка CSS

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

Ну сейчас обсудим асинхронную загрузку CSS, это позволит быстрее показать страничку посетителю, особенно это необходимо для мобильных устройств, когда интернет хреновый.
И так способ первый — это загрузка с jQuery
Почти все сайты сейчас используют jQuery можно загрузить css асинхронно вот так :

Можешь почитать и вот эту статейку «инклюд в NG»

Быстрая CSS-верстка шаблонных элементов

В общем случае, можно выделить несколько способов подключения (применения) пользовательских CSS-стилей:

1) Прямое встраивание

Применить стиль CSS можно без использования каких-либо селекторов напрямую, прописав стиль в свойстве style конкретного элемента, например:

Такой способ указания стилей очень неудобен для поддержки и делает HTML-разметку крайне «замусоренной», поэтому применять его нужно с крайней осторожностью.

2) Группировка стилей

Можно присвоить CSS-селекторы нужным элементам и собрать все стили в одном блоке

Самый простой способ ускорить загрузку сайта

Скорость загрузки сайта влияет на позиции в поисковой выдаче.

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

Далее рассмотрим что делать и принцип действия.

Как ускорить загрузку сайта быстро и просто?

На большинстве сайтов используется код JavasScript. По умолчанию робот использует последовательную загрузку скриптов.

Топ-пост этого месяца:  Заработок на канале Яндекс.Дзен как выйти на монетизацию

На практике наиболее распространенные сценарии применения скриптов следующие:

  • Подключение систем аналитики, таких как Google Analytics и/или Yandex Метрика;
  • Использование скриптов JavaScript при решении задач по user interface или user experience.

Поисковая система оценивает скорость загрузки сайта через имитацию браузера пользователя.

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

Критическим путем рендеринга (Critical Rendering Path) называется последовательность шагов, необходимых для первого отображения страницы.

Если нет желания разбираться в технических деталях (все-таки уже потеплело на улице), то для ускорения загрузки страниц сайта просто прочитайте и внедрите следующие правила:

  • Код JavaScript должен быть вынесен во внешний файл;
  • К тегу script должен быть добавлен атрибут defer.

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

До вывода страницы на экран проходит 6 этапов критического пути рендеринга:

  1. Построение DOM-дерева;
  2. Построение CSSOM-дерева;
  3. Запуск JavaScript;
  4. Создание Render-дерева;
  5. Генерация расположения;
  6. Визуализация.

Под термином DOM (Document Object Model) подразумевается объектная модель страницы.

Структура DOM выстраивается из узлов, так называемых нодов (от nodes).

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

Под термином CSSOM (CSS Object Model) подразумевается объектная модель стилей страницы сайта.

Не имеет значения то, как стили были заданы: объявлены явно или наследуются.

CSS является блокирующим обработку ресурсом, а значит Render-дерево не может быть построено без полного первоначального разбора CSS.

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

Render-дерево представляет собой объединение из DOM и CSSOM, и включает только видимые элементы. Например, исключаются элементы, которые были скрыты с использованием display none.

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

Поисковая оптимизация критического пути рендеринга

Модели DOM и CSSOM связаны с JavaScript.

JavaScript является блокирующим ресурсом для роботов, то есть JavaScript блокирует разбор HTML-документа.

Когда робот видит тег script, то происходит остановка процесса, робот начинает выполнять JavaScript. Если скрипт размещен на внешнем ресурсе, то робот еще идет забирать код с другого ресурса. Начинаются лаги и, как следствие, страница сайта открывается не очень быстро.

Но блокировки робота можно избежать!

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

Есть 2 важных директивы:

  • async;
  • defer.

При не использовании директив код выглядит так:

Асинхронная и отложенная загрузка JavaScript на сайте

Приветствую, друзья! Знаете ли Вы, что загрузка JavaScript является одним из самых узких мест в производительности сайта? Сегодня моя основная задача — объяснить что такое асинхронная загрузка скрипта и каким образом она влияет на быстродействие и производительность сайта.

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

  • конфигурации хостинга,
  • скорости интернет-соединения,
  • размера файла и других…


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

Разбираемся с критичным CSS

18 Августа 2015

Современный веб медленный, но у нас есть несколько простых стратегий по ускорению наших сайтов. Одна из них это инлайнирование критичного CSS внутри на странице, но что делать если ваш сайт состоит из сотен страниц или, что хуже, использует сотни различных шаблонов? Вы не сделаете это вручную. Дин Хьюм объясняет простой способ решения этой проблемы. Если вы опытный разработчик, вам эта статья покажется очевидной, но ее стоит показать вашим клиентам и junior-разработчикам.

Обеспечение быстрой и гладкой работы это важная часть создания сайтов. Большую часть времени мы разрабатываем сайты без понимания, что происходит “под капотом” браузера. Как на самом деле происходит рендеринг страниц из нашего HTML, CSS и JavaScript? И как мы можем использовать это знание для ускорения рендеринга веб-страниц?

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

Если вы когда-либо прогоняли один из своих сайтов через PageSpeed Insights, то вы уже могли столкнуться с подобным отчетом:

CSS и JavaScript блокируют рендеринг страницы. (Увеличенная версия)

Я должен признаться, что первый раз был смущен, когда увидел подобный итог, текст гласит:

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

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

Что такое критичный CSS?

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

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

Критический путь рендеринга это шаги, которые делает браузер делает для рендеринга страницы. Нам нужно свести к минимуму количество блокирующего CSS, или критичного CSS, чтобы наша страница быстрее показалась пользователю. Критический ресурс это любой ресурс, который может блокировать первоначальный рендеринг страницы. Идея состоит в том, чтобы веб-сайт мог вывести первые элементы контента пользователю в первых TCP-пакетах. Чтобы получить краткое представление о том, как это работает на странице, взгляните на рисунок ниже:

Критичный CSS это минимальный набор блокирующего CSS, требуемого для рендеринга первого экрана с контентом пользователю. (Увеличенная версия)

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

Как мы можем определить, что считать критичным CSS? Определение критичного CSS для страницы это процесс достаточно сложный и требующий прохода по DOM страницы. Затем нам надо определить список стилей, которые применены к каждому видимому элементу. Это трудоемкий процесс, но существуют инструменты для его автоматизации.

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

Критичный CSS в действии

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

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

Топ-пост этого месяца:  Что такое прогрессивное веб-приложение преимущества и создание PWA

Чтобы понять, как должен выглядеть HTML, взгляните на этот простой пример:

В этом коде мы извлекли критичный CSS и инлайнировали его в HTML между тегами style . Затем, мы используя функцию loadCSS(); асинхронно загружаем оставшийся, некритичный CSS. Это важно, потому что мы существенно уменьшаем нагрузку за счет некритичного CSS, который мы вставляем на страницу в фоновом режиме.

Поначалу это кажется кошмаром для поддержки. Кому захочется вручную инлайнировать фрагмент CSS на каждой странице? Хорошие новости — процесс можно автоматизировать и в этом примере я использовал Critical. Этот инструмент создал Эдди Османи это пакет Node.js, позволяющий автоматически извлекать и инлайнировать критичный CSS из HTML-страниц.

Мы будем комбинировать его с grunt, диспетчером задач JavaScript для автоматизации обработки CSS. Если вы никогда не использовали Grunt раннее, на сайте есть неплохая детальная документация, а также много советов по настройке вашего проекта. Я также раннее писал об этом инструменте.

Приступаем к работе

Давайте начнем с консоли и перехода в каталог вашего сайта. Установите интерфейс командной строки Grunt, введя следующую команду (может потребовать sudo):

Это добавит команду grunt к системному пути, позволяя вам запускать его из любого каталога. Затем установите сам Grunt:

Затем установите плагин grunt-critical:

Затем вам надо создать Gruntfile.js с конфигурацией для вашего проекта. Вот образец моего грантфайла:

В этом коде я поставил Grunt задачу наблюдать за моим файлом page.html, затем он обработает CSS на этой странице и вычислит критичный, а в финале инлайнирует критичный CSS и соответственно обновит страницу HTML.

Запустите плагин, набрав grunt в консоли:

Автоматизация производительности с помощью Grunt. (Увеличенная версия

Если вы теперь посмотрите на содержимое каталога, то заметите файл result.html , содержащий весь критичный CSS и асинхронно подгружающий остальные стили. Ваша веб-страница готова к рок-н-роллу!

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

Этот код позволит обработать переданный файл с учетом всех размеров экранов и инлайнирует весь соответствующий критичный CSS. Это значит, что вы можете просматривать сайт на всех устройствах одинаково быстро. С учетом качества соединения 3G и 4G эта техника очень важна для пользователей мобильных устройств.

Использование Critical на продакшене

Использование инструментов типа Critical это отличный способ автоматического извлечения и инлайнирования критичного CSS, способный изменить ваш подход к разработке сайтов, но как это будет работать в реальных условиях? Чтобы проверить новые файлы в действии, произведите развертывание сайта также как и обычно — вам не надо ничего менять в вашем рабочем окружении. Вам нужно запомнить только то, что вам нужен Grunt каждый раз, когда вы вносите изменения в файлы CSS.

Представленные в статье образцы кода работают с одним файлом CSS, но что делать, если у вас их больше, целый каталог? Ваш Gruntfile можно легко обновить, чтобы он работал со всеми этими файлами:

Вы также можете заставить Grunt обрабатывать каждый файл HTML в нужном каталоге:

Эти образцы помогут вам понять, как использовать Critical на вашем сайте.

Тестирование

Как всегда, важно тестирование всех изменений. Если вы хотите это сделать, к вашим услугам есть несколько волшебных инструментов, доступных бесплатно онлайн. Начните с Google’s PageSpeed Insights, проверив свой URL. Вы заметите, что на странице нет больше блокирующих ресурсов и ваша производительность заметно улучшилась. Возможно, вы знакомы и с инструментом WebPagetest.

Использование WebPagetest это отличный способ протестировать повременной рендеринг страницы. (Увеличенная версия)

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

Идея использования критичного CSS состоит в том, что наши страницы отображаются быстрее, предоставляя часть контента максимально быстро. Измерить эту скорость лучше всего с помощью speed index. Этот замер основано на WebPagetest и показывает, как быстро содержимое вашей страницы визуально заполняется. Speed Index замеряет визуальный прогресс загрузки видимой части страницы и расчитывает в соответствии с этим общий балл. Попробуйте сравнить измерения SpeedIndes до и после инлайнирования критичного CSS. Вы будете впечатлены разницей во времени рендеринга.

Погружаемся глубже

Как и во всех техниках оптимизации у нашего метода есть свои плюсы и минусы. Одним из недостатков инлайнирования критичного CSS является то, что вы не можете кэшировать эти CSS в браузере. Если у вас страницы генерируются динамически и часто меняются, вариант кэширования HTML-страниц вам не подойдет. А значит, инлайнированный CSS будет каждый раз загружаться по новой. Много можно добавить об инлайнировании критичного CSS и об асинхронной загрузке некритичного CSS. Мы всегда можем кэшировать некритичный CSS. в зависимости от вашего подхода можно найти аргументы за и против инлайнирования CSS в . Подробно все это разобрано в статье Ханса Кристиана Рейнля A counter statement: Putting the CSS in the head.

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

Для традиционных страниц техника инлайнирования подходит лучше, но здесь тоже многое зависит от вашей ситуации. Используете ли вы клиентский JavaScript для генерации HTML? Что делать с одностраничными приложениями (SPA)? Чем раньше вы выведете критичный CSS, тем быстрее страница будет рендерится. Важно понимать, как работает критичный CSS, если вы используете его. Мне импонирует позиция Гая Поджарны по этому поводу:

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

В своей статье “Почему инлайнирование не панацея?”, он дает хорошие рекомендации о том, что нужно и что не нужно делать при инлайнировании CSS.

Метод еще не совершенен

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

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

Дополнительные ресурсы

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

Также есть другие плагины, извлекающие критичный CSS, например, Penthouse и criticalCSS . Также советую прочитать статью How we make RWD sites load fast as heck от Filament Group, в ней также есть хороший обзор этой техники ускорения загрузки веб-страниц.

Редактор Smashing Magazine, Виталий Фридман написал статью о том, как улучшали производительность на сайте, используя эту технику. Если вы хотите узнать больше о критическом пути рендеринга, есть полезный курс от Udacity. Также есть интересные статьи от Google, особенно в части улучшения передачи CSS. Патрик Хамман написал также написал неплохую статью.

Инлайнируете ли вы критичный CSS по умолчанию? Какие инструменты вы используете? С какими проблемами вы сталкиваетесь? Делитесь мнениями в комментариях к статье.

Добавить комментарий