Методика исследования

Написан на jQuery.

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

Exist.ru адаптирован под мобильные устройства, и в целом показывает неплохие результаты, но кое-где производительность на мобилках требует доработок.

Что можно улучшить: избавиться от блокирующих ресурсов и неиспользуемого кода. Кроме того, скорость загрузки уменьшается за счет встраивания сторонних сервисов в работу сайта. У Exist это сервисы Яндекса – они загружаются перед основными ресурсами сайта, что негативно влияет на производительность.

Автодок

Сайт написан на Angular и не имеет выделенной страницы для поиска товара. Зато при вводе артикула пользователь перенаправляется сразу на страницу товара.

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

Множество проблем на сайте вызывают неоптимизированные изображения устаревших форматов. Они расходуют много трафика и из-за этого загружаются медленнее. Можно смело рекомендовать сменить формат используемых на сайте изображений на WebP и AVIF – уже только эта манипуляция на 35-50% улучшит перфоманс.

Autodoc.ru в некотором смысле уникальный конкурсант в нашем шорт-листе. Это единственный сайт, который не работает через SSR (серверный рендеринг). Это обычно ведет к неоптимальному ранжированию в поисковике.

Auto3N

Сайт написан на Vue. Главная страница оптимизирована хуже всего. Производительность мобильной версии для всех страниц отстает от десктопа, особенно сильно это видно в INP – отзывчивость страдает.

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

Лучший десктопный показатель у Auto3N на странице поиска товара:

Основная проблема – большое количество неиспользуемого кода при загрузке сайта. Он блокирует загрузку нужного контента и зря расходует пользовательский трафик.

Автостэлс

Сразу оговоримся, что анализировали версию сайта, которая не требует логина для ее использования.

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

Автокомпас

Почти идеальная производительность по результатам тестов! Автокомпас – наивысшие показатели по большинству критериев оценивания. Браво технической команде за высокие стандарты и скиллы в разработке!

Лучшие результаты в поиске и на странице товара:

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

Автоевро

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

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

Оптимизация под мобилки на сайте вообще отсутствует.

Озон (категория автозапчасти)

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

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

Оффтоп – Autodoc.de

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

Сайт написан на AngularJS и отличается уникальной особенностью. Для мобильной версии сайта используется отдельный URL. Сейчас так делают редко. Самостоятельность мобильной версии, однако, от проблем производительности не избавляет.

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

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

Выбираем лучших

Лидер по производительности – Автокомпас

2-е место – Озон

3-е место – Автостэлс

4-е место – Экзист

5-е место – Автодок

6-е место – Авто3N

7-е место – Автоевро

Общие проблемы, ухудшающие производительность

Часто на исследуемых сайтах были замечены неоптимизированные изображения – форматы PNG или JPEG. Замена их на менее ресурсоемкие WebP и AVIF заметно улучшит производительность сайта.

Другая частая проблема – загрузка неиспользуемого кода (css, js). Чем меньше кода загружается на странице, тем быстрее она загружается и тем лучше опыт пользователей. Неиспользуемый код – тот, что не участвует в отрисовке контента для загружаемой страницы. Уводим его оттуда, где он не нужен, и получаем прирост производительности.

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

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

Положительные особенности, общие для большинства конкурсантов

Мобильная версия сайта – это хорошо. Сейчас ее наличие уже можно считать необходимостью.

У большинства конкурсантов сайты построены на SSR. Серверный рендеринг (server side rendering / SSR) – подход, в котором страница генерируется на сервере при каждом запросе от пользователя. Этот подход наиболее оптимален для ресурсов, содержащих контент, который часто публикуется и обновляется, требует индексации и непрерывного поддержания актуальности. Подробнее о разных подходах к реализации фронтенда можно почитать здесь.

Как решать проблемы производительности

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

• Используйте современные форматы изображений вида WebP и AVIF.
• Реализуйте подгрузку изображений в зависимости от размера экрана пользователя, используя нативное API браузера вида srcset.
• Минифицируйте ресурсы (JS, CSS, HTML) например используя различные плагины для Webpack.
• Устраните ресурсы, блокирующие первичную отрисовку (загрузку).
• Удалите неиспользуемый код.
• Снизьте количество запросов к внешним ресурсам.
• Используйте lazy load подход к загрузке ресурсов.
• Используйте механизмы кэширования ресурсов.
• Используйте векторную графику, а не растровую (где это имеет смысл).
• Сжимайте файлы используя Gzip, Brotli (или другие аналогичные статьи).
• Используйте HTTP2, вместо HTTP.