Веб-дизайн для слабого интернета и старых устройств: как не потерять аудиторию регионов

Сегодня хотел поговорить про веб-дизайн для слабого интернета и старых устройств. Сам разрабатываю сайты уже более 10 лет. За это время успел поработать с клиентами из самых разных уголков нашей необъятной страны. И если в начале карьеры я грезил о безупречных сайтах с 4K-видео на заднем фоне и сложными анимациями, то жизнь быстро внесла свои коррективы. Однажды ко мне обратился клиент из небольшого сибирского городка с простой, но шокирующей для меня тогда просьбой: «Сделайте так, чтобы сайт открывался у бабули в деревне. У нее кнопочный телефон с браузером, а интернет только когда ветер с нужной стороны дует».

Этот запрос заставил меня по-новому взглянуть на то, что я делаю. Мы, жители мегаполисов, привыкли к гигабитным каналам и топовым гаджетам. Но за городом и в деревнях начинается другая цифровая реальность. Реальность, где аудитория исчисляется миллионами людей, которые хотят пользоваться вашим сайтом, но не могут из-за технических ограничений. И сегодня я хочу поделиться с вами стратегиями, которые помогут не потерять эту огромную и очень важную аудиторию.

Ваш быстрый сайт может быть медленным для половины страны

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

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

Я лично столкнулся с этим, когда анализировал статистику одного из своих проектов, интернет-магазина стройматериалов. Оказалось, что более 40% посетителей заходят на сайт с мобильных устройств с разрешением экрана ниже HD, а средняя скорость соединения менее 2 Мбит/с. При этом первоначальная версия сайта весила почти 5 МБ и загружалась у них более 15 секунд! Мы теряли клиентов на самом старте воронки.

Особенности проектирования интерфейсов

Проектирование интерфейса для такой аудитории это искусство концентрации на главном. Нужно убрать все лишнее, но оставить функционал полностью работоспособным и интуитивно понятным.

Принцип приоритета контента

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

Я всегда начинаю проектирование с дизайнером с «блокнотного» скетча. Рисую просто прямоугольники, тут шапка, тут навигация, тут основной текст, тут контакты. И задаю себе вопрос: «Поймет ли пользователь из далекой деревни, что делать на этой странице, если все интерактивные элементы не прогрузятся?». Если ответ «нет», то дизайн нужно упрощать.

Навигация

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

Я рекомендую придерживаться следующих правил:

• Ограниченное количество пунктов. 5-7 ключевых разделов в главном меню, это идеал.

• Ясные формулировки. Вместо «Синергетические решения» пишите «Услуги». Вместо «Продуктовый портфель» пишите«Каталог товаров».

• «Хлебные крошки». Обязательно используйте их. Они помогают пользователю понять, где он находится и легко вернуться на шаг назад.

• Якорные ссылки. На длинных страницах (лендингах) используйте простое якорное меню в начале, которое быстро перебрасывает пользователя к нужному разделу без дополнительной загрузки данных.

Размеры имеют значение

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

Согласно гайдлайнам, минимальный размер тап-зоны должен быть 44×44 пикселя. Я же на практике стараю делать кликабельные элементы еще крупнее, особенно если это ключевые действия, такие как «Купить», «Заказать звонок», «Подробнее». Большая кнопка это удобно для вашего пользователя.

Стратегии оптимизации

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

1. Жесткая оптимизация медиа-контента

Изображения и видео главные пожиратели трафика. Борьба с их весом это 80% успеха.

• Выбор правильного формата.

  • JPEG для фотографий и сложных изображений с градиентами.

  • PNG для логотипов и графики с малым количеством цветов.

  • SVG для иконок и простой векторной графики. Они масштабируются без потери качества и весят совсем немного.

  • WebP современный формат, который часто обеспечивает лучшее сжатие, чем JPEG и PNG. Его стоит использовать, если вам важна максимальная производительность.

• Ресайз и компрессия. Никогда не загружайте на сайт полноразмерные фотографии с фотоаппарата. Подготавливайте изображения под те размеры, в которых они будут отображаться. Для сжатия использую инструменты вроде TinyPNG, ImageOptim или плагины для CMS (например WP Smush для WordPress).

• Ленивая загрузка (Lazy Load). Это техника, при которой изображения загружаются только тогда, когда пользователь прокручивает страницу до них. Это радикально снижает первоначальный вес страницы. Сейчас эта возможность поддерживается нативно браузерами (атрибут loading="lazy") и ее обязательно нужно использовать.

