Сделали инструмент для измерения скорости сайтов с имитацией мобильного интернета
Захотелось сделать сервис, в котором можно сравнить скорость загрузки сразу нескольких сайтов и посмотреть, как они загружаются на разных скоростях мобильного интернета. А также дополнить расчетом гипотетической потери маркетингового бюджета от медленной скорости сайта.
В основе сервиса лежит библиотека 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+, и он пройдет измерение в 5 вариациях. В оригинальном Lighthouse режим для мобильного соответствует нашему самому низкому режиму.
Очень часто люди изучают свой сайт под Wi-Fi. И на хорошем интернете может показывать хорошие результаты, но стоит им воспользоваться на 3G, и сразу впечатление меняется. Вот пример сайта, который хорошо работает на высоких скоростях, но уже плохо на низких.
Вот такой инструмент для проверки сразу нескольких сайтов.
А мы, кстати, делаем быстрые сайты и PWA-приложения с классным дизайном!
Другие интересные наши работы
Не понятно как измерять
Эмм, немного странно делать все только про сеть. Ведь самое узкое место это процессор. Замедлять надо процессор и сеть. Так и делает pagespeed и loading.express. ПК версию вообще можно забыть для замера, важно мобильный вариант замерить. А сеть в РФ на достаточно высокой скорости работает. 3G, а тем более 3G- — это скорее исключение из правил.
Но раз уж так, то и 2G сделали бы.))