Кому нужен AMP? Как быстро и легко загружать адаптивные изображения с Layzr.js

В последнее время проект Google «Ускоренные мобильные страницы» (AMP) помог веб-сайтам стать быстрее. Используя хорошую технику и мощную сеть распространения контента, Google напрямую сделал сайты с поддержкой AMP быстрее. AMP также работал косвенно, побуждая нас взглянуть на оптимизацию и лучшие практики AMP. Даже если вы не собираетесь делать ваш сайт AMP-совместимым, полезно понимать AMP как список задач для оптимизации не-AMP-сайта .

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

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

В этом уроке мы рассмотрим, как можно развернуть отложенную загрузку на веб-сайтах, не поддерживающих AMP, с помощью сценария с именем Layzr.js . Мы собираемся максимально точно воспроизвести функциональность элемента <amp-img> AMP, но мы также будем работать с некоторыми функциями, специфичными для Layzr.

Давайте начнем!

1. Базовая настройка

В рамках статьи « Проект AMP: она сделает ваши сайты быстрее? » Я создал базовый макет, содержащий пять изображений. Чтобы вы могли провести сравнение между использованием AMP и развертыванием отложенной загрузки самостоятельно, мы воссоздадим те же пять макетов изображений. Я покажу вам, как выполнить различные тесты скорости загрузки позже в этом уроке.

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

Поскольку мы проходим все этапы, я рекомендую протестировать вашу работу с помощью Chrome Developer Tools ( F12 ) с открытой вкладкой « Сеть », установленным флажком «Отключить кэш» и установленным режимом регулирования Regular 3G . Это моделирует среднее мобильное соединение, показывает вам график загрузки каждого изображения в режиме реального времени и поможет вам получить четкое представление о том, как работает ваша отложенная загрузка.

Когда вы обновляете страницу для тестирования, удерживайте нажатой кнопку перезагрузки , после чего появится раскрывающийся список с различными параметрами. Выберите « Пустой кэш» и «Жесткая перезагрузка», чтобы полностью имитировать посетителя, который впервые заходит на ваш сайт.

Создать HTML Shell

Начнем с изучения основ. Сначала создайте папку для размещения вашего проекта, а внутри нее создайте файл с именем index.html .

Откройте его для редактирования и добавьте следующий код:

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

Мы также включаем margin: 0 auto; поэтому изображения, которые мы добавим позже, будут центрированы.

Загрузить Лайзр

Сценарий layzr.js имеет два удобных источника CDN, из которых вы можете загружать — мы будем использовать один из Cloudfare.

Добавьте этот код в ваш html перед закрывающим </body> .

Если вы предпочитаете не загружать скрипт из CDN, вы можете загрузить его и следовать кратким инструкциям по адресу: https://github.com/callmecavs/layzr.js#download

Создавать Лайзр

Теперь, когда у нас загружен Layzr, нам нужно заставить его работать при загрузке страницы. Для этого добавьте этот код после тегов script вы только что вставили в предыдущем разделе:

Этот код сначала создает экземпляр, который используется для содержания Layzr, затем, после загрузки содержимого DOM страницы, он использует этот экземпляр для активации функциональности Layzr.

Ваш общий код должен выглядеть следующим образом:

2. Добавить изображения (нормальное разрешение)

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

Для добавления изображений при использовании Layzr вы будете использовать обычный элемент img , но вместо атрибута src вы будете использовать data-normal например, так:

Обеспечение высоты изображения

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

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

Для этого мы рассмотрим два метода: один для изображений фиксированного размера и один для адаптивного. Задать высоту изображений, установив их фиксированными по размеру, — самый простой метод, поскольку вам нужно только добавить атрибуты height и width .

Теперь добавьте элементы img над тегами сценария, используя атрибут data-normal , включая height и width , для каждого изображения, которое вы хотите загрузить.

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

3. Установите порог загрузки

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

Сделайте это, установив параметр с именем threshold при создании экземпляра сценария. Как это работает, вы предоставите значение, представляющее процент от высоты области просмотра. Если вы установите значение 100, это будет представлять 100% высоты области просмотра, например, 1200 пикселей. В этом случае все, что находится за пределами экрана в пределах 1200 пикселей от области просмотра, также будет загружено.

Например, если у вас было два больших изображения, одно из них было перемещено за пределы области просмотра, а ваш порог был установлен равным 100, оба изображения загружались:

Чтобы установить пороговое значение, замените эту строку в своем коде:

…с этим:

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

4. Добавьте изображения Retina / HiDPI

Одна из замечательных особенностей Layzr — возможность добавлять изображения для устройств с высоким разрешением. Все, что вам нужно сделать, это включить атрибут data-retina . Например:

Обновите все элементы img в вашем HTML, добавив изображения сетчатки, например:

5. Адаптивное заполнение изображения и предотвращение опрокидывания

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

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

Мы можем решить обе эти проблемы с помощью адаптивных заполнителей на странице правильного размера для каждого изображения. Заполнители гарантируют, что макет страницы не нуждается в перекомпоновке, а также даст высоты Layzr для работы. Мы будем основывать наш подход на гениальной технике из этой статьи Тьерри Кобленца « Создание отдельных частей» « Создание внутренних соотношений для видео ».

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

Добавить упаковщик формата изображения

Первое, что мы собираемся сделать, это добавить оболочку div вокруг нашего первого изображения — этот div станет нашим заполнителем. Мы изменим размер самого div с помощью CSS, а затем установим изображение внутри, чтобы заполнить его по горизонтали и вертикали.

