Что будет на сайте если не дожидаться загрузки картинки расположенной в конце страницы

«Что будет на сайте если не дожидаться загрузки картинки расположенной в конце страницы» — вопрос из категории HTML, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Если не дожидаться загрузки изображения в конце страницы, пользователь сразу увидит контент выше изображения. Само изображение появится позже, когда загрузится.

Проблемы:

  1. Layout Shift - если не заданы размеры (width/height или aspect-ratio), страница "прыгнет" при загрузке картинки
  2. Плохой UX - пользователь может не заметить, что картинка загрузилась, если она ниже viewport'а

Решение:

<img 
  src="image.jpg" 
  width="600" 
  height="400" 
  alt="Описание"
  loading="lazy" <!-- Ленивая загрузка -->
>

Или через CSS:

img {
  aspect-ratio: 16/9; /* Сохраняет место под изображение */
  background: #eee; /* Плейсхолдер */
}