Как улучшить производительность сайта с помощью нового инструмента Google

Время загрузки, количество страниц на сеанс и показатель отказов – всё это непосредственно влияет на доход онлайн-бизнеса и определяет, насколько успешно ваш сайт решает задачи посетителя.

Фото: onely.com

Согласно исследованию агентства мобильного маркетинга LEAD9 и Киевского Международного Института Социологии, до 45% всех взрослых жителей Украины пользуются смартфонами. За последние 2 года доля проникновения смартфонов в Украине выросла на 26%, мобильными устройствами для выхода в интернет пользуются уже 54,5% украинцев.

Согласно другому исследованию, проведенному компанией Promodo среди топов ecommerce-сайтов стран Центральной и восточной Европы, скорость загрузки сайта является одним из решающих факторов пользовательского поведения.

Время загрузки, количество страниц на сеанс и показатель отказов – всё это непосредственно влияет на доход онлайн-бизнеса и определяет, насколько успешно ваш сайт решает задачи посетителя. При этом:

• среднее время загрузки страницы ecommerce-сайта составляет 6,7 секунд;
• сайты со скоростью загрузки больше 6,7 секунд продают в 9 раз меньше.

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

Что такое Lighthouse

В начале 2018 года Google выпустил Lighthouse – инструмент, который дает представление о том, как улучшить качество страниц вашего сайта. Измерения в Lighthouse делятся на пять категорий:

1. производительность;
2. прогрессивное веб-приложение;
3. специальные возможности;
4. лучшие практики;
5. SEO.

И уже в ноябре Google выпустил новую версию PageSpeed Insights, использующую механизм анализа Google Lighthouse.

Аудит 30 крупнейших интернет-магазинов Украины

Для проведения аудита мы использовали последнюю актуальную версию Lighthouse 4.1.0. Аудит проводился на главной странице сайта.

Оценки "производительности" могут незначительно отличаться от сессии к сессии. Поэтому был взят средний балл за 3 проверки.

Результаты

SEO оценивает эффективность сайта в поисковых системах. Lighthouse определяет, насколько хорошо оптимизирован ваш сайт, чтобы помочь повысить ваш поисковый рейтинг.

• Среднее значение по результатам проверки SEO – 97 из 100.
• Самый низкий показатель у сайта - www.letu.ua – 75 из 100.

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

• Среднее значение сайтов, прошедших проверку – 54 из 100.
• Максимальный показатель – 74 из 100 у сайта yakaboo.ua
• Минимальный – 32 на сайте www.watsons.ua

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

• Сайты eldorado.ua, avtozvuk.ua, privatmarket.ua набрали 93 балла из 100,
• Самый низкий балл среди анализируемых сайтов – 50 из 100 получил сайт mobilluck.com.ua.

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

• время загрузки первого контента (FCP) - определяет интервал времени между началом загрузки страницы и появлением первого изображения или блока текста;
• время загрузки для взаимодействия (TTI) - представляет собой отметку времени, когда страница становится полностью готова к взаимодействию с пользователем;
• индекс скорости загрузки (PSI) - показывает, насколько быстро контент страницы становится доступен для просмотра. Lighthouse делает скриншоты веб-страницы во время загрузки и вычисляет индекс скорости, анализируя разницу между первым и последним визуальным изменением.
• время загрузки достаточной части контента (FMP) – показывает время, по истечении которого становится виден основной контент страницы.
• время окончания работы ЦП - показывается время, в которое основной поток страницы становится достаточно свободен для обработки ручного ввода.
• приблизительное время задержки при вводе (EIL) - показывает время в миллисекундах, которое занимает реакция приложения на действия пользователя в течение самых занятых 5 с загрузки страницы. Если это время превышает 50 мс, пользователям может показаться, что ваше приложение работает с задержками.

По данным Lighthouse, у большинства сайтов значения производительности были низкими. То есть эти сайты медленнее, чем могли бы быть. Средняя оценка составила 35,8 из 100.

Онлайн-ритейлер электроники и бытовой техники f.ua показал лучшую оценку – 73 из 100.

С другой стороны, сайт офлайн-сети магазинов косметики EVA имеет наихудший показатель – 0 баллов.

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

Прогрессивные веб-приложения (PWA) оцениваются на основе трех ключевых факторов: скорости, надежности и вовлеченности.

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

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

Лучшими по количеству пройденных тестов стали parfums.ua и makeup.com.ua и c оценкой 97 и 90 баллов соответственно.

Chrome User Experience Report

Сегодня инструмент PageSpeed Insights (PSI) содержит данные о том, насколько удобно использовать сайт, получаемые от Chrome User Experience Report (CrUX)

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

Благодаря этому можно отслеживать слабые и сильные стороны сайта в юзабилити в динамике.

Google выпустила CrUX Dashboard, построенный на базе Data Studio. Он автоматически синхронизируется с последними наборами данных из BigQuery, его легко можно настроить под себя и предоставить доступ другим членам вашей команды.

Ниже представлено несколько примеров из этого отчёта:

Зеленая, оранжевая, красная шкала, это % пользователей, у которых сайт работает быстро, средне и медленно соответственно.

Как улучшить скорость загрузки сайта

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

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

• время загрузки первого контента;
• индекс скорости загрузки;
• время загрузки для взаимодействия.

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

• уменьшите размер загружаемых файлов (HTML, JavaScript и CSS, Images);
• используйте адаптивные изображения;
• оптимизация изображений (MozJPE, Pingo, Lossy GIF, SVGOMG);
• уменьшите количество запросов к файлам путем их объединения или используя методы Lazyload;
• быстро передавайте критический CSS, необходимый для начала отрисовки страницы;
• избегайте выполнения кода, который не нужен для начального отображения страницы.

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

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