TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити критичний CSS на сайті WordPress?

4

В Інтернеті є багато конструкторів веб -сайтів, які дозволяють створювати веб -сайти без технічних навичок. Тим не менш, вам потрібно вивчити деякі технічні аспекти SEO, щоб тримати свій сайт на вершині сторінок результатів пошуку. Критичний CSS – одна з таких технічних тем для оптимізації доставки контенту, що по черзі безпосередньо впливає на швидкість. Екосистема WordPress ускладнює це для звичайних користувачів, які використовують кілька плагінів на своєму сайті. У цій статті давайте розглянемо, як створити критичний CSS для сайту WordPress, щоб покращити показник Google PageSpeed.

Розуміння основ

Перш ніж обговорювати критичний CSS, необхідно розібратися в деяких термінологіях, таких як верхня частина сторінки та оптимізація доставки контенту. Крім того, вам також потрібно зрозуміти основний метод використання зовнішніх таблиць стилів на WordPress.

Над складеним вмістом

Коли ви відкриваєте веб-сайт на робочому столі або мобільному телефоні, видима частина, яку ви бачите на екрані,-це область вмісту над складною частиною сторінки. Це традиційна термінологія газет, де ви можете побачити вміст у верхній частині сторінки у верхній частині першої сторінки. Як правило, люди складали газету і над областю складання пропонують важливий вміст. Аналогічно, верхня видима частина веб -сторінки, яка завантажується першою, повинна пропонувати користувачеві найцінніший вміст. Отже, вам слід зосередитися на оптимізації видимої верхньої секції для завантаження зі швидкістю спалаху.

Оптимізація доставки контенту

Багато інструментів швидкості, такі як Google PageSpeed ​​Insights, вимірюють, як веб-сайт надає вміст у верхній частині сторінки. Ви можете розглядати це як вимірювання першої змістовної фарби (FCP). Якщо вони виявлять блокування, ви побачите попередження про видалення блокувального елемента. Однією з популярних пропозицій, які ви побачите в інструменті Google PageSpeed ​​Insights, є усунення ресурсів, що блокують рендеринг. Якщо ви натиснете цю пропозицію, Google покаже вам оптимізацію доставки критичних CSS/JS та відкладе всі некритичні CSS/JS.

Як створити критичний CSS на сайті WordPress?

Критичні пропозиції CSS та JS

Виправити JavaScript, що блокує візуалізацію (jQuery), досить легко, оскільки теми/плагіни за замовчуванням завантажують сценарії в розділі нижнього колонтитула. jQuery-єдина проблема, яка може знадобитися багатьом сайтам для завантаження вмісту у верхній частині сторінки. Оскільки WordPress також використовує jQuery, ви можете ігнорувати цю помилку, якщо вона викликана лише jQuery. В іншому випадку використовуйте такі плагіни, як WP Rocket, щоб об’єднати та доставити всі сценарії, якщо це не порушує макет вашого сайту.

Однак проблема полягає у створенні критичного CSS та його першому завантаженні. У цій статті ми розповімо, як поводитися з оптимізацією CSS, щоб покращити показник швидкості сторінки.

Пов’язані: Правильні налаштування плагіна WP Rocket для прискорення вашого сайту.

Завантаження CSS на веб -сайти

Існує кілька способів вставити CSS на свою веб -сторінку. Це можна зробити вбудованим, внутрішнім або зовнішнім способом. Найпопулярніший і рекомендований спосіб – зв’язати зовнішні таблиці стилів у розділі заголовка веб -сторінки. Оскільки вміст у розділі заголовка спочатку завантажується на веб-сторінку, він різко впливає на завантаження вмісту у верхній частині сторінки, а отже, і на швидкість сторінки.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="Link Your Stylesheet URL Here"> </head> <body> Add Your Content Here <script src="Add Your Script URL Here"></script> </body> </html>

Завантаження CSS у WordPress

WordPress використовує style.css як зовнішній файл для доставки стилів теми. Це обов’язковий файл (на додаток до functions.php) для запуску веб -сайту WordPress. Крім того, кожен плагін на вашому сайті може додавати додаткові файли CSS. Відкрийте свій веб -сайт у браузері Chrome і перегляньте вихідний код (переконайтеся, що у вас не встановлені плагіни кешування або вимкнено кешування сторінки).

Як створити критичний CSS на сайті WordPress?

Таблиці стилів у заголовку

Ви можете побачити посилання WordPress на всі зовнішні таблиці стилів у розділі заголовка сторінки. Це може спричинити численні проблеми з точки зору оптимізації:

  • Деякі теми використовують важкі стилі CSS з невеликим розміром МБ. Вам не потрібно завантажувати всі ці стилі, коли користувач відкриває веб -сторінку на робочому столі або мобільному телефоні.
  • Існують різні типи публікацій, такі як продукти, які можуть використовувати абсолютно різні стилі. У цьому випадку вам не потрібен інший CSS для початкового завантаження (у верхній частині сторінки).

