Написать пост

Что использует команда Tproger: инструменты для мониторинга и улучшения производительности веб-сайта

Аватар Типичный программист

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

Обложка поста Что использует команда Tproger: инструменты для мониторинга и улучшения производительности веб-сайта

WebPageTest

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

 

Что использует команда Tproger: инструменты для мониторинга и улучшения производительности веб-сайта 1

PageSpeed Insights

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

Что использует команда Tproger: инструменты для мониторинга и улучшения производительности веб-сайта 2

Яндекс.Метрика и Google.Analytics

Банально, но счётчики от популярных поисковиков помогают оценить ваш сайт в жизни. Не в синтетических тестах, а на реальных юзерах. Смотрите в отчётах «Мониторинг» — «Время загрузки страниц» у Яндекса и Behaviour — Site Speed у Гугла. Как установить сами счётчики, не рассказываем: это гуглится (яндексится?).

Что использует команда Tproger: инструменты для мониторинга и улучшения производительности веб-сайта 3

Google Search Console

Не все знают, что недавно в консоли гугла появился отчёт о скорости загрузки страниц вашего сайта: Enhancements — Speed (experimental). Можно понять, какие конкретно урлы Google считает быстрыми, а какие не очень. Учитываются параметры FCP (время до первой отрисовки) и FID (задержка первого ввода).

Что использует команда Tproger: инструменты для мониторинга и улучшения производительности веб-сайта 4

Консоль разработчика Google Chrome

Жмём F12 в браузере, идём на вкладку Performance. Затем в режиме инкогнито включаем запись и загружаем URL, который вас интересует. Отчёт получается очень подробный, рекомендуем почитать официальную справку, чтобы со всем разобраться (ссылка Learn more). Хорошо подходит для тонкой оптимизации вроде рендеринга части HTML вне окна браузера (время занимает, а юзер этого не видит всё равно).

Что использует команда Tproger: инструменты для мониторинга и улучшения производительности веб-сайта 5

Rockstat

Продвинутая система для тех, кто хочет сам собирать и анализировать метрики. Просто так с наскоку не получится всё настроить, нужно разбираться. Но это удобнее, чем с нуля самому разворачивать ClickHouse, Grafana и прочее.

Что использует команда Tproger: инструменты для мониторинга и улучшения производительности веб-сайта 6
Следите за новыми постами
Следите за новыми постами по любимым темам
7К открытий7К показов