Браузери Chrome підтримують ліниве завантаження iframe для підтримки продуктивності
- Категорія: Гугл Хром
Google виявлено 24 липня 2020 року веб-браузери Google Chrome та Chromium підтримують ледаче завантаження вмісту iframe. Інтеграція цієї функції відбувається відразу після того, як Google представила підтримку ледаче завантаження зображень у Chromium та Chrome . Веб-браузер Firefox Mozilla також підтримує ледачу завантаження зображень .
Технічно кажучи, ліниве завантаження не дозволяє браузеру завантажувати певний контент, поки користувач не отримає доступ до нього. Коли сторінка завантажується вперше, вміст, який не видно внизу сторінки, може ледаче завантажуватися. Коли користувач прокручується вниз, вміст завантажується під час дії прокрутки.
Лениве завантаження iframes у веб-браузерах, що базуються на Chromium, відповідає тій же методиці. Веб-майстрам потрібно використовувати атрибут loading = 'lazy' для iframes у коді сайту, щоб повідомити браузеру, що вміст не повинен завантажуватися відразу. Веб-браузери, які не підтримують цю функцію, ігнорують атрибут, тоді як браузери, які підтримують його, будуть відповідно обробляти завантаження.
Google провів кілька тестів, щоб визначити ефект від ледачого завантаження кадрів iframes. Він зазначив наступне:
- Ледаче завантаження вкладок YouTube дозволить заощадити близько 500 кілобайт при початковому завантаженні сторінки.
- На chrome.com Google встиг скоротити час завантаження на 10 секунд на мобільних пристроях, коли додав атрибут ледачі до вкладок YouTube на сторінку.
- Ледачі завантаження вкладок Instagram економлять близько 100 кілобайт при початковому завантаженні.
- Ледаче завантаження Spotify вбудовує економію 514 кілобайт на початковому навантаженні.
Взагалі кажучи, ліниве завантаження кадрів за межі екрана призводить до 2-3% середньої економії даних, 1-2% першої змістовної фарби та 2% затримки першого введення.
Google зазначає, що існує також можливість використовувати атрибути завантаження для реклами на веб-сайтах.
Веб-майстрам потрібно вказати параметр loading = 'lazy', щоб отримати браузери, які підтримують ледаче завантаження, щоб відкласти завантаження до доступу до вмісту. Крім того, можна скористатися параметром 'нетерплячий', щоб повідомити веб-переглядачу про те, що вміст слід завантажувати негайно, і використовувати 'авто', щоб веб-переглядач вирішив.
Google застосував виняток у режимі Lite на Chrome для Android. Режим Lite або режим збереження даних - це особливий режим, підтримуваний Chrome для Android, який призначений для підвищення продуктивності завантаження за допомогою серверів Google для швидшого завантаження вмісту. Позаекранні зображення та рамки кадрів автоматично завантажуються, якщо в веб-браузері Chrome активний режим Lite.
Заключні слова
Основна мета ледачого завантаження - пришвидшити початкове завантаження веб-сайту. Вміст, який не завантажується спочатку під час завантаження сайту, завантажується, коли користувачі прокручують сторінку; це може призвести до того, що деякий вміст не відображатиметься одразу залежно від швидкості прокрутки та продуктивності пристрою та мережі.
Тепер ти: Ледаче завантаження, так чи ні, що ти береш? (через Techdows )