Как бизнесу выживать при блокировках: 6 решений по ускорению загрузки сайта для не-технарей
Привет, я Маша, разработчица в команде ITSumma. Мы работаем с интернет-магазинами, медиа, веб-сервисами и другими высоконагруженными системами, где сайт — важный канал взаимодействия с клиентами.
Мы знаем, насколько важную роль играет скорость загрузки. Например, если страница открывается не за 1, а за 3 секунды, вероятность ухода пользователя возрастает на 32 %, а при 5 секундах — уже на 90 %. Люди могут просто закрыть вкладку и уйти к конкурентам, в итоге бизнес потеряет потенциальных покупателей.
При этом даже без опыта в разработке можно обезопасить себя и сделать так, чтобы сайт открывался быстро при нестабильном интернете и блокировках. Для начала хватит шести несложных мер — в статье подробно разберу, как их внедрить, сколько это займёт, когда привлечь разработчиков и каким образом проверить эффект. А ещё расскажу, как это сработало у нас на реальных проектах.
Что важно знать перед началом
Глубокие технические знания не понадобятся, но будет полезно понимать, как базово устроены веб-сайты.
Чтобы проверить каждое из решений, нужно открыть в браузере инструменты разработчика. Для этого, находясь на нужной странице, нажмите F12 либо сочетание «Ctrl + Shift + I» на Windows или «⌘ + ⌥ + I» на macOS.
1. Перенесите видео на российские хостинги
Если на сайте встроены ролики с YouTube, то при замедлении или блокировке сервиса у части пользователей видео не загрузятся: будет крутиться вечный спиннер. Иногда подвисает и вся страница, потому что браузер ждёт ответа от недоступного домена.
Чтобы решить проблему, храните видео на сервисах, которые стабильно работают в России: VK Видео, Rutube, Дзен или собственный плеер на российском хостинге. Тогда ролик будет грузиться с доступного адреса, и страница не будет висеть в ожидании заблокированного.
🤔 Как проверить, что у вас сейчас. Тут всё просто: откройте страницу с видео и включите его. Если ролик проигрывается в течение первых нескольких секунд, значит, всё хорошо. А если загружается дольше — есть смысл проверить, есть ли на сайте ролики, встроенные с иностранных площадок.
Для этого откройте панель разработчика, зайдите во вкладку Network / Сеть, обновите страницу и посмотрите в списке запросов, нет ли обращений к youtube.com или googlevideo.com со статусом ошибки либо «pending». Если видео идёт с vk.com или rutube.ru и проигрывается, то всё уже в порядке.
Пример ошибки загрузки видео с YouTube
⚙️ Как сделать.
Залейте ролик в VK Видео или Rutube — это бесплатно, нужен только аккаунт.
На странице ролика нажмите «Поделиться» → «Экспортировать» / «Код для вставки» (embed). Получите фрагмент HTML вида:
<iframe src="...">.Передайте код тому, кто наполняет сайт, или сами зайдите в админку или CMS, там обычно есть блок «Вставить видео» или «HTML-код».
У всех роликов, загруженных на иностранные хостинги, замените ссылки.
Вот как сформулировать задачу разработчику, если нужно более долгосрочное решение:
«Нужно поддержать встраивание видео не только с YouTube, а ещё с VK Видео, Rutube и Дзен. В админке должно быть поле, куда редактор вставляет обычную ссылку на ролик, а сайт сам превращает её в плеер. Для iframe выставь атрибут
sandbox, чтобы чужой плеер не делал нежелательных редиректов».
⏳ Сколько займёт. Заменить вручную одно-два видео через embed-код — минут 10–20. Автоматическую поддержку нескольких видеоплатформ в админке разработчик может собрать за полдня.
💻 Как это сработало у наших клиентов. Мы работали с кулинарным порталом и прошли с ними весь этот путь: добавили поддержку встраивания из VK, Дзена и Rutube.
С другим клиентом пошли дальше и держали видео в собственном хранилище. Это полная независимость от внешних платформ, но дороже и сложнее в поддержке. Поэтому я советую начать со встраивания в VK Видео или Rutube, а свой хостинг заводить, когда независимость правда критична и есть ресурсы на инфраструктуру.
💡 Если перенести видео нельзя, то стоит попробовать заменить тип контента. Схема, короткая расшифровка или несколько слайдов ответят на вопрос пользователя лучше битой ссылки и чёрного окна.
2. Уменьшите вес и размер изображений
Обычно картинки — это самая тяжёлая часть страницы, и при медленном интернете именно она будет замедлять загрузку. При этом, по данным Google, WebP весит на 25–35 % меньше, чем JPEG/PNG в сопоставимом качестве.
Если перевести все картинки в форматы WebP или AVIF и в разумный размер, они станут легче в несколько раз без заметной потери качества. Как итог: страница будет быстрее грузиться даже при плохом интернете.
🤔 Как проверить, что у вас сейчас. Щёлкните по изображению на сайте правой кнопкой мыши → «Сохранить картинку как...». В окне сохранения увидите имя и формат. Если это не WebP и не AVIF, картинка, скорее всего, тяжёлая: сохраните её и посмотрите вес в папке.
Чтобы разом оценить все картинки, откройте вкладку Network / Сеть в панели разработчика, отфильтруйте по типу Img и обновите страницу. Панель покажет вес и формат каждой.
Консоль разработчика → Network → Img. В столбце Type видны форматы всех картинок на странице
⚙️ Как сделать.
Прогоните картинки через бесплатный онлайн-сервис, например, Squoosh от Google или TinyPNG.
Выберите формат WebP и подберите качество: 70–80 % обычно визуально неотличимы.
Скачайте картинку в выбранном формате и замените в админке или CMS.
На этом примере видно, как изменение формата с JPEG на WebP уменьшает вес картинки на 79 %↓
Скриншот из сервиса Squoosh: слева оригинальное изображение, справа его сжатая версия. Визуально заметно, что качество не изменилось, при этом вес сократился весьма значительно
💡 Не заливайте картинки шире, чем они отображаются на сайте. Если ширина картинки на странице 800 px, а вы загрузите файл размером 4000 px — будете гонять трафик впустую.
Вот как сформулировать задачу разработчику, если нужно более долгосрочное решение:
«Сделай так, чтобы при загрузке картинок в админку они автоматически конвертировались в WebP и получали уменьшенные версии — превью. На сайте отдавай WebP, а исходник храни отдельно».
⏳ Сколько это займёт. Минут пять уйдёт на пересохранение пачки из десяти картинок. Автоматическую конвертацию в WebP на стороне сайта разработчик настроит за 1–2 дня.
💻 Как это сработало у наших клиентов. Мы работали с новостным медиа и включили на сайте автоматическую конвертацию загружаемых картинок в WebP: и для новых, и разовой командой прогнали старые.
А на кулинарном портале ещё со старта построили целую инфраструктуру пересжатия и ресайза пачками, вплоть до нескольких параллельных обработчиков на больших объёмах.
В итоге оба первых экрана этих сайтов загружаются в среднем за 2,5 секунды.
3. Настройте отложенную загрузку контента
По умолчанию браузер грузит всё содержимое страницы сразу: например, и картинки, и блоки далеко внизу, которые пользователь может и не увидеть. Lazy loading меняет процесс: сразу грузится только то, что в зоне видимости, а остальное подтягивается по мере прокрутки. Так первый экран появляется быстрее, а нагрузка на сеть и сервер падает.
🤔 Как проверить, что у вас сейчас. Откройте страницу сайта. Зайдите всё в ту же вкладку Network / Сеть и выберите фильтр Img. Не прокручивайте страницу. Посмотрите, сколько картинок загрузилось сразу.
Теперь медленно скролльте вниз: если картинки подгружаются по мере прокрутки, lazy loading работает. Если всё загрузилось сразу, медленная загрузка ещё не настроена.
Во вкладке Name заметно, что картинки подгружаются постепенно
На скриншоте видно изменение количества запросов (Requests) в левом нижнем углу, то есть, по мере прокрутки страницы, браузер выполнил дополнительные запросы к новым изображениям. Соответственно, lazy loading работает.
⚙️ Как сделать. Для картинок это включается одним атрибутом в HTML: loading="lazy". Это стандарт, его поддерживают все современные браузеры.
Самостоятельно сделать это будет непросто, поэтому оставляю формулировки для вашего разработчика:
«Добавь всем картинкам ниже первого экрана атрибут
loading="lazy". Картинкам на первом экране, наоборот, lazy не ставь, чтобы они появлялись сразу».«Тяжёлые блоки, которые не видны при открытии, например, комментарии, похожие материалы, нижние секции, подгружай отложенно, когда пользователь до них доскролит».
⏳ Сколько это займёт. Проставить loading="lazy" картинкам — пара часов. Отложенная подгрузка целых блоков и секций займёт 1–3 дня, смотря сколько их.
💻 Как это сработало у наших клиентов. На кулинарном портале одного из наших клиентов lazy loading позволяет не загружать сразу примерно 77 % контента. При первом открытии страницы браузер передаёт 3,3 МБ, а после прокрутки до конца объём загруженных данных возрастает до 14,8 МБ.
Это означает, что первоначально браузер не скачивает около 11,4 МБ данных, откладывая загрузку изображений до момента, когда пользователь прокрутит страницу.
4. Оптимизируйте JavaScript
JavaScript оживляет сайт: меню, формы, аналитику, чаты, виджеты. Но каждый скрипт браузер должен скачать и выполнить, и пока он это делает, страница подвисает, особенно при слабом интернете.
Часто половина скриптов — это сторонние виджеты: счётчики, баннеры, онлайн-чаты, платёжные формы. Их можно грузить позже или убрать совсем. Чем меньше JavaScript, тем быстрее страница реагирует на нажатия, растёт скорость загрузки и общая отзывчивость.
🤔 Как проверить, что у вас сейчас. Можно прогнать страницу через PageSpeed Insights. Сначала посмотрите на показатель Total Blocking Time во вкладке «Производительность».
По показателям видим, что на странице есть проблемы
В нашем примере видно, что отрисовку страницы блокируют 2 платёжных скрипта:
А так выглядит статистика загрузки после добавления атрибута defer:
Показатели страницы после добавления атрибута defer
⚙️ Как сделать.
Проведите ревизию виджетов: онлайн-чаты, счётчики, карты, кнопки соцсетей. Ответьте себе на вопрос, действительно ли каждый из них нужен?
Лишние виджеты нужно будет отключить. Самостоятельно сделать это будет непросто, поэтому оставляю формулировки для вашего разработчика:
«У сторонних и второстепенных скриптов, например, аналитики, платёжных форм, виджетов добавь атрибут
deferили грузи их после основной страницы, а не блокирующе».«Посмотри отчёт PageSpeed по неиспользуемому JS и убери или раздели лишнее. Тяжёлые компоненты, которые нужны не всем, подгружай по требованию (
dynamic import)».
⏳ Сколько это займёт. Расставить defer и убрать явно лишние виджеты — несколько часов. Серьёзная чистка и разбиение кода на части растянутся на пару дней.
💻 Как это сработало у наших клиентов. В новостном медиа платёжные скрипты грузились на каждой странице и блокировали контент. Мы добавили им defer, и отрисовка ускорилась на 25 %.
На кулинарном портале оптимизировали загрузку сторонних скриптов — в результате нам удалось сократить время загрузки страницы в 2 раза.
5. Подключите CDN
Content Delivery Network или сеть доставки контента (CDN) — это сеть географически разбросанных серверов. Они хранят копии статики вашего сайта — картинки, видео, скрипты, стили — ближе к пользователю. И вместо того чтобы каждый раз тянуть файл с далёкого сервера, браузер может взять его с ближайшей точки.
Благодаря этому популярные страницы загружаются мгновенно, ускоряется прогрузка для пользователей из разных регионов, уменьшается нагрузка на сервер и базу, растёт устойчивость при пиках.
💡 Важно, чтобы у CDN были серверы внутри вашей страны.
🤔 Как проверить, что у вас сейчас. Во вкладке Network / Сеть кликните по любой картинке или скрипту и откройте Headers / Заголовки. Если видите тексты вроде: x-cache: HIT, cf-cache-status, cache-status значит, статика идёт через CDN.
Открываем панель разработчика на странице с картинками, заходим в Network → Img → Headers → Response headers
Обратите внимание на строки:
cache-status: HIT — картинка была найдена в промежуточном кеше. Однако одного этого ещё недостаточно, чтобы назвать кеш CDN.
cache-host: yccdn-kzkgf01opti-1 — а вот это уже имя конкретного кеширующего узла.
⚙️ Как сделать. Эту меру настраивает разработчик или администратор, но запускается она быстро. Вот как сформулировать задачу:
«Подключи CDN с российскими точками присутствия, например, от облачного провайдера, услугами которого мы пользуемся, и отдавай через него всю статику: картинки, видео. Файлы можно хранить в объектном хранилище, S3-совместимом, а CDN поставить перед ним».
⏳ Сколько это займёт. Подключить готовый CDN к существующему хранилищу — от нескольких часов до пары дней. Если хранилище для медиа ещё не вынесено отдельно, потребуется время ещё и на это.
💻 Как это сработало у наших клиентов. На кулинарном портале одна картинка рецепта весит 38 КБ. Первое обращение к ней — самое дорогое: браузер ещё ищет сервер и устанавливает соединение, весь путь занимает около 0,33 секунды.
Но к CDN он подключается только один раз — дальше каждая следующая картинка приходит меньше чем за 0,1 секунды, а первый байт — примерно за 0,08. В итоге медиа на странице подгружаются почти мгновенно.
💡 Использование CDN работает не только на скорость, но и на стабильность работы сайта. О том, как ITSumma сделала сайт в 4 раза стабильнее, читайте в другой статье.
6. Настройте кеширование в браузере
В процессе кеширования браузер сохраняет уже скачанные файлы сайта — картинки, стили, скрипты, шрифты — и при повторном заходе берёт их с устройства пользователя, а не скачивает заново. Для посетителя это означает, что на втором и следующем визитах сайт будет открываться почти мгновенно: половину файлов вообще не надо загружать, поэтому сайт работает даже при совсем плохом соединении.
Всем этим управляет заголовок Cache-Control. За браузерное кеширование в нём отвечает директива max-age: в неё задаётся время, в течение которого браузер будет держать файл у себя. Есть ещё s-maxage, но её читают только CDN и общие кеши.
🤔 Как проверить, что у вас сейчас. Со включённой панелью разработчика и вкладкой Network / Сеть откройте сайт дважды. При втором посещении у статических файлов в колонке Size вместо веса появляется disk cache или memory cache: значит, файл взят из кеша, а не скачан заново.
В этом примере все картинки подгружаются из кеша
Ещё можно открыть файл → перейти во вкладку разработчика → выбрать один из загруженных файлов → открыть Headers / Заголовки и найти в разделе Response Headers строку cache-control.
Если в ней указан большой max-age, значит, браузеру разрешено хранить этот файл в кеше долго.
Для этого сайта мы, например, установили значение max-age=2592000. Так что картинки будут храниться в кеше очень долго
⚙️ Как сделать. Своими силами вряд ли получится быстро настроить кеширование, но можно попросить разработчика:
«Настрой заголовки
Cache-Controlдля статики: картинкам, шрифтам, CSS/JS со стабильными именами выставь длительное кеширование, например, на год:max-age=31536000, immutable. HTML-страницам — короткое или с проверкой актуальности, чтобы пользователь видел свежий контент».
⏳ Сколько это займёт. Настроить заголовки кеширования для статики — несколько часов. Тонкая настройка под разные типы файлов добавит до дня.
💻 Как это сработало у наших клиентов. На кулинарном портале при повторном заходе картинка рецепта весом 38 КБ вообще не запрашивается по сети — браузер берёт её с диска. А таких картинок на странице несколько десятков, так что при втором визите почти весь их вес — сотни килобайт — не скачивается заново. Всё это ускоряет загрузку.
Заметка на полях: не заставляйте пользователей дважды делать одно и то же
Все приёмы выше делают сайт быстрее и устойчивее, но у части посетителей всё равно могут возникнуть проблемы с интернетом или оборвётся связь, и тогда все эти решения не помогут. Зато поможет честный и прозрачный интерфейс.
Поэтому советуем заранее продумать, что будет видеть человек, пока данные подгружаются или если страница так и не откроется.
💡 Показывайте, что идёт загрузка. Вместо пустого места покажите индикатор: спиннер, а лучше «скелетон» — серые прямоугольники, которые показывают места, где вот-вот появится контент. Человек видит, что идёт процесс, меньше нервничает и не закрывает вкладку.
💡 Не молчите про ошибку и дайте возможность попробовать снова. Если запрос не прошёл, покажите текстовый статус: «Не удалось загрузить. Проверьте соединение» и кнопку: «Повторить». Лучше не оставлять пользователя перед пустым экраном без объяснения и следующего шага.
💡 Сохраняйте контент в полях, которые человек уже заполнил. Если пользователь писал что-то в форму, и соединение оборвалось, не удаляйте черновик: настройте его хранение в памяти браузера. Потерять заполненную заявку из-за моргнувшего интернета — самый обидный для бизнеса сценарий.
💡 Говорите человеческим языком. Советую прописать типовые короткие фразы под все ошибки, а ещё лучше — добавить информацию о том, что человеку делать дальше.
Это первый материал из серии статей о том, как компаниям не терять клиентов в периоды блокировок и нестабильного интернета. В следующих текстах рассмотрим более сложные меры, следите за блогом.
А если не хотите заниматься всем этим сами и ищете подрядчика, который поможет с оптимизацией сайта комплексно — оставляйте заявку на сайте ITSumma.
🚀 И приходите к нам в ТГ-канал: там много рассказываем про технологии и делимся интересными кейсами.
