Як відкласти зображення за кадром у WordPress

Ми всі знаємо, що швидкість дуже важлива для SEO та конверсії. Швидке створення веб-сайту може підвищити рейтинг сайту в Google. І це також може порадувати ваших читачів. Кому не подобається швидкий веб-сайт?

Але коли ви намагаєтеся оптимізувати веб-сайт для збільшення швидкості, це може зайняти багато часу, оскільки потрібно зробити так багато справ. Зазвичай я час від часу намагаюся перевірити свій веб-сайт і переконатися, що він не працює погано. Ви ніколи не знаєте, що там нового. У світі SEO все змінюється дуже часто.

Якщо ви перевірили свій веб-сайт засоби тестування швидкості наприклад Google PageSpeed ​​Insight або Web.dev, одним із попереджень, які ви можете отримати, є «відкладення закадрових зображень».

У цій статті я поясню, що це означає, розповім, як це виправити, і порекомендую плагіни, які можна використовувати, щоб це виправити.

Однак ви повинні знати, що чому відкладення закадрових зображень може підвищити швидкість мобільного зв’язку, найважливішими факторами, які впливають на вашу швидкість, є ваш хостинг і тема. Тут, у BloggingTools, ми використовуємо Cloudways оскільки це найшвидший хостинг WordPress. Якщо ви не можете дозволити собі Cloudways, то Bluehost або Hostinger є хорошими варіантами. Для теми ми використовуємо найшвидшу тему WordPress, відому як GeneratePress.

Що означає відкладення закадрових зображень?

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

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

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

Зауважте, що ви можете відкласти не лише зображення, але й більшість ресурсів веб-сайту, доки вони не знадобляться.

Як відкласти зображення за кадром у WordPress

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

Як тільки ви зможете відкладено завантажувати зображення та інші ресурси, які заважають вашій сторінці швидко завантажуватися. Функція «відкласти зображення поза екраном» із Google PageSpeed ​​Insight та інших інструментів тестування зникне.

Виконайте такі кроки, щоб відкласти зображення поза екраном у WordPress:

1. Встановіть плагін відкладеного завантаження

Є багато плагінів із відкладеним завантаженням, які доступні безкоштовно в каталозі плагінів WordPress. Ви можете перейти до плагіна, додати новий і ввести відкладене завантаження. Встановіть будь-кого з хорошими відгуками.

Але вам не потрібно встановлювати плагін, якщо у вас уже є плагіни, які можуть обробляти відкладене завантаження. Більшість плагінів кешування мають відкладене завантаження. Перевірте свій плагін кешування на наявність параметрів відкладеного завантаження. Плагіни оптимізації зображень здебільшого мають опцію відкладеного завантаження.

Крім того, якщо ви використовуєте Jetpack і автооптимізацію, вони мають параметри відкладеного завантаження.

2. Активуйте параметри відкладеного завантаження

Після встановлення плагіна переконайтеся, що ви активували параметр відкладеного завантаження. Якщо у вас є плагін кешу з функцією відкладеного завантаження, переконайтеся, що ви активували цю опцію.

3. Очистіть кеш.

Після активації відкладеного завантаження очистіть кеш і все!

Ви можете протестувати свій сайт знову, попередження має зникнути!

Плагін WordPress Defer offscreen images

Плагіни відкладення зображень поза екраном такі самі, як плагіни відкладеного завантаження. Ось деякі нижче:

1. реактивний ранець

Jetpack є одним із найпопулярніших плагінів WordPress із понад 5 мільйонами активних установок. Якщо у вас уже встановлено Jetpack, вам не потрібно встановлювати додатковий плагін для відкладеного завантаження.

Просто активуйте відкладене завантаження в Jetpack. Щоб активувати, перейдіть до налаштувань Jetpack, потім на вкладці продуктивності прокрутіть вниз і ввімкніть відкладене завантаження.

2. Автооптимизація

Autoptimize це дуже популярний плагін продуктивності. Якщо ви використовуєте Autoptimize, немає потреби встановлювати плагін відкладеного завантаження, оскільки Autoptimize має ту саму функцію.

Перейдіть до налаштувань автооптимізації, потім клацніть вкладку зображень і ввімкніть відкладене завантаження.

3. WP Rocket

WP Rocket є найпопулярнішим преміум-плагіном для кешування WordPress. Якщо ви використовуєте WP Rocket, вам не потрібен інший плагін, у них увімкнено відкладене завантаження.

Перейдіть до налаштувань WP Rocket, а потім клацніть медіа, звідти ви можете ввімкнути відкладене завантаження.

4. LiteSpeed ​​Cache

Якщо ви використовуєте Плагін LiteSpeed ​​Cache, Він має функцію відкладеного завантаження. Щоб активувати, просто перейдіть до розділу медіа, і там ви зможете ввімкнути відкладене завантаження.

5. a3 Ледаче навантаження

Якщо вам просто потрібен плагін для відкладеного завантаження, тоді a3 Ледача навантаження це хороший плагін для цього. Просто перейдіть до плагіна > додати новий. Знайдіть a3 Lazy Load. Встановити та активувати. Потім перейдіть до налаштувань плагіна та активуйте відкладене завантаження.

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

Часті питання (FAQ)