Mobile-friendly проверки

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

Ключевые метрики Mobile-friendly

  1. Viewport Configuration Проверяется наличие корректного мета-тега <meta name="viewport">. Он определяет, как страница масштабируется и подстраивается под размеры экрана устройства. Неправильная конфигурация viewport может привести к:

    • Неадаптивному отображению элементов
    • Проблемам с масштабированием
    • Неправильному поведению интерактивных элементов

  2. Touch Target Sizes Все интерактивные элементы должны быть удобными для сенсорного ввода. Минимальный рекомендуемый размер — 48x48 пикселей. Lighthouse проверяет кнопки, ссылки и элементы управления, выявляя:

    • Слишком маленькие элементы
    • Элементы, расположенные слишком близко друг к другу

  3. Font Sizes Текст на мобильных устройствах должен быть читабельным без необходимости масштабирования. Lighthouse фиксирует:

    • Слишком мелкие шрифты
    • Неправильные единицы измерения (например, px вместо rem/em)

  4. Content Width and Horizontal Scrolling Содержимое страницы не должно выходить за пределы экрана. Основные проверки включают:

    • Проверку ширины контента через CSS свойства width и max-width
    • Анализ элементов с абсолютным позиционированием, которые могут вызвать горизонтальный скролл

  5. Viewport-fit и Safe Areas Для устройств с вырезами (notch) или закругленными краями важно учитывать viewport-fit=cover и корректное использование безопасных областей с помощью CSS переменных env(safe-area-inset-*). Lighthouse фиксирует ошибки, когда контент обрезается или элементы перекрываются системными панелями.

Практические аспекты Mobile-friendly

Адаптивные медиа-запросы Lighthouse проверяет правильное использование медиазапросов. Основные рекомендации:

  • Использовать @media (max-width: …) для изменения стилей под узкие экраны
  • Не использовать фиксированные размеры, лучше — процентные или flex/grid решения
  • Проверять, что все изображения и видео масштабируются корректно (max-width: 100%)

Оптимизация изображений Большие изображения замедляют загрузку на мобильных устройствах. Lighthouse анализирует:

  • Размеры изображений относительно их контейнера
  • Использование современных форматов (WebP, AVIF)
  • Наличие атрибутов srcset и sizes для адаптивной подгрузки

Скроллинг и Fixed элементы Фиксированные элементы (например, меню или кнопки) могут перекрывать контент. Проверки включают:

  • Корректное поведение fixed/ sticky элементов на мобильных устройствах
  • Отсутствие перекрытия интерактивных областей

Настройка и запуск проверок Lighthouse Mobile

  1. Запуск через Chrome DevTools

    • Открыть DevTools → вкладка Lighthouse
    • Выбрать режим Mobile
    • Запустить аудит Lighthouse создаст детализированный отчет с рейтингами, предупреждениями и рекомендациями

  2. Использование Node.js API

import lighthouse from 'lighthouse';
import chromeLauncher from 'chrome-launcher';

async function runLighthouse(url) {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {logLevel: 'info', output: 'html', port: chrome.port, formFactor: 'mobile'};
  const runnerResult = await lighthouse(url, options);
  console.log('Lighthouse score:', runnerResult.lhr.categories['performance'].score * 100);
  await chrome.kill();
}
runLighthouse('https://example.com');

Ключевой параметр — formFactor: 'mobile'. Он имитирует узкий экран и медленное соединение, что критично для проверки адаптивности.

  1. Интеграция в CI/CD Lighthouse можно запускать в автоматизированных пайплайнах с генерацией отчетов. Это позволяет отслеживать регрессы в мобильной оптимизации после каждой сборки.

Особенности анализа Mobile-friendly

  • Динамические элементы: Lighthouse симулирует видимость контента на странице и фиксирует скрытые элементы, которые могут ломать мобильную верстку.
  • Проверка интерактивности: Отдельно оценивается время до доступности интерактивных элементов (Time to Interactive).
  • Критические ошибки: Некорректные viewport, маленькие кнопки, горизонтальный скролл автоматически получают высокий приоритет исправления.

Рекомендации по улучшению

  • Использовать flexbox и grid для адаптивной верстки
  • Задавать размеры шрифтов в относительных единицах (rem, em)
  • Проверять каждый интерактивный элемент на тач-целостность и читаемость текста
  • Обеспечивать адаптивные изображения и видео, используя srcset
  • Избегать фиксированной ширины блоков и использовать медиазапросы для подстройки под экраны

Заключение проверок Mobile-friendly в Lighthouse

Lighthouse предоставляет комплексную диагностику мобильной адаптивности, объединяя проверки CSS, HTML, взаимодействия пользователя и ресурсов страницы. Соблюдение рекомендаций позволяет обеспечить:

  • Чистый и удобный интерфейс на мобильных устройствах
  • Высокую читаемость и доступность контента
  • Оптимальную производительность даже на слабых устройствах

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

Оглавление