Независимо от того, какой веб-сайт вы создаете, в современном мире у вас будет хотя бы несколько стилей CSS. Несмотря на это, производительность CSS часто упускается из виду. Не беспокоиться! Есть несколько простых приемов, которые вы можете использовать, чтобы легко повысить скорость ваших таблиц стилей.
1. Убедитесь, что файлы HTML не блокируются.
Обычно мы импортируем файл CSS в наш HTML следующим образом:
Проблема в том, что он загружает файлы CSS синхронно и предотвращает рендеринг остальной части страницы до полной загрузки таблицы стилей. Это может быть нежелательно. Вместо этого мы можем предварительно загрузить таблицы стилей, которые могут помочь предотвратить блокировку рендеринга с помощью простого ключевого слова: preload.
Это указывает браузеру получить эти таблицы стилей на ранних этапах жизненного цикла страницы, прежде чем остальная часть страницы будет отрисована - Таким образом, это помогает предотвратить любую блокировку отрисовки, которая потенциально может возникнуть из-за поздней загрузки таблиц стилей.
2. Переместите важные стили CSS во встроенную таблицу стилей.
Браузер не будет отображать элемент DOM, пока не будут загружены все соответствующие стили. Это может быть проблемой, если все стили ваших элементов хранятся в одной большой таблице стилей, загрузка которой занимает секунды. Вместо этого мы можем улучшить взаимодействие с пользователем, переместив все критические стили CSS внутрь HTML-файла:
Это означает, что мы можем визуализировать все критические элементы DOM до того, как будут загружены остальные таблицы стилей. Есть несколько инструментов, которые помогут вам узнать, какие стили являются важными, а какие - нет. Один из них - grunt-critical, который можно использовать вместе с Grunt.
3. Используйте предварительное подключение, чтобы быстрее загружать шрифты.
Когда браузер запрашивает шрифты, он выполняет поиск в DNS, устанавливает TCP-соединение, а затем запрашивает шрифты с сервера. Эти шаги могут вызвать значительное замедление. Вместо этого мы можем установить эти соединения до того, как браузер узнает, что ему нужно будет запросить шрифты с опцией preconnect в атрибуте rel.
Это указывает браузеру установить DNS-поиск и TCP-соединение, как только страница загружается, вместо того, чтобы выполнять их всякий раз, когда браузер достигает той точки в файле CSS, где требуется поиск шрифта.
Заключение
Производительность с CSS часто упускается из виду и затмевается производительностью серверной части, базы данных или даже JavaScript. Однако HMTL предоставляет нам несколько действительно простых и удобных в использовании API-интерфейсов, которые могут повысить скорость наших страниц, иногда со значительным отрывом.
