Як ледаче завантажувати зображення + відео в WordPress (і замінювати iFrames YouTube на попереднє зображення) для кращих результатів GTmetrix

Який найкращий спосіб ледаче завантажувати зображення та відео в WordPress?


Це залежить від того, ви вже використовуєте плагін кешу, який підтримує ледачу завантаження (WP Rocket, W3 Total Cache, Swift, LiteSpeed ​​Cache). Якщо ваш плагін кеша підтримує ледачі завантаження зображень і відео, краще використовувати це, щоб уникнути необхідності встановлення додаткового плагіна. Але якщо ваш плагін кеша не підтримує ледачий завантаження, я рекомендую використовувати той, який робить (особливо WP Rocket), інакше я перерахував альтернативні додатки для ледачих завантажень нижче, які ви можете встановити окремо.

Що таке ледаче завантаження?
Ледаче завантаження означає, що зображення та відео завантажуються лише після того, як користувачі прокручують сторінку вниз і фактично їх бачать. Це призводить до меншої кількості запитів HTTP на сторінці, однак якщо у вас багато зображень або вбудованих відео, вам потрібно постійно завантажувати їх, ви прокручуєте сторінку вниз.

Що означає замінити YouTube Iframe на попереднє зображення?
Якщо ви вставляєте відео на свій сайт WordPress, це завантажує лише “жирного плеєра YouTube”, лише коли люди натискають кнопку “Відтворити”. Іншими словами, спочатку завантажується лише зображення попереднього перегляду.

Якщо ви лінуєтеся завантажувати зображення та відео?
Я не лінуюся завантажувати зображення, тому що постійне завантаження зображень під час прокручування сторінки може дратувати користувачів. Однак усі мої зображення оптимізовані до 100% у GTmetrix. Я ліниво завантажую відео та замінюю фрейм рамки на попередній образ. Оскільки завантаження кожного вбудованого відео може зайняти 2 секунди (набагато важче, ніж зображення), користь ледачого завантаження відео є значною.

1. Ракета WP

WP Rocket – це мій вибір №1 для ледачого завантаження і був плагіном кешу №1 у опитуваннях у Facebook.

Оскільки він уже має вбудований ледачий завантаження, це означає, що вам не потрібно встановлювати додатковий плагін. У цьому вся вигода ракети WP; він має більше функцій, ніж майже будь-який інший плагін кешу (що призводить до кращого часу завантаження та балів GTmetrix), але менше плагінів на вашому сайті. WP Rocket має велику кількість документація про ледаче завантаження та налаштування параметрів WP Rocket.

Ракета WP

Як увімкнути ледачу навантаження в ракеті WP
Щоб увімкнути ліниве завантаження в WP Rocket, перейдіть до “Налаштування” > Ракета WP > ЗМІ > LazyLoad. Ви можете ввімкнути його для зображень, кадрів кадрів і відео, а також замінити iframe YouTube на зображення попереднього перегляду.

Ледача завантаження зображень WP ракети

2. Оптимізатор SG

SiteGround запровадили ледачу завантаження у своєму великому оновленні Оптимізатор SG.

Звичайно, ви повинні бути клієнтом SiteGround, щоб користуватися цим плагіном (що я б зробив для спільного хостингу, враховуючи, що вони були оцінені хостом №1 у понад 20 опитуваннях у Facebook). SG Optimizer можна порівняти з WP Rocket, але він не має майже стільки функцій. Тож якщо ви використовуєте SiteGround для свого хоста, я все-таки віддаю перевагу WP Rocket над їх оптимізатором SG.

SiteGround SG Optimizer

Як увімкнути ледачу завантаження в оптимізаторі SG
Щоб увімкнути ледаче завантаження в SG Optimizer, перейдіть у Налаштування > Оптимізатор SG > За замовчуванням на сайті > Оптимізація зображень. Ви можете ліниво завантажувати зображення, граватари, ескізи, чуйні зображення та віджети. Якщо у вас є коментарі до вашого блогу, ледаче завантаження Gravatars може дуже допомогти.

SG Optimizer Ледаче завантаження

3. W3 Загальний кеш

Якщо ви вже використовуєте загальний кеш W3, вони також мають лінивий варіант завантаження.

W3 Total Cache деякий час вважався занедбаним, але з тих пір розробник почав підтримувати свій плагін. У мене є великий підручник з налаштування налаштувань загального кешу W3.

Плагін W3 Total Cache

Як увімкнути ледачу завантаження у загальному кеші W3
Щоб увімкнути завантаження в кеш-пам’яті W3, перейдіть у Налаштування > Загальні налаштування > Досвід користувача > Ледаче завантаження. Увімкніть це, а потім перейдіть до розділу Досвід користувачів > Ледаче завантаження. Виберіть обробку HTML-тегів зображень, фонових зображень, виключення слів та метод вбудовування сценарію.

W3 Загальний кеш-лені завантаження

4. Litespeed Cache

