Як оптимізувати доставку CSS у WordPress без клопоту

CSS може покращити загальний вигляд вашого веб-сайту, його легко використовувати, редагувати та підтримувати. Єдиний недолік – можливість уповільнення швидкості завантаження вашої сторінки. Тому ця стаття, створена нашою командою WpDataTables, покаже вам, як оптимізувати доставку CSS у WordPress.

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

Все про доставку CSS

По суті, CSS, каскадна таблиця стилів, робить веб-сайти привабливими, і без них веб-сайти все ще застрягли б у 90-х.

Веб-сторінки, включаючи веб-сторінки WordPress, стилізуються за допомогою CSS. Кожна тема WordPress використовує файл style.cc для створення елегантного вигляду. Додавання плагінів додасть більше таблиць стилів, наприклад, якщо завантажити плагін віджета, він додасть додатковий файл CSS (таблицю стилів), щоб створити бажаний вигляд.

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

CSS можна використовувати кількома способами для доставки в WordPress із багатьма різними налаштуваннями.

Незалежно від того, як ви налаштували свою веб-сторінку, CSS дійсно може допомогти швидше відтворити ваш сайт.

JavaScript і CSS, що блокують візуалізацію – що це?

У нашому високотехнологічному суспільстві очікується швидке завантаження сайтів, і це життєво важливо для високого рейтингу SEO. PageSpeed ​​Insights від Google може допомогти вам зрозуміти швидкість завантаження вашого сайту. Іноді під час використання інструменту з’являється попередження: «Усуньте JavaScript і CSS, які блокують відтворення, у вмісті у верхній частині сторінки», але ось вирішення цієї проблеми.

Відтворення HTML необхідно перед тим, як браузер зможе відобразити будь-яку веб-сторінку. Поки він це робить, він натрапить на сценарії та таблиці стилів і повинен зупинитися, щоб запитати та завантажити цей файл. Потім він виконує його та продовжує перегляд HTML. Більшість тем і плагінів для WordPress використовують багато файлів JavaScript і/або CSS, через що відтворення навіть однієї сторінки вашого сайту може зайняти багато часу.

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

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

Використовуйте Google Pagespeed Insights, щоб дізнатися CSS і JavaScript, які блокують візуалізацію

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

Веб-сайти відображаються порожніми або лише частково видимими, якщо CSS було завантажено неправильно або якщо CSS не оптимізовано, що може призвести до неправильних шрифтів або макетів.

Важливо розуміти, які елементи потрібні, а які ні, щоб оптимізувати доставку CSS.

Щоб почати процес блокування візуалізації, спочатку перевірте швидкість свого сайту за допомогою Google PageSpeed ​​Insights.

Ось як:

• Перейдіть на сторінку Google PageSpeed ​​Insights
• Скопіюйте та вставте URL нашого сайту у відповідне поле
• Натисніть "Аналізувати"
• Це призведе до звіту. Зверніть увагу на сценарії, які з’являються як «Усунути JavaScript і CSS, які блокують відтворення».

Зазвичай ці CSS мають вирішальне значення для вашого сайту:

• Стилі сторінок у верхній частині сторінки
• Теми
• Колір фону
• Інші залежно від типу сайту

Ці CSS зазвичай менш важливі:

• CSS у нижній частині сторінки
• CSS націлений на інші пристрої

Зменште кількість сценаріїв, що блокують рендеринг

Можна мінімізувати кількість сценаріїв, які блокують візуалізацію, на вашому сайті:

• Зменшення кількості CSS і JavaScript. Ви можете видалити будь-які непотрібні пробіли та коментарі
• Поєднання CSS і JavaScript. Візьміть різні файли .css і .js і додайте їх разом, що призведе до меншої кількості файлів.
• Відкладення завантаження JavaScript. Ви можете змусити їх завантажуватись останніми після того, як усе завантажиться, використовуючи асинхронне завантаження.

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

lCSS не потрібен на всіх сторінках постійно. Однак це існує з причини, і ви будете використовувати все це на певному етапі, де потрібен критичний шлях візуалізації.

Різні частини CSS можуть знадобитися зі сторінки «Зв’язатися з нами» та сторінки «Пропоновані послуги». Коли хтось завантажує сторінку «Послуги, які ми пропонуємо», частини CSS, призначені лише для сторінки «Зв’яжіться з нами», у цей час не потрібні, однак цей CSS усе ще завантажується, оскільки веб-майстру потрібні завантажені всі файли CSS для відтворення веб-сторінки.

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

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

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

Не видаляйте скрипти, необхідні для хорошого UX; це важливіше, ніж спроба отримати вищий бал.

Оптимізація критичного шляху візуалізації в WordPress

Критичний шлях відтворення вказує на порядок, у якому браузер виконує завдання для відтворення вашої сторінки, тобто послідовність, у якій він завантажує та обробляє CSS, HTML і JavaScript і показує їх у браузері.

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

Щоб якнайшвидше завантажити розділ у верхній частині сторінки, ви повинні:

• Створіть HTML так, щоб у ньому було пріоритетне завантаження частин у верхній частині сторінки
• Мінімізуйте дані, які використовуються CSS, JS і HTML

Більше пояснень можна знайти в посібнику Google PageSpeed. Іноді дані, необхідні для завантаження ATF, перевищують вікно перевантаження (до 14,6 Кб). У цьому випадку від сервера до браузера та назад потрібно здійснити більше мережевих маршрутів. У мобільних мережах із високою затримкою сторінка не завантажується.

DOM будується по одній частині браузером, що може скоротити час, необхідний для відтворення ATF. Структуруйте HTML так, щоб спочатку завантажувався вміст у верхній частині сторінки, а потім – решта сторінки.

Процес оптимізації вимагає постійного вдосконалення, моніторингу та вимірювання.

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

Якщо вам сподобалося читати цю статтю про те, як оптимізувати доставку CSS у WordPress, ви повинні переглянути цю статтю про те, як додати мета-теги в WordPress без плагіна.

Ми також писали про кілька пов’язаних тем, як-от як вставити pdf-файл у WordPress, як вставити excel у html, як приховати вибране зображення в публікації WordPress, як визначити, чи є сайт WordPress, як видалити WordPress із cPanel і як створити такий веб-сайт, як Amazon.