Что такое прогрессивный рендеринг?

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

Ключевые техники:

• Ленивая загрузка (Lazy Loading): Загрузка ресурсов (изображений, видео, скриптов) только тогда, когда они становятся видимыми в области просмотра (viewport) пользователя, или когда пользователь взаимодействует со страницей.

  // Пример ленивой загрузки изображений с помощью Intersection Observer API
  const images = document.querySelectorAll('img[data-src]');
  
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.src = entry.target.dataset.src;
        observer.unobserve(entry.target);
      }
    });
  });
  
  images.forEach(image => {
    observer.observe(image);
  });
  

• Серверный рендеринг (Server-Side Rendering - SSR): Рендеринг начального HTML на сервере перед отправкой клиенту. Это позволяет пользователю видеть контент быстрее, пока браузер загружает и парсит JavaScript. Примеры фреймворков: Next.js, Nuxt.js.

• Рендеринг с приоритетом критического CSS (Critical CSS): Извлечение и инлайнинг CSS, необходимый для отображения верхней части страницы (above-the-fold content), чтобы браузер мог быстро отрисовать первоначальный вид. Весь остальной CSS загружается асинхронно.

  <!-- Пример инлайнинга критического CSS -->
  <style>
    /* Критический CSS для верхней части страницы */
    body { margin: 0; }
    h1 { color: blue; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• Разделение кода (Code Splitting): Разделение JavaScript bundle на более мелкие части, которые загружаются по мере необходимости. Это уменьшает размер начальной загрузки. Популярно в SPA-фреймворках типа React, Vue, Angular.

Преимущества прогрессивного рендеринга:

• Улучшение percibed performance: Пользователь видит контент быстрее, что создает ощущение более быстрой загрузки.
• Снижение First Contentful Paint (FCP) и Largest Contentful Paint (LCP): Метрики, отражающие скорость загрузки видимого контента.
• Улучшение SEO: Поисковые системы могут быстрее индексировать контент.
• Экономия трафика: Особенно при ленивой загрузке.

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