Как оптимизировать основные веб-жизненные показатели на Shopify

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

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

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

Нажмите на заголовки ниже, чтобы перейти прямо к этому разделу:

• Как основные веб-жизненные показатели рассчитываются на Shopify
• Как улучшить LCP на Shopify
• Как улучшить CLS на Shopify
• Как улучшить FID на Shopify
• Приложения Shopify Core Web Vitals

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

Давайте очень кратко повторим, что такое Core Web Vitals.

Core Web Vitals — это набор показателей, которые Google использует для измерения производительности веб-страницы и взаимодействия с пользователями. Для каждой метрики URL-адреса помечаются как «Зеленый — хорошо», «Желтый — требует улучшения» или «Красный — плохо».

Показатели Core Web Vitals напрямую влияют на рейтинг в поисковых системах.

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

Сколько времени требуется самому большому элементу на вашей странице, чтобы отобразиться на экране?

CLS — совокупное смещение макета

Насколько меняется макет страницы при загрузке страницы?

FID — задержка первого ввода

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

Как основные веб-жизненные показатели рассчитываются на Shopify

Важно понимать, как Google рассчитывает баллы Core Web Vitals, потому что это влияет на то, как вносить значимые улучшения. Данные для Core Web Vitals поступают из данных CrUX, которые измеряют производительность реальных посетителей веб-сайта, использующих веб-браузер Chrome. Это называется «полевые данные».

Для каждой метрики CWV существует минимальный средний балл, который необходимо набрать, чтобы не получить отметку «Плохо». Это основано на средних баллах, записанных для групп страниц. Важно понимать, что ваш веб-сайт Shopify не оценивается по основной метрике веб-жизненных показателей; URL-адреса на вашем веб-сайте.

Когда ваш магазин Shopify не соответствует метрике Core Web Vitals, Search Console покажет вам образец URL-адресов, на которые повлияла проблема. Это поможет вам сузить круг проблем и применить целевое улучшение. Прежде чем приступить к работе по оптимизации Core Web Vitals в вашем магазине Shopify, сначала определите, какие области улучшения будут наиболее эффективными. Не тратьте свое время на работу, которая не даст положительного результата.

Shopify Core Web Vital Metric Советы по оптимизации

Core web Vitals — это максимально быстрая доставка наиболее важного контента и ресурсов.

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

Как улучшить LCP на Shopify

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

Чтобы улучшить LCP в магазине Shopify, необходимо понять факторы, влияющие на LCP. Существует четыре этапа загрузки вашего элемента LCP.

LCP зависит от того, сколько времени требуется веб-браузеру для рисования/рендеринга вашего самого большого элемента на странице. Загрузка и рисование — не одно и то же. Даже если ваш элемент LCP оптимизирован для небольшого размера файла, LCP все равно может занять много времени из-за:

• Задержка загрузки ресурсов. Браузер слишком долго загружает элемент
• Задержка рендеринга элемента. После загрузки элемента LCP браузером требуется слишком много времени для отображения элемента на странице.

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

Как найти элемент LCP на любой странице Shopify

Чтобы улучшить LCP, вам нужно знать, какой элемент на странице является LCP. Это легко на Shopify. Просто зайдите в PageSpeed ​​Insights и проанализируйте URL-адрес, для которого вам нужно найти LCP. Когда отчет будет готов, прокрутите вниз и посмотрите раздел «Диагностика». Там будет строка под названием «Самый большой элемент Contentful Paint». Разверните это, чтобы увидеть подробную информацию о том, какой элемент является LCP на этой странице.

Не лениво загружать элемент LCP

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

В магазинах Shopify элемент LCP на странице продукта обычно является основным изображением продукта. Или в сообщении блога элемент LCP, вероятно, будет изображением заголовка блога. Некоторые темы Shopify автоматически добавляют ленивую загрузку к каждому изображению, даже к тем, которые появляются в верхней части страницы. Просмотрите каждый из ваших шаблонов Shopify и выясните, что такое элемент LCP. Если он отображается в верхней части страницы, убедитесь, что атрибут ниже не включен в тег HTML:

загрузка = "ленивый"

Предварительно загрузите элемент LCP

Вы можете использовать rel="preload", чтобы указать веб-браузерам загружать определенный ресурс как можно скорее. Применяя rel="preload" к вашему элементу LCP, браузер отдает приоритет загрузке этого ресурса на страницу.

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

Используйте изображения нового поколения

Новые форматы изображений, такие как WebP, имеют меньший размер файла, чем традиционные форматы, такие как JPG и PNG. Если вашим элементом LCP является изображение, использование формата изображения Nextgen ускорит время загрузки. По возможности используйте изображения WebP, но не забудьте включить запасной вариант для устаревших браузеров, которые не поддерживают изображения следующего поколения.

Новые темы Shopify автоматически преобразуют ваши изображения в формат WebP и отображают их в соответствующих браузерах.

Убедитесь, что элемент LCP включен в исходный HTML-ответ

Сократите «задержку загрузки ресурса», убедившись, что ваш элемент LCP доставляется в исходном HTML-ответе. Если элемент LCP загружен на страницу внешним ресурсом (например, скриптом JS), браузеру потребуется больше времени, чтобы начать загрузку элемента LCP.

Повлияет ли это на ваш магазин Shopify, будет зависеть от используемой вами темы магазина. Быстрый способ проверить это — выяснить, что представляет собой ваш элемент LCP, а затем просмотреть страницу с отключенным JS. Если элемент LCP не выводится в HTML-коде страницы, это означает, что он не доставлен в исходном HTML-ответе.

Устранение ресурсов, блокирующих рендеринг

