Как отложить некритические стили?

Я использую Chrome DevTools для аудита моего сайта. На одной из веб-страниц было сказано: "Ресурсы блокируют первую окраску вашей страницы. Подумайте о том, чтобы поставить критически важные встроенные JS/CSS и отложить все некритические стили JS /. Узнайте больше". Я пытаюсь нажать "Узнать больше" и перейти к этой статье https://developers.google.com/web/tools/lighthouse/audits/blocking-resources, где говорится, что для javascript можно использовать defer / async, для css, можно определить тип носителя.

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

Спасибо

Источник

2 ответа

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

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

      <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/critical.css">
</head>
<body>
    ...
    <link rel="stylesheet" href="/nonCritical.css">
</body> ...
Источник
  • добавить критический css в раздел заголовка.. как обычный css..
  • отложите все остальные стили... вы можете прочитать больше здесь https://web.dev/defer-non-critical-css/ и посмотреть на пример ниже..

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

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

Источник
Другие вопросы по тегам