Как ускорить загрузку страницы

Короткий ответ

Больше всего весят картинки, поэтому начните с них: главной картинке первого экрана — высокий приоритет, всем остальным — ленивую загрузку, и всем — размеры:

<img src="/media/photo-600x200.jpg" alt="A flower banner" width="600" height="200"
     fetchpriority="high" style="max-width: 100%; height: auto;">
 
<img src="/media/photo-400x250.jpg" alt="A flower" width="400" height="250"
     loading="lazy" style="max-width: 100%; height: auto;">

fetchpriority="high" говорит браузеру скачать баннер раньше остального. loading="lazy" откладывает картинки ниже экрана, пока до них не дойдёт прокрутка. width и height резервируют место, и текст не прыгает, когда картинка загрузится.

Картинка нужного размера

Не отдавайте телефону фото шириной 2000 пикселей. srcset перечисляет файлы, а sizes подсказывает, какой ширины будет картинка на экране:

<img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 600px" alt="A flower" width="800" height="500">

Шрифты и скрипты

Важный шрифт можно начать скачивать сразу, не дожидаясь CSS, а скрипты — не давать им останавливать разбор страницы:

<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>
<script src="app.js" defer></script>

defer загружает скрипт параллельно и запускает его, когда HTML уже разобран. Без него браузер останавливается на каждом <script>.

Длинные страницы

content-visibility: auto разрешает браузеру не рисовать блоки, пока они далеко за экраном. contain-intrinsic-size задаёт примерную высоту, чтобы полоса прокрутки не прыгала:

.section { content-visibility: auto; contain-intrinsic-size: auto 600px; }

Частая ошибка

Ставить loading="lazy" на все картинки подряд, включая баннер вверху страницы. Тогда браузер откладывает самую важную картинку, и страница выглядит готовой позже. Ленивая загрузка — только для того, что ниже первого экрана.