Splash screen

Splash screen — это экран-заставка, который появляется при запуске веб-приложения или PWA (Progressive Web App), прежде чем пользователь увидит основной интерфейс. Он выполняет несколько функций: скрывает задержки при загрузке контента, формирует первое визуальное впечатление и сигнализирует о готовности приложения к использованию. В Lighthouse анализ работы splash screen помогает оценить пользовательский опыт, показатели загрузки и визуальной стабильности страницы.

Настройка splash screen для PWA

Для корректного отображения splash screen необходимо правильно настроить манифест приложения (manifest.json). Основные поля:

  • name и short_name — задают название приложения, которое будет отображаться на заставке.
  • start_url — URL, с которого начинается загрузка приложения.
  • display — тип отображения: standalone, fullscreen или minimal-ui. Для полноценного splash screen чаще используют standalone.
  • background_color — цвет фона заставки. Важно выбирать цвет, который совпадает с основной палитрой приложения, чтобы не было резкого визуального контраста.
  • theme_color — цвет элементов интерфейса в статус-баре и окнах навигации.

Пример конфигурации:

{
  "name": "Пример приложения",
  "short_name": "Приложение",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3367D6",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Использование Lighthouse для анализа splash screen

Lighthouse автоматически оценивает работу splash screen при аудите PWA. Основные показатели:

  1. First Contentful Paint (FCP) — время до появления первого визуального элемента. Splash screen помогает скрыть задержку.
  2. Largest Contentful Paint (LCP) — время до появления основного контента. Правильно настроенная заставка снижает ощущение медленной загрузки.
  3. Time to Interactive (TTI) — время до полной интерактивности. Если splash screen отображается слишком долго, пользователь может подумать, что приложение зависло.

Для получения отчета достаточно запустить Lighthouse через Chrome DevTools или командную строку:

npx lighthouse https://example.com --view

Lighthouse покажет подробные рекомендации, включая ошибки в конфигурации манифеста и несоответствие размеров иконок.

Управление отображением splash screen через JavaScript

Хотя PWA автоматически использует манифест для отображения заставки, иногда требуется динамическое управление splash screen, особенно для гибридных приложений. Пример реализации с использованием DOM:

document.addEventListener("DOMContentLoaded", () => {
  const splash = document.createElement("div");
  splash.id = "splash-screen";
  splash.style.position = "fixed";
  splash.style.top = 0;
  splash.style.left = 0;
  splash.style.width = "100%";
  splash.style.height = "100%";
  splash.style.backgroundColor = "#3367D6";
  splash.style.display = "flex";
  splash.style.alignItems = "center";
  splash.style.justifyContent = "center";
  splash.innerHTML = "
Загрузка...
";
  document.body.appendChild(splash);

  window.addEventListener("load", () => {
    splash.style.transition = "opacity 0.5s";
    splash.style.opacity = 0;
    setTimeout(() => {
      splash.remove();
    }, 500);
  });
});

Особенности такого подхода:

  • Позволяет контролировать длительность отображения заставки.
  • Можно добавлять анимации и индикаторы загрузки.
  • Обеспечивает согласованность с результатами Lighthouse, если контент появляется своевременно.

Оптимизация splash screen для высокой оценки Lighthouse

  • Минимизировать задержки: загрузка шрифтов, скриптов и стилей должна начинаться как можно раньше.
  • Согласованность цветов: background_color в манифесте должен совпадать с фоном первого видимого элемента.
  • Корректные размеры иконок: Lighthouse проверяет наличие и качество иконок 192×192 и 512×512 пикселей.
  • Скрытие splash screen после загрузки критического контента: использование window.onload или наблюдателя за DOM (MutationObserver) для плавного исчезновения.

Использование CSS-анимаций для плавного перехода

Добавление CSS-анимаций позволяет сделать исчезновение splash screen менее резким и улучшает восприятие:

#splash-screen {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

#splash-screen.hidden {
  opacity: 0;
}

JavaScript для активации анимации:

window.addEventListener("load", () => {
  const splash = document.getElementById("splash-screen");
  splash.classList.add("hidden");
  setTimeout(() => splash.remove(), 500);
});

Тестирование и отладка

Lighthouse позволяет проверить:

  • Реальное время отображения splash screen.
  • Соответствие рекомендациям PWA (размер иконок, цвет фона, манифест).
  • Влияние заставки на ключевые метрики: FCP, LCP, TTI.

Для локального тестирования удобно использовать эмуляцию сети и CPU в Chrome DevTools, чтобы выявить ситуации с медленной загрузкой.

Оглавление