Статья

Почему сайт медленный: семь причин, которые видно без разработчика

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

3 минуты чтенияЦТБ Центр, Разработка и консалтинг

Проверить, почему сайт медленный, можно самому — инструменты уже встроены в браузер. Полчаса работы дают результат, с которым разговор с подрядчиком начинается с конкретики, а не с «у нас всё тормозит».

Откройте сайт в браузере и нажмите F12 — появятся инструменты разработчика. Вкладка «Сеть» (Network), поставьте галочку «Отключить кеш», обновите страницу.

1. Тяжёлые изображения

Отсортируйте запросы по размеру. Если наверху картинки по 2–4 мегабайта — причина найдена, дальше можно не искать.

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

Норма: фотография в контенте — до 200 КБ, заглавное изображение — до 400 КБ.

2. Лишние сторонние скрипты

Отфильтруйте запросы по типу JS и посмотрите на домены. Всё, что не с вашего домена, — сторонние скрипты.

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

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

3. Медленный ответ сервера

Найдите самый первый запрос — сам документ. Посмотрите на время ожидания ответа сервера.

Хорошо — до 200 мс. Терпимо — до 600. Плохо — больше секунды.

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

4. Слишком много запросов

Внизу панели «Сеть» указано общее число запросов. Больше 100 на страницу — повод разбираться, больше 200 — почти наверняка проблема.

Часто это отдельные файлы стилей и скриптов от каждого установленного модуля, которые никто не объединил.

5. Шрифты

Отфильтруйте по типу Font. Признаки проблемы: больше четырёх файлов, формат ttf или otf вместо woff2, загрузка со стороннего домена.

Отдельно заметный эффект — когда текст сначала показывается системным шрифтом, а потом перерисовывается. Раздражает и портит метрику стабильности вёрстки.

6. Отсутствие кеширования

Обновите страницу второй раз, уже без галочки «Отключить кеш». Если объём загруженного почти не изменился — кеширование не настроено, и каждый посетитель на каждой странице заново качает логотип, стили и шрифты.

Настраивается на стороне сервера, работы на несколько часов, эффект — заметный.

7. Всё грузится сразу

Прокрутите страницу вниз, наблюдая за панелью «Сеть». Если при прокрутке ничего не подгружается — значит, всё скачалось заранее, включая изображения из подвала, которых человек может вообще не увидеть.

Отложенная загрузка изображений ниже первого экрана — простая настройка, которая сильно улучшает первое впечатление.

Отдельно: проверьте на телефоне

В инструментах разработчика есть режим эмуляции мобильного устройства и ограничения скорости соединения. Включите эмуляцию медленного 4G и посмотрите, сколько занимает загрузка.

Разница с настольным компьютером на быстром интернете бывает пятикратной. Именно эти цифры видит большая часть вашей аудитории.

Что делать с результатом

Выпишите найденное списком с числами: «главная — 6,2 МБ, из них 4,8 МБ изображения», «ответ сервера 1,4 с», «14 сторонних скриптов».

С таким списком подрядчик сразу назовёт объём работ и цену, а вы сможете проверить результат теми же измерениями. Это гораздо продуктивнее, чем «сделайте побыстрее».

ПроизводительностьВеб-разработка

Следующий шаг

Нужна такая же работа?