Как оптимизируешь верстку

1. **Минификация и сжатие** – минифицирую HTML, CSS, JS (например, через Webpack, Vite), включаю gzip/brotli на сервере. 2. **Ленивая загрузка** – для изображений (`loading="lazy"`), компонентов (React.lazy, динамический импорт). 3. **Оптимизация изображений** – конвертирую в WebP/AVIF, ресайз под нужные разрешения, использую `srcset`. 4. **Critical CSS** – встраиваю критичные стили в ``, остальные гружу асинхронно. 5. **Декомпозиция стилей** – БЭМ/модули, чтобы избежать избыточных перерисовок. Пример ленивой загрузки изображения: ```html ``` Инициализация через Intersection Observer: ```js const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.src = entry.target.dataset.src; observer.unobserve(entry.target); } }); }); document.querySelectorAll('.lazyload').forEach(img => observer.observe(img)); ``` **Дополнительно:** избегаю глубокой вложенности в DOM, использую CSS-анимации вместо JS, проверяю Lighthouse.