Вынесение «критических» стилей CSS
Четвертая часть серии «Разгоняем показатели PageSpeed до 100»
Критические стили — это CSS, необходимый для отображения «видимой» части страницы (контента выше скролла). Встраивание прямо в <head> ускоряет отрисовку, ведь браузеру не нужно ждать загрузки основного CSS файла.
Как вынести критические стили в <head>
Расскажу про метод, которым пользуюсь сама - просто через инспектор определяю названия классов, которые есть на первом экране и через поиск в CSS файле вытаскиваю все стили, относящиеся к ним.
Далее эти стили выносим в тег <style> в <head> перед файлами CSS.
<style> /* здесь записываем все "критические" стили */ </style> <!-- а дальше подключаем остальные в файлах --> <link rel="stylesheet" href="main.css">
Выносение таких стилей полезен и прибавляет до 5 баллов производительности:
✅ На медленных соединениях (мобильные устройства)
✅ Если основной CSS-файл большой по весу
✅ Для лендингов, где важна мгновенная отрисовка
Важно эти сами "критические" стили не перевалить за условные 15 кб - иначе толку от этого будет мало.
Проверяйте, что критические стили не конфликтуют с остальными И... Наверняка существуют какие-то онлайн сервисы или дополнения, чтобы автоматом вытащить такие стили - если есть известные вам, поделитесь в комментах! ))
В зелёную зону не все доходят, но ты можешь!pagespeed_clean_css
Держи серию “Разгоняем PageSpeed и Lighthouse” по хэштегу #pagespeed в Telegram (@naweba) или читай на Teletype.