BoriHagen
@BoriHagen

Как разделить критический css?

Есть сайт на хостинге. Нужно ускорить его загрузку на стороне клиента. Google Page Speed дет рекомендацию "Устраните ресурсы, блокирующие отображение".

Есть огромный css файл в котором очень много неиспользуемого кода. Насколько я понял, нужно вырезать критическую часть css и загружать ее сразу, а остальное загружать потом. Вопрос состоит в следующем: Как это должно выглядеть? Я вырезал критическую часть css с помошью онлайн сервиса и теперь надо сдалть так, чтобы она загружалась первой, а остальноая часть потом. Типа мне надо разделить большой css фал на два файла и подгружать сперва критический. Но как мне вырезать отдельно некритическую часть? Ведь иначе будет грузиться сперва критический css а потом опять весь большой файл.
  • Вопрос задан
  • 88 просмотров
Решения вопроса 1
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
1. Средний по адкватности метод (без углубления в суть задачи) — в head вызывать критический CSS, а в подвале после всего остальное.
2. Использовать хак типа такого для остального кода:
<link rel="stylesheet" href="/css/style.css" media="none" onload="if(media!=='all')media='all'" >
, с созданием fallback-а для случая, когда не включен JS.
3. Генерировать вызов через document.write с помощью JS (но это по сути одна из вариаций и насколько я помню опасна тем, что безопасность браузером на такое триггериться, не уверен, поэтому просто прими к сведению).

4. Просто адекватно подойти к генерации стилей и не грузить того, что не должно быть на странице. Читай как хочешь, хоть билд для каждой страницы свой (не самое лучшее, ибо кеш).

UPD: В любом варианте, основной CSS должен грузится в head. А остальной код (если такой есть) какими-то иными способами.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
aliencash
@aliencash
Партизан
Критическую часть вы не загружаете, а размещаете через style в теге head. Общий файл грузите асинхронно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы