*Більше не в бета-версії
Perfmatters додав нову функцію, у своїй версії 1.8.5 від 19 січня для видалення невикористаного CSS. Я ніколи не втомлюся рекомендувати цей плагін, який став незамінним доповненням, якщо ви хочете підвищити продуктивність свого блогу.
Для 25 USD За неповний рік вона пропонує потужний інструмент, до якого вони продовжують додавати вдосконалення. Тут у вас є посібник з конфігурації.
Я вже протестував його на WordPress 5.8 і 5.9-RC, і поки що нічого не зламалося. Хоча я вже тримав невикористану ЦСО під дуже жорстким контролем через Script Manager цього плагіна, просто активувавши цю опцію можна заощадити як мінімум пару запитів і кілька Кб.
Навіщо видаляти невикористовувані CSS?
Звичайні попередження в PageSpeed Видалити невикористовуваний CSS" або "Зменшити невикористовуваний вміст CSS" часто відображаються, коли CSS, який завантажується плагіном або шаблоном, не потрібен або не використовується на певній сторінці.
Розробники зазвичай запитують таблицю стилів лише тоді, коли вона використовується. Однак, часто додаються також додаткові стилі, які можуть бути непотрібними. Це призводить до того, що з'являється багато невикористаного CSS, що уповільнює завантаження.
Іноді він також може викликати попередження "Видалити ресурси, що блокують рендеринг".
Крім плацебо, що дозволяє поліпшити показники PageSpeed, видалення невикористаних CSS має великий вплив на скорочення часу, необхідного для завантаження сторінки до моменту, коли будь-яка частина вмісту сторінки відображається на екрані (FCP), часу, необхідного для завантаження основного вмісту веб-сторінки і його повної готовності для користувача (LCP), а також часу, необхідного для завантаження сторінки до моменту, коли вона стає повністю інтерактивною (TTI). Одним словом, знаєте, важлива частина історії Core Web Vitals.
Як знайти невикористану ЦСО?
Найпростіший спосіб знайти невикористаний CSS - протестувати URL-адресу за допомогою PageSpeed. Якщо є невикористовуваний CSS, ви побачите попередження, яке спрацює тільки в тому випадку, якщо він перевищує поріг, який Google вважає досить важливим, щоб попередити, тому, якщо сприймається швидкість завантаження (фактична швидкість, яку ви відчуваєте) хороша, не варто занадто зациклюватися на ній.
Інший спосіб знайти невикористовувані CSS - це використовувати Chrome DevTools. Відкриваємо інспектор в Chrome (Ctrl+Shift-I), натискаємо Shitft+Control+P, вводимо "Coverage" і там знаходимо невикористані байти як для CSS, так і для JS. Червоним - невикористані, синім/зеленим - використані.
Звідси, і розуміючи, що ви розпізнаєте кожен CSS, що він робить і чи можете ви видалити або відключити його зі сторінки, де ви вимірюєте, є кілька варіантів, таких як заміна певних плагінів на інші більш легкі, перегляд або розгляд можливості зміни шаблону, використання Менеджера сценаріїв для вибіркового відключення JS і CSS тощо.
Найпростіший спосіб прибрати попередження PageSpeed - активувати функцію "Видалити невикористовуваний CSS" в Perfmatters, яка робить все це автоматично. Вони стверджують, що протестували його на сотнях URL-адрес (з різними шаблонами і конфігураціями) і повідомляють про ці результати:
Середнє зниження РЦП склало 15,20%.
Середнє зниження LCP склало 19,66%.
Середній показник TTI знизився на 14,95%.
Перед активацією
Perfmatters рекомендує перед активацією цієї опції видалити будь-яку існуючу попередню завантаження CSS, яка була налаштована в Perfmatters (за винятком локальних таблиць стилів в Джерела Google) і НЕ поєднувати CSS.
Злиття CSS є застарілою технікою оптимізації з часів HTTP/2. У деяких випадках злиття CSS може навіть зашкодити продуктивності. Знову ж таки, пам'ятайте, що кожна сторінка буде вести себе по-різному в залежності від її конфігурації, і найкраще тестувати і спостерігати, поки ви не знайдете найкращий безпомилковий результат для вашого випадку.
Ви також повинні знати про можливі конфігурації інших плагінів продуктивності або кешування, які ви можете використовувати, які можуть конфліктувати або перевизначати один одного, якщо увімкнені однакові функції.
Після активації ви побачите три варіанти:
1- Затримка (за замовчуванням та рекомендована).
Ваш CSS раніше був вбудованим, і всі таблиці стилів CSS (CSS не використовується) затримуються і завантажуються при взаємодії з користувачем.
2- Async
Використовуваний вами CSS перетворюється на вбудований, а всі таблиці стилів CSS (невикористовуваний CSS) завантажуються асинхронно. Цей метод може допомогти уникнути спливаючих вікон, оскільки таблиці стилів виконуються асинхронно під час завантаження сторінки. Цей метод призведе до дещо вищого LCP/FCP, ніж попередня поведінка затримки.
3- Delete
Ваш використаний CSS стає вбудованим, а всі оригінальні таблиці стилів CSS (невикористаний CSS) видаляються. Це найбільш агресивний метод, але також, ймовірно, вимагатиме додавання винятків. Рекомендується лише досвідченим користувачам.
Після активації сторінки та записи будуть поводитися по-іншому.
Сторінки, як правило, мають багато унікальних CSS, і тому використовуваний CSS буде згенерований і вбудований окремо для кожної сторінки при першому відвідуванні. Однак, оскільки записи, як правило, мають багато спільного CSS, використовуваний CSS буде згенерований тільки один раз, при першому відвідуванні, і буде вбудований. Відмінність записів від сторінок полягає в тому, що генерація використовуваних CSS відбувається тільки один раз.
Всі використані CSS, згенеровані Perfmatters, будуть зберігатися локально за цим шляхом:
/wp-content/cache/perfmatters/tudominio.com/css/
Así se ve el CSS que genera Perfmatters, para páginas, entradas, categorías, etiquetas, búsquedas, la página de inicio o las 404.
У полі "Виключені таблиці стилів" ви можете виключити певні таблиці стилів з функції "Видалити невикористовувані CSS", додавши повну URL-адресу джерела (XXXXX.css), або додавши окрему частину URL-адреси джерела. Формат: по одному в рядку.
У наступному полі "Виключені селектори" ви можете виключити певні CSS (селектори) з функції "Видалити невикористовувані CSS", додавши ідентифікатор елемента, назву класу і т.д. (#id, .class). Формат: по одному в рядку.
Цілком ймовірно, що в якийсь момент вам знадобиться видалити використовувані CSS. Наприклад, після редизайну сторінки або після додавання нового елемента. Щоб видалити згенерований CSS і відтворити його після наступних відвідувань, просто натисніть на опцію внизу "Очистити використаний CSS".
Ви можете виключити окрему публікацію, сторінку або користувацький тип публікації з використання функції "Видалити невикористовуваний CSS". У редакторі, з правого боку, зніміть галочку з пункту "Невикористовувані CSS".
Це виключить всю сторінку і може бути корисним, наприклад, для кошика, оформлення замовлення або сторінки контактів, які можуть мати більше проблем, ніж решта сайту.
Ви також можете використовувати фільтр perfmatters_remove_unused_css, щоб змінити місце видалення невикористаного CSS на вашому сайті. Цей приклад вимкне невикористовувані CSS лише на сторінках.
add_filter('perfmatters_remove_unused_css', function($boolean) {
if(is_page()) {
return false;
}
return $boolean;
});
