Решили сделать такой сервис, где можно сравнивать, как быстро открываются разные сайты, и посмотреть, как они выглядят при разной скорости интернета на мобильных устройствах. При этом добавили функцию, которая оценивает потерю маркетингового бюджета из-за медленной загрузки сайта.
В основе всего этого лежит библиотека Lighthouse, которую использует Google для оценки качества сайтов. Эта штука доступна каждому в браузере Chrome.
Расчет потери маркетингового бюджета основан на исследовании от компании Akamai. Понятное дело, что скорость загрузки сайта влияет на то, как часто посетители становятся клиентами. На это указывают многочисленные исследования. Но стоит помнить, что помимо этого, есть и другие факторы, влияющие на успех продукта и компании.
Вот так выглядит интерфейс:
Что означают столбцы в таблице
Performance
Этот параметр оценивает, насколько хорошо работает ваша страница. Он включает в себя основные измерения, которые я поясню ниже. Оценка данного параметра изменяется от 0 до 1, и эти значения следуют логарифмической шкале.
Speed-Index
Это одна из ключевых метрик производительности веб-страницы. Она оценивает, насколько быстро содержимое становится видимым для пользователя в процессе загрузки страницы. Мы считаем этот показатель основным, потому что он измеряет свой показатель на основании кадров, что делает его уникальным и более точным.
FCP (first-contentful-paint)
Этот параметр показывает, сколько времени проходит с момента, когда начинается загрузка веб-страницы, до того момента, когда пользователь видит первый элемент контента на экране.
FMP (first-meaningful-paint)
Эта метрика производительности веб-страницы отражает время с начала загрузки страницы до момента, когда пользователь обнаруживает самый важный и полезный контент на странице.
LCP (largest-contentful-paint)
Этот параметр измеряет время, требуемое для загрузки самого крупного контентного элемента на веб-странице.
SEO
Этот параметр оценивает эффективность оптимизации веб-страницы для поисковых систем, таких как Google. Lighthouse анализирует метаданные, структуру HTML и другие факторы, влияющие на SEO.
Best Practices
Этот параметр проводит анализ веб-страницы с целью определения соответствия лучшим практикам веб-разработки. Он может выявлять потенциальные проблемы и предоставлять рекомендации по улучшению кода и дизайна.
Accessibility
Этот параметр оценивает доступность веб-страницы для пользователей с ограниченными возможностями. Lighthouse проверяет соответствие веб-страницы стандартам доступности, таким как WCAG (Web Content Accessibility Guidelines).
Измерение в нескольких скоростях
Вы можете выбрать один веб-сайт в режиме Lighthouse+, и он будет измерен в пяти различных вариантах. В режиме для мобильных устройств в оригинальном Lighthouse соответствует нашему самому низкому режиму.
Часто люди проверяют свой сайт при использовании Wi-Fi. На быстром интернете результаты могут быть впечатляющими, но как только переключишься на 3G, впечатление меняется. Приведу пример сайта, который показывает хорошие результаты при высоких скоростях, но начинает проявлять проблемы при низких.
Вот такой инструмент для проверки сразу нескольких сайтов.
А мы, кстати, делаем быстрые сайты и PWA-приложения с классным дизайном!
Другие интересные наши работы
Как находить точки роста с помощью машиного обучения
”Яндекс Метрика” в разрезе. Разбираемся в деталях и юзерах
Прощайте, сложности: новый сервис для расчета воронки продаж