Как оптимизировать медленную страницу, написанную на HTML, CSS, JS?

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

1. Измерить

Lighthouse и PageSpeed Insights — метрики LCP, INP, CLS; DevTools Performance — где тратится время; Network — что и сколько грузится.

2. Загрузка

• сжатые изображения в WebP/AVIF, srcset, loading="lazy", размеры width/height;
• defer для скриптов, разделение бандла, удаление лишних зависимостей;
• критический CSS, без блокирующих @import;
• кеширование, CDN, preload для шрифтов и главной картинки, font-display: swap.

3. JavaScript

• разбить долгие задачи (>50 мс), чтобы не блокировать поток;
• не делать работу до того, как она нужна (lazy-инициализация);
• debounce/throttle для частых событий.

4. Рендеринг

• анимации на transform/opacity;
• не чередовать чтение и запись размеров DOM (layout thrashing);
• content-visibility: auto для длинных страниц, виртуализация больших списков.

Коротко для собеседования

Сначала измерить (Lighthouse, Performance), затем оптимизировать загрузку (картинки, скрипты, CSS, кеш), JS (длинные задачи) и рендер (анимации, reflow).

Подробнее: web.dev — Fast load times