Что такое Core Web Vitals и как их улучшить? [2020]

По данным Google, пользовательский опыт является одним из нескольких (около 200) факторов ранжирования, которые они используют для ранжирования веб-сайтов на странице результатов поиска.

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

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

Что такое основные веб-жизненные показатели?

Основные веб-жизненные показатели — это набор конкретных факторов, которые необходимы для обеспечения качественного взаимодействия с пользователем в Интернете. Он состоит из трех основных показателей скорости страницы и взаимодействия с пользователем: наибольшая содержательная отрисовка, первая задержка ввода и кумулятивный сдвиг макета.

Другими словами, Core Web Vitals — это подмножество Web Vitals, которое используется владельцами сайтов и всеми инструментами Google для измерения пользовательского опыта.

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

Вы можете отслеживать основные данные веб-показателей веб-сайта в разделе «улучшения» вашей учетной записи консоли поиска. Вы можете увидеть список страниц, на которых пользовательский интерфейс не так хорош, а также предлагает, как вы можете его улучшить.

Почему основные веб-жизненные показатели важны для SEO?

В этом году Google объявил в центральном блоге поиска о сигнале качества страницы.

Ранее Google учитывал несколько сигналов качества страницы для ранжирования, в том числе:

• HTTPS
• Мобильность
• Отсутствие межстраничных всплывающих окон
• «Безопасный просмотр» (по сути, отсутствие вредоносных программ на вашей странице)

Но теперь они добавили в него основные веб-жизненные показатели. Он занимает в нем главную роль. Хороший опыт страницы не заменяет соответствующий контент. Но это дает вам конкурентное преимущество по сравнению со страницей с низким опытом.

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

Но не волнуйтесь, у вас есть время исправить это до следующего 2021 года. Но Google также использует прошлую оценку производительности для ранжирования. Вот почему вам нужно начать работу над этим.

В этой статье я расскажу вам, как вы можете улучшить свой основной показатель Web Vitals.

Самая большая содержательная краска (LCP)

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

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

По данным Google, LCP не превышает 2,5 секунды, когда страница начинает загружаться.

LCP отличается от других показателей, таких как Time To First Byte (TTFY) и First Contentful Paint , поскольку измеряет реальную производительность из отчета Chrome UX.

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

Вы можете проверить свой показатель LCP в Google Page Speed ​​Insight . Он показывает данные, проверяя весь веб-сайт, и показывает список URL-адресов, которые необходимо улучшить.

Вы можете увидеть оценку моего веб-сайта для мобильных устройств, которая составляет около 60, и ее можно улучшить, если я поработаю над дизайном своего мобильного веб-сайта. На десктопе мой рейтинг веб-сайта выше 90, а на мобильном устройстве всего 60 из-за большого содержания.

Но не полагайтесь полностью на эту оценку, так как она со временем меняется, и иногда вас просят удалить необходимые плагины или скрипты для повышения производительности.

Вы также можете увидеть оповещение о Large contentful Paint в поисковой консоли Google . (ГСК)

LCP также делится на три категории.

1. Хороший
2. Требуется улучшение
3. Бедный.

Если ваш LCP ниже 2,5 с , это считается хорошим, оценка от 2,5 до 4 с считается требующей улучшения, а оценка более 4 с считается плохой.

Вы также можете заметить, что добиться LCP менее 2,5 на мобильных устройствах очень сложно. Всегда старайтесь держать его ниже 4 секунд.

Шаги для улучшения оценки LCP:

Настроить ленивую загрузку

рассмотрите возможность использования отложенной загрузки на своем веб-сайте. Если вы используете WordPress 5.4 или более позднюю версию, ленивая загрузка изображений включена по умолчанию. Вы должны сосредоточиться на ленивой загрузке видео, так как это замедляет работу страниц.

Удалите все ненужные сторонние скрипты:

Обязательно используйте только необходимый скрипт и удалите все сторонние скрипты с вашего сайта. Обязательно уменьшите время блокировки основного потока примерно до 150–160 мс.

Обновление веб-хостинга:

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

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

Удалить большие элементы страницы:

Инструмент оценки скорости страницы показывает вам большие элементы страницы, которые вы можете удалить, чтобы улучшить свою оценку.

Минимизировать CSS

Крупные элементы CSS влияют на оценку LCP веб-сайта. Вот почему вы должны минимизировать свой код CSS, чтобы улучшить LCP.

Задержка первого ввода (FID)

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

Основной причиной задержки взаимодействия с пользователем являются основные задачи скрипта, блокирующие потоки .

Очень важно поддерживать минимальное время FID, поскольку оно напрямую влияет на взаимодействие с пользователем на вашем веб-сайте. Google установил приемлемый показатель FID ниже 100 MS .

Для веб-сайтов, таких как блоги или статьи , FID не имеет большого значения, поскольку происходящее взаимодействие — это прокрутка страницы или увеличение или уменьшение масштаба, подписка на информационный бюллетень по электронной почте.

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

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

Шаги для улучшения оценки FID:

Удалите ненужные сторонние скрипты:

Вы можете улучшить свой показатель FID, удалив ненужные скрипты (например, Google Analytics, тепловые карты, Onesignal и т. д.).

Отложить JavaScript:

Если ваш веб-сайт загружает JavaScript в начале загрузки страницы, пользователям сложно быстро взаимодействовать. Вот почему вы можете включить javascript Defer, используя плагины кеша, такие как WP-Rocket, Litespeed cache и т. д.

Он загрузит файлы javascript, которые не нужны в начале загрузки страницы. Это значительно улучшит общую скорость вашего сайта.

Включить кеш браузера:

Включив кеш браузера, вы сэкономите много ресурсов сервера, и ваш сайт не будет запрашивать все файлы для старых посетителей. Браузер загрузит некоторые основные файлы из файла кеша и улучшит вашу оценку FID.

Включить сжатие Gzip

Вы можете уменьшить размер файла HTML и CSS до 80 процентов, включив сжатие Gzip. Вы можете сделать это через CDN Cloudflare или с панели управления веб-хостинга.

Совокупный сдвиг макета (CLS)

Совокупное изменение макета направлено на общую визуальную стабильность вашего сайта. Обычно это происходит из-за манипуляций с DOM или отсутствия атрибутов измерения для основных медиа-элементов.

По данным Google CLS должен быть ниже 0,1 . Вы можете лучше понять, как происходят кумулятивные изменения макета на веб-сайте, на графике ниже.

Шаги для улучшения оценки CLS

Используйте медиафайлы с установленными атрибутами размера (видео, изображения, GIF, инфографика и т. д.):

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

Зарезервировано место для размещения рекламы

Если вы используете автоматические объявления в AdSense, ваши объявления показываются случайным образом, а иногда они подталкивают содержимое ниже для показа объявлений. Вот почему вам нужно зарезервировать определенное место для размещения рекламы на сайте.

Добавьте новые элементы пользовательского интерфейса под веб-страницей:

Если вы используете некоторые элементы пользовательского интерфейса, такие как всплывающие окна, вы можете показать их в нижней части вашего сайта. Таким образом, контент не будет снижаться, а ваш показатель CLS улучшится.

Вывод

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

Теперь твоя очередь.

Какой метод вы собираетесь попробовать первым, дайте мне знать в разделе комментариев?

Если вам понравилась эта статья, поделитесь ею со своим блог-сообществом в социальных сетях.