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

Question

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

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

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

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

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

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

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

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

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

button on = "tap.img1.show ()"

button on = "tap.img1.hide ()"

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

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

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

Answer 1

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

Answer 2

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

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

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

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

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

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

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

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