Як відкласти зображення за кадром у 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 Lazy Load – гарний плагін для цього. Просто перейдіть до плагінів > додати новий. Знайдіть a3 Lazy Load. Встановіть та активуйте. Потім перейдіть до налаштувань плагіна та активуйте відкладене завантаження.

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

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