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

Як виправити сукупний зсув макета у WordPress?

9

Google спонукає веб -майстрів вжити всіх заходів, необхідних для покращення швидкості завантаження сторінки. Швидкість завантаження сторінки вашого веб -сайту вимірюється на основі кількох параметрів, які ви можете побачити в інструменті Google PageSpeed ​​Insights. Зсув кумулятивного макета (CLS) є одним із критеріїв вимірювання швидкості Core Web Vital. Це важливий фактор не тільки для підвищення швидкості, але і для кращого користувацького досвіду. У цій статті ми розповімо про різні причини проблеми з CLS та про те, як виправити сукупну помилку зсуву макета у WordPress.

Що таке кумулятивний зсув макета?

Перш ніж читати далі, необхідно зрозуміти, що таке CLS. Простіше кажучи, це зміна в макеті вмісту, що спричиняє поганий досвід користувача. Наприклад, ви збираєтесь натиснути кнопку на сторінці, і раптом зображення банера завантажиться зверху і натисне кнопку вниз. Врешті -решт, ви випадково натиснете на зображення, що може перевести вас на іншу сторінку. Це дуже поганий досвід користувача, і в Google є хороше пояснення в цій статті, яку ви можете прочитати далі.

Пов’язані: Як увімкнути завантаження зображень у Google Chrome?

Перевірка помилки кумулятивного макета

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

Як виправити сукупний зсув макета у WordPress?

Перевірте проблему CLS у PSI

Щоб знайти елементи, що викликають проблеми, прокрутіть униз до розділу діагностики та поставте прапорець у розділі «Уникати великих зрушень макета». Тут Google покаже список елементів, що спричиняють зміну макета, на перевіреній сторінці.

Як виправити сукупний зсув макета у WordPress?

Уникайте великого зсуву макета

Перевірте деталі в Google Search Console

Ви можете переглянути URL -адреси сторінок із проблемою CLS у своєму обліковому записі Google Search Console. Після входу до свого облікового запису перейдіть до розділу «Основні веб -показники» в розділі «Покращення». Ви можете знайти звіти як для мобільних пристроїв, так і для комп’ютерів, щоб переглянути сторінки з темою “Проблема CLS: більше 0,25 (мобільний) / (настільний комп’ютер)".

Як виправити сукупний зсув макета у WordPress?

Проблема CLS у Google Search Console

Натисніть на проблему, щоб переглянути зразок URL -адреси на вашому сайті, на який вплинула проблема CLS, та середній час роботи CLS. Google вважатиме CLS проблемою відповідно до таблиці нижче:

Добре Потребує покращення Бідний
<0,1 с 0,1-2,25 с > 0,25 с

Тому вам потрібно націлитись на скорочення часу CLS менш ніж на 0,25 секунди, щоб зробити цей інструмент зеленим/жовтим у інструменті PSI та видалити помилки зі свого облікового запису Search Console.

Виправте помилку кумулятивного зсуву макета у WordPress

Ось деякі фактори, які можуть спричинити сукупну затримку зсуву макета на сайті WordPress. Давайте детально пояснимо кожну проблему та можливі шляхи її вирішення.

1 Оптимізація доставки CSS

Як ви бачите на наведеному вище знімку екрана "Уникайте великих зрушень у макеті", перший пункт-"<div class =" footer-row рядка ">". Це дивно, оскільки немає можливості завантажити розділ нижнього колонтитула над областю згину. Після перевірки ми зрозуміли, що це через опцію «Оптимізувати доставку CSS», включену за допомогою плагіна WP Rocket. Ця опція створює критичний CSS і вставляє його у розділ заголовка, щоб видалити CSS, що блокує рендеринг. Однак у багатьох випадках це призведе до сукупної проблеми зсуву макета. Якщо ви використовуєте WP Rocket або будь -який інший плагін кешування для вбудовування CSS у заголовок, вимкніть цю опцію та перевірте, чи допомагає покращити затримку CLS.

2 AdSense та інші сценарії реклами в ATF

Багато видавців використовують Google AdSense або іншу рекламну мережу для монетизації свого вмісту в Інтернеті. Щоб показувати рекламу, вам потрібно вставити фрагмент коду оголошення JavaScript на свою веб -сторінку. Як правило, вам потрібно вставити код оголошення у верхній частині сторінки (ATF), щоб збільшити видимість реклами та дохід. Однак це безпосередньо вплине на швидкість завантаження сторінки та створить сукупну помилку зсуву макета в інструменті Google PageSpeed ​​Insight (PSI).

Після повного завантаження вмісту у верхній частині сторінки ваша реклама почне завантажуватись і відштовхувати вміст вниз.

Як виправити сукупний зсув макета у WordPress?

Зміщення макета через рекламу

Існує кілька варіантів вирішення цієї проблеми. Один з них – відкласти сценарій оголошення в WordPress за допомогою таких плагінів, як WP Rocket. Однак це вплине на показ ваших оголошень і коефіцієнт кліків, зменшуючи загальний прибуток.

