Как оптимизировать загрузку большой страницы

1. **Ленивая загрузка (Lazy Loading)** Используй `loading="lazy"` для изображений или Intersection Observer для динамической загрузки контента. ```html ``` 2. **Код-сплиттинг** Разбивай JS-бандлы с помощью динамических импортов (React.lazy, import()). ```javascript const LazyComponent = React.lazy(() => import('./LazyComponent')); ``` 3. **Оптимизация изображений** Сжимай изображения (WebP, AVIF), используй `srcset` для адаптивности. 4. **Кэширование** Настрой HTTP-кеширование (Cache-Control, ETag) и Service Workers для оффлайн-доступа. 5. **Минификация и сжатие** Уменьшай CSS/JS (Terser, CSSNano), включай gzip/brotli на сервере. 6. **Предзагрузка критических ресурсов** `` 7. **SSR/SSG** Для SEO и скорости используй Next.js, Nuxt.js или статическую генерацию. 8. **Деффер неважного JS** `` 9. **Оптимизация шрифтов** Подключай только нужные начертания, используй `font-display: swap`. 10. **Анализ** Проверяй метрики через Lighthouse, WebPageTest. Пример для Intersection Observer: ```javascript const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.src = entry.target.dataset.src; observer.unobserve(entry.target); } }); }); document.querySelectorAll('[data-src]').forEach(img => observer.observe(img)); ```