← Images / images / tutorials

Оптимизация просмотра на мобильных устройствах

Ленивую загрузку можно использовать для оптимизации изображений на страницах под просмотр с мобильных устройств. Это помогает решить типичные проблемы мобильного просмотра, такие как медленное сетевое соединение или ограниченная вычислительная мощность.

У отложенной загрузки есть два основных преимущества:

• Более быстрая загрузка страниц, изображения загружаются по мере прокрутки страницы пользователем, а не все сразу при её открытии.
• Снижение затрат на доставку изображений, при использовании Cloudflare Images вы платите только за загрузку изображений, которые пользователь действительно видит. При отложенной загрузке изображения, не попавшие в область просмотра, не учитываются в тарифицируемых запросах Images.

Отложенная загрузка изначально поддерживается всеми основными браузерами, включая Chrome, Safari, Firefox, Opera и Edge.

Если атрибут loading не изменён, большинство браузеров загружают все изображения на странице, по умолчанию отдавая приоритет тем, что ближе к области просмотра. Это поведение можно изменить, настроив loading атрибут.

Есть два возможных loading атрибуты для вашего <img> теги: lazy и eager.

Отложенная загрузка рекомендуется для большинства изображений. При отложенной загрузке ресурсы, такие как изображения, не загружаются, пока не окажутся на определённом расстоянии от области просмотра. Если изображение не достигает этого порога, оно вообще не загружается.

Пример изменения loading атрибут вашего <img> теги были "lazy":

<img src="example.com/cdn-cgi/width=300/image.png" loading="lazy" />

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

Пример изменения loading атрибут вашего <img> теги были "eager":

<img src="example.com/cdn-cgi/width=300/image.png" loading="eager" />