Пришвидшення роботи WordPress за допомогою лінивого завантаження зображень та відео (плагін не потрібен)
Відкладене завантаження – один із найпростіших та найефективніших способів пришвидшити завантаження вашого сайту WordPress, особливо на мобільних пристроях, і вам навіть не потрібен плагін для його реалізації. У цьому посібнику ми покажемо вам, як вручну ввімкнути нативне відкладене завантаження зображень та відео за допомогою чистого та легкого коду.
Що таке ліниве завантаження?
Відкладене завантаження — це техніка підвищення продуктивності, за якої медіа-ресурси, такі як зображення та відео, завантажуються лише тоді, коли вони збираються потрапити у область перегляду користувача (тобто стають видимими на екрані). Це зменшує кількість HTTP-запитів під час початкового завантаження сторінки, роблячи сайт швидшим та легшим.
Чому ліниве завантаження критично важливе для продуктивності WordPress
- Зменшує початкову вагу сторінки: Сторінки завантажуються швидше, оскільки попередньо запитується менше ресурсів.
- Збереження пропускної здатності: Непереглянуті медіафайли не завантажуються, якщо вони не потрібні.
- Покращує основні показники веб-сайту: Відкладене завантаження покращує такі показники, як найбільший відбиток вмісту (LCP).
- Краще SEO та користувацький досвід: Швидкість є фактором ранжування. Швидший сайт утримує зацікавленість користувачів.
Як реалізувати нативне відкладене завантаження зображень
Починаючи з WordPress 5.5, нативне відкладене завантаження автоматично додається до тегів зображень за допомогою loading="lazy" атрибут. Ви можете забезпечити його належну роботу за допомогою мінімальних налаштувань:
<img src="your-image.jpg" alt="description" loading="lazy" width="600" height="400">Найкраща практика: Завжди уточнюйте width і height щоб уникнути зсувів макета (важливо для оцінки CLS).
Як примусово налаштувати відкладене завантаження для всіх зображень (необов'язково)
Якщо деякі теми або плагіни пропускають додавання loading="lazy", ви можете примусово це зробити за допомогою простого фрагмента JavaScript:
<script> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll('img:not([loading])').forEach(function(img) { img.setAttribute("loading", "lazy"); }); }); </script>Додайте цей скрипт до нижнього колонтитула або скористайтеся дочірньою темою, щоб правильно його включити.
Відкладене завантаження відео без плагінів
Відео важкі. Вбудовування з YouTube або Vimeo завантажує кілька зовнішніх скриптів. Щоб відкладено завантажувати їх без плагінів, замініть iframe на попередній перегляд зображення, на який можна натискати, і завантажуйте відео лише після взаємодії.
Приклад: Відкладене завантаження відео YouTube
<div class="youtube-lazy" data-id="VIDEO_ID"> <img src="https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg" alt="YouTube preview" loading="lazy"> <div class="play-button"></div> </div> <script> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll(".youtube-lazy").forEach(function(el) { el.addEventListener("click", function() { let iframe = document.createElement("iframe"); iframe.setAttribute("src", "https://www.youtube.com/embed/" + el.dataset.id + "?autoplay=1"); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("allowfullscreen", "1"); el.innerHTML = ""; el.appendChild(iframe); }); }); }); </script>Замінити VIDEO_ID з фактичним ідентифікатором відео YouTube.
Корисний стиль (необов'язково)
Додайте трохи базового CSS, щоб це виглядало гарно:
.youtube-lazy { position: relative; cursor: pointer; max-width: 100%; aspect-ratio: 16/9; background: #000; } .youtube-lazy img { width: 100%; height: auto; } .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: url('play-icon.svg') center center no-repeat; background-size: contain; }Чому б не використовувати плагін?
Плагіни зручні, але часто мають додаткові скрипти, стилі або надмірне навантаження. Ручне відкладене завантаження дає вам:
- Більше контролю над тим, що завантажується
- Немає впливу на продуктивність від функцій сторонніх розробників
- Чистіший вихідний сигнал
Коли варто розглянути плагін
Якщо у вас великий веб-сайт із частим завантаженням медіафайлів або ваші автори не знайомі з кодом, розгляньте ці оптимізовані плагіни з відкладеним завантаженням:
- Кеш LiteSpeed (якщо ваш сервер це підтримує)
- FlyingPress
- Perfmatters (преміум)
Але пам’ятайте, що навіть з цими плагінами, перегляд фактичної поведінки лінивого завантаження в DevTools є обов’язковим.
Заключні поради
- Використайте інструменти розробника браузера, щоб перевірити, чи
loading="lazy"застосовується - Перевірте свій сайт за допомогою Google PageSpeed Insights
- Відстеження покращень LCP після ввімкнення відкладеного завантаження
Потрібна допомога експерта у покращенні швидкості WordPress без зайвих плагінів? Спробуйте безкоштовний ручний аудит на SpeedWP Pro — ми оптимізуємо з нуля.
