как встроить критическую часть данных js css в код html и отложить загрузку остальных ресурсов
Above-the-Fold CSS — как ускорить загрузку сайта не замедлив разработку
В старые добрые времена мы с Google PageSpeed Insights были на короткой ноге. Я — клепал дешевые шаблоны, Google — ставил высокую оценку за скорость их загрузки. Однако со временем многое поменялось, и хоть я по-прежнему клепаю дешевые шаблоны, Google начал вставлять мне палки в колеса.
Я думаю многие видели следующие комментарии в отчетах Google PageSpeed Insights:
Автоматическая генерация критического CSS
В интернете накопилось уже достаточно информации на эту тему. В двух словах Google заявляет, что мне следует отложить загрузку стилей, которые не влияют на отображение верхней части моей страницы, которая попадает в окно просмотра (viewport) сразу после загрузки страницы, а необходимые стили вставить непосредственно в код html.
Вручную выделять нужные стили я посчитал задачей невыполнимой, поэтому занялся поиском средства автоматизировать этот процесс. На сегодняшний день я нашел только три инструмента, созданных с целью генерации необходимых стилей:
1. Устанавливаем необходимые модули:
2. Открываем gulpfile.js и подключаем их:
3. Далее необходимо указать путь к вашей странице и стилям:
В данном примере стили будут вставлены непосредственно после комментария Critical CSS в файл index.html.
Готово! Теперь Google PageSpeed Insights перестанет ругаться на этот пункт, и переместит его во вкладку «Выполненные правила».
Как ускорить загрузку: оптимизируем код верхней части страницы
В статье:
Скорость загрузки сайта важна для удержания пользователей на ресурсе и для ранжирования в поисковиках. На скорость загрузки влияет и скорость интернета, и географическое положение, но веб-мастеры могут повлиять только на то, что связано с их ресурсом. Быстрее загружаются легкие страницы, а уменьшить вес сайта можно с помощью оптимизации кода, стилей и других элементов.
Когда пользователь переходит по ссылке, он оценивает сайт по тому, что видит в первые несколько секунд. Сперва загружается верхняя часть страницы, поэтому важно оптимизировать ее так, чтобы пользователь мог увидеть контент как можно быстрее. Так пользователь поймет, что остальной контент тоже скоро подгрузится, и сможет начать изучать страницу.
Узнать примерную скорость загрузки можно с помощью инструмента PageSpeed Insights от Google. Он оценивает скорость сайта и выводит советы по улучшению показателя.
Фрагменты проверки инструментом PageSpeed Insights
Для оценки Google определил девять правил, инструмент считает количество баллов по соответствиям.
Правила PageSpeed Insights:
Бесплатный инструмент «Проверка скорости сайта» от PR-CY.RU использует такие же правила для анализа скорости и учитывает показатель Google Core Vitals, который поисковик обещает ввести в 2021 году.
Фрагмент проверки
Инструмент оценивает загрузку на десктопе и мобильной версии, дает советы и пояснения по каждому пункту.
Если вам или вашему клиенту важна скорость загрузки сайта, учитывайте рекомендации инструмента и уделяйте внимание оптимизации верхней части страницы.
Как оптимизировать код верхней части страницы:
Ускорить загрузку части страницы, которая первой появляется при переходе на сайт, поможет оптимизация. Для этого можно как минимум удалить лишние символы и скрипты из верхней части кода, сжать код алгоритмами, настроить загрузку из кэша.
Удалить код JavaScript и CSS из верхней части страницы
В верхней части кода HTML-страницы используйте только контент, нужный для загрузки первого экрана, остальной перенесите вниз. Скрипты JS и CSS влияют на отклик страницы, но не нужны в той части, которая загружается первой. Они тормозят браузер, и получается, что пользователь не видит часть страницы, на которую они влияют, но уже ждет ее загрузку.
Исходный HTML-код страницы:
Файл стилей small.css будет подгружаться после загрузки первой страницы.
Использовать асинхронную загрузку Javascript и CSS
Браузер загружает код HTML построчно, но загрузка множества файлов Javascript может тормозить весь процесс. Для некоторых пользователей с медленным интернетом тормозить могут и файлы стилей. Чтобы браузер не останавливался на загрузке этих файлов, а продолжал подгружать остальной код, настраивают асинхронную загрузку Javascript и CSS.
Асинхронная загрузка позволит браузеру продолжать загружать основной код HTML и другие нужные ресурсы независимо от загрузки сторонних элементов.
Настроить асинхронную загрузку Javascript
Если на сайте есть видео со сторонних сервисов или другие внешние элементы, браузеру придется ждать загрузки всех элементов Javascript. Недоступное видео или другие проблемы с контентом могут вообще заблокировать загрузку сайта. Чтобы этого не произошло, используют Friendly iFrame или асинхронную загрузку.
Создайте пустой div блок в том месте, где нужно отобразить элемент:
Перейдите в конец страницы и вставьте скрипт для асинхронной загрузки перед :
Скрипт работает во всех современных браузерах.
Настроить асинхронную загрузку CSS
Быстрее показать страницу пользователю с медленным интернетом поможет асинхронная загрузка CSS. Рекомендуют применять ее только к вспомогательным CSS, иначе страница появится сначала вообще без стилей, а потом будет перерисовываться.
Настроить асинхронную загрузку CSS можно несколькими способами, к примеру, через «rel=preload»:
В некоторых версиях браузеров, к примеру, в Firefox 57, «preload» по умолчанию отключен, поэтому событие «onload» не сработает. Учитывайте это и догружайте данные скриптом:
Скрипт cssrelpreload.js by loadCSS на GitHub включает поддержку rel=preload для файлов CSS файлов. Он сработает, если в браузере нет родной поддержки «preload».
Настроить асинхронную загрузку с jQuery
Для своей работы веб-мастера используют библиотеки скриптов. По данным графика популярности библиотек в вакансиях, в 2017 году библиотека jQuery была на пике популярности. Ее использование выросло и в 2018, хоть в вакансиях стал чаще появляться React.
График популярности библиотек в вакансиях: слева 2017, справа 2018
Библиотека скриптов jQuery содержит набор готовых функций Javascript, которые помогают писать код.
Для работы подключите версию библиотеки, которая у вас поддерживается.
Настроить асинхронную загрузку Javascript с jQuery
Для настройки асинхронной загрузки Javascript с jQuery нужно добавить свойство «async»:
Это отключит последовательную загрузку, поэтому добавьте событие «onload»:
Функция «init» будет вызвана после загрузки jQuery.
Настроить асинхронную загрузку CSS с jQuery
jQuery подходит и для асинхронной загрузки CSS. Для того используйте код:
Он должен загружаться после остальных элементов страницы и jQuery. К примеру, использование с методом «ready»:
Ускорить получение первых байтов (TTFB)
TTFB (Time To First Byte) — это время, которое прошло с момента отправки запроса клиентом до получения им первого байта. Чем меньше показатель, тем быстрее браузер начинает загружать страницу.
Яндекс и Google не используют показатель TTFB в ранжировании, но если это время больше 200 мс, нужно заняться оптимизацией, чтобы пользователь не ждал начала загрузки.
Чем больше запросов выполняет браузер, тем дольше может быть загрузка. Проверить, сколько HTTP-запросов генерирует страница, можно на панели разработчика браузера. В Google Chrome и Mozilla Firefox для этого нужно вызвать на странице команду «Посмотреть код» (Ctrl + Shift + I), найти вкладку Network, перезагрузить страницу и отфильтровать по типу HTML (Doc). Появится список запросов со статусами ответов и временем загрузки.
Список запросов со статусами на главной странице Яндекс
Также данные о TTFB есть в Pagespeed и в Google Analytics: перейдите в «Поведение» — «Скорость загрузки сайта» — «Обзор», в блоке «Среднее время ответа сервера» увидите TTFB в секундах.
Если проходит слишком много времени до загрузки верхней части страницы, проверьте гипотезы:
Объединить CSS в один файл, объединить JavaScript
На каждый отдельный файл нужен отдельный HTTP запрос. Некоторым разработчикам удобнее хранить разные стили CSS или коды JavaScript в разных файлах, но если стилей много, браузеру придется делать много запросов, что тормозит загрузку. Для оптимизации кода рекомендуют объединять все стили CSS в один файл.
Файлы JavaScript тоже нужно объединять, чтобы уменьшить количество HTTP запросов при загрузке страницы. Способ объединения такой же, как в случае CSS-файлов.
Объединяем файлы JavaScript:
Использовать алгоритмы сжатия
Меньше объем файла — быстрее загрузка. Алгоритмы сжатия данных хоть и нагружают сервер для выполнения архивирования, но уменьшают объем данных. За счет этого браузер принимает более легкие файлы и справляется с ними быстрее.
Сейчас популярны алгоритмы gzip или brotli. Сервер сжимает данные перед отправкой тем способом, который браузер может декодировать, и отправляет ему архивы. Лучше использовать оба алгоритма: большинство браузеров поддерживаеет только gzip, но в ряде случаев сработает brotli, который тратит чуть больше ресурсов, но сжимает данные сильнее.
Можно найти плагины для CMS или включить сжатие вручную. Подробно о подключении алгоритмов сжатия для разных серверов в статье «Как уменьшить вес сайта и ускорить загрузку страниц: использовать сжатие gzip или brotli».
Минифицировать файлы CSS и JavaScript
Данные делают легче не только с помощью алгоритмов сжатия. Еще CSS, Javascript и HTML можно минифицировать — сократить методом удаления лишних символов, которые не влияют на работу кода, но занимают место. Удаляют пробелы, комментарии, переносы строк и табуляцию, в файлах стилей сокращают названия цветов.
После минификации файл будет сложнее читать, но зато он будет меньше весить и быстрее загружаться. Обычно сокращенную версию сохраняют отдельно с расширением «.min».
Минификация CSS
Минифицировать файлы CSS и JavaScript
Коды JavaScript тоже можно сократить — удалить лишние символы и сократить переменные. Чтобы не делать это вручную, для минификации есть автоматические сервисы — загружаешь в него код и скачиваешь версию в сокращении.
Подробнее о сервисах и особенностях минификации в статье «Как уменьшить вес сайта и ускорить загрузку страниц: использовать минификацию HTML, CSS и JS»
Использовать кэш браузера
Когда пользователь заходит на сайт в первый раз, его браузер загружает всю графику, все элементы JavaScript и CSS-файлы. Последующие загрузки страницы будут быстрее, если настроить кэширование в браузере пользователя. Тогда браузер сохранит файлы, и ему не придется загружать их с сервера повторно.
Кэшировать рекомендуют элементы, которые редко изменяются. Настройте подходящий период хранения данных в кэше, чтобы пользователь всегда видел актуальную версию страницы.
Для сервера Nginx в файле конфигурации настройте модуль Expires: перечислите форматы файлов для кэширования через с прямой слэш «|», укажите время хранения в секундах.
О других способах настройки кэширования есть в статье «Как использовать кэш браузера для ускорения: кэширование для Nginx и Apache, метод Cache-Control и кэширование по времени».
Загружать данные с помощью CDN
Еще один способ сократить время загрузки данных — использовать популярные CDN. CDN (Content Delivery Network) — это сетевая структура серверов в разных географических точках, которые хранят контент и быстро отдают его клиенту. CDN нужны, чтобы сайт открывался с одинаково быстрой скоростью для пользователей из разных географических точек. Они сокращают время загрузки, ускоряют рендеринг, защищают от DDoS, скраперов и ботов.
Система по времени отклика или количеству промежуточных хопов выбирает ближайший сервер, который отдаст контент конкретному пользователю — чем быстрее, тем лучше. Браузер сохранит в кэше файлы из библиотеки, поэтому загружать их повторно в следующих посещениях не понадобится.
Разработчики выбирают CDN в зависимости от потребностей бизнеса и бюджета. Hhostings.info собрали двадцать CDN с лучшими отзывами и составили топ CDN 2019.
Пользователь переходит на сайт и ожидает увидеть загрузку контента. Если на сайте ничего не появится, ждать он не будет, поэтому рекомендуем ускорить загрузку части страницы, которая появляется первой. Тогда пользователь сможет изучать контент, пока остальные элементы подгружаются.
Как использовать критический CSS для повышения производительности веб-сайта
Мы одержимы скоростью – как ускорить загрузку веб-сайтов. Как часто говорят об автомобилях: «Ты можешь ехать так быстро, как хочешь – сколько ты хочешь потратить?» В этом отношении автомобили и веб-дизайн похожи – скорость требует времени и денег. Мы обнаружили, что один из лучших способов увеличить скорость веб-сайта по доступной цене – это внедрение Critical CSS. Мы делаем это для всех пользовательских проектов веб-дизайна. Однако многие люди не знают о Critical CSS – это немного загадка. Давайте разберемся, что это такое и как его использовать, чтобы вы могли ускорить время загрузки своего сайта и повысить показатель PageSpeed Score. В качестве дополнительного преимущества вы превратите кофе в пиво. Обещание.
Что такое критический CSS?
Если вы проверили скорость веб-сайта и получили сообщение типа «Устраните блокирующий рендеринг JavaScript и CSS в верхней части содержимого» или «Устраните CSS, блокирующий рендеринг», то вы знаете, чем Critical CSS не является. Полное сообщение обычно читается примерно так:
На вашей странице есть 2 блокирующих ресурса CSS. Это вызывает задержку в отображении вашей страницы.
Ни один из содержимого верхней части страницы не может быть отображен без ожидания загрузки следующих ресурсов. Попробуйте отложить или асинхронно загрузить блокирующие ресурсы или встроить критические части этих ресурсов непосредственно в HTML.
Оптимизируйте доставку CSS для следующего:
https: //yourdomain.com/some/path/to/some/file.css
https: //yourdomain.com/some/path/to/some/other/file.css
И когда вы перейдете по ссылке “Оптимизировать доставку CSS”, вы получите полезную информацию от Google, например
Прежде чем браузер сможет отображать контент, он должен обработать всю информацию о стиле и макете для текущей страницы. В результате браузер будет блокировать рендеринг до тех пор, пока внешние таблицы стилей не будут загружены и обработаны, что может потребовать нескольких циклов и задержать время для первого рендеринга. См. Создание, макет и рисование дерева рендеринга, чтобы узнать больше о критическом пути рендеринга, и CSS, блокирующий рендеринг, чтобы узнать, как разблокировать рендеринг и улучшить доставку CSS.
Но потом он переходит в довольно тяжелые вещи, что меня угнетает. Итак, вы идете выпить кофе и, возможно, перекусить, и, может быть, включите новый альбом NERD (Lemon довольно горячий) и попытаетесь забыть обо всем этом. Я был на вашем месте.
Это не должно вызывать уныние. Давайте разберемся с этим. Google говорит правду. Браузер должен загрузить и проанализировать всю разметку (HTML) и стили (CSS), прежде чем он сможет отобразить страницу. Он также должен делать то же самое для всего Javascript, хотя это тема для другого обсуждения. Просмотрите исходный код на своей странице, перейдите сверху вниз и откройте все эти таблицы стилей CSS…
Именно здесь на помощь приходит критический CSS – возьмите весь этот CSS, удалите только то, что необходимо для отображения содержимого верхней head > части страницы, поместите этот CSS прямо в раздел, отложите остальной CSS в нижний колонтитул страницы с помощью НАКАЛИВАНИЯ группы loadCSS или прямо переместив link rel=»stylesheet» href=»path/to/your/css/style.css» > в нижнюю часть страницы (Argh, я знаю, CSS не должен идти туда), а затем пойти получить пиво, потому что вы просто ускорило все… Выпейте это пиво и отправьте своему клиенту хороший счет.
Зачем использовать критический CSS?
Потому что скорость. Потому что круто. Но на самом деле это важно. Итак, вот как вы оправдаете только что выпитое пиво и только что отправленный счет. Существует миллион онлайн-статистических данных от известных людей, таких как Amazon, Intuit и Google, и еще много чего, что может сказать вам, насколько скорость страницы влияет на все. По правде говоря, вы читаете это, потому что хотите выяснить, как устранить CSS, блокирующий рендеринг, и ускорить работу вашего сайта. Итак, давайте продолжим.
Над сгибом – очень древний термин графического дизайна, пришедший из газетных дней. Это часть газеты, которая была видна над частью, сложенной пополам. Бумага – помните?
Что выше сгиба?
Над сгибом находится все содержимое, которое зритель видит перед прокруткой. Другими словами, это самая важная часть веб-сайта – материала
(так же называемая “Главный экран”)
Не существует универсально определенной высоты в пикселях того, что считается над содержимым сгиба – Интернет подвижен, и есть много устройств, таких как ваш телефон, ваш холодильник, ваш новый автомобиль.
Внешний CSS – любой CSS, загруженный через внешнюю таблицу стилей – который требуется для рендеринга этого верхнего раздела страницы, считается блокирующим рендеринг, потому что он делает именно это – блокирует рендеринг страницы до тех пор, пока он не будет загружен и проанализирован.
Критический CSS – это своего рода противоположность CSS, блокирующего рендеринг – минимальная, наиболее важная часть стиля, необходимая для отображения верхней части страницы. Обычно он содержит все стили для структуры сетки, навигацию и основные стили шрифтов. Чтобы сгенерировать Critcial CSS, вам нужно будет выбрать точку на странице, над которой вы считаете CSS Critical. Это произвольно и зависит от вас. Мы используем безопасное число около 1300 пикселей.
Все это замечательно, но как мне создать и добавить критический CSS (не для WordPress)?
Ладно, хватит бегать вокруг да около. Приступим к делу. Вот как это сделать.
Лучший бесплатный ресурс для создания Critical CSS – это потрясающий Critical Path CSS Generator от Джонаса Олссона Адена. Позже вы узнаете о нем больше, так как он перенес этот замечательный ресурс в еще лучшие места.
Ваш минимизированный Critical CSS в style > теге head > должен выглядеть примерно так (с гораздо большим количеством CSS)
Если вы вручную кодируете веб-сайты, тогда вы отправляетесь в гонки. Выполните указанные выше действия, промойте и повторите. Готово.
Все это замечательно, но как мне создать и добавить критический CSS на WordPress сайт?
Большинство людей не занимаются программированием вручную. Вы, вероятно, используете какую-то систему управления контентом, такую как WordPress. В этом случае у вас есть пара проблем, которые нужно решить
Решения
Вот как мы справляемся с этими проблемами
Наш рабочий процесс… Gulp + Penthouse = Kapow!
Мы используем Gulp – набор инструментов JavaScript – для автоматизации множества надоедливых задач, связанных с веб-разработкой. Создание критического CSS снова и снова каждый раз, когда есть изменение стиля, которое влияет на содержимое над сгибом, может, мягко говоря, раздражать. Так что Gulp – идеальный инструмент для автоматизации процесса.
Для создания Critical CSS мы изначально использовали генератор CriticalCSS от Filament Group, и это здорово. Я не историк, но Filament Group, похоже, вышла на сцену одной из первых. Однако репозиторий обновляется нечасто.
Йонас Олссон Аден (помните его, он разработал потрясающий + бесплатный Critical Path CSS Generator) указал нам на Penthouse, созданный им для Critical CSS. Это быстрее, чаще обновляется. Мы перешли на Penthouse, чтобы выполнить тяжелую работу по созданию Critical CSS. В Penthouse есть масса отличной документации с примерами от простой реализации до пакетирования множества страниц за раз.
Эта установка работала как жемчужина для создания множества критических CSS:
Стоит отметить, что при одновременном запуске большого количества страниц в Penthouse может истечь время ожидания. Ознакомьтесь с этим отличным справочником, чтобы получить информацию о пакетной обработке запусков Penthouse, чтобы ваш бедный компьютер не взорвался.
Беги gulp criticalcss и наблюдай, как компьютеры делают то, в чем они хороши – много работы
Хотя это работает отлично, первое решение, состоящее в добавлении условных тегов непосредственно в заголовок, позволяет поднять критические файлы CSS выше в разделе заголовка, что лучше, поскольку браузер быстрее добирается до критических файлов CSS.
Вы используете высококлассный рабочий процесс Critical CSS? Или все это вообще не имеет смысла? Вы пьете пиво или кофе? Дайте нам знать об этом в комментариях. И особая огромная благодарность Йонасу Олссону Адену за всю его работу над Penthouse и за то, что он предложил большие изменения в этом посте, в том числе внесение поправок.
Обновление
Обновлен включает новую функциональность Penthouse – спасибо Йонасу Олссону Адену. Он работает над новым способом группировки более крупных серий генерации критического CSS, и мы обновим этот пост этими деталями, когда они появятся.
Настройка плагина Autoptimize
Код любого сайта состоит из смеси html-кода, скриптов Java и css для правильного отображения.
Цель любой оптимизации — объединить все JavaScript в один файл и убрать его в конец страницы, объединить все стили CSS в один файл и поместить его в верхнюю часть (head). Что и делает этот плагин Autoptimize.
Если, допустим, объединить 15 файлов стилей css в один, то общее время загрузки страницы уменьшится — легче загрузить один (хоть и большой) файл, чем 15 мелких. Но видимую часть вы не увидите, пока не загрузится этот большой файл. Решение этого вопроса рассмотрим в последней части статьи.
Autoptimize опции JavaScript
Оптимизировать код JavaScript? Настройка просто оптимизирует (сокращает) код скриптов.
На этом этапе (примем его за начальный) на странице нахожу 35 JavaScript.
Объединить файлы скриптов? Настройка включает объединение файлов JavaScrip в один файл, который будет подгружаться из нижней части сайта. Это хорошо для «пузомерок», но иногда могут проявляться проблемы с отображением некоторых элементов на сайте.
Объединить встроенные JS? Этот параметр помещает все ваши скрипты в html. Увеличения производительности я не заметил, но при этом плагин создает значительно больше своих JS файлов с кэшем (и размер общего кэша растет).
Исключить скрипты из Autoptimize. Если у вас на сайте перестал работать некоторый функционал, попробуйте исключить используемый им JavaScript из оптимизации. Например, сломался баннер — ищем его скрипт-файл и добавляем.
Добавить try-catch обертывание? Если какой либо скрипт выдает ошибку, он может прервать работу последующего скрипта. Плагин оборачивает все скрипты, своим тегом, что позволяет пропустить ошибку и подгрузить все остальное правильно.
Опции CSS
Оптимизировать код CSS? Оптимизация (сокращение) кода стилей CSS.
Объединить файлы CSS? Опция включает объединение стилей-файлов CSS — они останутся загружаться в «верхней» части сайта, но вместо 10-20 файлов будет один.
Объединять встроенный CSS? Стили прописанные HTML в разных местах (не файлами css), будут объединены в один кусок HTML.
Создать данные: URI для изображений? Если у вас в файлах CSS прописываются пути к картинкам размером меньше 4 КБ, они не будут подгружаться как отдельный запрос, а будут идти в загрузке вместе с основным файлом CSS. Уменьшение количества запросов — всегда плюс для «пузомерок». Пример такой картинки — «галочка» в списках.
Встроить и отложить выполнение CSS? Самый интересный и сложный пункт. Он позволяет интегрировать в HTML только тот CSS код, который используется для отрисовки видимой части сайта. И отложить загрузку всех остальных CSS и, самое главное, переместить их из шапки.
Рассмотрим этот пункт отдельно ниже.
Встраивать все CSS? Стили из файлов CSS и HTML прописываются в шапку (head) сайта в виде HTML. Визуально большой блок кода виден в шапке, что на мой взгляд может не понравиться поисковым системам.
Исключить CSS из Autoptimize. Можно исключить из оптимизации некоторые CSS файлы, если это вызывает проблемы.
Параметры HTML
Оптимизировать код HTML? Это позволяет удалить лишние пробелы, переносы и пр. в коде страницы. Значительной производительности пункт не дает, но небольшой плюсик от поисковых систем мы получить возможно сможем.
Сохранять комментарии HTML? В коде могут присутствовать пометки. Они не нужны для правильной работы кода и служат, в основном, для удобства редактирования, дабы не вспоминать какой код за что отвечает.
Этот пункт ничего не изменяет в теме, а просто берет код и добавляет его в свой единый файл и именно в нем их не будет. Поэтому галочку можно не ставить, т.к. это лишние килобайты.
Критический CSS
Это тот пункт который я обещал рассмотреть отдельно. Помещая в шапку сайта только ту часть CSS, которая необходима для отрисовки видимой части первого экрана мы имеем:
Этот минус, обычно, никак не сказывается на рейтинге «пузомерок», да и вы скорее не заметите разницу в скорости загрузки сайта. А за удаление из хедера файла CSS, поисковая система погладит нас по головке.
Я считаю этот пункт наилучшим компромиссом, который может предложить Autoptimize, в данном разделе.
Как найти код для интеграции в критический CSS?
1. Перейдите на любую станицу, нажмите правую кнопку мыши «просмотр кода страницы» или ctrl+u (для Google Chrome). Найдите css-файл созданный плагином, для этого воспользуйтесь поиском по странице (ctrl+F), введите: autoptimize.
Название примерно такое: autoptimize_6f0ee70cc9b84a1d501e9aee91e4e9a6.css. Откройте этот файл и скопируйте его содержимое.
2. Воспользуйтесь сервисом Critical Path CSS, во второй раздел которого поместите код всех стилей, скопированный ранее.
3. В первое поле введите URL любой записи вашего сайта и нажмите «Create Critical Path CSS».
4. После чего мы наконец получим, критический CSS для той страницы, URL которой Вы вводили. Осталось дело за малым, вставить полученный код в Autoptimize и сохранить настройки.
Отзывы
Неприятно удивило то, что на pagespeed/insights цифры стали хуже, чем были. Сейчас плагин отключила, но скриншоты сделала. Показательно — два огромных файла Autoptimize (JS и CSS) кушают ресурсов больше, чем куча мелких.
Очень много жалоб что файлы кэша разрастаются до огромных размеров. Юзал данный плагин несколько дней, все пытался подобрать оптимальную для меня конфигурацию, благо настроек много. На каком-то этапе Autoptimize перестал отрабатывать, не вываливается в ошибку, а просто не выполняет свои функции.
В настоящее время использую Fast Velocity Minify, который на дефолтных настройках показывает примерно те же результаты.