Освоение основных веб-показателей: руководство по улучшению взаимодействия с пользователем

Поскольку электронная коммерция продолжает доминировать на онлайн-рынке, компании должны быть впереди всех с точки зрения оптимизации веб-сайтов. Одним из ключевых факторов, возникших в последние годы, является концепция Core Web Vitals. В 2020 году Google установил специальные показатели для этих жизненно важных элементов веб-сайта, предоставив предприятиям электронной коммерции более простой путь к повышению рейтинга веб-сайта. Но что такое Core Web Vitals и как компании могут оптимизировать их для достижения максимального эффекта? В этой статье мы более подробно рассмотрим Core Web Vitals и поделимся основными инструментами для их оптимизации, чтобы ваш веб-сайт электронной коммерции мог оставаться впереди конкурентов.

Связанный пост: 7 вещей, которые владельцы бизнеса должны знать о Core Web Vitals

Почему Core Web Vitals так важны

1. Core Web Vitals влияет на рейтинг вашего сайта в поиске Google.

2. Они имеют решающее значение для обеспечения отличного пользовательского опыта

3. Оптимизация Core Web Vitals может увеличить трафик и доход вашего сайта.

Оптимизация Core Web Vitals необходима владельцам и разработчикам интернет-магазинов, чтобы обеспечить оптимальное взаимодействие с пользователем, повысить рейтинг в результатах поиска Google и, в конечном итоге, увеличить свой доход. Эти три основных показателя — «Наибольшая отрисовка контента» (LCP), «Задержка первого ввода» (FID) и «Совокупное смещение макета» (CLS) — основаны на скорости загрузки, интерактивности и визуальном представлении вашего веб-сайта.

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

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

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

Мы в Perspective получаем частые запросы на улучшение LCP Core Web Vitals. Ниже вы можете увидеть один из примеров оптимизации Largest Contentful Paint (LCP), который мы сделали для одного из наших клиентов:

1. Самая большая Contentful Paint до оптимизации

2. Самая большая Contentful Paint после оптимизации

Читайте также: Хромбуки Acer против Lenovo: какой из них подходит именно вам?

Каковы наиболее распространенные причины низкого значения Largest Contentful Paint:

1. медленное время отклика сервера

2. неоптимизированный JS и CSS

3. медленная загрузка ресурсов

4. медленный рендеринг на стороне клиента.

Как увеличить самую большую содержательную краску

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

1. Удалите неиспользуемый код JS и сверните файлы в рабочем режиме.

2. Правила CSS лучше писать в модулях (блоках), чтобы стилизация одних селекторов не мешала другим. Также мы рекомендуем избегать создания длинной цепочки селекторов. Все тестируемые файлы CSS или библиотеки должны храниться локально, а не загружаться через CDN.

3. Сжимайте изображения для более быстрой загрузки и используйте новые форматы. Например, конвертируйте JPEG в WebP, который имеет размер 1/3 без потери качества.

4. Мы рекомендуем использовать адаптивные изображения (ссылка), чтобы оптимизировать изображения с точки зрения скорости загрузки и взаимодействия с пользователем. Здесь есть важный момент. Тег img имеет два важных атрибута:

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

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

5. мы не рекомендуем добавлять load="lazy" в атрибут тега <img>.

Удалите ленивый атрибут для увеличения самой большой отрисовки содержимого

Что такое кумулятивный сдвиг макета (CLS)

Кумулятивное смещение макета (CLS) — это важный показатель визуальной стабильности, который количественно определяет степень неожиданных сдвигов макета во время загрузки страницы. Он измеряется суммой всех оценок смещения макета, которые превышают пороговое значение 0,1. Улучшение CLS стало главным приоритетом для бизнеса, поскольку пользовательский опыт занимает центральное место в современной веб-разработке. Поэтому неудивительно, что клиенты часто просят улучшить этот ключевой показатель эффективности.

Читайте также: Рост живых казино в 2023 году

Каковы наиболее распространенные причины плохого кумулятивного смещения макета (CLS)

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

НЕПРАВИЛЬНЫЙ РАЗМЕР ИЗОБРАЖЕНИЙ И МУЛЬТИМЕДИЙНЫХ ФАЙЛОВ

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

НЕОПТИМИЗИРОВАННЫЕ ЗАПРОСЫ GRAPHQL

При загрузке изображений или блоков GraphQL в Progressive Web App (PWA) отсутствие резервирования места может привести к тому, что страница «прыгает» после загрузки. Это может привести к плохому изменению макета и негативно повлиять на показатели производительности.

НЕОПТИМИЗИРОВАННЫЕ КАРУСЕЛИ

Неоптимизированная карусель, использующая неплавную и некомбинированную анимацию, может вызвать перерасчет макета страницы, что приведет к плохим показателям кумулятивного сдвига макета (CLS). Хотя небольшое смещение может быть едва заметным для пользователя, оно может существенно повлиять на общее изменение макета страницы и визуальную стабильность.

