Во многих руководствах по улучшению производительности рекомендуется реализовать технику критического CSS (Critical CSS). То есть выделить стили, важные для начальной области просмотра, и встроить их в
<head>.Остальные, некритические стили, загрузить асинхронно, чтобы они не блокировали отрисовку. Звучит заманчиво, но у меня эта техника оптимизации вызывает лишь вопросы и мысли о сложности реализации.
Что считать критическими стилями? Какие размеры начальной области просмотра брать за основу, если их огромное множество? Выносить ли стили скрытых элементов, которые, тем не менее, находятся на начальном экране?
Как эффективно разделять стили на критические и некритические? Как вносить изменения, чтобы критическая часть обновлялась? Как лучше загружать некритическую часть? И ещё много вопросов, ответы на которые не до конца ясны.
Единственное применение, как мне видится, в одностраничных лэндингах. Там весь CSS можно встроить в
<head> из-за небольшого объёма кода. Инструменты, такие как penthouse, как раз работают с одной страницей.Но Critical CSS, как подход, не рационален для лэндингов и в целом. Вряд-ли CSS будет узким местом, а реализация техники может не дать хоть какого-то улучшения. Гарри Робертс в статье несколько раз акцентирует на этом внимание.
Если есть проблема с долгим FCP, то стоит убедиться, а в CSS ли дело. Чаще всего проблема не в нём. Но если проблема действительно из-за большого количества CSS, то стоит применить другие техники оптимизации.
Прежде всего, сократить объём CSS за счёт грамотной стратегии разделения по страницам, разделам или компонентам и загрузкой только там, где это нужно. Это можно использовать в сочетании с элементами
<link> в <body>.Ну и, само собой, стили нужно минифицировать, сжимать хотя-бы через gzip, а лучше через brotli или zstd, проверять поддерживаемые браузеры для предотвращения лишних префиксов и трансформации и кэшировать.
#css #performance
