В ближайшем релизе Chrome (76) появится атрибут «loading», поддерживающий нативную браузерную «ленивую загрузку» страниц. Реализация этой опции для ядра WordPress пока все еще обсуждается. Тем временем уже начали появляться плагины, позволяющие включить браузерный lazy loading для WordPress-сайтов. Специалисты Google решили выпустить свой собственный плагин для этого.

Феликс Арнтц (Google)

Плагин Native Lazyload был создан инженером Google Феликсом Арнтцем и командой разработчиков, стоящих за официальными плагинами AMP и PWA для WP. Особенностью Native Lazyload является то, что он загружает изображения и iframe с новым атрибутом loading для браузеров, которые поддерживают это. Также плагин включает в себя fallback-механизм для браузеров, не поддерживающих новый атрибут, однако такое поведение можно отключить с помощью фильтра. У плагина нет настроек – его нужно просто активировать, и он работает.

В публикации, посвященной новому плагину, Феликс объясняет, почему текущие опции lazy loading, для которых требуется произвольный JS-код, не всегда хороши в плане производительности:

«Загрузка Lazy-loading долгое время являлась достаточно сложной опцией, которую требовалось настраивать отдельно. Она не являлась браузерной опцией, а потому для ее работы обычно требовалось выполнение произвольной логики JavaScript. К сожалению, сам по себе JavaScript – достаточно требовательный ресурс, а потому «ленивая загрузка» в том виде, как она была реализована до этого, в некоторых случаях может оказывать значительное влияние на производительность (к примеру, если на странице нет изображений или если она содержит одно изображение, которое сразу же выводится). Кроме того, если пользователь отключил JavaScript в браузере, lazy loading попросту не будет работать».

Плагин использует примерно такую же реализацию, как и та, что обсуждалась в тикете WP. Арнтц назвал это «прогрессивным улучшением», когда производительность сайта пользователя будет «магическим образом улучшена без какого-либо вмешательства», поскольку все больше браузеров добавляют поддержку атрибута loading.

Эдди Османи (Google)

Специалисты Google при помощи выпуска плагина и внесения своего вклада в тикет на Trac явно подтвердили, что компания заинтересована в поддержке нового атрибута loading в ядре WordPress. Менеджер по разработке Chrome Эдди Османи прокомментировал тикет следующим образом:

«Хотелось бы, чтобы в ядре появилась нативная загрузка Lazy loading, реализованная в недеструктивной манере. Идеальное изменение, которое я хотел бы видеть в плагинах для ленивой загрузки – переход на нативный lazy loading и использование fallback для тех случаев, когда браузерная ленивая загрузка не поддерживается».

По оценкам Эдди, примерно 17к источников уже используют loading=lazy, согласно телеметрии Google.

Энди Поттс (BBC)

Энди Поттс, инженер-программист из BBC, отметил о значительном улучшении производительности при переходе на нативную ленивую загрузку. Энди внедрил поддержку браузерного lazy loading в один из внутренних продуктов компании, сайт, который насчитывает примерно 3000 активных посетителей в день:

«Одно из самых популярных действий на сайте – выполнение запроса, который обрабатывает список до 100 изображений. Это, как мне показалось, идеальное место для экспериментов с ленивой загрузкой», – рассказал Энди.

«Добавление атрибута loading к изображениям позволило сократить время загрузки примерно на 50% – с 1 секунды до 0.5 секунд, что также сэкономило до 40 запросов к серверу. Все эти улучшения производительности – только в результате добавления одного атрибута к изображениям».

Крис Гуннарс (Searchfacts.com)

Крис Гуннарс, владелец searchfacts.com, установил на свой сайт новый плагин Native Lazyload от Google и сообщил о значительных улучшениях производительности, особенно на мобильных устройствах.

«После того как я установил плагин, мой показатель PageSpeed для мобильных устройств вырос с 92 до 96. Также удалось сэкономить до 1.5 секунд загрузки», – отметил Крис.

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

Источник: wptavern.com