Как улучшить индикатор визуальной стабильности и Cumulative Layout Shift

ИСПОЛЬЗОВАНИЕ ЗАПОЛНИТЕЛЕЙ

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

Использование заполнителей для улучшения показателей производительности в Core Web Vitals

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

<img data-src="image.webp" width="380" height="120" alt="image">

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

FRONT-DASPLAY: SWAP

Для достижения оптимального показателя Cumulative Layout Shift (CLS) разработчики могут использовать свойство font-display: swap для отображения текста системным шрифтом до полной загрузки файла пользовательского шрифта. Правило font-face в требуемом файле шрифта CSS должно указывать пути к файлу шрифта и включать свойство font-display: swap.

Вот пример того, как определить правило font-face с помощью свойства font-display: swap:

@font-face {Семейство шрифтов: «Proxima Nova»; источник: url («../fonts/proximanova-regular.woff2») формат («woff2»); отображение шрифта: swap;}

Используя свойство font-display: swap, браузер будет немедленно отображать текст системным шрифтом, пока файл пользовательского шрифта не будет полностью загружен. Этот метод может предотвратить неожиданные изменения макета и улучшить визуальную стабильность страницы, что улучшит взаимодействие с пользователем.

Читайте также: Влияние глобальных экономических условий на стоимость криптовалюты

ПРЕОБРАЗОВАНИЕ CSS

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

При оптимизации загрузки блоков CMS (особенно в проектах PWA) через HTML-элементы GraphQL рекомендуется устанавливать свойства CSS с фиксированной высотой. Такой подход может помочь предотвратить неожиданные изменения макета и обеспечить визуально стабильную страницу после ее загрузки.

Внедряя эти методы, компании могут улучшить показатели Core Web Vitals и обеспечить более плавный и приятный пользовательский опыт. В одном из наших недавних случаев мы значительно улучшили оценку CLS, добавив свойство font-display: swap в файл CSS, установив минимальную высоту и оптимизировав загрузку шрифта (@font-face).

1. ОНЛАЙН-МАГАЗИН ДО ОПТИМИЗАЦИИ Core Web VITALS

2. ИНТЕРНЕТ-МАГАЗИН ПОСЛЕ ОПТИМИЗАЦИИ Core Web VITALS

Что такое первая задержка ввода (FID)?

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

Использование FID в Magento 2

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

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

Как оптимизировать задержку первого ввода

ДЕКОМПОЗИЦИЯ ЗАДАЧИ

Рекомендуемый подход к улучшению задержки первого ввода (FID) заключается в разделении более длительных задач на более мелкие и более управляемые подзадачи. Длительные задачи могут перегружать основной поток, препятствуя обработке и выполнению пользовательского ввода. Любой сегмент кода, который препятствует потоку более чем на 50 миллисекунд, считается длительной задачей.

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

ИСПЫТАНИЕ В РЕАЛЬНЫХ УСЛОВИЯХ

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

1. Тест PageSpeed ​​Insights;

2. Search Console (отчет Core Web Vitals);

3. Отчет о пользовательском опыте Chrome;

Поскольку FID требует взаимодействия с пользователем, проведение испытаний в лабораторных условиях невозможно. Напротив, полевые метрики фиксируют реальную производительность, анализируя поведение пользователей. Однако общее время блокировки (TBT), метрика, которая оценивает период между первой отрисовкой контента (FCP) и временем до взаимодействия (TTI), может быть измерена в лабораторных условиях и хорошо коррелирует с FID в полевых условиях. TBT также умеет выявлять проблемы, связанные с интерактивностью. Следовательно, любая оптимизация, улучшающая TBT в лабораторных условиях, также улучшит FID для пользователей. Lighthouse — это инструмент, который может эффективно измерять TBT.

Читайте также: Пошаговое руководство по созданию индивидуальной витрины Shopify

ВКЛЮЧИТЬ ЗАГРУЗКУ ПО ТРЕБОВАНИЮ

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

ОПТИМИЗИРОВАТЬ JAVASCRIPT

Для повышения производительности веб-сайта крайне важно удалить все ненужные файлы JavaScript. Один из рекомендуемых подходов — отложить загрузку файлов JavaScript до тех пор, пока они не потребуются. Этот метод изначально позволяет браузеру получать важные веб-элементы, такие как HTML и CSS. После этого сценарии можно оценить, что ускорит загрузку. Принятие этой стратегии особенно полезно для веб-сайтов со значительными расширениями JavaScript, такими как расширение Mega Menu, используемое многими магазинами Magento. Этот метод позволяет владельцам веб-сайтов упростить процесс загрузки и обеспечить более эффективное взаимодействие с пользователем. Таким образом, удаление неиспользуемого JavaScript является фундаментальным методом оптимизации, который следует учитывать для повышения производительности веб-сайта.

