Почему сайт долго загружается и как это вредит бизнесу

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

Какая скорость загрузки сайта считается нормальной и когда сайт загружается слишком долго

Скорость загрузки сайта считается нормальной, когда главный элемент страницы появляется на экране не позже чем через 2,5 секунды после перехода. Этот порог Google задаёт для показателя LCP и оценивает его по 75 % визитов, отдельно для смартфонов и компьютеров. Скорость загрузки сайта не сводится к одной цифре: её описывают несколько показателей, и каждый отвечает за свой этап. Сайт загружается слишком долго, если хотя бы один из этих показателей устойчиво выходит за норму.

Нормы показателей скорости загрузки сайта. Источник: web.dev (Google)

Показатели LCP, INP и CLS входят в набор Core Web Vitals - так Google называет три основные метрики удобства страницы. TTFB в этот набор не входит, но именно ответ сервера задаёт нижнюю границу для всех следующих этапов загрузки. Значение TTFB выше 1,8 секунды Google относит к плохим. При таком ответе сервера страница не может загрузиться быстро, как бы хорошо ни были оптимизированы изображения и код.

Как долгая загрузка сайта вредит бизнесу

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

Посетители уходят с медленного сайта, не дождавшись первого экрана

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

Долгая загрузка сайта снижает конверсию в заявки и заказы

Конверсия - это доля посетителей, которые оставили заявку или оформили заказ. Долгая загрузка сайта снижает конверсию, потому что покупатель ждёт не один раз, а на каждом шаге: каталог, карточка товара, корзина, форма заказа. Исследование Deloitte и агентства 55 по заказу Google показало эту связь на розничных интернет-магазинах: в конце 2019 года авторы изучили 37 брендов и более 30 миллионов сеансов. Ускорение загрузки на 0,1 секунды увеличило расходы покупателей в рознице на 9,2 %.

Медленный сайт теряет позиции в Яндексе и Google

Медленный сайт рискует позициями в поиске, потому что обе поисковые системы оценивают удобство страницы для человека. Google пишет, что хорошие показатели Core Web Vitals соответствуют тому, что поощряют его основные системы ранжирования. Яндекс в справке для вебмастеров называет скорость загрузки одним из важных показателей качества сайта. Основное влияние скорости на позиции косвенное: посетитель не дожидается загрузки и возвращается в поиск, а поисковая система получает сигнал, что страница не решила его задачу.

Реклама на медленный сайт расходует бюджет на отказы

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

Как посчитать, сколько денег бизнес теряет из-за долгой загрузки сайта

Потери бизнеса из-за долгой загрузки сайта считают по простой формуле: визиты умножают на конверсию и на средний чек. Затем тот же расчёт повторяют с конверсией, которая была до замедления. Разница между двумя результатами показывает цену медленной загрузки в рублях за месяц. Цифры в примере условные: в расчёт подставляют данные собственной аналитики.

Условный пример расчёта потерь интернет-магазина из-за долгой загрузки сайта. Все значения вымышлены для иллюстрации формулы.

В условном примере падение конверсии с 2,0 % до 1,6 % стоит интернет-магазину 40 заказов и 200 000 рублей выручки в месяц. Посещаемость и расходы на привлечение клиентов при этом не изменились. Такой расчёт помогает сравнить стоимость работ по ускорению с суммой, которую бизнес теряет каждый месяц.

Почему сайт долго загружается: 7 основных причин

Сайт долго загружается, когда задержка возникает на одном из этапов открытия страницы. Сначала сервер готовит ответ, затем браузер получает стили и скрипты, после этого загружаются изображения и сторонние сервисы. Задержка на раннем этапе сдвигает все следующие, поэтому причины проверяют в порядке их появления. Если сайт загружается очень долго, обычно совпадает сразу несколько причин из семи.

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

Семь причин долгой загрузки сайта делятся на три группы: сервер, содержимое страницы и сторонние подключения. Серверные причины видны по времени ответа, остальные - по весу страницы и числу запросов. Большую часть причин устраняют без переделки проекта и без смены CMS.

Сервер медленно отвечает из-за слабого хостинга или тарифа

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

Тяжёлые изображения и видео увеличивают вес страницы

Тяжёлые изображения - одна из самых частых причин, по которым страница долго загружается. Фотографию шириной несколько тысяч пикселей выводят в блоке шириной несколько сотен, и браузер всё равно скачивает файл целиком. Картинки сжимают, приводят к размеру блока и переводят в современные форматы WebP и AVIF. Изображения за пределами первого экрана подключают через отложенную загрузку: файл скачивается, когда посетитель до него прокрутил.

