Розуміння WordPress CSS
Перш ніж заглибитись, давайте розберемося, як працює звичайний CSS у WordPress.
Кожна тема WordPress складається із style.css, який містить весь код, необхідний для стилізації вашого сайту. Розробники тем повинні підтримувати всі функції WordPress, які включають повідомлення в блогах, коментарі, сторінку продуктів, сторінку членства, форми тощо. Інші плагіни, що встановлюються вами, також можуть додавати аналогічні таблиці стилів css.
Це може зробити css файли роздутими і мати великий розмір 200 КБ або навіть більше.
Що таке Critical Path CSS?
У міру зростання файлів CSS ваш браузер повинен завантажувати ці великі файли, аналізувати їх і відображати. Також відомий як блокування рендерингу. Це також збільшить перше змістовне відмальовування і перше значуще відмальовування.
Critical Path CSS – це CSS, який потрібний для візуалізації зазначеного вище вмісту кожної веб-сторінки. Як випливає з назви, критичний CSS, який допомагає браузеру швидко малювати і відображати його перед завантаженням повних файлів CSS.
Зазвичай CSS критичного шляху вбудований в заголовок, а вихідний файл CSS завантажується асинхронно або в нижній колонтитул для зручності використання.
Чому Critical Path CSS такий важливий?
Ви, мабуть, вже бачили попередження від таких інструментів, як Google PageSpeed ?
Критичний CSS не має нічого спільного з часом завантаження сторінки. Це не збільшує/не зменшує час завантаження. Але дає набагато кращий досвід користувача. Це допомагає швидко візуалізувати або розфарбувати веб-сторінку.
- Покращує перше змістовне малювання (FCP)
- Покращує першу значну оплату (FMP)
- Видаліть CSS (технічно не видаляйте його, а віддавайте пріоритет «корисному» CSS).
Ось два скріншоти мого блога із критичним CSS і без нього.
Як ви можете бачити в розділі "без критичного шляху css", знадобилося майже 5 секунд, щоб показати користувачеві щось корисне на мобільному пристрої. Браузер повинен зробити додатковий HTTP-запит до файлу CSS, завантажити його, проаналізувати, щоб почати рендеринг. Але при використанні критичного css всі необхідні css повинні бути вбудовані, і браузер може почати рендеринг відразу після завантаження файлу HTML протягом секунди або менше.
Як створити критичний CSS у WordPress?
Є кілька способів згенерувати критичний CSS в WordPress.
Використання плагінів кешування
WP Rocket – це плагін кешування преміум-класу, який справді добре працює.
Одна з причин, через яку я використовую WP Rocket на кожному сайті, - це сама генерація критичного CSS. Вони генерують Critical CSS окремо для домашньої сторінки, сторінки повідомлень, сторінки категорії, сторінки продукту тощо. І вбудовують його. Вони відновлять критично важливий CSS, якщо зміни в темі або налаштування.
Все можна зробити одним натисканням кнопки.
Інші плагіни кешування, які можуть генерувати критичний CSS
Swift Performance та LiteSpeed (потрібний сервер LiteSpeed/OpenLiteSpeed) – аналогічні плагіни, які можуть генерувати Critical CSS. Обидва ці плагіни мають хмарний і повний кеш, вбудований у їхні сервери.
Використання Autoptimize + Free Critical CSS Generator
Існують сторонні онлайн-інструменти, які надають важливі CSS, вводячи URL-адресу вашого сайту. pegasaas – такий чудовий безкоштовний інструмент.
Ось як це зробити:
Крок 1. Перейдіть на https://pegasaas.com/critical-path-css-generator/ та введіть свою URL-адресу. Скопіюйте згенерований "Critical Path CSS".
Крок 2 У параметрах автоматичної оптимізації (увімкніть розширені налаштування) у розділі «Параметри CSS» встановіть прапорець «Вбудувати та відкласти CSS» та вставте скопійований CSS.
Плюси:
- Безкоштовно
Мінуси:
- Немає окремого критичного CSS для різних типів сторінок (наприклад: домашня сторінка, сторінка повідомлень, сторінка категорії, сторінка продукту тощо)
- Не змінювати автоматично при зміні теми / налаштування
Чому сам WordPress не може генерувати критичну CSS?
Як ви вже помітили, створення CSS критичного шляху включає зовнішні служби. То чому ж сам WordPress не може його згенерувати?
Створення Critical CSS стало можливим завдяки проектам з відкритим кодом, таким як Critical (від Google), CriticalCSS або penthouse. Всі ці проекти ґрунтуються на NodeJS, а не на PHP. Отже, вам необхідно встановити NodeJS на свій сервер. Більшість провайдерів загального/керованого хостингу не дозволяють це з кількох причин.
