Рендер блокирует ресурсы Page Speed

Question

Я провел анализ скорости моего веб-сайта с помощью Page Speed ​​Insights и дал совет, который дает мне инструмент:

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

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

Что вы думаете об этом?

Answer 1

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

Возможно, вы захотите поместить специфичные для вашего устройства CSS в разные файлы (например, pc_styles)..css для версии для ПК, sp_styles.css для смартфонов) и добавление атрибута media в теги <link>.

<link rel="stylesheet" href="sp_styles.css">
<link rel="stylesheet" href="pc_styles.css" media="screen and (min-width: 500px)">

В приведенном выше примере pc_styles.css не будет использоваться для браузеров с шириной экрана менее 500 пикселей.Это экономит время загрузки и предотвращает блокировку рендеринга в мобильных браузерах.

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

defer.js (примечание: Я являюсь автором этого скрипта ) - это очень крошечный скрипт (менее 500 байт) для эффективной загрузки JavaScript.Расширенная версия (около 1 КБ) поддерживает файлы CSS, изображения и фреймы.Все они просты в использовании.

Полные примеры кодов можно найти здесь .