Як оптимізувати свій веб-сайт для Core Web Vitals (Adsense)

Перегони за покращенням Core Web Vitals непрості. Це стає складніше, якщо ви покладаєтеся на рекламну програму, як Google AdSense, щоб монетизувати свій веб-сайт.

Веб-сайти, на яких працює Google AdSense, мають у 10 разів більше шансів провалити тест Core Web Vitals, ніж той самий веб-сайт без Google AdSense. Це здебільшого через кількість сторонніх запитів і активів, які Google AdSense додає на ваш веб-сайт. Більшість із цих активів є неоптимізованими, великими та незручними для користувача.

За межами AdSense і рекламних платформ, якщо у вас багато неоптимізованих зображень, JavaScript і CSS, особливо у верхній частині сторінки, ви, швидше за все, не пройдете тест Core Web Vitals.

Якщо ви намагалися пройти тест Core Web Vitals і покращити свій потенціал у рейтингу пошукової системи, ви знайдете практичні рішення в цій статті.

Що таке Core Web Vitals?

Основні веб-показники – це показники, створені на базі Google Lighthouse, які визначають, наскільки веб-сайт забезпечує хорошу взаємодію зі сторінкою. Хоча під час виконання тесту існує багато показників, найважливішими показниками є найбільший малюнок вмісту (LCP), затримка першого введення (FID) і сукупний зсув макета (CLS).

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

Підводячи підсумок, ви можете сказати, що Core Web Vitals не мав на меті стати жахом для веб-майстрів, а засобом для покращення взаємодії зі сторінками веб-сайтів.

Найбільший показник контентного відображення (LCP) : LCP вимірює час, необхідний для завантаження найбільшого видимого зображення або текстового блоку на веб-сторінці. Якщо найбільший видимий текст або зображення завантажується швидко, вважається, що решта зображень і тексту завантажуватимуться швидко. Необхідний час завантаження становить 2.5 секунди.

Затримка першого введення (FID) : FID вимірює інтерактивність веб-сторінки. Вона визначається тим, скільки часу потрібно браузеру, щоб почати обробку обробників подій після того, як користувач клацнув на вашому сайті. Це зазвичай називають першим враженням від вашого веб-сайту. Необхідний час становить 100 мілісекунд.

Кумулятивне зміщення макета (CLS) : CLS вимірює зміщення макета, яке відбувається на веб-сторінці. Коли веб-сторінка завантажується, а потім раптово щось з'являється або зникає, і сторінці доводиться адаптуватися, щоб стати більшою або меншою, саме це зміщення вимірюється. Це жахливо впливає на взаємодію з користувачем, і я погоджуюся. Потрібний бал – 0.1.

Як оптимізувати свій веб-сайт для Core Web Vitals

Щоб оптимізувати свій веб-сайт, виконайте наведені нижче дії.

1. Почніть із швидкого веб-хосту

Якщо у вас є веб-хостинг із жахливим часом відповіді, то будь-яке інше, що я тут перерахую, може не дати бажаних результатів. Чим швидше ваш сервер відповідає на запити, тим краще.

Чому веб-хост із швидким часом до першого байта (TTFB) важливий? Хтось заперечить, що TTFB не має значення, але це так. Це основа всього іншого. Якщо у вас є користувачі в містах із повільним доступом до Інтернету, те, наскільки швидко ваш веб-хост може відповісти, має значення. Будь-який веб-хост може працювати добре, якщо у вас є користувачі переважно з міст із надшвидким Інтернетом.

Спробуйте перевірити, як ваш веб-хост буде реагувати на 3G або 2G замість 4G. Тому що якщо ви отримуєте багато користувачів, які підключаються через 3G або 2G, це додає ваші показники Core Web Vitals. Отже, кожна мілісекунда має значення. Різниця між отриманням 100 мс у вашому FID і отриманням 101 мс полягає в тому, що зі 100 мс ви проходите, а з 101 мс ви не. Отже, якщо хтось скаже вам, що 1 мс не має значення, ця людина може просто помилитися.

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

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

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

