Як оптимізувати свій веб-сайт для 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 мс не має значення, ця людина може просто помилитися.

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

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

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

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

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

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

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

Якщо ви використовуєте 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. Дуже часто є хороші результати лабораторних тестів, але погані результати польових даних.

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