Как лениво загружать amp-img?

Question

Каков подход для отложенной загрузки изображений для страниц, которые соответствуют проекту Google Accelerated Mobile Pages (AMP)?

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

1. порт просмотра - загрузка изображения инициируется его близостью к порту просмотра
2. установить задержку - загрузка изображения запускается таймером
3. manual - загрузка изображения инициируется клиентским событием

Все эти подходы могут быть реализованы с использованием JavaScript. Однако AMP не допускает использование JavaScript, только пользовательские сценарии AMP.

Подход с использованием порта просмотра является наиболее желательным, поскольку он сводит к минимуму загрузку контента. AMP имеет собственный сценарий, который поддерживает подход порта просмотра для запуска и остановки видео. Тем не менее, похоже, что аналогичная поддержка amp-img отсутствует.

Кажется, установленная задержка поддерживается с помощью amp-animation. Это кажется довольно сложным подходом. Кроме того, подход с задержкой нежелателен, поскольку оптимальная задержка зависит от пропускной способности интернета, которая является переменной.

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

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

amp-img id = 'img1' ... скрыто

кнопка вкл. = "Tap.img1.show ()"

кнопка вкл. = "Tap.img1.hide ()"

Для мобильных сайтов, кнопка показа может быть встроена в вышеупомянутый фолд-контент, поэтому пользователь запускает его, просматривая сайт. Тем не менее, это похоже на кучу

Эффективно ли Google AMP ограничивает отложенную загрузку до ручного подхода или есть какой-то другой способ выполнить просмотр порта или отложить отложенную загрузку?

Заранее спасибо.

Answer 1

Согласно документации AMP , изображения AMP загружаются с отложенной загрузкой. Они утверждают, что тег <amp-img> используется средой выполнения AMP для:

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

• управление сетевыми запросами ленивая загрузка и эффективная расстановка приоритетов ресурсов "

Итак, вкратце: вам не нужно лениво загружать изображения. Они уже делают это для вас.

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

На самом деле AMP делает что-то еще более умное: предварительная выборка отложенные загруженные ресурсы:

"AMP также предварительно выбирает загруженные ресурсы. Ресурсы загружаются как можно позже, но выбираются как можно раньше. Таким образом, загрузка происходит очень быстро, но ЦП используется только тогда, когда ресурсы фактически показываются пользователям."

Если вы немного углубитесь в среду выполнения AMP, вы увидите, что они на самом деле реализуют более продвинутые методы, чем просто отложенная загрузка, поэтому AMP почти мгновенен ...

Answer 2

Все элементы AMP всегда загружаются ленивыми. В настоящее время нет способа настроить пороговые значения для отложенной загрузки (например, на основе расстояния от области просмотра).