Привет
Продолжаю серию публикаций по оптимизации скорости загрузки сайтов для последующего прохождения аудита у Pagespeed Insight, GTMetrix и иных инструментов, которые используются в такого рода работах.
В этой статье речь пойдет о выделении критической части стилей из всей массы .css для более быстрого рендеринга вашего сайта.
Поясню: при открытии сайта все стили из "шапки" (<header>) должны быть загружены и только после этого выполнены по порядку их очередности в коде. Это значит, что время, которое будет отведено на эту операцию будет блокировать отрисовку страницы.
Таким образом для того, чтобы эти файлы не блокировали отрисовку мы должны выделить ту часть стилей, которая является критической для страницы (т.е. которая должна загрузиться в первую очередь), остальную часть стилей мы можем загрузить асинхронно, т.е. не блокируя отрисовку страницы.
Делается это следующим образом:
1. Переходим на портал https://www.sitelocity.com/critical-path-css-generator
2. Указываем в строке " Enter URL" страницу, для которой требуется выделить критическую часть CSS (Critical Path CSS) и нажимаем Generate Critical Path CSS.
3. В окне ниже получаем код критической части CSS, который необходимо вставить в шапку страницы.
4. Остальные файлы стилей можно объединить в один файл (combine), минифицировать (minify) и разместить перед закрывающим тэгом </body>
После очередной проверки сервисом Pagespeed Insight рекомендации по ресурсам, которые блокируют отрисовку должны исчезнуть. Обратите внимание на то, что это касается только стилей, про JS (javascript) мы поговорим в статьях позже.