Як реалізувати відкладене завантаження зображень і відео в WordPress
Чому відкладене завантаження має значення
Без відкладеного завантаження всі медіафайли на сторінці завантажуються миттєво, навіть якщо їх ще не видно на екрані. Це викликає:
- Більша вага сторінки
- Довший початковий час завантаження
- Гірші показники продуктивності в PageSpeed Insights
Відкладене завантаження вирішує цю проблему, завантажуючи мультимедійні дані лише тоді, коли користувач прокручує сторінку вниз. Це покращує швидкість і зберігає пропускну здатність.
Відкладене завантаження зображень у WordPress
Починаючи з версії 5.5, WordPress автоматично додає loading="лінивий" атрибут для зображень, вставлених за допомогою редактора. Вам не потрібні плагіни, щоб увімкнути його.
Як перевірити, чи працює він:
- Клацніть зображення правою кнопкою миші → Перевірити елемент
- шукати:
<img src="..." loading="lazy"> - Якщо атрибут відсутній — перевірте розмітку зображення теми або скористайтеся додатком
Порада:
Деякі старіші теми замінюють або видаляють loading="лінивий". У цьому випадку ви можете вручну додати його за допомогою фільтрів або переключитися на сучасну тему.
Відкладене завантаження для YouTube і відео
Фрейми iframe YouTube і вбудовані відео можуть значно сповільнити швидкість сторінки. Використовуйте такі методи:
- Використовуйте зображення попереднього перегляду (постер) і завантажуйте iframe лише після натискання
- Плагіни, як WP YouTube Lyte або Відкладене завантаження для відео
- Використовуйте легку мініатюру та динамічно замінюйте її iframe за допомогою JavaScript
Приклад заповнювача HTML:
Рекомендовані модулі відкладеного завантаження
- a3 Ліниве навантаження – Легкий і конфігурований
- WP Rocket (преміум) – Повне медіа відкладене завантаження з оптимізацією
- Perfmatters – Включає відкладене завантаження та менеджер сценаріїв
Потенційні проблеми, на які слід звернути увагу
- Зображення або відео «з’являються» надто пізно — використовуйте правильний інтервал
- Пошукові системи не бачать медіа — сучасні сканери підтримують відкладене завантаження, але перевіряють критичний вміст
- Зламані медіафайли для старіших браузерів — перевірте резервний варіант, якщо потрібно
Тестування продуктивності відкладеного завантаження
- використання PageSpeed Insights → див. зменшений час завантаження зображення
- Chrome DevTools → Мережа → фільтрувати за носіями → прокручувати та спостерігати за поведінкою завантаження
Хочете, щоб це було зроблено правильно?
Відкладене завантаження просте, але потужне. Дозвольте SpeedWP Pro перевірити ваш сайт WordPress для роздуття медіафайлів, проблем із відкладеним завантаженням і прихованих блокувальників — усе в одному безкоштовному аудиті.