WordPress 5.4 добавит ленивую загрузку ко всем изображениям

31 марта 2020 года выходит WordPress 5.4 и WordPress 5.4добавит ленивую загрузку ко всем изображениям.

Вступление

Последние две недели вопрос «ленивой загрузки» изображений просто преследует мои сайты. Сначала Lazy-Loading на JetPack начал давать сбои. Потом я узнал, что Autoptimize уже давно добавил ленивую загрузку в свой функционал. «Вишенкой на торте» стала новость, что по умолчанию WordPress 5.4 добавит ленивую загрузку ко всем изображениям сайта.

Про ленивую загрузку на WordPress 5.4

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

Без Lazy-Loading все фото вашей веб-страницы загружаются сразу. С Lazy-Loading пользователь видит фото веб-страницы, когда они подходят к границе экрана.

На самом дел, все фразы «загружает фото» относятся к загрузке атрибута HTML для элементов IMG. При использовании Lazy-Loading атрибут HTML с отложенной загрузкой сообщает браузеру дождаться загрузки изображения или сразу же загрузить его.

Ранее и сейчас для реализации Lazy-Loading на сайте WoraPress использовался JavaScript или сторонние плагины.

31 марта 2020 года, WordPress 5.4 добавит Lazy-Loading ко всем изображениям по умолчанию, не нужны ни плагины, ни JavaScript.

Что это значит?

Lazy-Loading ускоряет загрузку сайта, что особенно ценят всевозможные тесты скорости загрузки, особенно Google тест Pagespeed insights.

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

Если работает не правильно, картинки не будут загружаться.

Для чего будет работать Lazy-Loading на WordPress 5.4

Разработчиками заявлено (читать тут make.wordpress.org/core/2020/01/29/lazy-loading-images-in-wordpress-core/), что ленивая загрузка будет работать для:

Изображений в статьях и на страницах;
В картинках в комментариях;
Изображения в системном текстовом виджете;
Отдельные изображения, созданные с помощью wp_get_attachment_image ().

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

Заявлено, что для всех перечисленных изображений на сайте, для которых не использовался тег loading = ”eager”, будет применён тег: loading = ”lazy”. О применение тега loading = ”over-eager” речи не идёт.

Самое весёлое

Почти параллельно, браузер Google заявил, что есть планы автоматически включить отложенную загрузку для всех изображений, когда браузер находится в облегчённом режиме (Lite mode), ранее известный как режим сохранения данных (Data Saver mode).

На что WordPress, не формально ответил,

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

Как пропишется

Тег loading = ”lazy” прописывается в HTML код картинки так:

<img align="left" src="foto.jpg" loading="lazy" alt="..." />

Плагины Lazy-Loading

Вероятно я опоздал с рекомендациями плагинов реализующих ленивую загрузку. Но всё же:

Посмотрите поиск в каталоге плагинов на этой странице Lazy-Loading: https://wordpress.org/plugins/search/lazy-load/

Из списка рекомендую:

Autoptimize;
Lazy Loader;
Lazy Load – Optimize Images;
Lazy Load Optimizer.

Если используете JetPack, включите модуль ленивой загрузки на вкладке Настройки>>>Производительность. После этого обязательно проверьте сайт.

Заключение про WordPress 5.4

Ждём 31 марта 2020 года, вероятнее всего WordPress 5.4 добавит ленивую загрузку ко всем изображениям.

WordPress 5.4 добавит Lazy-Loading ко всем изображениям