Узнайте, как лица, принимающие бизнес-решения, и не разработчики, могут улучшить Core Web Vitals.
Введение
Было доказано, что опыт пользователей веб-сайта оказывает прямое влияние на результаты бизнеса . Обеспечение лучшего опыта, когда веб-сайты загружаются быстрее и реагируют на запросы пользователей, часто приводит к увеличению вовлеченности и конверсий. Core Web Vitals — это инициатива по количественной оценке пользовательского опыта веб-сайтов для определения областей, требующих улучшений.
Однако большая часть документации Core Web Vitals предназначена для веб-разработчиков, обладающих глубокими техническими знаниями и полным контролем над своим кодом. Многие веб-сайты создаются не разработчиками с использованием платформ для создания сайтов, таких как WordPress, Shopify, Wix или других подобных решений, часто без команды веб-разработчиков.
Даже там, где есть выделенная команда или веб-разработчики, они не единственные, кто отвечает за производительность сети. Лица, принимающие бизнес-решения, имеют огромное влияние на производительность веб-сайтов: от выбора содержания и дизайна до разработки рекламных стратегий с целью привлечения большего трафика на свои веб-сайты. Эти решения часто оказывают существенное влияние на производительность веб-сайта.
Целью этого руководства является предоставление некоторой актуальной информации создателям и владельцам сайтов, чтобы они могли максимально понять и улучшить их пользовательский опыт, не требуя глубоких технических знаний в области веб-разработки.
В то же время многие проблемы с производительностью требуют от разработчиков внесения технических исправлений, и наши руководства, ориентированные на разработчиков, могут помочь в этих усилиях. Это не всеобъемлющее руководство, а скорее введение в инициативу Core Web Vitals для лиц, принимающих бизнес-решения, с некоторыми распространенными коренными причинами плохой производительности страниц, не связанными с разработкой. Помимо этого, для дальнейшего прогресса, вероятно, потребуется привлечь веб-разработчика.
Каковы основные веб-жизненные показатели?
Core Web Vitals — это набор из трех показателей, предназначенных для измерения пользовательского опыта страницы, в частности того, насколько быстро страница воспринимается пользователями. Каждый из них имеет трехбуквенное сокращение:
- Largest Contentful Paint (LCP) измеряет производительность загрузки : сколько времени в секундах требуется, чтобы наиболее заметный контент страницы появился после начала загрузки страницы.
- Совокупный сдвиг макета (CLS) измеряет визуальную стабильность страницы: насколько контент перемещается во время загрузки.
- Взаимодействие с Next Paint (INP) , которое официально заменило FID 12 марта 2024 года , измеряет скорость реагирования страницы: насколько быстро страница реагирует на щелчки, касания и взаимодействие с клавиатурой.
Каждая метрика измеряет отдельный аспект пользовательского опыта. Google также предоставляет рекомендуемые пороговые значения для каждой метрики, ниже которых пользовательский опыт считается хорошим , а выше — плохим . Между этими пороговыми значениями страница считается находящейся в диапазоне потребностей в улучшении . Имейте в виду, что при использовании этих показателей чем меньше число, тем лучше.
Как измеряются основные веб-показатели?
Основные веб-показатели измеряются реальными пользователями вашего веб-сайта, и разные пользователи будут иметь разные результаты. Это не то, «что думает Google» и не «что думает робот Googlebot», а то, что испытали реальные пользователи вашего сайта.
Некоторые пользователи будут использовать более быстрые устройства и более быстрые сети. Некоторые из них будут использовать более медленные устройства или более медленные сети. Некоторые пользователи будут посещать более простые и быстрые страницы вашего сайта, другие — более сложные и медленные. Результаты всех этих действий пользователя затем объединяются, чтобы получить общую оценку всего вашего веб-сайта.
Google делает данные от подписавшихся пользователей Chrome доступными в отчете об опыте пользователей Chrome (CrUX) , который используется во многих инструментах Google, таких как PageSpeed Insights и Google Search Console .
CrUX доступен на миллионах популярных веб-сайтов, но не все сайты находятся в CrUX. Другие инструменты мониторинга реальных пользователей (RUM) также могут собирать эти показатели для вашего сайта.
Как я могу найти основные веб-показатели моего сайта?
Существует множество инструментов, которые показывают показатели Core Web Vital, предоставленные Google и третьими лицами. В этом посте представлены два инструмента, которые позволяют быстро просмотреть основные веб-показатели вашего сайта. Более подробно о других инструментах Google, включая рабочий процесс их использования для работы с Core Web Vitals, см. публикацию о рабочих процессах Core Web Vitals с инструментами Google .
Если ваша платформа предоставляет интегрированное решение RUM, она может предоставить гораздо более подробную информацию о страницах вашего сайта или позволить вам детализировать отдельные страницы или сегментировать ваших пользователей, чтобы помочь понять и выявить проблемы.
Статистика PageSpeed
Для быстрого просмотра, не требующего настройки, вы можете использовать PageSpeed Insights (PSI) . Введите URL-адрес и нажмите «Анализ». Если ваш сайт включен в CrUX, вам быстро должен быть представлен раздел «Узнайте, что испытывают ваши реальные пользователи»:
Это показывает, как реальные пользователи Chrome взаимодействовали с вашим сайтом за последние 28 дней. Вверху вы увидите три основных веб-показателя, а также другие вспомогательные показатели внизу (включая ожидающий показатель INP). В общей оценке «Пройдено/Неудачно» в верхней части страницы учитываются только основные веб-показатели, но другие показатели могут быть полезны при устранении проблем с основными веб-показателями, как будет показано в следующем разделе.
Вы можете переключаться между представлениями для мобильных устройств и компьютеров с помощью кнопок в верхней части этого раздела. Вы также можете переключаться между этим URL-адресом и всеми данными для этого источника , используя переключатель в правом верхнем углу, где данные существуют для обоих.
Эти цифры должны дать общее представление о том, как работает ваш сайт, какие показатели можно улучшить и на каких типах устройств.
Консоль поиска Google
Консоль поиска Google (GSC) предназначена только для владельцев сайтов, поэтому для ее использования требуется регистрация и подтверждение права собственности на сайт. Он предоставляет подробную информацию о том, как Google Search просматривает ваш сайт.
В отличие от PageSpeed Insights, GSC перечисляет все страницы вашего сайта, о которых знает Google Поиск, и предоставляет подробную информацию об основных веб-показателях для всех из них:
Страницы объединены в группы URL-адресов , чтобы вы могли легко увидеть, есть ли на определенных категориях страниц (например, страницы сведений о продукте, страницы блога и т. д.) проблемы с основными веб-показателями. Поскольку они обычно созданы на основе схожих технологий или шаблонов, любые проблемы на этих страницах могут иметь общую причину.
Распространенные проблемы Core Web Vitals для разработчиков сайтов
Многие проблемы с производительностью требуют от разработчиков внесения технических исправлений, и наши руководства, ориентированные на разработчиков, могут помочь разработчикам в этом. В этом разделе мы обсуждаем некоторые распространенные проблемы, не связанные с разработчиками, с которыми лица, принимающие бизнес-решения, могут помочь, чтобы улучшить эти показатели.
Когда мы говорим «не-разработчики», мы имеем в виду тех, кто использует платформы для создания сайтов, где они имеют ограниченный контроль над тем, как на самом деле кодируется сайт, или лиц, принимающих бизнес-решения, которые могут принимать решения по дизайну сайта или помогать расставлять приоритеты в бюджете.
Крупнейшие проблемы с отрисовкой контента (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 , увеличивает время TTFB страницы. Убедитесь, что в ваших маркетинговых кампаниях используется минимальное количество перенаправлений.
Убедитесь, что рекламные кампании нацелены на правильную аудиторию.
Также убедитесь, что ваши рекламные кампании эффективно ориентированы на вашу аудиторию. Получение большого количества нового трафика от пользователей, находящихся на полпути по всему миру, но которым вы не можете доставить свой продукт, является напрасной тратой на рекламу и отрицательно влияет на производительность вашего веб-сайта.
Параметры URL-адреса могут влиять на производительность сети
Параметры URL, такие как параметры UTM, часто используются для маркетинговых кампаний. Это может снизить эффективность кэширования в вашей инфраструктуре, поскольку каждый URL-адрес может выглядеть как уникальная страница, даже если каждый раз обслуживается одна и та же страница. Если вы используете параметры UTM, поговорите со своим поставщиком CDN или командой по инфраструктуре, чтобы убедиться, что эти параметры URL игнорируются их инфраструктурой кэширования, чтобы кампании могли получать выгоду от страниц, которые уже кэшированы.
Медиа могут быть дорогостоящими для производительности
Учитывайте влияние средств массовой информации на ваши страницы. Такие медиафайлы, как изображения и видео, обычно имеют гораздо больший размер, поэтому их загрузка занимает больше времени, чем текст. Это также может замедлить загрузку остальной части страницы. Это особенно важно, когда элементом LCP является медиа, а не текст. Элемент LCP представляет собой изображение примерно на 80 % веб-страниц , поэтому важно учитывать влияние медиа на ваш сайт.
В то же время медиа-ресурсы могут способствовать богатому визуальному опыту для пользователя, который гораздо интереснее, чем сайт с большим количеством текста. Поэтому удаление носителя редко бывает возможным, но знание стоимости носителя и способов ее снижения может свести к минимуму любые проблемы с производительностью.
Избегайте каруселей
Карусели , состоящие из нескольких изображений, могут повлиять на общее время загрузки страницы, поскольку могут потребовать одновременной загрузки нескольких изображений, если они не реализованы оптимально. Кроме того, несмотря на свое повсеместное распространение, карусели часто не обеспечивают удобство работы с пользователем , поэтому тщательно подумайте, прежде чем использовать их на своем сайте.
Используйте изображения, оптимизированные для Интернета
Еще есть размер медиаактивов. Многие изображения в Интернете представлены в слишком высоком разрешении. Убедитесь, что все медиа-партнеры или дизайнерские агентства предоставляют изображения, оптимизированные для Интернета , а не полноразмерные изображения печатного качества, которые они часто предоставляют. Вы можете использовать такой сервис, как TinyJPG , чтобы быстро удалить ненужные данные из изображений перед их загрузкой. Многие веб-платформы пытаются автоматически оптимизировать изображения при загрузке, но, поскольку они не знают размеров, в которых эти изображения будут отображаться на устройстве пользователя, предоставление изображений меньшего размера для начала может принести значительную выгоду.
Будьте особенно осторожны с видео
Уделяйте особое внимание при использовании видео. Видео — это один из самых больших и, следовательно, самых медленных материалов для загрузки и отображения на веб-сайте, поэтому старайтесь не злоупотреблять ими. Избегайте использования их в верхней части веб-страниц и сохраняйте их для дальнейшего использования на странице. Это позволит ускорить загрузку менее дорогого контента, что упростит загрузку пользователей и не повлияет на ваш LCP.
А/Б-тесты
Многие компании проводят A/B-тесты, чтобы поэкспериментировать с изменениями на своем веб-сайте. То, как они реализованы, может оказать существенное влияние на LCP.
Многие решения для A/B-тестирования откладывают момент первого отображения веб-сайта пользователю до тех пор, пока не будут применены изменения в любых тестах. Это позволяет избежать показа исходной версии веб-сайта, но за счет задержки видимости веб-сайта для пользователя. Другие решения применяются на стороне сервера, чтобы избежать этой задержки. Потратьте время, чтобы понять, как выполняется ваше A/B-тестирование и подвержены ли оно таким задержкам. Кроме того, по возможности рассмотрите возможность использования решений A/B-тестирования на стороне сервера.
A/B-тестирование может предоставить неоценимую обратную связь перед запуском новых изменений, но затраты на производительность страницы должны быть сопоставлены с любыми потенциальными преимуществами, которые они приносят.
Независимо от вашей инфраструктуры, любой, кто проводит A/B-тесты, всегда должен учитывать следующие рекомендации:
- Ограничьте инструменты A/B-тестирования только теми страницами, которые являются частью теста, вместо того, чтобы задерживать все страницы, поскольку большинство страниц могут не запускать A/B-тест в какой-то конкретный момент.
- Ограничьте A/B-тестирование подгруппой пользователей, чтобы не повлиять на большинство пользователей.
- Ограничьте A/B-тесты минимальным количеством времени, необходимым для получения убедительных результатов. Чем дольше выполняются A/B-тесты, тем дольше пользователи могут испытывать плохую производительность страницы.
- Самое главное: не забывайте удалять эксперименты A/B-тестирования , когда они больше не нужны.
Проблемы с накопительным сдвигом макета (CLS)
CLS измеряет визуальную стабильность страницы — насколько содержимое страницы меняется при загрузке контента. Это может отвлекать, если пользователь начал читать веб-страницу, но затем теряет свое место по мере того, как на месте появляется больше контента или рекламы. Это также может привести к тому, что пользователи непреднамеренно нажмут на неправильный контент, если макет страницы сильно изменится. Будьте очень осторожны с динамическим контентом, который загружается позже и может переместить часть исходного содержимого страницы.
Это измеряется с помощью математической формулы , которая вычисляет, насколько смещается контент и насколько он смещается. Он выражается в виде безразмерной доли: значение 0,1 или меньше считается хорошим , а значение выше 0,25 — плохим .
Некоторые из общих проблем, влияющих на CLS, на которые могут влиять лица, принимающие бизнес-решения, приведены в следующих разделах.
Проверьте, как загружаются ваши изображения при прокрутке страницы вниз.
Многие шаблоны избегают загрузки изображений дальше по странице, чтобы предоставить больше ресурсов изображениям, которые отображаются на экране во время начальной загрузки страницы. Изображения затем загружаются, когда пользователь прокручивает страницу вниз. Этот метод загрузки изображений известен как отложенная загрузка .
Шаблоны страниц должны зарезервировать место для отложенно загружаемых изображений, чтобы, если пользователь прокручивает страницу очень быстро, прежде чем изображение сможет загрузиться, содержимое вокруг него не смещалось. Если ваш шаблон или платформа этого не поддерживает, рассмотрите возможность перехода на тот, который это делает.
Будьте осторожны с рекламой, размещенной в середине контента.
Объявления, вставленные в середину контента, рискуют сместить ваш контент вниз, поскольку загрузка рекламы часто занимает немного больше времени — часто дольше, чем изображения, описанные в предыдущем разделе. Их размещение рядом с содержимым главной страницы — распространенная практика, снижающая этот риск. Как это достигается на практике, зависит от вашей конкретной платформы и того, какие шаблоны вы используете для создания своего сайта.
Избегайте добавления динамического контента вверху страниц.
Не добавляйте оповещения и баннеры в верхнюю часть страницы после ее загрузки, например баннеры с файлами cookie или специальные предложения. Если вместо этого выбрать наложение предупреждений и баннеров над основным контентом, это предотвратит смещение содержимого страницы. Как и в предыдущем разделе, ваши варианты здесь будут зависеть от платформы и шаблонов, используемых для ваших страниц.
Проблемы взаимодействия с следующей отрисовкой (INP)
INP измеряет скорость реагирования страницы, которая оценивает, быстро ли страницы реагируют на такие взаимодействия, как щелчки, касания и ввод с клавиатуры. Страницы, которые не реагируют быстро на действия пользователя, часто кажутся вялыми и могут расстраивать пользователей.
INP измеряет совокупность каждого соответствующего взаимодействия в течение жизни страницы и сообщает о худшем взаимодействии. INP имеет хороший порог в 200 миллисекунд и плохой порог в 500 миллисекунд. INP является усовершенствованием FID и лучше измеряет скорость реагирования, поэтому он заменил FID в качестве основного веб-важного показателя для измерения скорости реагирования.
Метрики оперативности — и в частности INP — сложны для оптимизации. Когда эти показатели находятся на низком уровне, это обычно происходит потому, что взаимодействие задерживается из-за того, что веб-страница пытается сделать слишком много, поэтому основные решения здесь включают удаление ненужного кода для облегчения страниц.
Некоторые из общих проблем, влияющих на INP, на которые могут влиять лица, принимающие бизнес-решения, приведены в следующих разделах.
Устройте генеральную уборку!
Просмотрите плагины и виджеты, добавленные на ваш сайт, и удалите их, если они больше не используются. Часто легко добавить плагины, чтобы попробовать что-то, но так же легко забыть удалить их позже, если вы не найдете их полезными. Это одна из причин медленного взаимодействия, но это относительно более простая оптимизация, чем многие другие.
Аналогично, если вы используете менеджер тегов для маркетинговых кампаний, убедитесь, что старые кампании удалены. Даже если они больше не срабатывают, код из маркетинговых кампаний с истекшим сроком действия все равно необходимо загружать и компилировать на каждой странице, что может замедлить взаимодействие с пользователем во время начальной загрузки страницы.
Избегайте дорогих виджетов и плагинов
Виджеты и плагины, требующие больших вычислительных затрат, могут выглядеть красиво, но улучшают ли они пользовательский опыт или ухудшают его? Отчет «Диагностика проблем с производительностью/маяк» в PageSpeed Insights может помочь определить JavaScript, который оказывает заметное влияние на производительность вашего веб-сайта.
В идеале ограничьте виджеты только теми страницами, на которых они необходимы: если вы используете встраивание Карты Google только на странице контактов с нами, тогда нет необходимости загружать его на каждую страницу, где это может вызвать проблемы с реагированием.
Учитывайте количество рекламы, особенно на мобильных устройствах.
Реклама является хорошей стратегией монетизации для многих компаний, но она часто сложна и ресурсоемка. Чем больше у вас объявлений, тем больше они требуют ресурсов, что может повлиять на скорость страницы. Это особенно актуально для мобильных устройств, где вычислительная мощность памяти часто не так велика, как на настольных компьютерах или ноутбуках.
Взвесьте баланс между монетизацией и производительностью . Если пользователи уходят раньше из-за плохого опыта, то эти дополнительные объявления могут стоить вам больше дохода, чем они приносят.
Избегайте чрезмерного размера страницы
Для отображения больших и сложных страниц требуется больше времени на обработку. Например, если у вас есть галерея продуктов, содержащая 1000 различных продуктов, ее отображение в окне браузера пользователя займет некоторое время. Подумайте, когда разбивать страницы на страницы, чтобы сократить это время.
Как я могу получить дополнительную помощь?
В этом посте перечислены некоторые общие соображения, которые могут принять владельцы бизнеса, которые могут повлиять на производительность. Помимо этого вам, возможно, придется проконсультироваться с веб-разработчиками, чтобы получить больше информации о том, что вы можете сделать, чтобы улучшить производительность вашего веб-сайта.
Информация для конкретной платформы
Большинство платформ серьезно заботятся о своей веб-производительности и могут иметь специальные рекомендации для конкретной платформы о том, как ее улучшить. В рамках использования этой платформы у вас также может быть доступ к специализированным командам по веб-производительности, которые могут дать дальнейшие рекомендации по улучшению вашего сайта.
Lighthouse также предоставляет информацию о конкретной платформе с помощью функции Stack Pack , которая может направлять пользователей поддерживаемых платформ к соответствующим советам.
Платформы со временем постоянно совершенствуются, и многие сейчас концентрируются на производительности и основных веб-жизненных показателях. Убедитесь, что ваша платформа постоянно обновляется, чтобы воспользоваться последними улучшениями, внесенными разработчиками платформы.
Это проще всего сделать, если вы находитесь на размещенной платформе, где поставщик платформы автоматически управляет платформой, включая обновления платформы. Если вы размещаете платформу самостоятельно (например, локально устанавливаете WordPress на свой сервер), то регулярное обновление платформы позволит вашему сайту воспользоваться любыми улучшениями, реализованными разработчиками платформы. Предприятиям следует уделять этому обслуживанию приоритетное внимание или выбирать службу, которая будет управлять этим за них.
Привлечение веб-разработчика
Веб-разработчик, обладающий опытом в области веб-производительности, вероятно, сможет решить гораздо больше проблем, чем владелец бизнеса. Возможно, вы уже наняли веб-разработчика для первоначального создания вашего сайта или для периодических изменений, или у вас может быть выделенная команда разработчиков, или вам, возможно, придется найти разработчика для привлечения (в идеале — с опытом работы в Интернете).
Обратитесь к разработчикам, если приведенные выше предложения недостаточны для решения проблем с производительностью вашего веб-сайта, но мы надеемся, что предыдущие примеры также показывают, что важно работать с разработчиками, чтобы сбалансировать бизнес-приоритеты с решениями по развитию, чтобы достичь правильного результата. решение для вашего сайта.
Имейте в виду, что веб-производительность редко является разовой работой. Поддержание хорошей производительности веб-сайта часто требует регулярного мониторинга и обслуживания, чтобы гарантировать, что ваш веб-сайт не ухудшится после внесения улучшений.
Заключение
Веб-сайт часто является первой точкой входа для бизнеса со своими клиентами, и вы хотите, чтобы он стал для них отличным опытом. Это относится как к посетителям, которые впервые получают первое впечатление о вашем бизнесе, так и к постоянным посетителям и постоянным клиентам, которым следует предоставить максимально беспрепятственный опыт, в идеале без разочарований, которые могут оставить негативное впечатление. Основные веб-показатели — это один из показателей пользовательского опыта, который Google рекомендует сайтам учитывать. Несмотря на все возможности Интернета, пользователям очень легко попробовать другие веб-сайты, если ваш им не понравится.
В то же время основные веб-показатели — это лишь один из показателей вашего веб-сайта. Компании должны сами решить, сколько инвестировать в свои веб-сайты и какую отдачу получат от этих инвестиций.
Благодарности
Миниатюрное изображение Карлоса Музы на Unsplash