Кожна сторінка вашого сайту потребує мінімального CSS для завантаження вмісту у верхній частині сторінки. Цей мінімальний CSS, необхідний для завантаження сторінки, у технічному плані називається критичним CSS. У всіх вищезазначених випадках Google PageSpeed ​​Insights та інші інструменти показуватимуть вам попередження щодо оптимізації доставки CSS.

Пам’ятайте, що видалення невикористаного CSS та сценаріїв також пов’язане із використанням занадто багато CSS / сценаріїв на сторінці. Однак це значно відрізняється від критичної оптимізації CSS. Ви навіть не можете використовувати деякі плагіни на певній сторінці. Наприклад, вам не потрібен CSS плагін контактної форми на всіх сторінках сайту. У цьому випадку файли CSS/JS із файлів контактної форми не потрібні у звичайній публікації блогу, і ви побачите попередження про невикористані CSS/JS. Перегляньте нашу статтю про те, як вимкнути невикористаний CSS/JS у WordPress та оптимізувати сторінки WooCommerce для викликів адміністратора AJAX.

Як створити критичний CSS у WordPress?

Тепер, коли ви знаєте, наскільки важливий критичний CSS для підвищення швидкості завантаження сторінки. Існує два способи створення критичного CSS для вашого сайту.

  • Створіть критичний CSS вручну та вставте на свій сайт
  • Використовуйте плагін WP Rocket для оптимізації доставки контенту

Ми детально пояснимо як процес, так і ви зможете вибрати найкращий, який підходить для вашого сайту.

Пов’язані: Чи працюватиме WP Rocket з хостингом SiteGround?

Ручна генерація критичних CSS

В Інтернеті є багато сторонніх інструментів для створення критично важливого CSS вручну. Однак це має сенс, коли всі сторінки на ваших сайтах схожі та не мають спеціального вмісту у верхній частині сторінки. Ви можете спробувати інші безкоштовні критичні служби генерації CSS, такі як Sitelocity.

  • Перейдіть на веб -сайт Sitelocity і введіть URL -адресу своєї сторінки.
  • Натисніть кнопку «Створити критичний шлях CSS».
  • Ви можете отримати мінімізований критичний CSS для своєї сторінки.

Як створити критичний CSS на сайті WordPress?

Створення критичного CSS

Тепер, коли ви створили критичний CSS, і наступне завдання – вставити його у розділ заголовка вашого сайту. Теоретично ви можете вставити стилі у свій файл header.php між тегами та. Існують плагіни, які допомагають вставляти стилі в розділ заголовка без зміни файлів шаблонів. Автоматична оптимізація – один з плагінів, які ми можемо рекомендувати для цієї мети. Якщо ви вже використовуєте функцію автооптимізації для кешування, ви також можете використовувати той самий плагін для вставлення критичного CSS.

Ви можете вставити критичний CSS у «Параметри CSS» плагіна Автооптимізація. Спочатку встановіть прапорець «Вбудований та відкладений CSS» та вставте критичний CSS у текстове поле, що з’явиться.

Як створити критичний CSS на сайті WordPress?

Параметри CSS

Як бачите, плагін Автооптимізація також може автоматично вбудовувати CSS у верхній частині сторінки, одночасно відкладаючи інші стилі. Однак це швидко збільшить розмір кешу до 100%, і у вас немає можливості автоматичного очищення кешу у плагіні. Крім того, в більшості випадків це зламає сайт. Ви можете скористатися додатком Autoptimize CriticalCSS Power-Up, який допоможе вам краще. Щоб користуватися цим доповненням, вам потрібно отримати API з сайту Criticalcss.com за 10 доларів на місяць.

Чому ручне створення критично важливих CSS не працюватиме?

Хоча описаний вище процес введення вручну виглядає простим, це непросте завдання. Нижче наведено деякі причини, чому ваш критичний CSS не працюватиме.

  • Ви можете мати різний вміст, наприклад сторінки, публікації в блогах, товари тощо. Кожен тип вмісту на вашому сайті потребує різного критичного CSS для завантаження над вмістом сторінки. Використання плагіна або вручну вставки завантажить критичний CSS на всі сторінки та зламає певний вміст.
  • Вам потрібно створювати критичний CSS щоразу, коли ви оновлюєте тему, плагін та ядро ​​WordPress. Інакше використання старого критичного CSS порушить макет вашого сайту. Це звичайно неможливе завдання для звичайних користувачів постійно оновлювати критичний CSS для кожного окремого оновлення на сайті. З доступними параметрами автоматичного оновлення вам потрібно бути дуже уважним перед оновленням плагіна/теми/ядра на вашій установці.
  • Можливо, вам знадобиться окремий критичний CSS для мобільних та настільних пристроїв.

З усіма цими проблемами залишається єдиний варіант – використати якийсь плагін, який подбає про них та генеруватиме критичний CSS динамічно та автоматично.

Створіть критичний CSS для WordPress за допомогою WP Rocket

