->

LCP — это время загрузки страницы с точки зрения реального пользователя.

Другими словами: это время от нажатия на ссылку до просмотра большей части контента на экране.

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

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

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

Короче говоря, Core Web Vitals — это подмножество факторов, которые будут частью оценки «опыта страницы» Google (по сути, это способ Google оценить общий UX вашей страницы).

Вы можете найти данные Core Web Vitals вашего сайта в разделе «улучшения» вашей учетной записи Google Search Console .

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

Google планирует сделать страницу официальным фактором ранжирования Google .

Опыт страницы будет представлять собой смесь факторов, которые Google считает важными для взаимодействия с пользователем, в том числе:

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

И Core Web Vitals станет очень важной частью этой оценки.

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

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

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

Но если вы хотите улучшить свой показатель Core Web Vitals до этого, отлично.

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

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

LCP — это время загрузки страницы с точки зрения реального пользователя.

Другими словами: это время от нажатия на ссылку до просмотра большей части контента на экране.

LCP отличается от других измерений скорости страницы. Многие другие показатели скорости страницы (такие как TTFB и First Contextual Paint) не обязательно отражают, каково пользователю открывать веб-страницу.

С другой стороны, LCP фокусируется на том, что действительно важно, когда речь идет о скорости страницы: на возможности видеть вашу страницу и взаимодействовать с ней.

Вы можете проверить свой балл LCP с помощью Google PageSpeed ​​Insights .

Что полезно. Особенно, когда дело доходит до областей, которые нужно улучшить. Что также приятно в использовании Google Pagespeed Insights по сравнению с таким инструментом, как webpagetest.org , так это то, что вы можете увидеть, как ваша страница работает в реальном мире (на основе данных браузера Chrome).

Тем не менее, я рекомендую посмотреть ваши данные LCP в вашем GSC.

Почему?

Что ж, как и Google PageSpeed ​​Insights, данные в Search Console поступают из отчета об опыте использования Chrome.

Но в отличие от PageSpeed ​​Insights, вы можете видеть данные LCP по всему сайту . Таким образом, вместо того, чтобы анализировать случайные страницы одну за другой, вы получаете список URL-адресов, которые являются хорошими, плохими… или где-то посередине.

Говоря об этом, у Google есть особые рекомендации по LCP . Они разбивают скорость LCP на три сегмента: «Хорошо», «Требуется улучшение» и «Плохо».

Короче говоря, вы хотите, чтобы каждая страница вашего сайта попадала в LCP в течение 2,5 секунд.

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

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

Вот почему LCP на этой странице составляет 5,1 секунды (что считается «плохим»).

Это не оправдание. Но это показывает, что улучшить LCP не так просто, как установить CDN. В этом случае нам, возможно, придется удалить некоторые изображения со страницы. И почистите код страницы.

Тяжелая работа? Точно. Стоило того? Определенно.

Вот несколько вещей, которые вы можете сделать, чтобы улучшить LCP вашего сайта:

• Удалите все ненужные сторонние скрипты: наше недавнее исследование скорости страницы показало, что каждый сторонний скрипт замедлял страницу на 34 мс .
• Обновите свой веб-хост: лучший хостинг = более быстрое время загрузки в целом (включая LCP).
• Настройте ленивую загрузку: ленивая загрузка позволяет изображениям загружаться только тогда, когда кто-то прокручивает вашу страницу вниз. Это означает, что вы можете достичь LCP значительно быстрее.
• Удалите большие элементы страницы: Google PageSpeed ​​Insights сообщит вам, есть ли на вашей странице элемент, который замедляет LCP вашей страницы.

• Минимизируйте свой CSS: громоздкий CSS может значительно замедлить время LCP .

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

Далее давайте взглянем на второй Core Web Vital от Google: первая задержка ввода.

Итак, на данный момент ваша страница достигла FCP. Но вопрос в том, могут ли пользователи взаимодействовать с вашей страницей?

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

Примеры взаимодействия включают:

• Выбор опции из меню
• Нажатие на ссылку в навигации сайта
• Ввод электронной почты в поле
• Открытие «аккордеонного текста» на мобильных устройствах

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

И, как и FCP, у них есть определенные критерии приемлемого FID.

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

Для страницы со 100% содержанием (например, запись в блоге или новостные статьи) FID, вероятно, не имеет большого значения. Единственное реальное «взаимодействие» — это прокрутка страницы вниз. Или щипком, чтобы увеличить и уменьшить масштаб.

Фактически, моя консоль поиска даже не сообщает FID для моего сайта.

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

Но для страницы входа, страницы регистрации или другой страницы, где пользователям нужно быстро на что-то нажимать, FID является ОГРОМНЫМ.

Например, подумайте об опыте загрузки такой страницы:

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

Вот некоторые вещи, которые вы можете сделать, чтобы улучшить оценки FID вашего сайта.

• Минимизируйте (или отложите) использование JavaScript: пользователям практически невозможно взаимодействовать со страницей, пока браузер загружает JS. Таким образом, минимизация или отсрочка JS на вашей странице является ключевым моментом для FID.
• Удалите все некритические сторонние скрипты: как и в случае с FCP, сторонние скрипты (такие как Google Analytics, тепловые карты и т. д.) могут негативно повлиять на FID.
• Используйте кеш браузера: это помогает быстрее загружать контент на вашу страницу. Это помогает браузеру вашего пользователя еще быстрее выполнять задачи загрузки JS.

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

Кумулятивное смещение макета (CLS) — это то, насколько стабильно загружается страница (также известная как «визуальная стабильность»).

Другими словами: если элементы на вашей странице перемещаются по мере загрузки страницы, значит, у вас высокий CLS. Что плохо.

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

Вот конкретные критерии Google для CLS:

Как видите, это то, над чем мне нужно поработать. Особенно на мобильном.

Вот несколько простых вещей, которые вы можете сделать, чтобы минимизировать CLS.

• Используйте установленные размеры атрибутов размера для любых медиафайлов (видео, изображений, GIF-файлов, инфографики и т. д.). Таким образом, браузер пользователя точно знает, сколько места этот элемент займет на странице. И не изменит его на лету, так как страница полностью загружается.
• Убедитесь, что элементы рекламы имеют зарезервированное место: в противном случае они могут внезапно появиться на странице, отодвигая контент вниз, вверх или в сторону.
• Добавьте новые элементы пользовательского интерфейса ниже сгиба: таким образом, они не смещают контент вниз, который пользователь «ожидает» оставить там, где он есть.