Повторний кеш-пам’ять ледаче завантаження також зробить роботу (Litespeed добре переглянув плагін кеша).

Плагін LiteSpeed ​​Cache

Як увімкнути ледачу завантаження в кеш-пам’яті LiteSpeed
Щоб увімкнути завантаження в кеш LiteSpeed, перейдіть до кеша LiteSpeed > Налаштування > ЗМІ > Налаштування медіа. Тут ви можете ввімкнути ледачі завантаження зображень, кадрів кадрів, виключити зображення, автоматично подати запит на оптимізацію через роботу cron, включити вбудовану бібліотеку Javascript та переключити інші налаштування.

Ледаче завантаження зображень Відео Litespeed Cache

5. Швидке виконання

Швидке виконання – ще один плагін кеша, який підтримує ледаче завантаження. Свіфт отримав чудові відгуки у групі WordPress Speed ​​Up Facebook, однак відгуки на сторінці плагінів WordPress – це лише близько 4 зірок. Я не пробував Swift Performance; Я абсолютно задоволений WP Rocket.

Плагін Swift Performance Lite

Як увімкнути ледачу навантаження у швидкій продуктивності
Щоб увімкнути завантаження завантаження у програмі Swift Performance, перейдіть у Налаштування > ЗМІ > Ледача навантаження. Тут ви матимете можливість ліниво завантажувати зображення, виключати певні зображення та вбудовувати ліниві зображення завантаження.

Швидке виконання зображень із ледачим завантаженням

6. Автоптимізуйте

Автоптимізація часто використовується з такими хостами, як GoDaddy та WP Engine, де вони мають власну вбудовану систему кешування та плагіни кеша чорного списку. У цьому випадку (оскільки ви хочете подбати про інші оптимізації швидкості), автоматичне оптимізація – це звичайно плагін для переходу до цього. Однією з його багатьох функцій є ледаче завантаження, але це також дозволяє оптимізувати HTML, CSS, JavaScript та шрифти Google.

Автоматично оптимізувати плагін

Як увімкнути ледачу завантаження в автоматичному режимі
Щоб увімкнути завантаження в режимі автоматичного оптимізації, перейдіть у Налаштування > Зображення > Ледачі завантаження зображень. Також у вас є можливість використовувати CDN ShortPixel для оптимізації зображень (це плагін, який я використовую).

Лежаче завантаження зображень Автоматично оптимізувати

7. Сміш

Smush – це плагін для оптимізації зображень підтримує ледаче завантаження. Він був розроблений WPMU, однак я особисто використовую ShortPixel для стиснення без втрат, оскільки це єдиний я використовував, що робить мої зображення на 100% у GTmetrix (і я протестував багато плагінів для оптимізації зображень).

Розминьте плагін

Як увімкнути ледачу завантаження в Smush
Щоб увімкнути завантаження в Smush, перейдіть до програми Smush > Панель приладів > Ледача навантаження. Ви можете вибрати, які типи файлів вам потрібні ледачі завантаження (.jpeg, png, .gif, .svg, iframe), і чи хочете, щоб вони були включені для вмісту, віджетів, ескізів, граватар. Він навіть має ліниві налаштування анімації завантаження.

Розмийте ледачу навантаження

8. Ледаче навантаження ракетою WP

Ледаче навантаження ракетою WP добре, якщо ви не використовуєте WP Rocket, але хочете ледаче завантажувати зображення.

Плагін для ледачих завантажень

Як увімкнути ледачу навантаження при ледачому навантаженні ракетою WP
Перейдіть у Налаштування > LazyLoad. Ви можете ліниво завантажувати зображення, рамки & відео та замініть відео YouTube мініатюрою. Налаштувань не так багато; Я особисто хочу, щоб їх було більше. Можливо, тому цей ледачий плагін не має найкращих відгуків.

Ледаче навантаження ракетою WP

9. А3 ледача навантаження

A3 Ледача навантаження підтримує ледаче завантаження зображень і відео.

a3 Плагін для ледачого завантаження

Як увімкнути ледачу навантаження в A3 ледачому навантаженні
Щоб увімкнути завантаження в A3 Lazy Load, перейдіть до налаштувань > A3 Ледача навантаження. Ви можете налаштувати параметри для ледачого завантаження зображень, відео, фреймів, Gravatars та вибрати, у яких областях вашого веб-сайту потрібно застосувати ліниве завантаження (включаючи мобільний). Також є параметри, щоб увімкнути ефект ледачого завантаження, завантажити фоновий колір та вилучити URL-адреси та типи публікацій.

a3 Налаштування лінивого завантаження

10. BJ Lazy Load

BJ Lazy Load не здається доглянутою, тому я, ймовірно, використовую інший плагін.

Плагін BJ Lazy Load