На щастя, у вас є плагін кешування, який саме відповідає цій критичній генерації CSS у WordPress. WP Rocket – один із найпопулярніших плагінів кешування для WordPress завдяки спрощеним налаштуванням. Знову ж таки, критична генерація CSS – одна з переваг плагіна, яку будь -який нормальний користувач може отримати, не порушуючи сайт.

  • Спочатку вам потрібно придбати преміальний плагін WP Rocket.
  • Після встановлення та активації WP Rocket перейдіть до «Налаштування> WP Rocket» і перейдіть до розділу «Оптимізація файлів».
  • Прокрутіть униз і встановіть прапорець "Оптимізувати доставку CSS".

Як створити критичний CSS на сайті WordPress?

Увімкніть критичний CSS у WP Rocket

Це дозволить плагіну автоматично генерувати критичний CSS для кожного типу дописів на вашому сайті WordPress. Він містить титульну сторінку. Домашня сторінка, сторінка, публікація та будь -який інший користувацький тип публікації, який ви використовуєте на своєму сайті. За потреби можна додати резервний критичний CSS, який ви генеруєте вручну за допомогою стороннього інструменту. Як правило, це резервне критичне поле CSS можна залишити порожнім. Ви також можете ввімкнути окреме кешування мобільних пристроїв у розділі «Кеш».

Зауважте, що WP Rocket – це плагін преміум -класу з ліцензією на один сайт за ціною 49 доларів. На нашу думку, варто придбати цей плагін, оскільки він пропонує наскрізне рішення кешування для оптимізації швидкості. Плагін поставляється з однорічною підтримкою та оновленнями. Після цього він продовжить працювати, і ви зможете використовувати критичний CSS та інші функції без оновлення. Ви можете продовжити з 30% знижкою, щоб отримати підтримку та отримати будь -які додаткові функції. Це набагато кращий варіант порівняно з 10 доларами на місяць для API API kriticc для автоматичної оптимізації.

Відновити критичний CSS

Коли ви оновлюєте тему/плагін/ядро WordPress або додаєте власні типи публікацій на свій сайт, необхідно відновити критичний CSS. В іншому випадку WP Rocket використовуватиме старий критичний CSS і порушить макет вашого сайту. Тому не забудьте відновити критичний CSS.

  • Натисніть на меню “WP Rocket" на верхній панелі та виберіть опцію “Regenerate Critical CSS”.
  • Крім того, ви можете перейти на інформаційну панель плагіна та натиснути кнопку «Відновити критичний CSS».

Як створити критичний CSS на сайті WordPress?

Відновити критичний CSS

Спеціальний критичний CSS для певної сторінки

Як уже згадувалося, у вас може бути домашня сторінка або інша сторінка, створена за допомогою плагіна конструктора сторінок. Ця сторінка матиме зовсім інший критичний CSS порівняно з усіма іншими публікаціями блогу на вашому сайті. У цьому випадку вам доведеться створити окремий критичний CSS і умовно завантажити лише на цю сторінку. WP Rocket може допомогти вам досягти цього за кілька кліків.

  • Перейдіть до редактора сторінки / публікації сторінки, для якої потрібно створити окремий критичний CSS.
  • На панелі документів на бічній панелі знайдіть панель «Параметри ракети WP». Якщо ви не знайшли, натисніть кнопку з трьома крапками у верхньому правому куті та виберіть «Налаштування». У спливаючому вікні можна ввімкнути необхідні панелі документів, наявні на вашому сайті.
  • Установіть прапорець «Оптимізувати доставку CSS» і натисніть кнопку «Створити конкретну CPCSS».
  • Це створить конкретний критичний CSS для цієї сторінки, і плагін завантажить цей критичний CSS, коли користувачі відвідають сторінку.

Як створити критичний CSS на сайті WordPress?

Створіть критичний CSS для певної сторінки

Пов’язані: Огляд плагіна кешування WP Rocket.

Тестування критичних CSS

Після впровадження ручного методу або використання плагіна WP Rocket ви можете перевірити сторінку, переглянувши джерело сторінки. Обов’язково вийдіть із панелі адміністратора або ввімкніть кешування для зареєстрованих користувачів у плагіні. Як ви можете бачити на скріншоті нижче, WP Rocket додає критичний CSS у заголовок.

Як створити критичний CSS на сайті WordPress?

WP Rocket Critical CSS

Ви також можете перевірити сторінки в інструменті Google PageSpeed ​​Insights. Якщо все пройде добре, ви побачите усунені ресурси, що блокують рендеринг, та інші помилки CSS у результатах. Це означає, що ви правильно впровадили критичний CSS на сайті.

Заключні слова

Ми сподіваємося, що ця стаття підкреслила б важливість критичного CSS на сайті WordPress. Ви можете скористатися опцією вручну, якщо у вас є менший веб -сайт, який містить кілька сторінок. Однак для запущеного блогу з великою кількістю повідомлень та різними типами публікацій ви можете спробувати плагін WP Rocket. Хоча це коштує вам грошей, ви можете отримати повне рішення для кешування вашого сайту.

Джерело запису: www.webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі