Какие способы ускорения загрузки страницы существуют и почему одни ресурсы загружаются быстрее других?

Что проверяют

Понимаете ли вы, как браузер грузит страницу: что блокирует отрисовку, как он расставляет приоритеты и откуда берётся задержка. Следом обычно спрашивают, чем async отличается от defer или как ускорить LCP конкретной страницы.

Как отвечать

Сначала объясните, почему ресурсы приходят с разной скоростью:

• приоритет: CSS в <head> и синхронные скрипты браузер ставит выше картинок, изображения по умолчанию получают низкий приоритет. Поднять его можно через fetchpriority="high" и <link rel="preload">;
• момент обнаружения: preload scanner находит ресурсы из HTML заранее, а фон из CSS, шрифты и то, что вставляет JavaScript, браузер узнаёт поздно;
• соединение: DNS, TCP и TLS к новому домену стоят нескольких сетевых задержек, на открытом HTTP/2 или HTTP/3 соединении запрос стартует сразу;
• кэш: ответ из кэша браузера, Service Worker или ближайшего узла CDN приходит быстрее исходного сервера;
• размер: Brotli или gzip для текста, AVIF и WebP для картинок.

Отсюда способы ускорения:

• критический путь: минимум блокирующего CSS, скрипты с defer, критичные стили прямо в HTML;
• меньше JavaScript: разделение кода, динамический import(), аудит тяжёлых зависимостей;
• изображения: srcset и sizes, явные width и height, loading="lazy" ниже первого экрана;
• сеть и кэш: preconnect к нужным доменам, долгий Cache-Control для файлов с хэшем в имени.

Результат меряйте по Core Web Vitals: LCP до 2,5 с, INP до 200 мс, CLS до 0,1. Смотрите Lighthouse и колонку Priority во вкладке Network.

Где спотыкаются

Советуют склеить всё в один файл. Это рецепт времён HTTP/1.1, при мультиплексировании огромный бандл мешает кэшу и откладывает первый рендер.

Ставят loading="lazy" на главную картинку первого экрана. LCP-изображение начинает грузиться позже, и метрика проседает.

Путают async и defer: async выполняется сразу после загрузки и без порядка, defer после разбора HTML и строго в порядке документа.