Разделение загрузки стилей на 3 этапаАкселератор для WordPress

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

Стили оптимизируются и загружаются 3-ям группами.

3 группы#

Оптимизация стилей (CSS)#

  • Выделение критических частей

    Это очень сильно влияет на показатель First Contentful Paint (FCP). Т.к. чем быстрее загрузятся первоначальные данные страницы, тем быстрее она нарисуется. Обычно, у сайтов много некритичных стилей, которые могут быть отложено загружены. По опыту прибавляет в среднем 10-15 баллов к показателю.

    css-split-scheme

  • Встраивание

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

  • Группировка

    Снижает количество запросов к серверу, тем самый уменьшает время загрузки страницы. По опыту прибавляет в среднем 5-10 баллов к рейтингу, влияя на показатель Total Blocking Time (TBT), важность которого подняли с 25% до 30% в 8 версии PageSpeed.

  • Отложенная загрузка шрифтов

    Делается стандартно через добавление font-display:swap атрибута. Плюс они не попадают в критические стили, что снижает размер страницы, особенно когда используются объемные Google Fonts. Настраивается тут.

  • Минификация

    Одновременно делается вместе с выделением критических частей, что экономит время.

Добавить комментарий