Производительность мобильного веба: оптимизация и лучшие практики

Почему мобильная производительность отличается

Мобильные устройства имеют меньшую ёмкость CPU и памяти. Время парсинга и компиляции JavaScript больше.

Сетевые условия: 3G/4G/5G, WiFi. Переменная пропускная способность и задержка. Мобильные пользователи могут быть на более медленных соединениях.

Батарея: тяжёлый JavaScript и анимации потребляют батарею. Производительность = время работы батареи.

Размер экрана: оптимизированные изображения и макет для маленьких экранов. Mobile-first вместо desktop-first.

Дизайн Mobile-First

CSS mobile-first: сначала мобильные стили, затем override с помощью media query для десктопа. @media (min-width: 768px) для больших экранов.

Мета-тег viewport: <meta name="viewport" content="width=device-width, initial-scale=1">. Корректное масштабирование на мобильных.

Touch targets: кнопки и ссылки не менее 48x48px. Легко нажимаемые пальцем. 8px отступ между близкими элементами.

Размер шрифта: минимум 16px. iOS увеличивает масштаб на input меньше 16px. Это ломает UX.

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

Оптимизация изображений

Адаптивные изображения: правильный размер с помощью srcset и sizes. Не загружайте большие изображения на мобильных.

Сжатие изображений: формат WebP/AVIF. Quality 75-80 достаточно для мобильных. Сжимайте с помощью TinyPNG, Squoosh.

Lazy loading: lazy load изображений ниже fold. Атрибут loading="lazy".

Placeholder: placeholder blur-up или skeleton. Показывайте placeholder во время загрузки изображения.

CDN: ближайший CDN-узел для мобильных пользователей. Глобальные CDN, такие как Cloudflare, Fastly.

Оптимизация JavaScript

Размер bundle: меньший bundle на мобильных. Загружайте только необходимый код с помощью code splitting.

Tree shaking: удаляйте неиспользуемый код. Используйте ES modules.

Lazy loading: lazy load тяжёлых модулей (chart, editor, map). С помощью dynamic import().

Polyfill: удаляйте ненужные polyfill. Используйте нативные API вместо core-js (современные браузеры их поддерживают).

Web Workers: отделяйте тяжёлые вычисления от главного потока. Не блокируйте UI-поток на мобильных.

Оптимизация сети

HTTP/2 или HTTP/3: параллельная обработка множества запросов. Снижает задержку на мобильных.

Сжатие: сжимайте текстовые ресурсы с помощью Gzip/Brotli. Экономия 60-80%.

Кэширование: офлайн-кэш с помощью Service Worker. Быстрая загрузка при повторных визитах со стратегией cache-first.

Prefetch/Preconnect: предзагружайте критические ресурсы. Устанавливайте DNS- и TCP-соединение заранее.

Resource hints: предзагружайте критический CSS и шрифты с помощью <link rel="preload">.

Тестирование и мониторинг

Тестирование на реальных устройствах: тестируйте на реальных мобильных устройствах. Эмуляция устройств Chrome DevTools недостаточна.

Lighthouse mobile: аудит мобильной производительности. Тестируйте с throttling (CPU 4x slowdown, slow 4G).

WebPageTest: тестируйте с мобильным устройством и профилем соединения. Анализ filmstrip и waterfall.

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

Core Web Vitals: отдельные метрики для мобильных и десктопа. Мобильный отчёт в Google Search Console.