JavaScript и CSS блокируют отрисовку страницы

JavaScript и CSS блокируют отрисовку, когда браузер обязан обработать их до показа содержимого. CSS - это файлы стилей, которые задают внешний вид страницы, а JavaScript - скрипты, которые отвечают за интерактивные элементы. Пока браузер разбирает объёмные стили и скрипты, посетитель видит пустую страницу при уже полученном ответе сервера. Разработчик оставляет в начале страницы только стили первого экрана, а остальной код загружает отложенно.

Сторонние скрипты, виджеты и реклама добавляют лишние запросы

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

На сайте не настроены кэширование и сжатие файлов

Кэширование - это сохранение готового результата, чтобы не создавать его заново при каждом обращении. Без серверного кэша CMS собирает одну и ту же страницу для каждого посетителя, а без кэша в браузере посетитель повторно скачивает одни и те же файлы. Сжатие GZIP или Brotli уменьшает объём текстовых файлов при передаче от сервера к браузеру. Кэширование и сжатие включают настройкой сервера или штатным модулем CMS, без изменения дизайна.

CMS перегружена плагинами, а база данных - лишними записями

CMS - это система управления сайтом, например WordPress или 1С-Битрикс. Каждый плагин или модуль CMS добавляет свои скрипты, стили и запросы к базе данных, в том числе на страницах, где он не нужен. База данных со временем накапливает старые версии записей и служебные данные, из-за чего запросы выполняются дольше. Неиспользуемые плагины удаляют полностью, базу данных чистят, а медленные запросы оптимизирует разработчик.

Сервер находится далеко от посетителей, а CDN не подключён

Расстояние между сервером и посетителем увеличивает время каждого запроса. Сайт на сервере в другой стране дольше открывается у посетителей из России, чем такой же проект в российском дата-центре. CDN (Content Delivery Network, сеть доставки содержимого) хранит копии изображений, стилей и скриптов на серверах в разных регионах и отдаёт их из ближайшей точки. CDN ускоряет передачу файлов, но не ускоряет подготовку страницы на сервере.

Почему сайт долго грузится при быстром интернете

Сайт долго грузится при быстром интернете, потому что скорость соединения влияет только на передачу файлов. Время, за которое сервер готовит страницу, и время, за которое устройство выполняет скрипты, от тарифа провайдера не зависят. Быстрый интернет скачает тяжёлую страницу быстрее, но не заставит сервер ответить раньше. Поэтому сайт с медленным сервером одинаково долго открывается и через домашний Wi-Fi, и через оптоволокно в офисе.

Какие задержки не зависят от скорости интернета посетителя

Четыре вида задержек сохраняются при любой скорости интернета у посетителя.

• Сервер тратит время на подготовку страницы: выполняет код CMS и запросы к базе данных.
• Устройство посетителя тратит время на выполнение JavaScript, и слабому смартфону на это нужно больше времени.
• Сторонние сервисы отвечают со своей скоростью, и медленный виджет задерживает страницу.
• Удалённый сервер добавляет задержку к каждому запросу, даже если соединение посетителя свободно.

Как понять, что сайт долго грузится из-за самого сайта, а не из-за устройства

Причина в самом сайте, если остальные сайты на том же устройстве открываются быстро. Вторая проверка - открыть страницу с другого устройства и через другое соединение, например через мобильный интернет вместо Wi-Fi. Третья проверка - режим инкогнито, в котором браузер не использует расширения и сохранённый кэш. Если сайт долго грузится во всех трёх случаях, задержку создаёт сервер или код страницы.

Как проверить скорость загрузки сайта и найти причину замедления

Проверить скорость загрузки сайта можно бесплатно тремя инструментами:

1. PageSpeed Insights от Google,
2. Отчётом «Время загрузки страниц» в Яндекс Метрике
3. Вкладкой Network в браузере – показывает каждый файл страницы по отдельности.

Для вывода достаточно понять, на каком этапе загрузки страница теряет больше всего времени.

Чем фактическая скорость в PageSpeed Insights отличается от лабораторной оценки

PageSpeed Insights показывает два разных результата: фактическую скорость у реальных пользователей и лабораторную диагностику.

1. Фактическую скорость Google берёт из отчёта Chrome User Experience Report (CrUX) - это сводные данные людей, которые открывали страницу в браузере Chrome за последние 28 дней. Фактическая скорость поэтому зависит от устройств и скорости интернета самих посетителей: аудитория со старыми смартфонами и мобильной сетью даёт результат хуже, чем аудитория с офисными компьютерами. В отчёте указано значение, в которое укладываются 75 % визитов.

Часто фактические данные на основе реальных пользователей отсутствуют:

Скорость загрузки у реальных посетителей такого сайта смотрят в Яндекс Метрике.

2. Лабораторная диагностика в PageSpeed Insights - это пробная загрузка страницы инструментом Lighthouse в заданных условиях. Lighthouse имитирует одно устройство, одно соединение и одну точку подключения и открывает страницу без сохранённого кэша. Лабораторный результат поэтому часто расходится с фактической скоростью у посетителей. Google рекомендует при наличии обоих результатов расставлять приоритеты по фактическим данным, а лабораторный отчёт использовать для поиска причин.

Где смотреть время ответа сервера (TTFB), если PageSpeed Insights его не показывает

Время ответа сервера (TTFB) PageSpeed Insights показывает только в блоке фактических данных, рядом с основными показателями. Если данных пользователей Chrome по сайту недостаточно, этого блока нет, и TTFB в отчёте PageSpeed Insights не видно. Владельцу сайта в этом случае подходят два других источника. Первый источник - показатель «Ответ сервера» в Яндекс Метрике, второй - строка Waiting for server response (Ожидание) во вкладке Network (Сеть) браузера:

• Откройте страницу, нажмите F12 и перейдите на вкладку Network («Сеть»).
• Обновите страницу (F5), чтобы список запросов заполнился.
• Прокрутите список в самое начало и щёлкните по первой строке. Это сам HTML-документ: в столбце Name у него адрес страницы или домен, в столбце Type - HTML.
• Далее переходим на Тайминги и ищем значение Waiting for server response (Ожидание). В норме должно быть до 800 мс.

Какой отчёт Яндекс Метрики показывает скорость загрузки сайта

Скорость загрузки сайта в Яндекс Метрике показывает отчёт «Время загрузки страниц»: он находится в разделе «Отчёты» → «Время загрузки страниц». Отчёт «Время загрузки страниц» строится по данным счётчика Метрики, то есть по визитам реальных посетителей сайта. Владельцу сайта в этом отчёте важны три показателя: «Ответ сервера», «Время до отрисовки» и «Время до загрузки DOM». По умолчанию отчёт показывает медиану - значение, в которое укладывается половина визитов.

Показатели отчёта «Время загрузки страниц» в Яндекс Метрике. Источник определений: справка Яндекс Метрики

Отчёт «Время загрузки страниц» в Яндекс Метрике отвечает на два вопроса владельца сайта: сколько ждут реальные посетители и на каком этапе. Высокий «Ответ сервера» указывает на серверную часть, высокое «Время до отрисовки» - на код страницы. Показатели удобно сравнивать по неделям: так видно, после какого изменения на сайте загрузка замедлилась.

Как проверить скорость загрузки сайта во вкладке Network браузера: инструкция для владельца сайта

Вкладка Network (в русской версии браузера - «Сеть») показывает все файлы, которые загружает страница, и время получения каждого файла. Вкладка Network встроена в браузер Chrome и в другие браузеры на его основе, устанавливать ничего не нужно. Проверка занимает несколько минут и не требует навыков программирования. Результат относится к одному компьютеру и одному соединению, поэтому вкладка Network показывает состав страницы, а не скорость у всех посетителей.

1. Откройте проверяемую страницу сайта в браузере Chrome и нажмите клавишу F12 (на Mac - Cmd + Option + I).
2. В открывшейся панели выберите вкладку Network («Сеть»).
3. Поставьте галочку Disable cache («Отключить кеш»), чтобы браузер загрузил страницу заново, как у нового посетителя.
4. Обновите страницу клавишей F5 и дождитесь, пока список файлов перестанет пополняться.
5. Посмотрите нижнюю строку панели: в ней указаны число запросов, объём загруженных данных и время полной загрузки страницы.
6. Щёлкните по заголовку столбца Size («Размер»), чтобы поднять наверх самые тяжёлые файлы.
7. Щёлкните по заголовку столбца Time («Время»), чтобы увидеть файлы, которые загружались дольше остальных.
8. Щёлкните по первой строке списка - это сама страница - и откройте вкладку Timing: строка Waiting for server response показывает время ответа сервера.

Если вы находитесь в браузере Firefox, то нажмите на столбец Передано – так будут видны самые тяжелые файлы, которые отнимают время загрузки (например картинки по 2 и более Мб, их нужно будет заменить на сжатые облегченные варианты).

Как владельцу сайта читать результаты вкладки Network в браузере.

Результат вкладки Network полезно сохранить и передать разработчику. Достаточно двух снимков экрана: список файлов с сортировкой по размеру и вкладка Timing для первой строки. С такими снимками разработчик видит, с чего начинать работы по ускорению сайта. Чтобы посмотреть загрузку так, как её видит посетитель с мобильным интернетом, в списке No throttling на той же вкладке выбирают медленное соединение.