Совет «Устранить ресурсы, блокирующие рендеринг» существует уже давно. Но что это на самом деле означает? Некоторые ресурсы, такие как сценарии и таблицы стилей, блокируют отображение веб-страницы. Когда браузер обнаруживает ресурс, он прекращает загрузку страницы и вместо этого загружает и выполняет этот ресурс. Это задерживает отображение страницы для пользователей.

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

Устранение блокировки рендеринга JS

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

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

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

Избавьтесь от таблиц стилей CSS, блокирующих рендеринг

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

Решение состоит в том, чтобы встроить критический CSS, необходимый для отображения верхней части страницы, включив его в тег стиля в голове . Затем добавьте приведенный ниже код в вашего theme.liquid.js для асинхронной загрузки вашей основной таблицы стилей.

 <link rel="alternate stylesheet" href="slow.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">

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

Как улучшить CLS на Shopify

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

Добавьте атрибуты ширины и высоты к вашим изображениям

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

Чтобы сделать это на изображении в собственном магазине Shopify, войдите в систему и перейдите в раздел тем. И перейдите в «Редактировать код» для вашей темы. Затем найдите фрагмент кода в своем жидком шаблоне, который выводит изображение, и добавьте следующий фрагмент в тег img.

 height="{{img.height}}" width="{{img.width}}

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

Оптимизируйте свои шрифты

Эти причудливые веб-шрифты, которые вы загружаете из таких мест, как шрифты Google, могут вызвать проблемы с CLS из-за проблемы, называемой FOUS (вспышка нестилизованного текста). Здесь веб-браузер сначала загружает резервный шрифт, а затем, когда загружается основной веб-шрифт, текст перерисовывается, вызывая сдвиг макета.

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

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

Использовать font-display: необязательно Font-display — это свойство CSS, которое сообщает браузеру, что делать, если начертание шрифта не было загружено в течение 100 мс. Браузер сначала загрузит резервный шрифт, и если пользовательский шрифт не завершит загрузку в течение 100 мс, браузер сохранит резервный шрифт, отображаемый на странице. Это снижает риск слишком поздней загрузки пользовательского шрифта и изменения макета.

Как улучшить FID на Shopify

По нашему опыту, FID — это наименее распространенная метрика Core Web Vital, которая влияет на магазины Shopify. Думайте о FID как о способе измерения того, насколько отзывчива страница во время загрузки. Ничто так не расстраивает пользователей, как щелчок/нажатие, и ничего не происходит.

FID похож на другую метрику, называемую Total Blocking Time (TBT). TBT измеряет время между началом отображения страницы (First Contentful Paint или FCP) и моментом, когда страница становится отзывчивой (Time to Interactive или TTI).

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

В чем разница между FID и TBT

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

Поскольку вы не можете измерить FID при тестировании собственных страниц, вам следует вместо этого измерить TBT.

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

Уменьшите влияние стороннего кода

Как и в случае со всеми основными показателями веб-жизненных показателей, сторонний JavaScript часто является причиной проблем. Любая третья сторона, которая блокирует основной поток более чем на 250 мс, будет отмечена в отчете Lighthouse. Пропустите свои страницы через Lighthouse, чтобы определить, какие сторонние скрипты вызывают проблемы. Затем решите, какие из них могут быть установлены как асинхронные или отложенные.

Сокращение времени выполнения JavaScript

Время, необходимое для выполнения вашего JavaScript, также важно. Прежде всего, запустите свои страницы через Lighthouse и определите, какие сценарии выполняются дольше всего. Lighthouse будет помечать любые сценарии, выполнение которых занимает более 2 секунд.

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

Минимизируйте и сжимайте свой код Когда вы минимизируете свой код, вы удаляете ненужные пробелы и комментарии. Это уменьшает размер файла, но ускоряет выполнение браузером кода. Одна из замечательных особенностей Shopify заключается в том, что большинство тем JS автоматически минимизируется.

Как и минификация, сжатие js уменьшает размер файла и ускоряет выполнение кода веб-браузером.

Свести к минимуму работу с потоками

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

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

Как измерить производительность Core Web Vitals

Теперь вы понимаете, как улучшить Core Web Vitals в своем магазине Shopify, теперь вам нужно знать, как измерить прогресс Core Web Vitals.

Консоль поиска

Самый быстрый способ увидеть, как ваш магазин Shopify в настоящее время работает для Core Web Vitals, — через Search Console. Перейдите к отчету Core Web Vitals из левого меню, чтобы получить данные о текущей работе вашего сайта. Он будет включать в себя разбивку того, где у вас есть проблемы с Core Web Vitals, и покажет вам образец затронутых URL-адресов.

Pagespeed Insights/Маяк

Pagespeed Insights — это бесплатный инструмент Google, который позволяет измерять скорость любой страницы. Запустите свои URL-адреса Shopify через инструмент, чтобы получить подробную информацию о вашей производительности вместе с рекомендуемыми действиями для достижения более высокого балла.

CRUX-отчет

CrUX — это собственный набор данных Google о скорости/производительности для миллионов реальных страниц. Вы можете получить доступ к данным CrUX для своего собственного магазина Shopify с помощью панели инструментов Google CrUX Data Studio. Панель инструментов предоставляет подробную информацию о том, как ваш сайт работал по показателям Core Web Vitals за последние 16 месяцев.

Что означают все эти термины CWV?

Когда вы начнете смотреть на Core Web Vitals, вы столкнетесь с множеством сложных терминов, вот что все это означает:

Основные веб-приложения Shopify

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

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

• https://apps.shopify.com/core-web-vitals-booster
• https://apps.shopify.com/page-speed-optimizer
• https://apps.shopify.com/swift

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