Дополнительные индикаторы для улучшения Core Web Vitals

В дополнение к трем основным показателям Core Web, указанным выше, существует несколько дополнительных показателей.

Первая содержательная краска (FCP)

First Contentful Paint (FCP) — это ценный показатель, который помогает измерить время, необходимое странице для отображения исходного изображения или текстового блока. Эта метрика включает время обработки DNS-запросов, серверных запросов, операций на стороне сервера и первичного рендеринга DOM. Хотя такие факторы, как DNS и скорость сети, нам неподконтрольны, сокращение времени обработки задач на стороне сервера и оптимизация загрузки стилей и скриптов могут значительно повлиять на производительность. В частности, Google рекомендует уделить первоочередное внимание включению только важных стилей в раздел заголовка веб-страницы и, если возможно, использовать теги стилей вместо тегов ссылок, чтобы свести к минимуму ненужные запросы к серверу.

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

Метрика индекса скорости

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

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

Чтобы улучшить SI, веб-разработчики могут использовать различные методы оптимизации, включая минимизацию внешних ресурсов, таких как CSS и JavaScript, уменьшение размеров изображений и использование кэширования браузера для ускорения загрузки ресурсов. Анализируя показатели SI с помощью таких инструментов, как Google Analytics и WebPageTest, владельцы веб-сайтов могут определить области, требующие оптимизации, и внести изменения для повышения производительности веб-сайта. В конечном счете, повышая производительность веб-сайта и улучшая взаимодействие с пользователем, владельцы веб-сайтов могут повысить вовлеченность, повысить конверсию и расширить свой бизнес.

Взаимодействие со следующей краской

Interaction to Next Paint (INP) — это критически важный показатель, который измеряет время между взаимодействием пользователя с веб-страницей и отображением визуального ответа. Этот показатель особенно актуален для страниц, требующих частого взаимодействия с пользователем, таких как платформы социальных сетей и сайты электронной коммерции. INP предоставляет ценную информацию об отзывчивости веб-страницы и помогает определить области, требующие оптимизации для улучшения взаимодействия с пользователем.

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

Чтобы улучшить INP, веб-разработчики могут реализовать ряд методов оптимизации, таких как минимизация использования JavaScript и уменьшение размера изображений и видео. Кроме того, использование современных веб-технологий, таких как Intersection Observer API и Web Workers, может помочь повысить производительность за счет разгрузки ресурсоемких задач и снижения нагрузки на основной поток.

Читайте также: Как французский перевод положительно повлияет на ваш бизнес?

Время до первого укуса (TTFB)

Время до первого байта (TTFB) — важный показатель производительности страницы. Он представляет собой время, необходимое серверу для получения первого байта данных после отправки запроса. На значение TTFB влияют различные факторы, такие как задержка в сети, время обработки сервером и сложность кода веб-сайта. Желательно более низкое значение TTFB, поскольку оно указывает на более быстрое время загрузки и лучший пользовательский интерфейс. Идеальное время отклика для веб-сайта составляет от 250 до 350 миллисекунд, в то время как все, что превышает 500, считается длительным временем отклика и может негативно повлиять на производительность веб-сайта.

Чтобы улучшить значения TTFB, владельцы веб-сайтов могут использовать различные инструменты и методы. Одним из таких методов является кэширование запросов, сохранение часто используемых данных в кэше, что обеспечивает более быстрый доступ и извлечение. Такие инструменты, как Varnish, могут действовать как слой кэширования между сервером и пользователем, повышая скорость веб-сайта и снижая нагрузку на сервер. Для проектов PWA можно использовать сервис-воркеры для кэширования содержимого HTML, которое может обновляться при изменении содержимого, обеспечивая более быстрый доступ к часто используемому содержимому.

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

Поэтому не стоит делать как можно больше страниц и блоков, а максимально их сокращать.

Инструменты, рекомендуемые для аудита Core Web Vitals

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

Отчет Lighthouse состоит из нескольких разделов:

1. Производительность сайта: анализ скорости загрузки сайта

2. Возможности: описывает, как ускорить работу сайта и повысить производительность.

3. Диагностика: указывает, на что нужно обратить внимание и исправить

4. Прогрессивная веб-программа: подробный аудит

5. Доступность: раздел о том, как улучшить UX-дизайн

6. Лучшие практики: лучшие способы надежной оптимизации большинства сайтов

Перед запуском аудита вы можете использовать кнопку «Анализ загрузки страницы», чтобы настроить уровень аудита в соответствии с вашими интересами (производительность, SEO, доступность и т. д.).

Ваш аудиторский отчет будет отображаться в новом окне при запуске аудита. Он также доступен для измерения на веб-сайте PageSpeed ​​Insights.

Не забывайте, что метрики Core Web Vitals будут браться за последние 28 дней.

Читайте также: Каковы лучшие ноутбуки Apple MacBook Air и MacBook Pro?

Выводы

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

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