Некоторые ресурсы блокируют первую отрисовку страницы css

Обрабатываем блокирующий рендеринг CSS для ускорения рендеринга сайта

От автора: я все время думала, что вопрос, когда и как загружать CSS-файлы, лучше оставить самому браузеру. Браузеры спроектированы для работы с такими вещами. Зачем разработчикам что-то делать, если можно просто добавить ссылку с rel=»stylesheet» и href=»style.css» в head документа и забыть?

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

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

Проблема: CSS блокирует рендеринг

Если вы хоть раз пользовались Google Page Speed Insights для проверки производительности сайта, вы должны были встречать сообщения подобного содержания:

Онлайн курс «Веб-разработчик с нуля до PRO»

Изучите курс и разработайте полноценную CRM-систему управления контактными данными клиентов

Вы научитесь верстать сайты на HTML и CSS, изучите JavaScript. Сможете разрабатывать на PHP серверную часть сайта — и сделаете первые проекты для портфолио.

Google Page Insights описывает проблему и предлагает стратегию ее решения.

Сначала давайте попробуем лучше понять суть проблемы.

Для отображения веб-страниц браузеры используют DOM (Document Object Model) и CSSOM (CSS Object Model). DOM – модель HTML, необходимая браузеру для рендеринга структуры страницы и ее контента. CSSOM – карта CSS, которую использует браузер для стилизации веб-страниц.

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

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

Концепция критического CSS

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

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

За этой мыслью кроется доминирующий на сегодня подход по решению нашей проблемы и предложения из сообщения Google Page Insights. Что нас интересует: «Попробуйте отложить загрузку блокирующих ресурсов или делайте это асинхронно, или же встройте критические части ресурсов напрямую в HTML.»

Но как отложить загрузку стилей на странице или сделать ее асинхронной?

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

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

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

Ilya Grigorik иллюстрирует простой способ минимизации блокировок рендеринга страницы, который делится на два этапа:

необходимо разбить внешний CSS на несколько файлов по медиа типам и медиа запросам, тем самым избегая загрузки больших CSS-документов;

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

Как пример, ссылки на внешние CSS-файлы в head документа могут выглядеть так:

Источник

Некоторые ресурсы блокируют первую отрисовку страницы css

Устраните ресурсы, блокирующие рендеринг

Published on четверг, 2 мая 2019 г. • Updated on вторник, 11 августа 2020 г.

В разделе Opportunities (Возможности) отчета Lighthouse перечислены все URL-адреса, блокирующие первую отрисовку страницы. Цель: уменьшить влияние URL-адресов, блокирующих рендеринг, путем встраивания критических ресурсов, отсрочки загрузки некритических ресурсов и удаления всего неиспользуемого.

# Какие URL-адреса помечаются как ресурсы, блокирующие рендеринг?

Lighthouse отмечает два типа URL-адресов, блокирующих рендеринг: скрипты и таблицы стилей.

Скрипт помечается, если он:

Таблица стилей помечается, если она:

• Не имеет атрибута disabled . Если этот атрибут присутствует, браузер не загружает таблицу стилей.
• Не имеет атрибута media , который соответствует конкретному устройству пользователя. media=»all» считается блокирующим рендеринг.

# Как определить критические ресурсы

Первый шаг к уменьшению воздействия ресурсов, блокирующих рендеринг, — это определить, что критично, а что нет. Используйте вкладку Coverage в Chrome DevTools, чтобы определить некритический код CSS и JS. Когда вы загружаете или запускаете страницу, вкладка показывает, какое количество кода из всего загруженного реально использовалось.

Вы можете уменьшить размер своих страниц, отправляя только тот код и стили, которые вам нужны. Щелкните URL-адрес, чтобы просмотреть этот файл на панели Sources (Источники). Стили в файлах CSS и код в файлах JavaScript отмечены двумя цветами:

• зеленый (критический): стили, необходимые для первой отрисовки; код, который важен для основных функций страницы;
• красный (некритический): стили, применяемые к контенту, который не виден сразу; код, неиспользуемый в основных функциях страницы.

# Как избавиться от скриптов, блокирующих рендеринг

Как только вы определили критический код, переместите этот код из URL-адреса, блокирующего рендеринг, во встроенный тег script на вашей HTML-странице. Теперь во время загрузки у страницы будет всё необходимое для обработки основных функций.

Если в URL-адресе, блокирующем рендеринг, есть код, который не является критическим, вы можете сохранить его в URL-адресе, а затем пометить URL-адрес атрибутами async или defer (см. также статью «Добавление интерактивности с помощью JavaScript»).

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

# Как избавиться от таблиц стилей, блокирующих рендеринг

Используйте прием, аналогичный переносу критического кода во встроенный тег , встройте критические стили, необходимые для первой отрисовки, в блок элемента head HTML-страницы. Затем асинхронно загрузите остальные стили, используя ссылку preload (см. статью «Отложите загрузку неиспользуемого CSS»).

Подумайте об автоматизации процесса извлечения и встраивания CSS верхней половины полосы с помощью инструмента Critical.

Другой подход к устранению стилей, блокирующих рендеринг, — это разделить эти стили на разные файлы, организованные по медиа-запросам. Затем добавьте атрибут media к каждой ссылке таблицы стилей. При загрузке страницы браузер блокирует только первую отрисовку, чтобы получить таблицы стилей, соответствующие устройству пользователя (см. статью «Блокирующий рендеринг CSS»).

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

# Рекомендации по стекам

# AMP

# Drupal

Подумайте об использовании модуля для встраивания критического кода CSS и JavaScript или о потенциальной асинхронной загрузке ресурсов через JavaScript, например, с помощью модуля Advanced CSS/JS Aggregation.

# Joomla

# WordPress

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

# Ресурсы

Updated on вторник, 11 августа 2020 г. • Improve article

Источник