Google випустили Lazyload плагін для WordPress

автор Сергій Григорович

30.09.2019

2

В найновішій версії Google Chrome було додано можливість підтримки native lazy loading в браузері. Реалізація цієї функції для ядра WordPress ще обговорюється.Тим часом плагіни, які дозволяють це зробити для сайту на WordPress, вже починають з’являтися, і Google нещодавно випустив один із своїх.

Native Lazyload – було створено інженером Google Феліксом Арнтцом і командою, яка стояла за офіційними AMP і PWA плагінами для WordPress. Плагін lazy loads дозволяє розміщувати та завантажувати картинки чи iframes поступово в браузерах, які підтримують native lazy loading. Плагін також включає резервний механізм для браузерів, до складу яких не входить функціонал поступового завантаження фото. У плагіна немає налаштувань – потрібно просто активувати його і він буде працювати.

В дописі, який представляє новий плагін, Арнтц пояснює, чому поточні опції lazy loading-a, які потребують cпеціальний JavaScript, не завжди позитивно впливають на продуктивність сайту:

“Lazy-loading довгий час не був вбудований в браузер і ви не могли просто  ввімкнути його. Це не було функцією браузера, тому потрібно було встановлювати спеціальну JavaScript логіку, щоб він почав працювати. На жаль, JavaScript дуже витратний ресурс, тому lazy loading, який підключали на сайти за допомогою джава скрипту, міг негативно впливати на продуктивність сайту (н.п. якщо сторінка не містила картинок або містила лише одну картинку, в такому випадку встановлений JS більше шкодив ніж допомагав). Крім того, якщо користувач вимкнув JavaScript в його браузері, lazy-loading не працював зовсім.”

Плагін використовує механізм, який Арнтц описав як “прогресивне посилення”, де продуктивність веб-сайту користувача  буде “магічно покращуватися без втручання”.
З випуском цього плагіну і вкладу Google у нього, очевидно, що компанія зацікавлена в тому, щоб ядро WordPress-a підтримувало новий функціонал завантажень фото браузером.

Chrome Engineering менеджер Едді Османі прокоментував подію і написав, що готовий надати свою допомогу:
“Я прихильник того, щоб ядро отримало підтримку lazy-loading-a в правильному вигляді” – сказав Османі.

“Ідеальна зміна, яку я хотів би побачити в плагінах lazy loading-a, – це відстеження підтримки lazy loading-a і застосування запасного варіанту там, де її немає.”  За оцінками Османі, більш ніж в 17-ти тисяч сайтів вже використовується lazy loading, згідно з Google’s телеметрії.

Енді Потс, програмний інженер BBC, повідомив про значне покращення продуктивності після адаптації native lazy loading-a. Він реалізував це на одному з внутрішніх продуктів компанії, на сайті з приблизно  3000 активними користувачами в день :

“Одна з найпоширеніших дій на сайті полягає у запуску запиту, який відображає список до 100 зображень – що я вважав було найкращим місцем для експерименту з native lazy loading- ом”,– сказав Поттс.

“Додавання атрибуту завантаження до картинок зменшувало час завантаження на швидкому інтернет підключенні на 50 відсотків – це займало від ~1 секунди до < 0.5 секунд, і також економило до 40 запитів до серверу. Всі ці покращення продуктивності почалися лише через додавання одного атрибуту до купки картинок ! ”

Кріс Гуннарс, управляючий сайту serchfacts.com, додав новий Lazyload плагін від Google до його сайту і повідомив про значні покращення в продуктивності, особливо в мобільній версії.

Поява Lazy loading в ядрі браузера внесе великий вклад в продуктивність Інтернету. І той факт, що вже більше ніж 35% сайтів використовують цей механізм в себе, лише підтверджує  неминучість обов’язковості використання цього функціоналу в подальшому. Наразі робзробка модуля призупинена і ведеться обговорення про функціонал модуля з наступної його версії. Але кожен власник сайту може скачати та встановити плагін, або один з багатьох модулів, які підтримують lazy loading в браузері Google Chrome, а в майбутньому, і всіх інших браузерах.

Сергій Григорович

Автор публікації Сергій Григорович

Є що відповісти?

Ваш email не буде публікуватися

Можна скористатися такими тегами в тексті:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  • 07.11.2019 at 22:38

    Круто, обовязково спробую інтегрувати в один із сайтів, над яким працюю в даний момент.