7 трюков по улучшению производительности CSS

От автора: каскадные таблицы стилей могут превратить скучные HTML-документы в динамические веб-страницы. Но случайное использование CSS может нанести ущерб веб-сайту еще до рендеринга. В этом руководстве рассказывается о некоторых быстрых и простых способах того, как сделать улучшение CSS для ускорения загрузки вашего веб-сайта.

Что такое CSS?

Каскадные таблицы стилей или CSS — это язык, используемый для определения визуального представления веб-сайта на основе содержимого, содержащегося в документе языка разметки. Он считается одной из «краеугольных технологий» Интернета наряду с HTML и JavaScript. CSS обычно хранится во внешних таблицах стилей или .css-файлах, но также может быть интегрирован непосредственно в HTML-документы.

CSS позволяет разделить представление и контент на веб-сайте, что делает сайты более доступными для разных устройств. Сохранение информации о цветах и шрифтах отдельно от содержимого также снижает сложность веб-сайта, поскольку несколько HTML-страниц могут использовать один и тот же файл .css. Однако при неправильном использовании CSS с самого начала может стать камнем преткновения в производительности вашего сайта.

Производительность CSS и скорость сайтов

При оценке скорости веб-сайта существует множество показателей эффективности, однако два из них выделяются:

Время до первого байта – это сколько времени требуется, чтобы посетители получили первый байт данных после запроса URL-адреса. Время начала рендеринга — это момент, когда браузер пользователя фактически начинает отображать контент. Первый в значительной степени зависит от настройки вашего сервера, но последний больше зависит от того, как структурирован ваш CSS.

Тем не менее, браузеры не начнут рендеринг, пока не получат данные, поэтому долгое время до первого байта, очевидно, оттянет рендеринг. Таким образом, вы должны уделять первоочередное внимание разрешению любых потенциальных проблем на вашем сервере, прежде чем сможете воспользоваться всеми преимуществами оптимизации производительности CSS.

Как производительность CSS влияет на время начала рендера

Прежде чем браузер сможет начать раскладывать содержимое веб-страницы, ему нужны инструкции в виде HTML и CSS. Таким образом, рендеринг не может начаться до тех пор, пока все внешние таблицы стилей не будут загружены и обработаны. Чем больше запросов требуется, тем больше посетителю придется ждать.

Использование внешнего CSS включает в себя отправку одного или нескольких HTTP-запросов, поэтому ваша цель должна заключаться в максимально возможном минимальном количестве требуемых запросов. Например, добавление стилей компоновки плагинов, баннеров и макетов в один .css-файл может значительно ускорить время до первого рендеринга.

Улучшение производительности CSS: знакомство с инлайном

Одним из способов обеспечения быстрой доставки CSS является практика встраивания. Вложение означает вставку внешних ресурсов CSS непосредственно в документы HTML. Этот метод лучше всего подходит для небольших ресурсов. Однако он сильно отличается от обычного способа.

Вложение CSS сокращает объем данных, которые браузер должен загрузить, прежде чем он сможет начать рендеринг страницы. Когда вы используете внешние файлы CSS, они должны быть загружены отдельно после завершения загрузки разметки. Вложение позволяет убить двух птиц одним камнем, если можно так выразиться.

Чтобы встроить CSS, просто скопируйте нужный код CSS из внешнего файла CSS и вставьте его между тегами style в разделе head вашего документа HTML следующим образом:

Инлайн крупных ресурсов CSS

Если вы попытаетесь встроить большой файл CSS, вы можете получить предупреждение от своего инструмента тестирования производительности о том, что ваш лишний контент слишком велик. Поэтому для больших файлов CSS вы должны вставлять только CSS, необходимый для рендеринга контента, который отображается в верхней части экрана. Затем необходимо загружать полную таблицу стилей асинхронно, чтобы страница могла продолжать рендеринг во время анализа.

