Зачем вам лениво загружать изображения на ваш сайт WordPress

1. Как загружается веб-страница?
2. Что такое LazyLoad?
3. Как работает LazyLoad?
4. Пример LazyLoad в действии
5. Ресторан - это наша веб-страница, в меню - изображения, а официантом - сценарий LazyLoad.
6. Завершение

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

В частности, мы сосредоточимся на скрипте LazyLoad .

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

Мы не хотим предоставлять плохой пользовательский опыт ради наших изображений!

Как загружается веб-страница?

Прежде всего, давайте кратко напомним, что происходит каждый раз, когда мы просматриваем веб-страницу.

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

1. HTML-код (от 15 до 120 КБ)
2. Файлы JavaScript и CSS (от 5 до 200 КБ кода)
3. Изображения и фреймы (от 200 КБ до многих МБ [иногда слишком много!])

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

Независимо от технических деталей, всегда полезно помнить две основные характеристики, которые мы все склонны показывать при посещении веб-сайта:

1. мы нетерпеливы
2. мы почти никогда не увидим реальную скорость загрузки сайта или блога, которые мы посещаем

Поскольку это не место, чтобы говорить о том, как Интернет подрывает нашу способность концентрироваться и проявлять терпение (но кто-то еще ), давайте перейдем прямо к пункту b.

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

Что такое LazyLoad?

LazyLoad - это скрипт, который откладывает загрузку изображений на странице, пока вы не прокрутите страницу вниз.

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

С точки зрения производительности, эта функция уменьшит количество HTTP-запросов во время загрузки первой страницы от пользователя.

Как работает LazyLoad?

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

Вы помните те старые фотоальбомы, где завеса из папиросной бумаги защищала каждую картинку на странице?

LazyLoad «прячет» изображения и фреймы одинаково.
Каждый раз, когда пользователь прокручивает страницу вниз, запрашивая изображения ниже сгиба, сценарий удаляет «завесу из папиросной бумаги» и отображает реальное изображение.

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

Пример LazyLoad в действии

Если вы хотите увидеть LazyLoad в действии, выберите страницу, содержащую много изображений и где активирован скрипт.
WP Rocket имеет опцию LazyLoad, но есть определенные плагины LazyLoad WordPress, которые вы можете использовать; если вы разработчик, вы можете самостоятельно интегрировать скрипт LazyLoad ,

Теперь откройте консоль вашего браузера, чтобы проверить активность страницы (щелкните правой кнопкой мыши веб-страницу и выберите «Проверить»).
Вот простое сравнение той же страницы, загруженной с и без LazyLoad:

• без LazyLoad все изображения на странице загружаются вместе.
  Как только страница загрузится, все ее элементы, включая изображения, появятся:

• с активной LazyLoad :

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

Попробуйте представить весь процесс как обед в хорошем ресторане, где вас обслужит опытный официант, а меню богато фирменными блюдами.

Ресторан - это наша веб-страница, в меню - изображения, а официантом - сценарий LazyLoad.

Вся еда, которую вы можете заказать, появляется в меню; Вы просматриваете его и подтверждаете свой заказ официанту, который записывает его в свой блокнот (т. е. скрипт сохраняет URL-адрес изображений и устанавливает пустые изображения).

Никто не любит ждать слишком долго, чтобы еда была подана в ресторане, и официант это знает очень хорошо.

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

Представьте, как досадно было бы долго ждать еду, а затем получать ее ВСЕ, поданную сразу!

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

Завершение

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

LazyLoad позволяет вам сохранить ваши красивые изображения, не расстраивая посетителей во время ожидания.

Как вы обычно управляете своими изображениями? Вы когда-нибудь пробовали скрипт LazyLoad? Поделитесь своим мнением в комментариях!

PS. Помните, что, в общем, независимо от того, используете ли вы LazyLoad или нет, вы всегда хотите максимально оптимизировать ваши изображения (например, с помощью нашего нового инструмента сжатия, Imagify ). Вы также можете прочитать наш блог о оптимизация изображения ,

Похожие

Комментарии