Как использовать нативное изображение и отложенную загрузку iframe на веб-сайтах

Увеличьте время загрузки вашего сайта с помощью отложенной загрузки

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

С другой стороны, изображения составляют большую часть размеров веб-сайтов. Согласно HTTP Archive, изображения могут составлять до 50% от общего веса веб-страницы. Для некоторых сайтов это число может быть даже больше. Подумайте о платформах электронной коммерции, таких как Amazon или eBay, и о платформах социальных сетей, таких как Facebook или Twitter: если вы предлагаете продукты или позволяете людям делиться изображениями, то изображения будут сильно влиять на размер страницы и, следовательно, на производительность загрузки.

Не все изображения одинаково важны. Хотя логотип веб-сайта в верхней части веб-сайта должен сразу присутствовать при загрузке страницы, изображение внизу страницы не обязательно нужно сразу загружать. Подумайте об огромном количестве продуктов, предлагаемых на eBay: действительно ли вам нужно загружать изображения всех сделок, если вы просматриваете только первые 10 предложений, которые показывает вам eBay?

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

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

  • Существуют службы или программные библиотеки, которые сжимают изображения, чтобы уменьшить их размер.
  • Вы можете сохранить одно и то же изображение в нескольких разрешениях и предоставить соответствующее изображение в зависимости от таких факторов, как скорость сети или размер экрана.
  • Изображения и другие ресурсы можно кэшировать. Это не улучшит начальное время загрузки, но последующее время загрузки будет лучше, так как кэшированные изображения будут обслуживаться. Будьте осторожны, вы можете не захотеть иметь кеширование для всего!
  • Вы можете использовать такие техники, как бесконечная прокрутка или виртуальная прокрутка. Это лучше всего подходит для макетов на основе списков или сеток. Поскольку пользователю нужно прокручивать дальше, чтобы увидеть больше контента, вы никогда не визуализируете более пары изображений одновременно. Однако у этих подходов есть и обратные стороны (например, проблемы с доступностью), и их нельзя применять в каждой ситуации.
  • Вы можете указать браузеру загружать изображения только тогда, когда пользователь собирается их увидеть. Пример: если пользователь посещает ваш сайт и никогда не прокручивает страницу до конца, то изображения в конце вашего сайта никогда не будут загружены!

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

Что ж, это не может быть так сложно решить, не так ли?

Было предложено несколько решений для отложенной загрузки изображений. Если вы вкратце задумаетесь над этим, проблема может показаться на первый взгляд довольно простой:

  • Ресурсы, такие как изображения, загружаются браузером автоматически, если есть атрибут src. Следовательно, для элемента устанавливается настраиваемый атрибут HTML (например, data-src), значением которого является URL. Вместо указания
  • Добавьте прослушиватель событий для прослушивания событий прокрутки.
  • Если пользователь собирается перейти к изображению с помощью прокрутки: установите атрибут src элемента HTML, используя настраиваемый атрибут HTML, который позволяет браузеру узнать, что он должен запросить изображение.

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

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

Как выполнить отложенную загрузку изображений с помощью всего одного атрибута HTML

Есть атрибут HTML loading. Если установить loading="lazy", изображение будет загружено только в том случае, если пользователь прокрутит его рядом с ним. Нет ничего проще. Если изображение сразу видно (например, потому, что оно находится на верхней панели навигации), оно все равно будет отображаться как обычно.

Взгляните на следующий пример. Я использовал инструменты разработчика Chrome, чтобы вы могли увидеть разницу. Без ленивой загрузки все изображения запрашивались бы при загрузке страницы. Но при отложенной загрузке мы загружаем только те изображения, которые действительно видим. Только если мы прокрутим вниз ближе к концу страницы, будут запрошены изображения внизу.

В настоящее время этот подход не будет работать для всех браузеров (если посмотреть на вас, IE11). Однако довольно свежие версии Chrome, Firefox и Edge на основе Chromium уже поддерживают его. Это идея прогрессивного улучшения: пользователи с современными веб-браузерами пользуются этой функцией, в то время как веб-сайт по-прежнему работает для браузеров, которые еще не поддерживают его.

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

if(!('loading' in HTMLImageElement.prototype)) {
  // apply fallback solution for older browsers
}

Совет от профессионала: имеет смысл предоставить width и height для ленивых загружаемых элементов. Даже если вы не знаете точных размеров, рекомендуется предоставить хотя бы несколько min-height и min-width, чтобы избежать больших сдвигов макета во время загрузки изображений. Инструменты разработчика Chrome или Firefox DevTools позволяют имитировать более медленную скорость сети, что может помочь вам протестировать ваш сайт в менее чем идеальных условиях.

Как делать ленивую загрузку фреймов

Помимо изображений, многие веб-сайты используют iframe для встраивания внешнего веб-сайта на ваш сайт. Например, канал Twitter или адрес вашего офиса на Картах Google можно легко встроить на любой сайт с помощью iframe. По сути, вы загружаете сайт на свой сайт.

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

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

Вывод

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