Ответ
Используй ленивую загрузку (lazy loading) для изображений и компонентов, которые не видны сразу. Оптимизируй критический путь рендеринга (Critical Rendering Path) — минифицируй CSS/JS, размещай стили в <head>, а скрипты перед закрывающим </body>.
Пример lazy loading для изображений:
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="...">Используй скелетоны или прогресс-бары для контента, загружаемого асинхронно. Кэшируй ресурсы через Service Workers и HTTP-кеширование.
Сжимай изображения (WebP, AVIF) и используй srcset для адаптивности:
<img srcset="image-320w.jpg 320w, image-480w.jpg 480w" sizes="(max-width: 600px) 480px, 800px">Разделяй код (code splitting) в современных сборщиках (Webpack, Vite) для загрузки только необходимого JS.