2. Використовуйте легку та оптимізовану за швидкістю тему

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

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

Існує довгий список найкращих практик, на які слід звернути увагу в темі. Деякі з найпоширеніших поганих практик – це надмірна залежність від JQuery, завантаження занадто великої кількості CSS/JS, коли це не потрібно, великий розмір теми тощо. Ви завжди можете скористатися інструментом, таким як Yellow labs , для тестування демо-версії.

Якщо ви користуєтеся WordPress, ви можете переглянути список найшвидших тем WordPress.

3 Оптимізуйте свої зображення

Картинки круті. Вони роблять вміст таким привабливим. Але вони можуть бути тягарем, якщо вони неоптимізовані. Наявність великих зображень, як-от 3 Мб, безперечно вплине на вашу швидкість. І якщо ці зображення видно під час відвідування вашого сайту перед прокручуванням, вони точно вплинуть на показник LCP.

Правда полягає в тому, що неоптимізовані зображення збільшують розмір вашої сторінки. Чим більший розмір сторінки, тим довше вона завантажується.

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

4. Видаліть або зменшіть розмір фонових зображень

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

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

5. Використовуйте кешування браузера

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

Для користувачів WordPress більшість плагінів кешування можуть допомогти вам досягти цього.

6. Зменшіть JavaScript і відкладіть невикористаний JavaScript

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

Спробуйте зменшити JavaScript, видаливши пробіли та коментарі, щоб зменшити розмір файлу. Також переконайтеся, що ви відкладаєте некритичні JavaScript. Це повинно покращити ваш FID.

Для користувачів WordPress існують плагіни, такі як Autoptimize , WP Rocket та інші, які можуть зробити це за вас.

7. Встановіть атрибут розміру AdSense

Якщо ви використовуєте AdSense на своєму веб-сайті та маєте проблеми з CLS, це може вирішити всі ваші проблеми. Це було для мене, і це повинно бути для вас.

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

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

Нижче наведено приклад адаптивного рекламного блоку, який я використовував у своєму блозі під заголовком. Я замінив свій ідентифікатор видавця та рекламне місце на XXXXXX. Помітив, що я додав атрибут висоти (min-height: 300px). У той момент, коли я це зробив, усі проблеми з CLS зникли назавжди.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header ad -->
<ins class="adsbygoogle"
     style="display:block; min-height: 300px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Це резервує цей розмір на сторінці. Тож щоразу, коли з’являються оголошення, макет не змінюється, оскільки ви вже встановили розмір.

8. Установіть атрибут розміру для ваших зображень та інших медіа

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

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

9. Відкладене завантаження зображень.

Можливо, ви бачили пораду на PageSpeed ​​Insight відкладати завантаження зображень поза екраном . Це просто означає відкладене завантаження зображень.

Відкладене завантаження зменшує розмір сторінки, а також зменшує час завантаження вашої сторінки під час відвідування користувачем. Що добре для показників CWV.

Це, зокрема, допоможе покращити LCP.

10. Оптимізуйте CSS шляхом мінімізації та генерації критичного CSS

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

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

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

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

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

Якщо ви користуєтеся WordPress, існують плагіни, такі як WP Rocket , LiteSpeed ​​Cache, FlyingPress та інші, які можуть допомогти вам досягти цього.

11. Впровадьте розумне завантаження AdSense

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

Йдеться про розумне завантаження AdSense. AdSense не завантажиться, доки користувач не виконає певну дію, як-от прокручування або клацання. Це значно покращить час завантаження та будь-які основні веб-показники, на які впливає AdSense.

Існує багато плагінів WordPress, які можуть допомогти вам у цьому, наприклад, WP Rocket та Flying Scripts. Наскільки мені відомо, цей метод не порушує політику Google AdSense.

