Узнайте, как лица, принимающие решения, и обычные пользователи могут улучшить показатели Core Web Vitals.
Введение
Как показывают исследования, удобство сайтов для пользователей прямым образом влияет на бизнес-результаты компаний. Чем лучше работает сайт, чем быстрее он загружается и откликается на действия пользователей, тем выше вовлеченность и тем больше конверсий. Core Web Vitals – инициатива Google, которая позволяет оценивать качество сайтов и определять, что стоит улучшить.
Однако большая часть документации по Core Web Vitals предназначена для веб-разработчиков, которые обладают глубокими техническими знаниями и полностью контролируют свой код. Многие сайты создаются не веб-разработчиками, а с помощью конструкторов сайтов, таких как WordPress, Shopify, Wix и т. д., часто без команды веб-разработки.
Даже если у вас есть специальная команда или веб-разработчики, они не единственные, кто отвечает за производительность сайта. Лица, принимающие решения, оказывают огромное влияние на эффективность сайта, от выбора контента и дизайна до разработки рекламных стратегий, направленных на привлечение большего трафика на свои сайты. Эти решения часто оказывают значительное влияние на эффективность сайта.
В этом руководстве мы постарались предоставить разработчикам и владельцам сайтов информацию, которая поможет им понять, как сделать свои ресурсы удобнее для пользователей, не обладая при этом глубокими техническими знаниями в области веб-разработки.
В то же время многие проблемы с производительностью требуют от разработчиков технических исправлений. В этом могут помочь наши руководства для разработчиков. Это не исчерпывающее руководство, а скорее введение в инициативу Core Web Vitals для тех, кто принимает деловые решения. В нем также описаны некоторые распространенные основные причины низкой эффективности страниц, не связанные с разработкой. Для дальнейшей работы вам, скорее всего, понадобится помощь веб-разработчика.
Что такое Core Web Vitals?
Core Web Vitals – это набор из трех показателей, предназначенных для оценки удобства страницы для пользователей, в частности скорости ее загрузки. Каждый из них имеет трехбуквенную аббревиатуру:
- Largest Contentful Paint (LCP) измеряет скорость загрузки. Этот показатель отражает, сколько секунд проходит с начала загрузки страницы до появления на ней самого крупного элемента.
- Совокупное смещение макета (CLS) отражает визуальную стабильность страницы, то есть то, насколько сильно контент смещается во время загрузки.
- Interaction to Next Paint (INP) – время, за которое страница реагирует на нажатия и клики.
Каждый показатель отражает определенный аспект взаимодействия пользователя со страницей. Google также предоставляет рекомендуемые пороговые значения для каждого показателя. Если значение ниже нижнего порога, то удобство использования считается хорошим, а если выше верхнего порога – плохим. Если значение находится между этими пороговыми величинами, то страница нуждается в улучшении. Чем ниже значения этих показателей, тем лучше.
Как измеряются показатели Core Web Vitals?
Core Web Vitals измеряются на основе данных о реальных пользователях вашего сайта, и у разных пользователей результаты будут разными. Они отражают не мнение Google или робота Googlebot, а реальный опыт пользователей вашего сайта.
Некоторые пользователи будут использовать более быстрые устройства и сети. Некоторые пользователи будут использовать медленные устройства или сети. Некоторые пользователи будут посещать более простые и быстрые страницы вашего сайта, а другие – более сложные и медленные. Результаты всех этих пользовательских взаимодействий затем агрегируются, чтобы дать общую оценку всего вашего веб-сайта.
Google предоставляет данные пользователей Chrome, давших согласие на их сбор, в отчете Chrome User Experience Report (CrUX), который используется во многих инструментах Google, таких как PageSpeed Insights и Google Search Console.
CrUX доступен для миллионов популярных сайтов, но не для всех. Эти показатели также можно собирать с помощью других инструментов мониторинга реальных пользователей.
Как узнать показатели Core Web Vitals для моего сайта?
Существует множество инструментов, которые показывают показатели Core Web Vitals, предоставляемые Google и сторонними компаниями. В этой статье мы расскажем о двух инструментах, которые позволяют быстро проверить Core Web Vitals сайта. Подробную информацию о других инструментах Google, в том числе о рабочем процессе их использования для решения проблем с Core Web Vitals, вы найдете в статье Рабочие процессы Core Web Vitals с инструментами Google.
Если на вашей платформе есть встроенное решение для мониторинга реальных пользователей, оно может предоставлять гораздо более подробную информацию о страницах вашего сайта или позволять вам детализировать данные по отдельным страницам или сегментировать пользователей, чтобы помочь понять и выявить проблемы.
PageSpeed Insights
Если вам нужно быстро получить данные, не выполняя никаких настроек, воспользуйтесь инструментом PageSpeed Insights (PSI). Введите URL и нажмите "Анализировать". Если ваш сайт включен в CrUX, вы увидите раздел "Узнайте, как ваш сайт работает у реальных пользователей".
Эти данные показывают, как реальные пользователи Chrome взаимодействовали с вашим сайтом за последние 28 дней. В верхней части страницы вы увидите три показателя Core Web Vitals, а под ними – другие вспомогательные показатели (в том числе INP). При общей оценке, которая приводится в верхней части страницы, учитываются только Core Web Vitals. Однако другие показатели могут быть полезны при устранении неполадок, связанных с Core Web Vitals, как будет показано в следующем разделе.
Вы можете переключаться между версиями для мобильных устройств и компьютеров с помощью кнопок в верхней части этого раздела. Вы также можете переключаться между данными для этого URL и для всего источника с помощью переключателя в правом верхнем углу, если данные доступны для обоих вариантов.
Эти данные дают общее представление о том, насколько эффективен ваш сайт, какие показатели можно улучшить и на каких типах устройств.
Google Search Console
Google Search Console (GSC) – это инструмент, предназначенный только для владельцев сайтов. Чтобы начать работу с ним, необходимо зарегистрироваться и подтвердить право собственности на сайт. С помощью этого сервиса вы сможете узнать, как Google Поиск воспринимает ваш сайт.
В отличие от PageSpeed Insights, в Search Console перечислены все страницы вашего сайта, известные Google Поиску, и для каждой из них приведены основные интернет-показатели.
Страницы объединяются в группы URL, чтобы вы могли видеть, есть ли проблемы с Core Web Vitals у определенных категорий страниц (например, у страниц товаров, страниц блога и т. д.). Поскольку такие страницы обычно создаются на основе похожих технологий или шаблонов, у проблем на них может быть общая причина.
Распространенные проблемы с Core Web Vitals в конструкторах сайтов
Многие проблемы производительности требуют технических исправлений. В этом разработчикам помогут наши руководства для разработчиков. В этом разделе мы обсудим некоторые распространенные проблемы, не связанные с разработкой, которые могут помочь решить лица, принимающие бизнес-решения, чтобы улучшить эти показатели.
Под "неразработчиками" мы понимаем тех, кто использует платформы для создания сайтов, где у них ограниченный контроль над тем, как на самом деле кодируется сайт, или лиц, принимающих бизнес-решения, которые могут принимать решения о дизайне сайта или помогать расставлять приоритеты в бюджетах.
Проблемы с Largest Contentful Paint (LCP)
LCP позволяет оценить скорость загрузки веб-страниц. Он показывает, сколько времени проходит с момента нажатия на ссылку до появления в браузере самого большого объекта (обычно это баннер или заголовок).
Чтобы страницей было удобно пользоваться, она должна загружаться в течение 2,5 секунд после нажатия на ссылку. Если загрузка занимает больше 4 секунд, страница считается неудобной.
В следующих разделах приведены некоторые распространенные проблемы, влияющие на LCP, на которые могут повлиять лица, принимающие бизнес-решения.
Задержки при начале загрузки страницы.
Мы часто думаем о том, как сократить время загрузки самой страницы, но задержка часто возникает ещё до начала загрузки. Если сайт загружается несколько секунд, то показатель LCP не может быть ниже порогового значения в 2,5 секунды.
Время до получения первого байта (TTFB) – это время, которое требуется для скачивания первой части веб-страницы. Если в PageSpeed Insights показатель TTFB выделен красным или желтым цветом, то его необходимо улучшить. Это напрямую повлияет на LCP.
Научитесь понимать свою аудиторию
Чтобы устранить проблемы с TTFB, важно понимать свою аудиторию. Если ваш сайт размещен на хостинге в определенной стране, но на него заходят люди со всего мира, то географическая близость между пользователями и веб-сервером становится фактором, влияющим на TTFB. Сеть доставки контента (CDN) позволяет кешировать копии вашего сайта по всему миру, чтобы они были ближе к пользователям. Многие хостинг-провайдеры включают CDN в свои услуги и настраивают ее автоматически. Проверьте, не относится ли это к вашему сайту. Некоторые платформы предлагают разные уровни обслуживания с большим количеством местоположений CDN для более высоких платных уровней. В таких случаях международным компаниям следует рассмотреть более высокие уровни.
Уменьшите число переадресаций
Ещё одна распространенная причина медленного TTFB – переадресация. При проведении рекламных кампаний или рассылке электронных писем старайтесь свести к минимуму количество переадресаций, избегая использования нескольких сокращателей ссылок или включая URL-адреса, которые необходимо перенаправить. Например, если в кампании используется example.com/blog, который перенаправляет на www.example.com/blog, а тот – на https://www.example.com/blog, то время до получения первого байта увеличивается. Убедитесь, что в ваших маркетинговых кампаниях используется минимальное количество переадресаций.
Убедитесь, что рекламные кампании нацелены на правильную аудиторию
Также убедитесь, что ваши рекламные кампании эффективно нацелены на вашу аудиторию. Привлечение большого количества новых пользователей из регионов, в которые вы не доставляете товары, приводит к напрасным расходам на рекламу и негативно влияет на показатели вашего сайта.
Параметры URL могут влиять на скорость загрузки страниц
В маркетинговых кампаниях часто используются параметры URL, например параметры UTM. Это может снизить эффективность кеширования в вашей инфраструктуре, поскольку каждый URL может выглядеть как уникальная страница, даже если каждый раз показывается одна и та же страница. Если вы используете UTM-метки, обратитесь к поставщику CDN или команде, которая отвечает за инфраструктуру, и попросите их сделать так, чтобы инфраструктура кеширования игнорировала эти параметры URL. Тогда в кампаниях будут использоваться уже кешированные страницы.
Медиаконтент может снижать производительность
Учитывайте влияние медиаконтента на страницы. Медиаконтент, например изображения и видео, обычно имеет гораздо больший размер, поэтому его загрузка занимает больше времени, чем загрузка текста. Это также может замедлить загрузку остальной части страницы. Это особенно важно, когда элемент LCP является медиафайлом, а не текстом. Примерно на 80% веб-страниц элементом LCP является изображение, поэтому важно учитывать влияние медиаконтента на ваш сайт.
В то же время медиаобъекты могут сделать сайт более привлекательным и интересным для пользователей, чем сайт, на котором много текста. Поэтому удаление медиафайлов редко является вариантом, но знание стоимости медиафайлов и способов ее снижения может минимизировать любые проблемы с производительностью.
Не используйте карусели
Карусели из нескольких изображений могут снижать скорость загрузки страницы, поскольку эти изображения скачиваются одновременно. Кроме того, несмотря на широкое распространение, карусели часто неудобны для пользователей, поэтому тщательно подумайте, прежде чем использовать их на своем сайте.
Используйте изображения, оптимизированные для интернета
Затем размер медиаобъектов. Разрешение многих изображений в интернете слишком высокое. Убедитесь, что ваши медиапартнеры или дизайн-бюро загружают изображения, оптимизированные для сетевой среды, а не файлы полиграфического качества, как часто бывает. Удалить лишние данные с изображений можно с помощью специального сервиса, например TinyJPG. Многие веб-платформы пытаются автоматически оптимизировать изображения при загрузке, но поскольку они не знают, в каких размерах эти изображения будут отображаться на устройстве пользователя, предоставление изображений меньшего размера для начала может принести значительную выгоду.
Будьте особенно осторожны с видео
Будьте особенно внимательны при использовании видео. Видео – один из самых тяжелых типов контента, поэтому не добавляйте слишком много видео и размещайте их в середине или конце страницы, а не наверху. Не используйте их в верхней части веб-страниц, а сохраните для дальнейшего использования на странице. Это позволит быстрее загружать менее ресурсоемкий контент, чтобы пользователям было удобнее работать с сайтом, и не повлияет на показатель LCP.
A/B-тестирование
Многие компании проводят A/B-тестирование, чтобы оценить изменения на сайте. То, как они реализованы, может сильно повлиять на LCP.
Многие решения для A/B-тестирования задерживают показ сайта пользователю до тех пор, пока не будут применены изменения, связанные с тестированием. Это позволяет избежать показа исходной версии сайта, но задерживает его отображение для пользователя. Другие решения применяются на стороне сервера, чтобы избежать этой задержки. Узнайте, как проводится A/B-тестирование и могут ли возникать задержки. Кроме того, по возможности используйте решения для A/B-тестирования на стороне сервера.
A/B-тестирование может дать бесценную обратную связь перед запуском новых изменений, но затраты на скорость загрузки страницы необходимо сопоставить с любыми потенциальными выгодами, которые они приносят.
Независимо от того, какую инфраструктуру вы используете, при проведении A/B-тестирования всегда следуйте приведенным ниже рекомендациям.
- Ограничьте использование инструментов A/B-тестирования только теми страницами, которые участвуют в тестировании. Не задерживайте загрузку всех страниц, поскольку большинство из них может не участвовать в тестировании в данный момент.
- Проводите A/B-тестирование на ограниченной группе пользователей, чтобы не затронуть большинство.
- Проводите A/B-тестирование в течение минимального времени, необходимого для получения значимых результатов. Чем дольше длится A/B-тестирование, тем дольше пользователи могут сталкиваться с низкой эффективностью страницы.
- И самое главное – не забывайте удалять эксперименты A/B-тестирования, когда они больше не нужны.
Проблемы с Cumulative Layout Shift (CLS)
Показатель CLS отражает визуальную стабильность страницы, то есть то, насколько сильно смещается ее контент по мере загрузки. Это может отвлекать пользователя, который уже начал читать веб-страницу, но потерял место, где остановился, из-за появления нового контента или рекламных мест. Кроме того, если макет страницы сильно смещается, пользователи могут случайно нажать не на тот контент. Будьте осторожны с динамическим контентом, который загружается позже и может сдвинуть часть исходного контента страницы.
Для этого используется математическая формула, которая рассчитывает, сколько контента смещается и насколько. Значение CLS выражается в виде безразмерной дроби. Значение 0,1 или меньше считается хорошим, а 0,25 или больше – плохим.
В следующих разделах приведены некоторые распространенные проблемы, влияющие на CLS, на которые могут повлиять лица, принимающие бизнес-решения.
Проверьте, как загружаются изображения при прокрутке страницы.
Во многих шаблонах не загружаются изображения, расположенные в нижней части страницы, чтобы выделить больше ресурсов для изображений, которые видны на экране при первоначальной загрузке страницы. Изображения загружаются по мере прокрутки страницы. Такой метод загрузки изображений называется отложенной загрузкой.
В шаблонах страниц должно быть зарезервировано место для изображений с отложенной загрузкой. Это позволит избежать сдвига контента, если пользователь прокрутит страницу до того, как изображение загрузится. Если ваш шаблон или платформа не поддерживают эту функцию, рекомендуем перейти на другой шаблон или платформу.
Будьте осторожны с объявлениями, размещенными в середине контента
Объявления, вставленные в середину контента, могут сдвигать его вниз, поскольку они загружаются дольше, чем изображения, описанные в предыдущем разделе. Чтобы снизить этот риск, размещайте объявления рядом с основным контентом страницы. Как это сделать на практике, зависит от вашей платформы и шаблонов, которые вы используете для создания сайта.
Не добавляйте динамический контент в верхнюю часть страниц
Не добавляйте оповещения и баннеры в верхнюю часть страницы после загрузки страницы, например уведомления о файлах cookie или специальные предложения. Чтобы избежать этого, размещайте оповещения и баннеры поверх основного контента. Как и в предыдущем разделе, доступные варианты зависят от платформы и шаблонов, используемых для ваших страниц.
Проблемы с показателем Interaction to Next Paint (INP)
INP – это показатель скорости отклика страницы, который позволяет оценить, насколько быстро страница реагирует на действия пользователя, такие как клики, нажатия и ввод с клавиатуры. Страницы, которые не реагируют быстро на действия пользователя, часто кажутся медленными и могут вызывать у него раздражение.
INP измеряет все подходящие взаимодействия за время существования страницы и сообщает о худшем из них. Для INP хорошим считается значение до 200 миллисекунд, а плохим – от 500 миллисекунд.
Показатели отзывчивости, особенно INP, сложно оптимизировать. Если эти показатели находятся в диапазоне Низкое качество, обычно это связано с тем, что взаимодействия задерживаются из-за попытки веб-страницы выполнить слишком много действий. Поэтому основные решения здесь включают удаление ненужного кода, чтобы сделать страницы более легкими.
В следующих разделах приведены некоторые распространенные проблемы, влияющие на INP, на которые могут повлиять лица, принимающие бизнес-решения.
Весенняя уборка
Проверьте плагины и виджеты, добавленные на сайт, и удалите те, которые больше не используются. Часто бывает проще добавить плагин, чтобы попробовать его, чем потом вспомнить, что его нужно удалить, если он не пригодился. Это одна из причин медленного взаимодействия, но это относительно более простая оптимизация, чем многие другие.
Аналогично, если вы используете менеджер тегов для маркетинговых кампаний, убедитесь, что старые кампании удалены. Даже если они больше не срабатывают, код из завершенных маркетинговых кампаний все равно нужно скачивать и компилировать на каждой странице, что может замедлить взаимодействие с пользователем во время начальной загрузки страницы.
Избегайте ресурсоемких виджетов и плагинов
Виджеты и плагины, требующие больших вычислительных ресурсов, могут выглядеть красиво, но улучшают ли они пользовательский опыт или на самом деле ухудшают его? Отчет "Диагностика проблем с производительностью" в PageSpeed Insights, созданный на основе данных Lighthouse, поможет вам выявить код JavaScript, который оказывает заметное влияние на производительность вашего сайта.
В идеале виджеты должны быть только на тех страницах, где они нужны. Например, если вы используете встроенную карту Google только на странице контактов, то не нужно загружать ее на каждой странице, где она может вызвать проблемы с отзывчивостью.
Учитывайте количество объявлений, особенно на мобильных устройствах
Реклама – это хорошая стратегия монетизации для многих компаний, но она часто бывает сложной и ресурсоемкой. Чем больше объявлений, тем больше ресурсов они потребляют, что может замедлить загрузку страницы. Это особенно актуально для мобильных устройств, которые часто уступают компьютерам и ноутбукам по объему памяти и вычислительной мощности.
Найдите баланс между монетизацией и эффективностью. Если пользователи уходят раньше из-за неудобств, то дополнительные объявления могут приносить вам меньше дохода, чем вы теряете.
Избегайте слишком большого размера страниц
Для обработки больших и сложных страниц требуется больше времени. Например, если у вас есть галерея с 1000 товаров, то она будет загружаться в браузере пользователя довольно долго. Чтобы сократить это время, подумайте, когда следует разбивать страницы на части.
Как получить дополнительную помощь?
В этой статье мы расскажем, что могут сделать владельцы компаний, чтобы повысить эффективность рекламы. Кроме того, вы можете обратиться к веб-разработчикам, чтобы узнать, как повысить эффективность сайта.
Информация для определенных платформ
Большинство платформ уделяют большое внимание производительности своих сайтов и могут предлагать специальные рекомендации по ее улучшению. Кроме того, у вас может быть доступ к специальным командам по повышению эффективности веб-ресурсов, которые могут дать дополнительные рекомендации по улучшению вашего сайта.
Lighthouse также предоставляет информацию, относящуюся к конкретной платформе, с помощью функции Stack Pack, которая может направлять пользователей поддерживаемых платформ к соответствующим советам.
Платформы постоянно совершенствуются, и многие из них сейчас уделяют особое внимание производительности и основным интернет-показателям. Регулярно обновляйте платформу, чтобы пользоваться последними улучшениями, которые внесли ее разработчики.
Проще всего это сделать, если вы используете размещенную платформу, поставщик которой автоматически управляет ею, в том числе обновляет ее. Если вы размещаете платформу самостоятельно (например, у вас есть локальная установка WordPress на собственном сервере), то регулярное обновление платформы позволит вашему сайту пользоваться всеми улучшениями, реализованными разработчиками платформы. Компании должны уделять приоритетное внимание этому обслуживанию или выбрать сервис, который будет управлять этим за них.
Привлеките веб-разработчика
Веб-разработчик, имеющий опыт в оптимизации производительности сайтов, скорее всего, сможет решить гораздо больше проблем, чем владелец компании. Возможно, вы уже нанимали веб-разработчика для создания сайта или периодического внесения изменений, или у вас есть специальная команда разработчиков, или вам нужно найти разработчика (в идеале – с опытом работы в области веб-производительности).
Если приведенные здесь рекомендации не помогают решить проблемы с производительностью сайта, обратитесь к разработчикам. Надеемся, что приведенные выше примеры также показывают, что важно работать с разработчиками, чтобы сбалансировать бизнес-приоритеты с решениями по разработке и найти правильное решение для вашего сайта.
Помните, что работа над производительностью сайта редко бывает разовой. Чтобы поддерживать высокую производительность сайта, необходимо регулярно отслеживать его работу и принимать меры по устранению неполадок.
Заключение
Сайт – это первое, что видят клиенты, когда знакомятся с компанией. Поэтому важно, чтобы он производил хорошее впечатление. Это относится как к новым посетителям, которые только знакомятся с вашей компанией, так и к постоянным клиентам, которым нужно обеспечить максимально удобное взаимодействие, в идеале без каких-либо проблем, которые могут оставить негативное впечатление. Core Web Vitals – это один из критериев удобства сайта, который Google рекомендует учитывать. Если ваш сайт не будет удобным, пользователи просто уйдут на другой.
При этом показатели Core Web Vitals – это лишь один из критериев оценки сайта. Компании должны сами решать, сколько инвестировать в свои сайты и какую отдачу они получат от этих инвестиций.