Мы собираемся дать div имя класса, которое представляет соотношение сторон изображения, которое он будет содержать. В нашем примере первое изображение имеет ширину 960 пикселей и высоту 640 пикселей, поэтому давайте выясним, какое соотношение сторон у него получается.

640 (наша высота) составляет две трети от 960 (наша ширина), что означает, что на каждые 2 единицы высоты изображение имеет 3 единицы ширины. Соотношения сторон обычно выражаются как width:height , как в случае хорошо известного 16:9 . Соотношение нашего первого примера изображения составляет 3:2 .

Чтобы представить это соотношение сторон, мы дадим нашей ratio_3_2 div имя класса ratio_3_2 .

Добавить стандартный формат изображения

Теперь мы добавим CSS, чтобы все это работало.

Между существующими тегами <style></style> в заголовке вашего файла index.html добавьте этот код:

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

В этом стиле мы уверены, что наша обертка всегда растягивается до 100% ее родительской ширины. Мы также устанавливаем его в position: relative; так как это абсолютно позиционирует изображение внутри, вы поймете, почему чуть позже.

Дайте высоту обертки формата изображения

Теперь мы добавим этот код только для нашего класса ratio_3_2 :

Значение padding-top — это то, что позволяет нам сохранять наш div обертку в желаемом соотношении сторон. Независимо от ширины div , высота этого отступа будет составлять 66.666667% от этой суммы (две трети), следовательно, мы сохраняем соотношение сторон 3: 2.

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

100% * (height / width)

Для нашего соотношения 3: 2 это составляет: 100% * (2 / 3) = 66.666667%

Вы можете заранее рассчитать правильный процент для желаемого соотношения сторон или, если хотите, можете использовать функцию CSS calc() как показано в примере выше:

padding-top: calc( 100% * (2 / 3) );

Заполните упаковщик с соотношением сторон изображения

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

Мы сделаем это, поместив любое изображение, вложенное в div оберточной оболочки, с ratio_ , разместив его в верхнем левом углу обертки, затем растянув его до 100% высоты и ширины, вот так:

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

Добавить дополнительные пропорции

Скорее всего, у вас будут изображения с различными пропорциями, и вы захотите их разместить. В примерах изображений, с которыми мы работаем в этом уроке, первые три имеют соотношение сторон 3: 2, а четвертое и пятое — 16: 9.

Чтобы учесть это, добавьте новый класс с именем в соответствии с соотношением сторон, т.е. ratio_16_9 , с соответствующим значением padding-top :

Идите дальше и добавьте обертки div соотношением сторон вокруг всех остальных изображений, используя соответствующие классы для каждого в зависимости от их размера. Вы также можете удалить атрибуты height и width из ваших изображений, поскольку теперь они все будут переопределены нашим CSS.

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

6. Добавьте srcset

Layzr также поддерживает атрибут srcset . В браузерах, которые поддерживают srcset, он будет использоваться предпочтительнее, чем data-normal и data-retina .

Однако вместо использования прямого атрибута srcset нему следует srcset как и другие атрибуты, которые мы использовали до сих пор.

Обновите код вашего первого изображения:

Чтобы увидеть эту работу, перейдите в предварительный просмотр браузера, уменьшите область просмотра до ширины ниже 320 пикселей, перезагрузите и посмотрите сетевую панель. Сначала вы должны увидеть самую маленькую версию вашего изображения. Затем увеличьте размер области просмотра, и вы увидите, что средняя и большая версии загружаются по ходу работы.

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

Добавить анимацию загрузки

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

Мы будем использовать чистый загрузчик CSS, слегка измененную версию этого замечательного пера от Алана Шортиса: https://codepen.io/alanshortis/pen/eJLVXr

Чтобы избежать необходимости в дополнительной разметке, мы добавим анимацию загрузки в элемент :after прикрепленный к каждой обертке с соотношением сторон. Добавьте следующее в ваш CSS:

Приведенный выше код создает значок загрузчика в форме круга, центрирует его и заставляет вращаться на 360 градусов по кругу каждые 0,75 секунды.

Мы также собираемся добавить темно-серый цвет фона в наши обертки с пропорциями, чтобы их было легко отличить от остальной части макета. Добавьте этот background-color: #333; строка следующим образом:

Наконец, нам просто нужно убедиться, что наш загрузчик не располагается поверх наших изображений. Для этого добавим строку z-index: 1; к нашим изображениям, перемещая их в слой поверх загрузчиков:

Обновите страницу сейчас, и вы должны увидеть анимацию загрузки в действии.

Ваш финальный код

После завершения всего вышесказанного ваш код должен выглядеть следующим образом:

Завершение

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

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

Надеемся, что проработка этого процесса помогла вам решить, какой подход вы предпочитаете.

Спасибо Michael Cavalea за отличный сценарий! Чтобы узнать больше о Layzr.js посетите: https://github.com/callmecavs/layzr.js

• 
  AMP
  Как использовать amp-img и amp-video для ускорения вашего сайта
• 
  AMP
  Как сделать базовую страницу AMP с нуля
• 
  JavaScript
  Как «Ленивая загрузка» встроенных видео YouTube
  Торик Фирдаус
• 
  Веб-компоненты
  Как создать веб-компонент для встраивания видео YouTube
  Торик Фирдаус