Як виправити сукупний зсув макета у WordPress?

Затримка виконання оголошення JavaScript

Другий варіант – використовувати оголошення з фіксованою шириною над областю згину, як рекомендує Google. На жаль, Google також дає зрозуміти, що використання фіксованої ширини неможливе для адаптивних або плавних оголошень.

Неможливо зарезервувати місце для цих рекламних місць перед запитом вмісту оголошення, а оголошення з плавним розміром завжди викликають зміну макета. Щоб пом’якшити наслідки зрушень макета під час роботи з текучими рекламними місцями, ми рекомендуємо наступне: Використовуйте лише розмір текучого середовища для прорізів нижче згину.

Google

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

3 Використовуйте правильні розміри зображення

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

Як виправити сукупний зсув макета у WordPress?

Відсутня ширина та висота зображення

4 шрифти, що затримують завантаження вмісту

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

Як виправити сукупний зсув макета у WordPress?

Проблема зі шрифтом

  • Ефективним способом вирішення цієї проблеми є використання плагіна кешування для попереднього підключення та попереднього вибору доменів DNS, таких як домен fonts.googleapis.com та fonts.gistatic.com. Це допоможе вам прискорити завантаження шрифтів, попередньо підключивши сервер шрифтів Google. SG Optimizer, WP Rocket (автоматичний) та багато інших плагінів пропонують цю функцію, яку можна використовувати для цієї мети. Крім того, ви можете обмежити кількість сімейств шрифтів та їх вагу, а також зменшити розмір завантажуваного файлу.

Як виправити сукупний зсув макета у WordPress?

SG Optimizer Оптимізація веб -шрифтів

5 значків шрифтів у меню та ATF

Багато тем WordPress використовують піктограми шрифтів у області навігації для показу пунктів підменю. Як правило, ці піктограми включені зі сторонніх веб -сайтів, таких як шрифт awesome або icomoon. Це створить подібні проблеми, такі як шрифти, та збільшить час сукупної зміни макета. Такі теми, як GeneratePress, дозволяють вибирати значки SVG замість шрифтів для навігаційного меню. Подібним чином у темі Astra можна відключити завантаження бібліотеки шрифтів за допомогою користувацької функції. Таким чином ви можете покращити сукупну проблему зсуву макета в WordPress. Однак у вас не буде іншого вибору, окрім відключення пунктів підменю у більшості інших тем, що є поганим рішенням.

6 Логотип для ледачого завантаження зображення

Веб -майстри неправильно розуміють попередження PSI на тему «Відкласти зображення поза екраном». Це попередження виникає, коли ви не ледаче завантажуєте зображення, доступні під вмістом нижче складової (BTF). Однак, якщо ви використовуєте плагін у WordPress, усі зображення з HTML

Щоб скоротити час CLS у інструменті PSI, потрібно виключити зображення логотипу з ледачого завантаження. Рішення залежить від плагіна, який ви використовуєте для ледачого завантаження зображень. Наприклад, у WP Rocket перейдіть до розділу «Медіа> LazyLoad» і вкажіть назву логотипу або URL -адресу, щоб виключити їх із ледачого завантаження.

Як виправити сукупний зсув макета у WordPress?

Виключити логотип із ледачого завантаження

7 Ледачі завантаження повзунків зображень у ATF

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

Пов’язані: 25 порад із SEO щодо ранжування вашого сайту WordPress.

8 Рендеринг, що блокує JavaScript, наприклад jQuery

Остання тема – популярний JavaScript, що блокує рендеринг, завдяки темам на основі jQuery. Фактично, WordPress також містить jQuery як частину папки wp-include. Ви можете відкласти jQuery та інші сценарії блокування візуалізації на своїй сторінці за допомогою плагіна кешування, такого як W3 Total Cache. Однак обов’язково ретельно протестуйте свій сайт, щоб уникнути порушень макетів.

Перевірка виправлення в Google Search Console

Вирішивши проблему, обов’язково подайте підтвердження в обліковий запис Google Search Console. Ви можете повернутися до розділу «Основні веб -показники» та надіслати перевірки для всього сайту.

Як виправити сукупний зсув макета у WordPress?

Перевірка проблеми CLS у Google Search Console

Це займе до 28 днів, перш ніж Google перевірить проблему CLS на вашому сайті та покаже відповідні результати в обліковому записі Search Console.

Висновок

Як ви бачите, основна причина сукупної помилки зсуву макета у WordPress – це розміщення сценаріїв, що блокують візуалізацію, над областю вмісту згину. Це можуть бути рекламні коди, jQuery, шрифти, значки або будь -які інші речі. Рішенням для вирішення цієї проблеми є використання простих мінімалістичних тем, таких як GeneratePress або Astra. З іншого боку, ви можете використовувати плагіни кешування для попереднього з’єднання та комбінувати файли шрифтів, щоб скоротити сукупний час зміни макета.

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

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