Critical CSS — это проект GitHub, который поможет вам выбрать, какой CSS принадлежит верхней части страницы, но вы также должны выполнить ручную проверку, чтобы исключить отсутствие критических компонентов.

После минификации и сжатия все стили верхней части страницы, скрипты, разметка в идеале должны весить менее 14 кб. Так как 14 kb — это примерно объем данных, которые сервер может отправить в первом запросе. Пребывание под этим порогом позволяет пользователям получить данные верхней части страницы в первом пакете, который они получают.

Улучшение производительности CSS с помощью асинхронной загрузки и кэширования

Вышеупомянутый трюк экономит браузеру пользователя один запрос на сервер, поэтому пользователь при первом посещении быстро увидит контент. К сожалению, у этого преимущества есть компромисс: браузер пользователя не кэширует CSS, поэтому все нужно загружать с нуля при каждом будущем посещении. Если у вас довольно простой CSS, это не такая проблема; однако в большинстве случаев вы все равно хотите, чтобы браузер пользователя кэшировал большую часть вашего CSS. Вот почему многие веб-разработчики просто вставляют CSS на свою домашнюю страницу или целевые страницы при использовании внешнего CSS для остальной части своего сайта.

Умный способ обойти эту проблему — асинхронная загрузка. К сожалению, нет способа асинхронно загружать файлы CSS изначально, но вы можете использовать скрипт типа loadCSS.js.

Инструменты для улучшения производительности CSS

Если вы хотите увидеть, как другие разработчики структурируют свой CSS, инструмент доставки CSS Varvy может показать вам, как любой веб-сайт использует CSS. Это отличный инструмент для оценки ваших собственных проектов и сравнения их с другими.

Еще советы по улучшению производительности CSS

1. Используйте preload / HTTP/2 Push

Ресурсная подсказка preload указывает браузеру вытянуть ресурсы заранее. Чтобы дать CSS фору, укажите в HTML ссылку следующим образом:

Также preload можно вставить в HTTP заголовок в настройках сервера:

Если ваш сервер настроен на HTTP / 2 (должен быть), предварительная загрузка будет интерпретироваться как нагрузка на сервер. KeyCDN также поддерживает push-сервер, который поможет еще больше ускорить доставку высокоприоритетных файлов CSS.

2. Не нужно инлайнить все

Не стремитесь инлайнить все в HTML-файл, так как это приведет к увеличению размера исходного документа HTML и, следовательно, TTFB потребуется больше времени.

3. Соединяйте и минифицируйте CSS

Объединение ваших таблиц стилей в один файл и отправка минифицированной версии могут значительно уменьшить размер CSS.

4. Уменьшите размер стилей

Чем меньше ваших таблиц стилей и чем меньше селекторов они содержат, тем меньше браузеру придется выполнять работы при рендеринге веб-страницы. Поэтому вы должны сделать все возможное, чтобы удалить ненужные селекторы, использовать служебные классы и избежать дублирования кода CSS. Вы можете использовать такой инструмент, как uncss, чтобы убедиться, что ваша таблица стилей содержит только необходимый CSS-код.

5. Выбирайте селекторы

Говоря о селекторах, использование селектора-потомка заставляет браузеры проверять все ваши дочерние элементы на соответствия – это может создать больше проблем. Универсальные селекторы также могут быть довольно тяжелыми, поэтому избегайте их. По возможности используйте мелкие селекторы.

6. Не используйте тяжелые свойства

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

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

7. Избегайте @import

Никогда не используйте директиву @import для подключения внешних таблиц стилей, поскольку она блокирует параллельные загрузки. Это старая практика. Вместо этого всегда используйте тег link.

Обобщение по CSS производительности

Независимо от того, насколько ослепительно выглядит веб-страница после завершения загрузки, ни одно из ваших усилий не имеет значения, если посетители уйдут раньше загрузки. Интеграция вышеуказанных стратегий в код позволит вам создавать веб-сайты, которые ускоряются и выполняются последовательнее, что побуждает новых гостей возвращаться.

Источник: //www.keycdn.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: