Ленивая загрузка для оптимизации производительности вашего сайта

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

Когда вы запрашиваете веб-сайт, ваш браузер загружает все необходимые ресурсы, чтобы отобразить страницу в нужном виде. Это означает, что запрашиваются все объекты, даже те, которые не видны пользователю (т.е. объекты, которые находятся «ниже сгиба»). Это приводит к неоправданно долгому времени загрузки. Чтобы обойти эту проблему, разработчики используют ленивую загрузку. С помощью такого скрипта, как LazyLoad, браузер загружает изображения и другие данные только тогда, когда они находятся в области просмотра (то есть в видимой области), например, при прокрутке или увеличении окна браузера.

Метод ленивой загрузки лучше всего объяснить на примере объектов изображений. Чтобы иметь возможность использовать ленивую загрузку, необходимо изменить разметку тега img. Вместо атрибута src в этом методе используется атрибут data, который включает соответствующую ссылку на источник. Как только изображение становится видимым, сценарий добавляет атрибут src, используя атрибут data, который заставляет изображение появиться. Вы даже можете использовать эффекты затухания или скольжения, чтобы сделать процесс загрузки более эстетичным.

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

В настоящее время существует бесчисленное множество шаблонов JavaScript для ленивой загрузки, которые можно легко интегрировать в ваш сайт. Например, вы можете использовать ранее упомянутый скрипт LazyLoad, который представляет собой экономное решение без jQuery. Помимо того, что этот скрипт размером 2,4 КБ (килобайта) не только позволяет настраивать встроенную ленивую загрузку для изображений, видео и iFrames, он также поддерживает отзывчивые изображения, среди прочего.

В качестве альтернативы LazyLoad можно использовать скрипт Lazy Load Remastered, разработанный Микой Тууполой. Он отличается от LazyLoad тем, что использует jQuery и обеспечивает некоторые приятные эффекты, такие как техника размытия.

Нативная ленивая загрузка — это самый простой способ интегрировать метод ленивой загрузки в ваш веб-проект. Хотя изначально он был доступен только в браузере Google Chrome (версия 75 и выше), теперь этот метод работает также в Firefox, Edge и Opera. Чтобы воспользоваться этой опцией, достаточно добавить соответствующий атрибут загрузки к соответствующему содержимому сайта:

Помимо значения «lazy» для ленивой загрузки, доступны также следующие значения:

• eager: Браузер загружает объект сразу после запроса страницы.
• auto: Браузер сам решает, загружать ли объект сразу или с задержкой.

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

Если интегрировать ленивую загрузку с JavaScript, браузер будет постоянно запрашивать положение объекта. Это может привести к неприглядным побочным эффектам, таким как подергивание, и является дополнительной нагрузкой на сервер. Если вы используете API Intersection Observer, он ведет себя по-другому. Интерфейс отслеживает изменения любых элементов по отношению к определенному родительскому элементу. Этим родительским элементом обычно является область просмотра. Если объект перекрывает родительский элемент или если расстояние между элементами изменяется на определенную величину, Intersection Observer выполнит функцию обратного вызова и отобразит элемент.

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

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

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

• Нативная ленивая загрузка: Добавьте атрибут loading=»eager» к пикселю отслеживания.
• Ленивая загрузка с помощью JavaScript: Присвойте пикселю отслеживания определенный класс, который можно исключить в коде JavaScript. В качестве альтернативы можно присвоить класс всем объектам, которые браузер будет загружать с помощью ленивой загрузки, и явно применить к ним сценарий.