Жители практически всех регионов России сталкиваются с перебоями в работе интернета. Пользователи фиксируют отключения мобильной связи и VPN-сервисов, падение скорости загрузки сайтов и нестабильность мессенджеров — особенно Telegram и WhatsApp. И до сих пор остаются неизвестными реальные сроки восстановления стабильной работы интернета.
Привычные действия: вызов такси, заказ продуктов, работа в удаленном формате теперь ежедневно вызывают трудности у миллионов россиян. Из-за «упавшего» интернета несут потери и предприниматели: срываются поставки товаров, не работают системы онлайн-платежей, владельцы онлайн-магазинов теряют клиентов.
Меня зовут Григорий Тумаков, СТО Morizo, и в этой статье расскажу, как можно помочь интернету выжить. Сейчас нет 100% гарантий эффективности, но попробовать стоит.
Тесты, тесты и еще раз тесты
Первое, что нужно сделать для минимизации потерь от нестабильного интернета, — посмотреть на сайт глазами пользователя с плохим интернетом и понять, какая часть информации остается ему доступной. Для этого рекомендую открыть в браузере режим разработчика(DevTools) нажав F12.
И во вкладке Network(Сеть) изменить скорость соединения, чтобы понять, как сайт открывается при различной скорости загрузки: 4G, 5G или 3G (режим 2G в настройках отсутствует). Можно добавить кастомную скорость и указать, например, нижнюю планку для 2G — 56 килобит в секунду, то есть 8 килобайт в секунду.
Также можно воспользоваться платформами для анализа сайтов, чтобы точнее определить, какие элементы отрисовываются первыми, а какие последними. Например, PageSpeed Insights — лучший для быстрого аудита от Google, Lighthouse — самый детальный и универсальный. Эти сервисы подходят для анализа скорости загрузки, SEO и UX оптимизации. Pingdom прекрасно помогает анализировать загрузку по элементам. После проведения комплекса тестов становится ясно, что необходимо оптимизировать, а от каких элементов и вовсе можно отказаться.
Основные причины медленной загрузки
Скорость загрузки ресурсов зависит от нескольких ключевых факторов:
Географическое расположение серверов. Физическое расстояние между сервером и пользователем напрямую влияет на скорость соединения. Сайт, размещенный в московском дата-центре, откроется значительно быстрее для московского пользователя, чем ресурс на американских серверах.
Скорость соединения. В условиях 2G-соединения скорость передачи данных критически мала. Даже при более быстрых стандартах связи пропускная способность может существенно ограничить загрузку контента.
Задержки в сети. Время отклика сервера может достигать нескольких секунд, что создает дополнительные препятствия для быстрой загрузки страниц.
Потери пакетов данных. Помехи в сети приводят к потере части информации, заставляя устройство многократно запрашивать одни и те же данные для получения полного ответа.
По негласному правилу считается, что оптимальная скорость отклика сервера составляет до 100 миллисекунд плюс время на отрисовку контента в браузере. Если страница полностью загружается и становится доступной для взаимодействия за одну секунду — это приемлемый результат. Но в режиме 2G будешь рад если страница в принципе откроется.
К сожалению, в загрузке страницы каждая миллисекунда на счету. Исследования интернет-магазинов показали прямую зависимость между скоростью загрузки и конверсией: каждая дополнительная секунда ожидания приводит к потере 5% пользователей, которые … переходят на сайты конкурентов.
Что прогружать в первую очередь
Структура страницы — это основа, поэтому она должна загружаться в первую очередь: шапка, навигационное меню, контентная область. Пользователю важно видеть макет страницы еще до загрузки изображений.
В контенте значимая часть — это текст, поэтому страница должна оставаться читаемой и информативной даже при отключенных изображениях. Каждый графический элемент требует текстового описания, позволяющего понять суть без визуализации.
Когда есть уверенность, что структура страницы и содержательная часть прогружаются достаточно быстро, переходим к оптимизации изображений. Для этого существует два основных способа:
1) Иконочные шрифты вместо графики. Для отображения иконок в меню, категориях товаров и других элементах интерфейса используйте специальные шрифты. В них буквы заменены иконками, что обеспечивает минимальный размер файлов и векторное качество при любом масштабировании. Например многим известный FontAwesome.
2) SVG-картинки. Векторные изображения в формате SVG описываются формулами (вручную описывать их не придется, это задача графического редактора и дизайнера). Такие изображения подходят для логотипов, иконок и декоративных элементов, а весят при этом всего несколько килобайт.
Но нужно помнить, что детализированный портрет таким образом создать не получится. Для работы с фотографиями лучше перекодировать изображения в формат WebP вместо традиционных JPEG и PNG. Так картинки лучше сожмутся и сохранят качество. Для видеоматериалов подойдет формат WebM, он эффективно работает на 3G и 4G соединениях.
Лайфкахи для работы в оффлайне
RSS-ленты для экономии трафика. Мы же хотели вернуться в 2007? Возвращаемся. Технология RSS, популярная в эпоху медленного интернета, вновь становится актуальной. RSS-клиенты периодически загружают текстовый контент с сайтов, позволяя читать новости и статьи в оффлайн-режиме. Это решение особенно эффективно для информационных ресурсов, где основная ценность заключается в текстовом контенте.
Приложения для отложенного чтения. Помогут не только читать в оффлайн, но и формировать список для чтения в свободное время. Например воспользовавшись приложением Pocket можно заранее загрузить в него нужные страницы, статьи, новости и читать их в любом месте.
Progressive Web Applications (PWA). Эта настройка для сайта, которая предоставляет возможность пользоваться им в оффлайн режиме как приложением. В PWA версию можно заложить минимальную оффлайн функциональность для пользователя: показ статуса заказов и доставки, показ последних подгруженных новостей. Оффлайн скриптами так-же можно обойти ограничение браузера, когда недогруженные элементы отмечаются как «битые» и больше они не пытаются подгрузиться. Скрипт продолжает попытки загрузки изображений и других элементов до получения успешного результата.
Меньше аналитики — больше производительность
Простые системы мониторинга посещаемости и объема передаваемого трафика можно настроить на уровне сервера. Установка мониторинга на фронтенд обеспечивает дополнительную нагрузку на пользовательские устройства.
Нужно помнить, что на аналитику тоже нужен трафик, что может быть критично при слабой сети. Например, «Яндекс Метрика» отправляет множество запросов на каждое действие пользователя — клики, движения мыши, прокрутку страницы. В условиях медленного интернета эти запросы заполняют очередь на отправку и блокируют загрузку основного контента.
Эффективнее делать простые мониторинги — время первого ответа от сервера и общее время загрузки страницы.
Пуши: маленькие, но живучие
Push-уведомления демонстрируют удивительную устойчивость к ограничениям сети, миллиарды уведомлений ежесекундно доставляются по всему миру, что требует предельного сжатия данных. Пример: мессенджеры могут долго загружаться, но push-уведомления доставляются практически мгновенно даже на 2G.
Push-уведомления работают не только в приложениях, но их также можно встроить в сайт и соответственно в PWA версию.
Поэтому рекомендую использовать push-уведомления для оперативной передачи пользователям критически важной информации.
Переключаемся на 2G (способ может помочь всем пользователям, не только владельцам бизнеса)
Современные Android-устройства не предусматривают ручное переключение на 2G через стандартные настройки — минимальный рабочий режим ограничен 3G. Но приложение Force 4G позволяет активировать режим GSM (другими словами — 2G). На iPhone такой проблемы нет, режим сети 2G никуда не убирали. На нем можно получать push-уведомления и открывать простые текстовые сайты.
Увы, большинство приложений, в том числе банковские, не функционирует на 2G. Приложение из-за долгого ожидания ответа от сервера просто разрывает соединение.
Подготовка к работе в условиях ограниченного интернета — это своеобразное возвращение к истокам веб-разработки, когда каждый килобайт имел значение. Только теперь оптимизация превратилась из желательной практики в вопрос выживания бизнеса. Хорошая новость: технологии за эти годы не стояли на месте, и арсенал решений стал значительно богаче. Плохая новость: проверить их эффективность придется на практике.