Як увімкнути ледачу навантаження в BJ Lazy Load
Щоб увімкнути завантаження в режимі BJ Lazy Load, перейдіть у Налаштування > BJ Lazy Load. Налаштування відносно прості та дають можливість ліниво завантажувати зображення, рамки, граватори та виключати ліниве завантаження із вмісту, текстових віджетів та розміщення ескізів. Також є можливість включити зображення заповнювача, поріг перегляду та використовувати зображення попереднього перегляду з низькою роздільною здатністю при ледачому завантаженні.

Налаштування завантаження лежачих BJ

11. Ледаче завантаження зображень

Ледачий навантаження для зображень добре, якщо ви хочете робити це лише для зображень.

Плагін Lazy Load for Images

Як увімкнути ледачу завантаження для зображень
У плагіні Lazy Load For Images немає налаштувань (це автоматично).

12. Ледаче завантаження відео

Ледаче завантаження відео замінює вбудовані відео на зображення, що попередньо переглядаються.

Лежаче завантаження для плагіна відео

Як увімкнути ледачу завантаження у ледачому завантаженні для відео
Щоб увімкнути завантаження у програмі Lazy Load For Videos, перейдіть у Налаштування > Ледаче завантаження відео. Виберіть лише завантажувати CSS / JS за потреби, налаштуйте кнопку відтворення та застосуйте спеціальний CSS.

Плагін для ледачого завантаження для відео

13. Ледаче завантаження для коментарів

Ви можете ледаче завантажувати коментарі за допомогою Ледаче завантаження для коментарів підключати.

Це може допомогти зробити менше запитів HTTP, якщо у вас є багато коментарів до вашого блогу, тим більше, що Gravatars може зайняти багато часу для завантаження між усіма сторонніми запитами.

Плагін для ледачих завантажень для коментарів

Як увімкнути ледачу навантаження у ледачому завантаженні для коментарів
Щоб увімкнути завантаження у програмі Lazy Load For Comments, перейдіть у Налаштування > Обговорення > Ледачі завантажувати коментарі. Це єдина конфігурація налаштувань для цього плагіна, але вона має хороші відгуки.

Ледачі завантажувати коментарі

14. WP YouTube Lyte

WP YouTube Lyte це один з моїх улюблених (і найкраще переглянутих) плагінів для ледачого завантаження відео. Він був створений командою Autoptimize, яка, як правило, має хороші огляди плагінів навколо.

Плагін WP YouTube Lyte

Як увімкнути ледачу завантаження у WP YouTube Lyte
Щоб увімкнути завантаження в WP YouTube Lyte, перейдіть у Налаштування > WP YouTube Lyte. Візьміть своє Ключ API YouTube і введіть його в Автоматично оптимізувати. Виберіть розмір плеєра, включайте, чи потрібно включати посилання, позицію гравця, форсувати HD, діяти як звичайне посилання / рамки YouTube та додавати мікродані. Кешування ескізів на локальному рівні часто може виправити помилки GTmetrix під час вставки відео YouTube.

Мініатюри YouTube GTmetrix

Налаштування YouTube Lyte

Ще потрібна допомога?

У мене є чудове відео про оптимізацію швидкості WordPress:

У мене також є навчальні посібники з оптимізації зображень, налаштування WP Rocket, скорочення часу відгуку сервера тощо. Я можу отримати 100% (або поблизу) балів GTmetrix майже в кожному з моїх публікацій, використовуючи ці поради. Якщо у вас є питання, не соромтесь залишити мені коментар – рада допомогти!

Часті запитання

&# x2705; Який плагін найкращий для ледачого завантаження зображень?

Якщо ви вже використовуєте плагін кеша, який підтримує ледачий навантаження (наприклад, WP Rocket, SG Optimizer, W3TC, Swift, LiteSpeed), краще спробувати це спочатку. В іншому випадку автоматичне оптимізація або плагін Lazy Load від WP Rocket – це гарні плагіни ледачих навантажень.

&# x2705; Як щодо ледачого завантаження відео?

WP Rocket та деякі інші додатки кешу дозволяють вам ледаче завантажувати відео та замінювати YouTube iframe на попередній образ. В іншому випадку WP YouTube Lyte буде працювати.

&# x2705; Буде ледаче завантаження шкодить користувальницькій роботі?

Я не лінуюся завантажувати зображення на цей веб-сайт, але я ліниво завантажую відео, тому що завантажувати їх потрібно набагато довше. Ледачі завантаження зображень можуть дратувати користувачів і зменшують кількість моїх афілійованих продажів, тому я його відключив.

&# x2705; Що робить ледаче завантаження?

Ледаче завантаження прискорює початкові рази завантаження, чекаючи завантаження зображень і відео, поки користувачі прокручують сторінку вниз і фактично їх не побачать.

&# x2705; Як відключити ліниве навантаження на певних сторінках?

Більшість плагінів дозволяють вам це робити. Наприклад, якщо ви використовуєте WP Rocket і редагуєте сторінку чи публікацію, на панелі інформаційних панелей ви побачите опцію відключення (або включення) ледачого завантаження цього конкретного вмісту.

Ура,
Том

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map