Понимание аудита скорости веб-сайта

Здесь, в Eastside Co, мы разрабатываем и создаем одни из лучших в мире веб-сайтов Shopify и Shopify Plus. Мы уделяем внимание обеспечению оптимального взаимодействия с пользователем, и ключевой частью этого является понимание производительности веб-сайта и того, как выглядит «хорошо». Существует много типов аудита веб-сайтов, одним из которых является аудит скорости.

Эта статья призвана дать представление о том, как работает аудит скорости веб-сайта.

Во-первых, давайте начнем с того, зачем вам проводить аудит скорости. Цель проста: насколько хорошо ваш сайт будет загружаться для посетителей с разных устройств? Проведение эффективного аудита скорости определит, насколько быстро он загружается, и даст вам советы о том, как сделать это быстрее. (Не забудьте ознакомиться с нашей подробной статьей о способах увеличения скорости вашего сайта Shopify после проведения аудита.)

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

Возможности проведения аудита скорости

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

Во-первых, при проведении аудита необходимо учитывать множество факторов. Скоро будет разоблачение распространенных мифов. Но, во-первых, следует помнить о полномочиях по проведению аудита.

Вы можете положиться на PageSpeed ​​Insights (PSI) как на инструмент проверки скорости. Вы могли. Но есть ключевой фактор, о котором следует помнить:

PSI не улавливает узкие места в реальном мире. Или сравните ключевые показатели эффективности (KPI) с реальными страницами.

PSI — это смоделированная среда для отладки проблем с производительностью.

Чтобы найти реальные узкие места и KPI страницы, вам нужен такой инструмент, как Google Lighthouse. Но вам также нужно оборудование для его запуска.

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

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

Несколько слов о результатах PSI

PageSpeed ​​Insights (PSI) от Google — популярный инструмент. Он использует Lighthouse (также инструмент Google) для проведения аудита. Но имейте в виду, что это происходит в моделируемой среде.

Предстоит подробное обсуждение показателей производительности и их значения. Во-первых, давайте разберемся с этими мифами о результатах PSI:

• Пользовательский опыт исходит из одной метрики : нет, это не так. Вам нужно будет оценивать метрики по множеству значений, а не по одному разу.

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

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

Собранные данные о производительности бывают двух типов: лабораторные данные и полевые данные.

Лабораторные данные

Лабораторные данные (предоставленные PSI) — это данные о производительности в контролируемой среде. Он использует предустановки для настроек сети и устройства. Идея состоит в том, что вы получите набор воспроизводимых данных для целей отладки.

Полевые данные

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

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

Декодированные показатели производительности

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

Почему оценки колеблются

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

• Показываемая реклама меняется. Если вы размещаете рекламу на своем веб-сайте или проводите A/B-тестирование, это приведет к отклонениям в производительности.

• Изменения маршрутизации интернет-трафика. Маршрут к самому сайту в сети может меняться.

• Изменения в используемом оборудовании. Мощный настольный ПК по сравнению с мобильным устройством.

• Антивирусное программное обеспечение может вызвать требования к пропускной способности. Это приведет к колебаниям результатов аудита.

• Любые расширения браузера, внедряющие JavaScript на страницу.

Взвешивание

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

Метрики

Теперь мы можем просмотреть метрики верхнего уровня, чтобы расшифровать, что они означают:

Первая содержательная отрисовка (FCP) — эта метрика измеряет, сколько времени требуется для загрузки текста в верхней части страницы. Это контент, который вы видите без необходимости прокрутки. Слишком много шрифтов и большие файлы шрифтов повлияют на эту оценку. Так же будет тормозить загрузка шрифтов с внешних ресурсов.

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

Самая большая содержательная краска (LCP) — эта метрика ищет самое большое изображение или блок текста. Он измеряет, сколько времени требуется для загрузки этого элемента в окно просмотра. Это может быть главное изображение или большой фрагмент текста.

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

Общее время блокировки (TBT) — эта метрика похожа на TTI. Но он измеряет общее время блокировки на странице. Это относится к тому, что пользователь не может щелкать элементы или прокручивать страницу.

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

Ну наконец то...

Основные моменты аудита скорости веб-сайта: есть лабораторные данные и полевые данные. Где лабораторные данные — это смоделированная среда, а полевые данные — это взаимодействие с пользователем в реальном времени. Чтобы запустить Lighthouse для просмотра полевых данных, вам нужно, чтобы хост-компьютер имел максимально возможную вычислительную мощность. Лабораторные данные от PSI подходят для основных целей руководства и отладки.

Если вы хотите узнать больше о наших аудитах скорости веб-сайта или о том, как мы можем спроектировать и построить магазин Shopify или Shopify Plus для вашего бизнеса в области электронной коммерции, напишите нам!