Скорость работы веб-сайта влияет не только на удобство взаимодействия пользователем, но и на многие важные показатели, например, ранжирование в поисковых системах, высокие коэффициенты конверсии и низкие показатели отказа.
В этой статье я расскажу о принципах загрузки страницы и трех инструментах, которые позволяют измерить скорость сайта: PageSpeed Insights, Lighthouse и DevTools Network.Также расскажу, из-за чего падает скорость загрузки страницы, и как ее оптимизировать. А если вы предпочитаете формат видео, то у меня для вас есть целая лекция на YouTube.
Начнем с основ: каким образом происходит загрузка сайта. При загрузке сайта мы используем два понятия: клиент и сервер.
Клиенты являются обычными пользователями с подключенными к Интернету устройствами с любым из браузеров, например, Google Chrome).
Серверы — это компьютеры, которые хранят веб-страницы, сайты или приложения. Когда клиентское устройство пытается получить доступ к веб-странице, копия страницы загружается с сервера на клиентский компьютер для отображения в браузере пользователя.
Для наглядности представим, что клиент — это строитель, а сервер — заказчик. Разберем алгоритм, по которому взаимодействует клиент и сервер.
Итак, мы хотим открыть страницу, поэтому наш строитель (клиент) просит заказчика дать ему чертеж для того, чтобы построить дом. Он отправляет HTTP-запрос на сервер, на конкретный домен. Затем строитель получает от заказчика HTTP-ответ, в котором содержится HTML-разметка. Так, мы получили условно чертеж нашего дома.
Анализ документа. Строитель изучает то, что прислал сервер, и понимает, что ему предстоит строить DOM. Да, у нас получилась игра слов. DOM (от англ. Document Object Model — «объектная модель документа») — это независящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.
Получение статики. Статика — это файлы CSS и JS, картинки и шрифты, то, что не меняется на сайте. Для строителя важно понимать детали будущего проекта, цвет, вид и т.д. Строитель снова отправляет HTTP-запрос на сервер для получения СSS, медиафайлов, шрифтов и т.д. Сервер отвечает набором ответов со статикой.
После всех полученных данных строитель наконец может построить дом. Ура!
Теперь посмотрим на все более серьезным взглядом, проанализировав все шаги во времени.
1. Получение документа
2. Анализ документа
3. Параллельно со вторым шагом получаем статику
Схематично все выглядит таким образом:
С этапами загрузки сайта разобрались, а теперь перейдем к основным классам проблем, которые поджидают нас на каждом из них.
1. На первом шаге возможно медленное получение документа. Сервер не справляется с быстрым подсчетом информации, замедляя процесс отклика на запрос. Решением этой проблемы может быть оптимизация Backend-a, сервера, улучшение железа.
2. Медленный анализ документа. Для решения этой проблемы нужна оптимизация Frontend-a, или отказ от поддержки старых устройств.
3. Медленное получение статики. Оптимизация Frontend-a и увеличение скорости интернета помогут решить эти проблемы.
🍻 Кружками пива я отметил те проблемы, которые не зависят от программиста, поэтому он со спокойной душой может пойти пить пиво в ближайший бар 🙂
PageSpeed Insights позволяет измерять основные показатели веб-сайта как в лабораторных, так и в полевых разделах отчета. PageSpeed Insights дает более точный результат. Когда запускаем тесты в DevTools и LightHouse, на них большое влияние оказывают мощность компьютера, на котором они запускаются, и скорость сети. PageSpeed Insights запускается на удаленном сервере и сам эмулирует нужные условия. Также в PageSpeed Insights можно сформировать отчет и поделиться результатами.
Выглядит инстурмент подобным образом 👇
LightHouse предоставляет автоматический аудит веб-страниц и является частью DevTools. Он не только тестирует сайт и показывает оценку производительности, но и дает конкретные рекомендации: что можно улучшить, чтобы сделать сайт быстрее.
Вкладка DevTools Network более профессиональна по сравнению с другими двумя инструментами. Инструмент открывается в самом браузере и предоставляет детализированное описание каждой из метрик. Для получения дополнительных данных используйте вкладку Network, в которой содержится информация о количестве запросов, размере загружаемых данных, времени загрузки и т.д.
Поговорим подробней о каждой из метрик, по которым можно сделать выводы о скорости загрузки конкретного сайта.
1. Performance — производительность (скорость). Позволяет узнать скорость загрузки сайта. Итоговый показатель зависит от времени загрузки интерактивных элементов, шрифтов и прочего контента, а также от времени блокировки и отрисовки стилей и рендеринга js.
2. Accessibility — доступность. Позволяет узнать, насколько удобен сайт, как воспринимается контент, и можно ли управлять интерфейсом и передвигаться по сайту без мыши.
3. Best Practices — проверяет безопасность сайта и использование современных стандартов веб-разработки.
4. SEO — помогает узнать, выполняется ли оптимизация сайта под поисковые системы.
5. Progressive Web App — позволяет проверить, подходит ли страница под стандарты прогрессивных web-приложений.
1. First Contentful Paint (FCP)
Первая отрисовка контента — это время от момента отправки запроса на сервер до момента, когда браузер отображает первый пиксель контента на экране. Эта метрика критически важна, поскольку отображение контента (пусть даже минимальное) — это сигнал для пользователя о том, что сайт загружается. Если показатель FCP высокий, пользователь подумает, что сайт не реагирует, и уйдет.
2. First Input Delay (FID)
Время ожидания до первого взаимодействия с контентом (FID) важная, ориентированная на пользователя метрика для измерения отзывчивости при загрузке. Это время от начала взаимодействия пользователя со страницей до момента, когда браузер отреагирует на это действие. Чем выше FID, тем дольше пользователю приходится ждать реакции сайта (например, кликнул пользователь по кнопке и ждет, пока развернется меню).
3. Largest Contentful Paint (LCP)
Скорость загрузки основного контента — это метрика, измеряющая время, за которое становится видимым самый большой элемент контента в области просмотра. Например крупное изображение, видео или объемный блок текста. Метрику используют, чтобы определить, когда основное содержимое страницы завершило рендеринг на экране.
4. Cumulative Layout Shift (CLS)
Совокупное смещение макета — метрика, которая измеряет визуальную стабильность сайта и фиксирует сдвиги макета. Проще говоря, замеряет, не «дергается» ли сайт.
Инструмент используют инженеры по тестированию, веб-разработчики и другие специалисты. Открыть DevTools из браузера Google Chrome можно тремя способами:
Сочетанием горячих клавиш: для Windows и Linux Ctrl + Shift + I, для macOS cmd + Shift + I.
В контекстном меню: на странице в любом месте кликнуть правой кнопкой мыши и выбрать «Просмотреть код». Главное — не путать с «Просмотр кода страницы», эта опция покажет исходный код вне DevTools.
Через меню браузера: в правом верхнем углу нажать на три точки, в меню выбрать раздел «Дополнительные инструменты» и далее «Инструменты разработчика».
Нас интересует конкретная вкладка Network. Перед нами открывается инструмент, в котором мы видим все HTTP-запросы на конкретной странице сайта. Разберем полезные столбцы в таблице запросов DevTools Network.
1. Имя. Имя файла или идентификатор ресурса.
2. Статус. Код состояния HTTP.
3. Тип. XHR — это AJAX. Media — аудио. Jpeg — изображения. Script, font — шрифт.
4. Инициатор. Объекты или процессы могут инициировать запросы.
5. Размер. Суммарный размер заголовков ответа плюс тело ответа, доставленное сервером.
6. Время. Общая продолжительность от начала запроса до получения последнего байта в ответе.
7. Waterfall. Визуальная разбивка активности каждого запроса.
Это основные столбцы, которые пригодятся вам при аудите скорости сайта. К ним я бы добавил еще несколько неочевидных, но полезных столбцов.
1. Статус-код ответа: 200, 400, 500
2. Домен, на который идет запрос
3. Тип контента
4. Инициатор запроса (страница, скрипт)
5. Размер ответа и время ответа
6. Protocol. Используется HTTP версии 1,2 или 3
7. Scheme. Схема HTTP или HTTPS
8. Method. GET, POST и т.д.
Выделил эти столбцы красной рамкой на скриншоте ниже.
Теперь обратим внимание на столбец «Тип запроса». В DevTools Network есть несколько типов запросов.
1. XHR —Асинхронный AJAX запрос к серверу.
2. JS — JavaScript скрипты
3. CSS — стили CSS
4. Img — изображения
5. Media — видео
6. Font — шрифты
7. Doc — HTML-документы
8. WS — вебсокеты
9. WASM — скрипты нового языка Web Assembly
10. Manifest — манифесты сайта.Техническая информация про сайт.
— Дополнительные столбцы
— Поиск по названию
— Фильтрация и сортировка
— Preserve log. Позволяет не очищать список запросов при перезагрузке страницы.
— Красная кнопка записи. Позволяет включать и отключать добавление новых запросов для анализа.
— Throttling. Возможность указать нужную скорость загрузки.
— Disable Cache. Отключает кэш браузера, работает только при открытом DevTools.
— Блокирование сетевых запросов. Во время тестирования можно заблокировать трекеры, аналитику, виджеты социальных сетей или любые другие запросы.
Рассмотрим наиболее частые проблемы. Я разделил их на несколько типов для вашего удобства.
Для того, чтобы отследить проблемы с медиафайлами, отфильтруем показатели по Img, либо Media, по времени и размеру.
💡 Продумывайте, какой формат изображения использовать. SVG — векторный формат используем для иконок, PNG, если есть прозрачность, JPEG для фотографий, WebP для продвинутого сжатия картинок без потерь в качестве. Формат WebP считается современным, он дает значительное улучшение производительности сайта, однако старые браузеры не поддерживают его.
💡 Размер картинки в среднем не должен превышать 250кб.
💡 Lazy load. Подход, когда картинки подгружаются только, когда пользователь дойдет до них. Сейчас это делается средствами браузера, необходимо только указать в верстке дополнительный атрибут loading co значением lazy.
💡 Не забывайте отслеживать «битые» картинки. Это означает, что картинка не может загрузиться и во вкладке Network будет подсвечиваться красным цветом.
💡 Для видео используйте два формата WEBM+mp4.
💡 Подробно расписал в инструкции по загрузке медиафайлов на сайт.
Для шрифтов советуем использовать формат Woff2 и убирать неиспользуемые начертания шрифтов.
Также используйте вариативные шрифты, по этой теме у нас даже есть целое видео.
CSS, JS:
💡 вес не более 1 мб
💡 либо динамическое подключение компонентов Vue.js (видео)
💡 минификация для JS и CSS. Минимизация ресурсов означает удаление из HTML, JavaScript и CSS кода символов, которые не требуются для загрузки, например пробелы, разделители блоков и т.д.
😖 Блокировки и различные фаерволы. Попробуйте зайти через VPN, чтобы выявить проблему.
😖 Не забывайте про Adblock. Зачастую он негативно влияет на отображение некоторых элементов.
😖 Проблемы с Ajax. Если запрос возвращает ошибку, то посмотрите код ответа, содержание и адрес ошибки, передаваемые параметры. Если запрос слишком тяжелый, то облегчите его и разбейте на части.
Симптомы медленного бэка/сервера: долгий главный HTTP ответ.
Какие меры предпринять:
1. Оптимизация Backend-a.
👨💻 Работа с БД. Проектируйте базы данных руками, используйте индексы, устраняйте лишние запросы.
👨💻 Кэширование запросов к БД, HTML, статика (JS, шрифты и т.д.).
👨💻 Очереди. Отправка Email, запросы по API. Используйте фоновое выполнение долгих задач.
2. Оптимизация сервера
🛠 Ресурсы сервера. Посмотрите, на что тратятся ресурсы, добавьте RAM, ядра CPU.
🛠 Вертикальный способ. Возьмите сервер помощнее.
🛠 Горизонтальный способ. Возьмите еще один сервер и распределите по ним нагрузку. Для этого используйте Kubernetes.
3. Настройка сжатия. Проверьте, что файлы, которые отдает ваш сервер, сжимаются с помощью gzip. Это можно проверить в DevTools (вкладка Network).
Надеюсь, эта статья поможет вам обнаружить причины низкой скорости загрузки сайта и улучшить ситуацию, не теряя пользователей. Пишите в комментариях, какими сервисами для аудита скорости сайта вы пользуетесь.
А еще у нас есть специальная услуга по аудиту проектов. Аудит проектов также позволит определить, почему сайт или приложение «тормозит», и дать конкретные рекомендации для повышения производительности. Подробная информация у нас на сайте.
