Когда PageSpeed Insights находит на странице внешние таблицы стилей, препятствующие ее отображению на экране, выводится сообщение "Оптимизируйте код CSS".
Браузеры запрашивают внешние файлы CSS перед отображением контента на экране. Это приводит к задержке и замедляет обработку страницы.
Если внешние ресурсы CSS имеют малый объем, их можно вставить непосредственно в документ HTML без подключения внешних файлов. Подобное встраивание позволяет браузеру продолжать загрузку страницы. Обратите внимание: если файл CSS слишком велик, после его встраивания PageSpeed Insights может вас предупредить, что верхняя часть страницы имеет слишком большой объем (правило приоритета видимого контента). Если файл CSS слишком велик, вам необходимо найти код CSS, отвечающий за контент в верхней части страницы и встроить его в HTML, отложив загрузку остальных стилей.
Более того, из-за ограниченного размера пакетов, которыми стороны обмениваются в ходе медленной начальной фазы соединения, ваш бюджет критического CSS составляет около 14 Кб. Если вы его превысите, браузеру понадобится дополнительный roundtrip для получения стилей. Удержаться в рамках бюджета вам помогут CriticalCSS и Critical. Возможно, их придется применять для каждого шаблона типовой страницы.
Пример встраивания небольшого файла CSS
Если документ HTML выглядит следующим образом:<html> <head>а ресурс small.css имеет вид:
<link rel="stylesheet" href="small.css">
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
.yellow {background-color: yellow;}то вы можете встроить необходимый код CSS следующим образом:
.blue {color: blue;}
.big { font-size: 8em; }
.bold { font-weight: bold; }
<html>Оригинальный файл small.css загружается после загрузки страницы. Порядок применения правил CSS определяется путем внедрения всех элементов <style> и <link> в документ с помощью JavaScript.
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<link rel="stylesheet" href="small.css">
Не встраивайте URI больших объемов данных
Будьте осторожны при встраивании URI данных в файлы CSS. В то время как использование URI небольших объемов данных иногда имеет смысл, при встраивании URI, ссылающихся на объемные файлы, код CSS верхней части страницы может увеличиться, что замедлит загрузку страницы.Не встраивайте атрибуты CSS
Не следует встраивать атрибуты CSS в элементы HTML (например, <p style="...">), так как это приводит к излишнему дублированию кода. Кроме того, подобное встраивание по умолчанию блокируется правилами по безопасности контента.Tree Shaking — это способ очистки кода за счёт включения только того, который используется в рабочем проекте. Для исключения лишних неиспользуемых стилей из CSS можно использовать UnCSS или Helium.
Свойство contain
Свойство contain позволяет разработчикам разграничить конкретное поддерево и основное дерево DOM.Браузер отрисовывает содержимое всех элементов полностью, даже если конкретный элемент не видно при загрузке (вне viewport). При установке свойства contain: paint; браузер может пропустить отрисовку того элемента, который находится «вне области видимости», и поэтому отрисовка остального содержимого происходит быстрее.
Минификация
На сегодняшний день существует целый ряд CSS компрессоров и сравнительная таблица по ним. Утилита Shorthand работает без Gulp и делает приблизительно следующее:Минификацию CSS также можно произвести с помощью плагинов gulp, например
Еще инструменты для уменьшения объема CSS YUI Compressor и cssmin.js.
С помощью специального скрипта можно убрать из CSS правила для неиспользуемых селекторов. Как правило исходные файлы не меняются, создаются новые файлы.
- PurifyCSS (работает без gulp)
- gulp-uncss
Еще один похожий скрипт на Python - mincss (код на GitHub).
Для асинхронной загрузки CSS можно использовать специальный скрипт или более простой вариант.
Комментарии
Отправить комментарий