Что делать, если сайт долго грузится: порядок действий

Если сайт долго грузится, сначала измеряют скорость и находят самое раннее узкое место. Затем правки вносят по одной и после каждой повторяют замер на тех же страницах. Такой порядок показывает, какая правка дала результат, а какая ничего не изменила. Одновременное включение нескольких плагинов оптимизации этого не показывает и может сломать вёрстку.

Что владелец сайта может сделать сам, если сайт долго загружается

Владелец сайта может устранить часть причин долгой загрузки без разработчика.

• Изображения сжимают перед публикацией и сохраняют в размере блока, в котором они показываются.
• Неиспользуемые виджеты, счётчики и плагины удаляют полностью, а не отключают.
• Кэширование включают штатным модулем CMS, если такой модуль есть.
• Тариф хостинга сверяют с текущей посещаемостью и объёмом каталога.

Эти четыре действия не требуют доступа к коду. Заметнее всего они ускоряют страницы с большим числом фотографий и подключённых сервисов.

Какие работы по ускорению загрузки сайта требуют разработчика

Разработчик нужен для работ по ускорению сайта, которые затрагивают код и сервер.

• Разработчик оптимизирует медленные запросы к базе данных и настраивает серверный кэш.
• Разработчик выделяет стили первого экрана и переводит остальные скрипты на отложенную загрузку.
• Разработчик обновляет версии PHP и CMS, на которых работает проект.
• Разработчик подключает CDN и при необходимости переносит проект на другой хостинг.

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

В каком порядке устранять причины долгой загрузки сайта

Причины долгой загрузки сайта устраняют в том порядке, в котором загружается страница.

1. Зафиксировать показатели скорости на 3–4 типовых страницах, отдельно для смартфона и компьютера.
2. Сократить время ответа сервера: кэш, запросы к базе данных, лишние плагины.
3. Освободить первый экран от блокирующих стилей и скриптов.
4. Оптимизировать изображения, начиная с главного изображения первого экрана.
5. Отложить или удалить сторонние скрипты и виджеты.
6. Включить сжатие, настроить кэш в браузере и подключить CDN.

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

Как команда Landing Heroes помогает ускорить загрузку сайта

Команда Landing Heroes разрабатывает и сопровождает сайты на WordPress, 1С-Битрикс и Laravel. В студию обращаются, когда сайт стал долго грузиться после доработок, роста каталога или подключения новых сервисов. Работа начинается с диагностики, потому что без замеров нельзя назвать ни причину замедления, ни объём работ.

• Специалисты Landing Heroes проводят технический аудит сайта и определяют, на каком этапе загрузки возникает задержка.
• Разработчики студии оптимизируют серверную часть, код страниц и изображения.
• Команда выполняет работы на той CMS, на которой уже работает проект клиента.
• В рамках технической поддержки сайта студия проверяет скорость после обновлений и подключения новых сервисов.

Сроки и состав работ по ускорению сайта Landing Heroes называет после диагностики. Условия описаны на страницах «Техническая поддержка сайтов» и «Разработка сайтов на 1С-Битрикс».

Частые вопросы о долгой загрузке сайта

Что делать, если сайт долго грузится: краткий вывод

Сайт долго грузится из-за сервера, тяжёлого содержимого страницы или сторонних подключений, и скорость интернета посетителя этого не исправляет. Долгая загрузка сайта стоит бизнесу посетителей, заявок, позиций и рекламного бюджета. Порядок действий один: замер, поиск самого раннего узкого места, правки по одной. Если на диагностику нет времени или специалиста, её проводит команда технической поддержки Landing Heroes.

Источники

• web.dev (Google), «Web Vitals»: пороги LCP, INP, CLS и оценка по 75-му перцентилю
• web.dev (Google), «Time to First Byte (TTFB)»: пороги 0,8 и 1,8 секунды
• Google Search Central, «Understanding Core Web Vitals and Google search results»
• web.dev (Google), «Milliseconds make millions»: изложение исследования Deloitte и 55
• Chrome for Developers, «How to view Chrome UX Report data on PageSpeed Insights»: источник фактических данных о скорости сайта, период 28 дней, TTFB в блоке фактических данных
• web.dev (Google), «Why lab and field data can be different»: условия лабораторного теста скорости сайта и приоритет фактических данных
• Яндекс, справка Метрики, отчёт «Время загрузки страниц»
• Яндекс, справка для вебмастеров, раздел о скорости загрузки страниц