Сайт тормозит из-за блокировок и плохого интернета: 6 мер, которые бизнес может проверить сам

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

Цена ожидания хорошо измерена. По данным Google, если страница грузится 3 секунды вместо одной, вероятность, что пользователь уйдёт, растёт на 32%. При 5 секундах — уже на 90%.

Мы в ITSumma работаем с интернет-магазинами, медиа и веб-сервисами, для которых сайт — главный канал общения с клиентами. Многое здесь можно поправить быстро и без большой разработки. Мы собрали шесть мер, с которых стоит начать:

По каждой расскажем, как проверить, что у вас сейчас, что сделать самим, а что поручить разработчику (с готовой формулировкой задачи), сколько это займёт и что получилось у наших клиентов.

Программировать не придётся, но пригодятся инструменты разработчика в браузере. Откройте нужную страницу и нажмите F12. Если не сработало — Ctrl + Shift + I на Windows или ⌘ + ⌥ + I на macOS.

Если на сайте встроены ролики с YouTube, при замедлении сервиса у части посетителей они просто не загрузятся. Хуже того, иногда подвисает вся страница: браузер ждёт ответа от домена, который не отвечает.

Решение — хранить видео там, где оно стабильно открывается в России: VK Видео, Rutube, Дзен или собственный плеер на российском хостинге.

Как проверить. Откройте страницу с видео и нажмите play. Ролик стартовал за пару секунд — всё в порядке. Если ждать приходится дольше, посмотрите, откуда он грузится. В панели разработчика откройте вкладку Network (Сеть), обновите страницу и поищите в списке запросы к youtube.com или googlevideo.com. Статус ошибки или вечный «pending» означают, что видео до пользователя не доходит. Запросы к vk.com или rutube.ru, после которых ролик играет, — норма.

Что сделать.

Если нужно решение надолго, задачу разработчику можно поставить так:

Сколько займёт. Заменить одно-два видео вручную — 10–20 минут. Поддержку нескольких видеоплатформ в админке разработчик соберёт примерно за полдня.

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

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

Изображения обычно самая тяжёлая часть страницы, и на медленном интернете тормозят в первую очередь именно они. Современные форматы заметно легче привычных: по данным Google, WebP весит на 25–35% меньше JPEG и PNG при сопоставимом качестве. Если перевести картинки в WebP или AVIF и заодно уменьшить их до разумного размера, страница станет легче в разы, а разницы на глаз никто не заметит.

Как проверить. Кликните по картинке правой кнопкой → «Сохранить картинку как…». В окне сохранения будет видно формат. Если это не WebP и не AVIF, файл, скорее всего, тяжёлый — сохраните его и посмотрите вес.

Чтобы оценить все картинки на странице разом, откройте в панели разработчика вкладку Network, выберите фильтр Img и обновите страницу. Вес и формат каждой будут в таблице.

Что сделать.

На примере ниже смена формата с JPEG на WebP уменьшила вес картинки на 79%.

💡 Не загружайте картинки крупнее, чем они показываются на сайте. Если на странице изображение шириной 800 px, а в админку залит файл на 4000 px, пользователь скачивает лишнее.

Задача разработчику на постоянное решение:

Сколько займёт. Пересохранить десяток картинок — минут пять. Автоматическую конвертацию на стороне сайта разработчик настроит за 1–2 дня.

Из практики. Новостному медиа мы включили автоматическую конвертацию в WebP для всех новых картинок, а старые прогнали одной командой. На кулинарном портале систему пересжатия и ресайза строили с самого начала — с несколькими параллельными обработчиками для больших объёмов. Первый экран обоих сайтов сейчас загружается в среднем за 2,5 секунды.

По умолчанию браузер скачивает всё содержимое страницы сразу, включая картинки в самом низу, до которых человек может и не долистать. Отложенная загрузка (lazy loading) работает иначе: сразу грузится только то, что видно на экране, остальное подтягивается при прокрутке. Первый экран появляется быстрее, нагрузка на сеть и сервер падает.

Как проверить. Откройте страницу, в панели разработчика — вкладку Network с фильтром Img. Не прокручивая страницу, посмотрите, сколько картинок загрузилось. Потом медленно листайте вниз. Если в списке появляются новые запросы, lazy loading работает. Если всё загрузилось сразу при открытии — нет.