2. Минимизация и оптимизация кода

Каждый лишний байт кода это миллисекунды ожидания для вашего пользователя.

• Минификация CSS и JavaScript. Удаляйте из кода все ненужное: комментарии, пробелы, переносы строк. Для этого есть множество онлайн-инструментов и сборщиков вроде Gulp или Webpack.

• Использование систем сборки. Настройте процесс так, чтобы в продакшен попадал только тот код, который реально используется на сайте. Это особенно актуально для больших фреймворков вроде Bootstrap.

• Отказ от тяжелых библиотек. Нужен ли вам на сайте целый jQuery для одной-двух простых функций? Часто ту же задачу можно решить несколькими строчками на ванильном JavaScript.

3. Умное кэширование

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

• Настройте заголовки на вашем хостинге. Убедитесь, что для статических ресурсов установлены длительные сроки кэширования (например, на месяц или год). Это drastically сократит количество запросов к серверу.

• Service Workers для продвинутого кэширования. Для более сложных проектов можно рассмотреть использование Service Workers, которые позволяют кэшировать не только статику, но и API-запросы, создавая тем самым офлайн-опыт.

4. Критический CSS и приоритет загрузки

Чтобы пользователь как можно скорее увидел контент, нужно загружать в первую очередь самое важное.

• Встраивание критического CSS. Критический CSS это стили, необходимые для отображения «первого экрана» (того, что пользователь видит без прокрутки). Я встраиваю эти стили прямо в <head> HTML-документа. Это позволяет браузеру сразу же начать отрисовывать страницу, не дожидаясь загрузки огромного файла стилей.

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

Как мы ускорили сайт сельхозкооператива

Один из моих показательных кейсов, это работа с сайтом регионального сельскохозяйственного кооператива. Аудитория у них фермеры, агрономы, жители сел. Исходный сайт был сделан на конструкторе, был перегружен огромными фотографиями полей и имел среднюю скорость загрузки около 8 секунд.

Мы провели полный аудит и сделали следующее:

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

2. Оптимизировали изображения. Все фотографии были сжаты и переведены в формат WebP с JPEG-фолбэком. Вместо фонового слайдера на главной странице мы поставили одно статичное, но качественно сжатое изображение.

3. Переписали стили. Вместо тяжелого фреймворка мы написали кастомный легкий CSS. Критические стили встроили в HTML.

4. Включили агрессивное кэширование. Настроили кэширование на стороне сервера и браузера.

Результат? Вес главной страницы уменьшился с 3.5 МБ до 450 КБ. Скорость загрузки по данным PageSpeed Insights выросла с 28 до 85 баллов для мобильных устройств. Но самое главное мы получили обратную связь от клиента: «Мужики с планшетов наконец-то смогли нормально каталог смотреть, не дожидаясь, пока все прокрутится». Для меня это была лучшая оценка проделанной работы.

До и после оптимизации

Вот наглядная таблица, которая показывает, какие изменения мы внесли и какой эффект они дали.

Тестируйте в реальных условиях!

Самый большой миф тестировать свой сайт только на своем сверхскоростном интернете и MacBook’е. После завершения работ над проектом я завел себе ритуал:

1. Включаю эмуляцию медленного сети в Chrome DevTools. (во вкладке Network можно выбрать throttling, например, «Slow 3G»).

2. Достаю свой старый запасной смартфон 5-летней давности и проверяю, как сайт на нем работает, как скроллится, как реагирует на тапы.

3. Пользуюсь онлайн-сервисами для проверки скорости из разных регионов мира (например, GTmetrix или WebPageTest).

Только так можно по-настоящему понять, что чувствует ваш пользователь из далекого поселка, когда заходит на ваш сайт.

Создание быстрых и доступных сайтов для любой аудитории это вызов, который делает вас как специалиста на голову выше конкурентов. Это дизайн-мышление, ориентированное на реальные потребности людей. И мы, как создатели, просто обязаны сделать так, чтобы это окно открывалось легко, а вид из него был понятным и приятным, независимо от того, на каком устройстве и с какой скоростью интернета его открывают.

А какие у вас есть примеры работы со сложными условиями? Поделитесь своим опытом в комментариях, давайте учиться друг у друга.