Атрибут lazyload в HTML: що це таке і як ним користуватися

Seo 18 груд. 2024 р.
Атрибут lazyload в HTML: що це таке і як ним користуватися

Оптимізація швидкості завантаження веб-сторінок є однією з головних задач сучасного веб-розробника. Одним із інструментів, який допомагає зменшити час завантаження сторінки, є атрибут loading="lazy" у HTML. У цій статті ми розглянемо, що таке lazy loading, як його застосовувати, а також поділимося прикладами.

Що таке lazy loading?

Lazy loading (ліниве завантаження) — це техніка оптимізації, яка відтерміновує завантаження ресурсів (зображень, iframe тощо), доки вони не з’являться у видимій частині сторінки (в області viewport). Цей підхід дозволяє зменшити кількість завантажуваних даних при стартовому завантаженні сторінки, покращуючи швидкість та продуктивність.

Атрибут loading

HTML5 надає атрибут loading, який можна додати до елементів <img> або <iframe>. Він приймає такі значення:

  • lazy — ресурс буде завантажений лише тоді, коли він стане видимим для користувача.

  • eager — ресурс завантажується одразу під час завантаження сторінки (за замовчуванням для деяких елементів).

  • auto — браузер сам вирішує, коли завантажувати ресурс.

Підтримка браузерами

Атрибут loading="lazy" підтримується більшістю сучасних браузерів, включаючи Chrome, Edge, Firefox та Opera. Для Safari (починаючи з версії 15.4) також є підтримка. Якщо браузер не підтримує цей атрибут, елемент буде завантажено стандартним чином.

Приклади використання

1. Ліниве завантаження зображен

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Loading Images</title>
</head>
<body>
    <h1>Приклад lazy loading для зображень</h1>
    <p>Тільки зображення, які ви бачите, завантажуються.</p>

    <img src="image1.jpg" alt="Зображення 1" loading="lazy">
    <img src="image2.jpg" alt="Зображення 2" loading="lazy">
    <img src="image3.jpg" alt="Зображення 3" loading="lazy">
</body>
</html>
 

2. Ліниве завантаження ifram

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Loading Iframe</title>
</head>
<body>
    <h1>Приклад lazy loading для iframe</h1>
    <p>Карта буде завантажена, тільки якщо ви її прокрутите.</p>

    <iframe src="https://www.google.com/maps" width="600" height="400" loading="lazy"></iframe>
</body>
</html>
 

Переваги використання lazy loading

  1. Швидше завантаження сторінки: зменшується кількість ресурсів, які потрібно завантажити при старті.

  2. Економія трафіку: завантажуються лише ті елементи, які користувач побачить.

  3. Покращення SEO: пошукові системи враховують швидкість завантаження сторінки при ранжуванні.

Коли використовувати lazy loading?

Lazy loading є корисним для:

  • Зображень, які знаходяться нижче "першого екрану".

  • Вбудованих відео та карт.

  • Контенту на довгих сторінках (наприклад, блоги, каталоги).

Проте не варто використовувати lazy loading для зображень чи інших ресурсів, критичних для користувацького досвіду (наприклад, логотипів чи елементів першого екрану).

Висновок

Атрибут loading="lazy" — це простий і ефективний спосіб покращити продуктивність веб-сторінки без додаткового JavaScript-коду. Використовуючи цю техніку, ви зможете створити швидший та зручніший веб-досвід для ваших користувачів.

 

Telegram чат