Что такое Lazy loading?

Что такое Lazy loading?

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

Основная идея

Вместо загрузки всех ресурсов при загрузке страницы, мы загружаем их по мере необходимости:

// Плохо - загружаем всё сразу
import HeavyComponent from './HeavyComponent';

// Хорошо - загружаем когда нужно
const HeavyComponent = lazy(() => import('./HeavyComponent'));

Lazy loading изображений

1. Встроенный атрибут loading

Модернейший способ - просто используй атрибут loading="lazy":

<!-- Изображение загрузится только когда пользователь прокрутит до него -->
<img src="image.jpg" alt="Description" loading="lazy" />

2. Intersection Observer API

Для более сложных случаев используй Intersection Observer:

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.removeAttribute('data-src');
        observer.unobserve(img);
      }
    });
  });
  
  images.forEach(img => observer.observe(img));
}

// Вызови когда DOM готов
document.addEventListener('DOMContentLoaded', lazyLoadImages);

<!-- В HTML используй data-src вместо src -->
<img data-src="image1.jpg" alt="" />
<img data-src="image2.jpg" alt="" />

3. React компонент для lazy loading изображений

import { useState, useRef, useEffect } from 'react';

function LazyImage({ src, alt, placeholder }) {
  const [imageSrc, setImageSrc] = useState(placeholder);
  const imgRef = useRef(null);
  
  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        setImageSrc(src);
        observer.unobserve(imgRef.current);
      }
    });
    
    observer.observe(imgRef.current);
    return () => observer.disconnect();
  }, [src]);
  
  return <img ref={imgRef} src={imageSrc} alt={alt} />;
}

// Использование
<LazyImage 
  src="large-image.jpg" 
  placeholder="blur-placeholder.jpg" 
  alt="Description" 
/>

Lazy loading компонентов в React

1. React.lazy() + Suspense

import { lazy, Suspense } from 'react';

const HeavyChart = lazy(() => import('./HeavyChart'));
const HeavyModal = lazy(() => import('./HeavyModal'));

function App() {
  const [showChart, setShowChart] = useState(false);
  
  return (
    <div>
      <button onClick={() => setShowChart(true)}>Show Chart</button>
      
      {showChart && (
        <Suspense fallback={<div>Loading...</div>}>
          <HeavyChart />
        </Suspense>
      )}
    </div>
  );
}

2. Route-based code splitting

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const HomePage = lazy(() => import('./pages/Home'));
const ProductsPage = lazy(() => import('./pages/Products'));
const AdminPage = lazy(() => import('./pages/Admin'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<LoadingSpinner />}>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/products" element={<ProductsPage />} />
          <Route path="/admin" element={<AdminPage />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

3. Динамический import

function loadUserPreferences() {
  // Загрузи модуль только когда нужен
  import('./userPreferences').then(module => {
    const preferences = module.getPreferences();
    console.log(preferences);
  });
}

// Или с async/await
async function loadAndUse() {
  const { processData } = await import('./dataProcessor');
  const result = processData(someData);
}

Lazy loading скриптов

1. Асинхронная загрузка скрипта

function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    
    script.onload = resolve;
    script.onerror = reject;
    
    document.body.appendChild(script);
  });
}

// Использование
loadScript('analytics.js').then(() => {
  console.log('Analytics loaded');
});

2. Встроенные атрибуты

<!-- async - загружается параллельно, выполняется сразу когда готов -->
<script src="analytics.js" async></script>

<!-- defer - загружается параллельно, выполняется после парсинга DOM -->
<script src="app.js" defer></script>

Lazy loading данных

1. Pagination (постраничная загрузка)

function usePagedData(url) {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  
  const loadMore = async () => {
    setLoading(true);
    const response = await fetch(`${url}?page=${page}`);
    const newData = await response.json();
    setData(prev => [...prev, ...newData]);
    setPage(prev => prev + 1);
    setLoading(false);
  };
  
  return { data, loading, loadMore };
}

// Использование
function ProductList() {
  const { data, loading, loadMore } = usePagedData('/api/products');
  
  return (
    <div>
      {data.map(item => <ProductCard key={item.id} {...item} />)}
      <button onClick={loadMore} disabled={loading}>
        {loading ? 'Loading...' : 'Load More'}
      </button>
    </div>
  );
}

2. Infinite scroll (бесконечная прокрутка)

function InfiniteScroll({ onLoadMore }) {
  const sentinelRef = useRef(null);
  
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        onLoadMore();
      }
    });
    
    if (sentinelRef.current) {
      observer.observe(sentinelRef.current);
    }
    
    return () => observer.disconnect();
  }, [onLoadMore]);
  
  return <div ref={sentinelRef} />;
}

// Использование
function Feed() {
  const { data, loadMore } = usePagedData('/api/posts');
  
  return (
    <div>
      {data.map(post => <Post key={post.id} {...post} />)}
      <InfiniteScroll onLoadMore={loadMore} />
    </div>
  );
}

Преимущества Lazy loading

1. Быстрая первоначальная загрузка — пользователь видит контент быстрее
2. Меньше используется память — загружаются только нужные ресурсы
3. Снижается трафик — не загружаются неиспользуемые ресурсы
4. Лучше SEO — быстрая загрузка положительно влияет на ранжирование
5. Лучший UX — для медленных соединений

Недостатки

1. Задержка при загрузке — пользователь может заметить задержку
2. Сложность — требует дополнительного кода
3. Потенциальные ошибки — если ресурс не загрузился

Best practices

// 1. Используй placeholder/skeleton для лучшего UX
<Suspense fallback={<Skeleton />}>
  <HeavyComponent />
</Suspense>

// 2. Предзагрузи критические ресурсы
<link rel="preload" as="image" href="critical.jpg" />
<link rel="preload" as="script" href="critical.js" />

// 3. Используй встроенный loading="lazy" для изображений
<img src="image.jpg" loading="lazy" />

// 4. Группируй Suspense компоненты
<Suspense fallback={<Loading />}>
  <HeavyComponent1 />
  <HeavyComponent2 />
</Suspense>

// 5. Добавь обработку ошибок
const LazyComponent = lazy(() => 
  import('./Component').catch(err => {
    console.error('Failed to load component', err);
    return { default: ErrorFallback };
  })
);

Метрики производительности

Lazy loading влияет на:

• LCP (Largest Contentful Paint) — улучшается
• FID (First Input Delay) — может улучшиться
• CLS (Cumulative Layout Shift) — важно использовать правильные размеры
• TTI (Time to Interactive) — обычно улучшается

Заключение

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