Добавив HTML-атрибут loading="lazy" к изображению или фрейму, можно отложить загрузку контента, находящегося за пределами видимой области экрана, до тех пор пока пользователь не доскроллит страницу сайта до “ленивого” элемента. Такой подход позволяет значимо ускорить загрузку содержимного страницы, особенно в тех случаях, когда предлагаемая информация содержит множество картинок или фреймов.

<img srс="example.jpg" alt="example image" loading="lazy">

Это легкое решение зачастую значительно улучшает производительность веб-ресурса и повышает лоялность пользователей.

Однако, следует знать, что событие load запускается только после загрузки всех необходимых ресурсов. Это приводит к тому, что изображения или содержимое фреймов скорее всего не будут загружены полностью, когда пользователь доскроллит до них и они будут находиться уже в видимой области экрана.

Статьи об использовании медленной загрузки и ее влиянии на производительность:

1. MDN
2. “Быстрое время загрузки”
3. Did you know you can optimize your website’s load time by 50% with just one line of code?

Спасибо за внимание.