В HTML-коде страницы много встроенного CSS. Или стили добавлены через атрибут style. На первый взгляд это ускоряет рендеринг: браузер не ждёт загрузки внешнего файла. Но на практике inline CSS часто вредит скорости и кэшированию. Разберём, когда inline CSS полезен, а когда вреден, и как найти проблему.
Что такое inline CSS
Inline CSS — это стили, которые находятся внутри HTML-документа, а не в отдельном файле. Есть два вида:
— встроенные стили в теге style в head;
— атрибут style на элементе.
Пример встроенных стилей:
<style> .header { color: red; } </style>
Пример атрибута style:
<div style="color: red;">Текст</div>
Оба варианта увеличивают размер HTML и могут влиять на кэширование.
Когда inline CSS полезен
Inline CSS может быть полезен в некоторых случаях:
— критический CSS для первого экрана;
— стили для выше-фолд контента;
— стили, которые нужны до загрузки внешнего CSS;
— стили в письмах или AMP-страницах;
— стили для компонентов, которые редко меняются.
Критический CSS — это стили, необходимые для отображения первого экрана. Их встраивание может ускорить рендеринг.
Когда inline CSS вреден
Inline CSS вреден, когда:
— его слишком много;
— он дублируется на каждой странице;
— он не кэшируется;
— он увеличивает размер HTML;
— он смешивается с контентом;
— он не минифицирован.
Основная проблема — кэширование. Внешний CSS кэшируется браузером и загружается один раз для всех страниц. Inline CSS загружается заново с каждой страницей.
Причина 1: дублирование стилей
Если inline CSS повторяется на каждой странице, браузер загружает его заново при каждом переходе. Это увеличивает общий объём загрузки.
Что проверить:
— сколько inline CSS на странице;
— повторяется ли он на других страницах;
— можно ли вынести его во внешний файл.
Для проверки используйте проверка встроенного CSS — инструмент покажет, сколько inline CSS на странице и где он используется.
Причина 2: отсутствие кэширования
Внешний CSS кэшируется браузером. Inline CSS не кэшируется отдельно от HTML. Если HTML не кэшируется, inline CSS загружается заново.
Что проверить:
— кэшируется ли HTML;
— кэшируется ли внешний CSS;
— можно ли вынести стили во внешний файл.
Причина 3: увеличение размера HTML
Большой объём inline CSS увеличивает размер HTML. Это замедляет загрузку, особенно на мобильных.
Что проверить:
— размер HTML;
— сколько из него занимает inline CSS;
— можно ли уменьшить объём.
Причина 4: смешивание стилей и контента
Атрибут style на элементах смешивает стили и контент. Это затрудняет поддержку и может увеличивать размер HTML.
Что проверить:
— есть ли атрибуты style на элементах;
— можно ли заменить их классами;
— не дублируются ли стили.
Причина 5: отсутствие минификации
Если inline CSS не минифицирован, он занимает больше места, чем мог бы.
Что проверить:
— минифицирован ли inline CSS;
— есть ли лишние пробелы и комментарии;
— можно ли уменьшить объём.
Как найти проблему
Пошаговая диагностика:
— проверьте размер HTML;
— проверьте объём inline CSS;
— проверьте, дублируется ли он;
— проверьте кэширование;
— проверьте наличие атрибутов style;
— проверьте минификацию.
Как исправить
План действий:
— вынести основной CSS во внешний файл;
— оставить только критический CSS inline;
— заменить атрибуты style на классы;
— минифицировать inline CSS;
— настроить кэширование внешнего CSS;
— проверить результат.
Как проверить результат
Чек-лист:
— inline CSS уменьшен;
— критический CSS оставлен;
— внешний CSS кэшируется;
— HTML меньше;
— скорость загрузки улучшилась;
— рендеринг не ухудшился.
Если нужно проверить сразу несколько параметров — CSS, JS, размер страницы — логично перейти к SEO-аудиту.
Частые ошибки
— весь CSS inline;
— дублирование inline CSS на каждой странице;
— отсутствие кэширования;
— атрибуты style вместо классов;
— отсутствие минификации;
— игнорирование критического CSS.
FAQ
Вреден ли inline CSS для скорости?
Может быть вреден, если его слишком много, он дублируется или не кэшируется. Критический CSS inline может быть полезен.
Что такое критический CSS?
Это стили, необходимые для отображения первого экрана. Их встраивание может ускорить рендеринг.
Когда inline CSS оправдан?
Для критического CSS, для писем и AMP-страниц, для компонентов, которые редко меняются.
Почему inline CSS не кэшируется?
Он является частью HTML. Если HTML не кэшируется, inline CSS загружается заново с каждой страницей.
Как уменьшить inline CSS?
Вынести основной CSS во внешний файл, оставить только критический CSS, заменить атрибуты style на классы.
Влияет ли inline CSS на SEO?
Косвенно. Он влияет на скорость загрузки, что является фактором ранжирования.
Можно ли использовать inline CSS для анимаций?
Лучше вынести анимации во внешний CSS. Inline CSS для анимаций увеличивает размер HTML.
Что делать, если CMS добавляет inline CSS?
Проверьте настройки CMS и плагинов. Некоторые CMS добавляют критический CSS автоматически, другие — весь CSS inline.
Как проверить объём inline CSS?
Используйте инструмент проверки встроенного CSS. Он покажет, сколько inline CSS на странице.
Стоит ли полностью отказаться от inline CSS?
Нет. Критический CSS inline может ускорить рендеринг. Важно не злоупотреблять им.
