Как оптимизировать ваш сайт для Core Web Vitals (Adsense)

Так сильно пытаетесь пройти Core Web Vitals? Вот несколько простых и практичных способов улучшить свои баллы CWV.

Гонка за улучшением 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?

Core Web Vitals — это показатели, основанные на Google Lighthouse, которые определяют, насколько сайт обеспечивает хорошее взаимодействие со страницей. Несмотря на то, что при выполнении теста используется множество показателей, наиболее важными из них являются самая большая содержательная отрисовка (LCP), первая задержка ввода (FID) и кумулятивный сдвиг макета (CLS).

Google объявил что с мая 2021 года эти показатели станут частью их сигналов ранжирования, используемых для определения позиций веб-страницы в результатах поиска.

Подводя итог, можно сказать, что Core Web Vitals задумывался не как ужас для веб-мастеров, а как средство для улучшения работы веб-сайтов.

Крупнейшая содержательная краска (LCP): LCP измеряет время, необходимое для загрузки самого большого видимого изображения или текстового блока на веб-странице. Если самый большой видимый текст или изображение загружается быстро, предполагается, что остальные ваши изображения и текст будут загружаться быстро. Требуемое время загрузки для прохождения 2.5 секунд.

Largest Contentful Paint
Кредит: Web.dev

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

First Input Delay
Кредит: Web.dev

Сдвиг накопительного макета (CLS): CLS измеряет изменение макета, которое происходит на веб-странице. Когда веб-страница загружается, а затем внезапно что-то появляется или исчезает, и страница должна приспосабливаться к тому, чтобы стать больше или меньше, измеряется именно этот сдвиг. Это ужасно для пользовательского опыта, и я согласен. Оценка, которую вы должны пройти, 0.1.

Cumulative Layout Shift
Кредит: Web.dev

Как оптимизировать свой сайт для Core Web Vitals

Выполните следующие действия, чтобы оптимизировать свой веб-сайт:

1. Начните с быстрого веб-хостинга

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

Почему важен веб-хост с быстрым временем до первого байта (TTFB)? Некоторые возразят, что TTFB не имеет значения, но это не так. Это основа всего остального. Если у вас есть пользователи в городах с медленным интернетом, скорость ответа вашего веб-хоста будет иметь большое значение. Любой веб-хост может работать хорошо, если у вас есть пользователи в основном из городов со сверхскоростным интернетом.

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

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

Я лично заметил значительные изменения в данных поля веб-сайта Core Web Vitals после смены веб-хостинга. Я больше ничего не делал.

Если вы ищете быстрый веб-хостинг, есть много рекомендаций, которые основаны исключительно на партнерах без искренности. Если вы используете WordPress и можете себе это позволить, я настоятельно рекомендую Kinsta. Они являются лучшими для 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. Заметил, что я добавил атрибут высоты (минимальная высота: 300 пикселей). В тот момент, когда я это сделал, все проблемы с 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 из верхней части сгиба.

Этот совет основан на экспериментах. Если все ваши показатели в отчете консоли поиска хорошие, кроме LCP, сначала убедитесь, что ваши изображения и шрифты оптимизированы. Если они оптимизированы, а LCP по-прежнему не работает, виноват AdSense.

Если вы можете себе это позволить, удалите AdSense из верхней части страницы на месяц и посмотрите, исчезнет ли проблема.

Если вы не хотите удалять его, вы можете отложить его вручную или с помощью плагина, такого как Flying Scripts.

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

AMP означает ускоренные мобильные страницы. Идея AMP заключается в том, чтобы оптимизировать веб-страницы для более быстрой загрузки на мобильных устройствах. И, конечно же, AMP с открытым исходным кодом проект был запущен Google.

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

Страницы AMP постоянно быстрее, чем страницы для мобильных устройств или компьютеров, иногда, по нашим наблюдениям, более чем на 100%.

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

Заключение

Core Web Vitals может помочь вам улучшить ваш веб-сайт для ваших пользователей, а не только для Google. Очень часто бывает, что у вас хорошая оценка лабораторных данных, но плохая оценка полевых данных.

Это связано с составом ваших пользователей. Если большинство ваших пользователей из мест с медленным интернетом, вы, возможно, проделали хорошую работу по оптимизации, но по-прежнему терпите неудачу в полевых данных.

Mfon Abel Ekene

Мфон Абель Экене

Мне нравится создавать полезный контент. Моя страсть — помогать интернет-пользователям находить то, что им нужно, указывая им правильное направление. Это то, что я люблю делать, и я потратил много часов на исследования и тестирование, чтобы убедиться, что я делаю именно это с помощью своего контента на TargetTrend.

Статей: 48

Получить технические вещи

Технические тенденции, тенденции стартапов, обзоры, онлайн-доход, веб-инструменты и маркетинг один или два раза в месяц.

5 комментариев

  1. Кажется довольно странным, что Google несколько стреляет себе в ногу, если вы используете AdSense на своем сайте, и это, вероятно, негативно повлияет на ваш рейтинг в поисковых системах Google.
    Отличные советы, которые ценятся. Я борюсь с Core Vitals, несмотря на то, что кэширую все в Cloudflare, поэтому стоит попробовать пару советов, и мне, возможно, придется стиснуть зубы и попробовать создать страницы AMP.

    • Я могу понять, откуда вы. Но я думаю, что с точки зрения Google они рассматривают AdSense и поиск как разные продукты. И честно говоря, они рекомендуют максимум 3 объявления на страницу, но веб-мастера злоупотребляют этим.

  2. Насколько это сложно? Эта страница, на которой объясняется, как оптимизировать для Core Web Vitals, имеет рейтинг страницы всего 55…

    • Какой бы инструмент вы ни использовали для проверки, он не имеет значения, если это симуляция. Вы оптимизируете не для ботов, а для реальных пользователей.

      Google не использует PageSpeed ​​внутри оценок для ранжирования, они используют реальные данные из данных CrUX.

      Что касается отчета о реальном взаимодействии с пользователем, все наши страницы зеленого цвета, как вы можете видеть из сводки происхождения в PageSpeed ​​Insight.

  3. Привет народ,

    Мы провели несколько тестов с различными интеграциями AdSense, чтобы оценить влияние на показатели веб-показателей. Думаю, вам стоит прочитать этот пост: https://wpadvancedads.com/adsense-page-speed-core-web-vitals/.

    С наилучшими пожеланиями,
    Иоахим

Оставьте комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля помечены * *