Обратите внимание на счётчик запросов (Requests) в левом нижнем углу: по мере прокрутки он растёт, значит, браузер догружает новые изображения.

Что сделать. Для картинок это один атрибут в HTML — loading="lazy", его поддерживают все современные браузеры. Но проставить его самостоятельно по всему сайту непросто, так что лучше поручить разработчику:

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

Из практики. На кулинарном портале при открытии страницы браузер скачивает 3,3 МБ. Если долистать до конца — 14,8 МБ. Получается, больше 11 МБ, почти 80% страницы, пользователь загружает только тогда, когда действительно до них добирается.

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

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

Как проверить. Прогоните страницу через PageSpeed Insights и посмотрите на показатель Total Blocking Time в разделе «Производительность». Он показывает, сколько времени страница была «заморожена» выполнением скриптов.

Ниже в отчёте можно найти, какие именно скрипты мешают. В нашем примере отрисовку блокировали два платёжных скрипта:

А так выглядят показатели после того, как скриптам добавили атрибут defer (он говорит браузеру выполнить скрипт после загрузки основной страницы):

Что сделать. Начните с ревизии: онлайн-чаты, счётчики, карты, кнопки соцсетей. Про каждый виджет стоит честно спросить себя, нужен ли он. Лишнее отключить, остальное передать разработчику с такой задачей:

Сколько займёт. Расставить defer и убрать явно лишнее — несколько часов. Серьёзная чистка кода — пара дней.

Из практики. В новостном медиа платёжные скрипты грузились на каждой странице и блокировали контент. После добавления defer отрисовка ускорилась на 25%. На кулинарном портале оптимизация сторонних скриптов сократила время загрузки страницы вдвое.

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

💡 Выбирайте CDN, у которого есть серверы внутри страны, где живут ваши пользователи.

Как проверить. Во вкладке Network кликните по любой картинке или скрипту и откройте Headers (Заголовки). Строки вроде x-cache: HIT, cf-cache-status или cache-status говорят о том, что статика идёт через кеширующий слой.

На скриншоте две важные строки. cache-status: HIT означает, что картинка нашлась в промежуточном кеше — но одного этого мало, чтобы утверждать, что это именно CDN. А вот cache-host: yccdn-kzkgf01opti-1 — уже имя конкретного узла CDN.

Что сделать. CDN подключает разработчик или администратор, но это быстрая задача:

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

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

CDN влияет не только на скорость, но и на стабильность. Как мы сделали сайт клиента в 4 раза стабильнее, рассказывали в кейсе на сайте Yandex Cloud.

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

Управляет этим заголовок Cache-Control, а точнее его директива max-age — сколько секунд браузер может хранить файл у себя. Есть ещё s-maxage, но её читают только CDN и общие кеши.

Как проверить. С открытой вкладкой Network зайдите на сайт два раза. Если при втором заходе в колонке Size у статических файлов вместо веса написано disk cache или memory cache, файлы берутся из кеша.

Можно проверить и по-другому: выберите любой загруженный файл, откройте Headers и найдите в Response Headers строку cache-control. Большое значение max-age значит, что браузеру разрешено хранить файл долго.

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

Сколько займёт. Базовая настройка — несколько часов, тонкая настройка под разные типы файлов — до дня.

Из практики. На том же кулинарном портале при повторном визите картинка рецепта на 38 КБ вообще не запрашивается по сети, браузер берёт её с диска. Таких картинок на странице несколько десятков, так что при втором заходе сотни килобайт просто не скачиваются.

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

Показывайте загрузку. Вместо пустого места — индикатор. Лучше всего «скелетон»: серые блоки на местах, где вот-вот появится контент. Человек понимает, что процесс идёт, и не закрывает вкладку.

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

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

Пишите по-человечески. Подготовьте короткие понятные тексты для типовых ошибок и подскажите, что делать дальше.

Это первая статья из серии о том, как не терять клиентов при блокировках и нестабильном интернете. В следующих разберём меры посложнее.

Если не хочется заниматься всем этим самим, оставьте заявку на сайте ITSumma — поможем с оптимизацией комплексно. А про технологии и кейсы регулярно пишем в нашем Telegram-канале.