Примітка: Хоча цей метод може допомогти покращити сприйняту швидкість та рейтинг сторінок, він може вплинути на ваш дохід від AdSense. Рекомендую провести експеримент, щоб переконатися, чи він того вартий.

12. Використовуйте шрифт System Stack, якщо можете

Шрифти збільшують час завантаження будь-якого веб-сайту. А для веб-сторінок без зображень ваш текстовий блок може відповідати за ваш рейтинг LCP. У цьому випадку на вашу оцінку LCP безпосередньо впливатиме ваш шрифт.

Хоча Google Font і Font Awesome продовжують удосконалюватися, використання системного стекового шрифту пропонує значне покращення. Хоча це не так химерно, залежно від пристрою.

13. Використовуйте CDN

Якщо у вас є користувачі з різних куточків світу, використання CDN може допомогти покращити вашу швидкість і, опосередковано, ваші показники Core Web Vitals.

Простим поясненням CDN робить багато копій вашого веб-сайту та зберігає їх у різних точках присутності (POP) у різних частинах світу. Коли хтось запитує ваш веб-сайт, він обслуговує ваш веб-сайт із найближчого місця.

Наприклад, якщо ваш сайт розміщено в Сполучених Штатах і у вас є відвідувач із Сполученого Королівства, замість отримання вашого сайту зі Сполучених Штатів CDN обслуговуватиме ваш сайт із Сполученого Королівства. Результатом цього буде швидка доставка. швидкість.

Ви можете переглянути найкращі CDN-мережі.

14. Налаштуйте попередню вибірку DNS

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

Попередня вибірка DNS виконує попередню вибірку DNS перед її викликом. Так що він завантажується миттєво, коли його нарешті викликають.

15. Оптимізація сторонніх скриптів

Переконайтеся, що деякі служби, якими ви користуєтеся на своєму сайті, не додають сторонні сценарії, які можуть уповільнювати роботу ваших сайтів.

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

Що стосується Google AdSense, ще одного сценарію третьої сторони, ви мало що можете зробити. Найкраще використовувати максимум 3 об'яви на сторінці. Уникайте відповідного вмісту, оскільки він приносить низький дохід, але збільшує час завантаження.

16. Видаліть AdSense у верхній частині сторінки

Ця порада заснована на експериментах. Якщо всі ваші показники у звіті Search Console хороші, крім LCP, спочатку переконайтеся, що ваші зображення та шрифти оптимізовано. Якщо вони оптимізовані, а ви все ще програєте LCP, тоді AdSense може нести відповідальність.

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

Якщо ви не хочете його видаляти, ви можете відкласти це вручну або за допомогою плагіна, наприклад Flying Scripts.

17. Переключіться на AMP

AMP означає Accelerated Mobile Pages (Прискорені мобільні сторінки). Ідея AMP полягає в оптимізації веб-сторінок для швидшого завантаження на мобільних пристроях. І, звичайно ж, проєкт AMP з відкритим кодом був започаткований Google.

Хоча спочатку AMP призначався для прискорення мобільних сторінок, він також може пришвидшити роботу сторінок настільних комп’ютерів.

Сторінки AMP незмінно швидше, ніж сторінки для мобільних пристроїв або настільних комп’ютерів, іноді на 100% за нашими спостереженнями.

Якщо єдиною стратегією монетизації вашого веб-сайту є Google AdSense, ви можете розглянути можливість переходу всього свого веб-сайту на AMP. Я особисто помітив, що в моєму блозі AdSense на сторінках AMP інколи приносить більше конверсій, ніж на мобільних пристроях і комп’ютерах!

Висновок

Core Web vitals може допомогти вам покращити свій веб-сайт для користувачів, а не лише для Google. Дуже часто є хороші результати лабораторних тестів, але погані результати польових даних.

Це пов’язано зі складом ваших користувачів. Якщо більшість ваших користувачів із місць із повільним доступом до Інтернету, можливо, ви добре оптимізували роботу, але все одно не маєте польових даних.