Не секрет, що швидкість веб-сайту є одним з найважливіших факторів ранжування SEO не лише через саме завантаження, але й через його вплив на враження клієнтів. Ось чому вам потрібно постійно тест швидкості веб-сайту використовувати різні інструменти, щоб визначати проблеми, що уповільнюють роботу вашого магазину Magento 2.
Найпоширеніший інструмент, з яким знайомі всі, - це Google PageSpeed Insights або PSI. Він пропускає вашу URL-адресу через сервери Google і надає звіт про роботу вашого веб-сайту.
Сьогодні ми хочемо звернути вашу увагу на повідомлення "Відкладати зображення поза екраном", яке часто заважає вашому веб-сайту потрапити в зелену зону PSI. Ми обговоримо, що це означає і як ви можете це виправити, щоб пришвидшити Magento .
Що таке повідомлення "Відкладати зображення поза екраном"?
«Відкладати позаекранні зображення» – це повідомлення, яке відображається в Google PageSpeed Insights, яке містить усі зображення, які слід відкладено завантажувати за запитуваною URL-адресою. Воно також показує потенційну економію розміру, яку ви отримаєте від відкладеного завантаження цих зображень. Повний опис від Google виглядає так:
«Розгляньте відкладене завантаження позаекранних та прихованих зображень після того, як усі критичні ресурси завантажаться, щоб скоротити час взаємодії».
Але що це насправді означає? І про що що таке ліниве завантаження ми говоримо?
Ваша веб-сторінка розділена на 2 частини після того, як відвідувач веб-сайту відкриває її — над згином (ATF) та під згином. Перша стосується області, видимої на екрані, яку Googleboti показують вам на скріншотах PSI. Іншими словами, це область у вікні перегляду відвідувачів.
Останнє стосується області, яка не видно під час початкового завантаження, або всього, що відображається після початку прокручування сторінки.
Без відкладеного завантаження всі зображення сторінки завантажуються до її рендерингу. Це спричиняє затримку, особливо якщо ви завантажуєте сторінку категорії або сторінку продукту з великою кількістю зображень.
Ось чому повідомлення Google "Відкладати позаекранні зображення" пропонує спочатку завантажити медіафайли, видимі лише над згином, а потім відкласти завантаження решти.
У цьому випадку завантаження всіх зображень одночасно не буде проблемою, оскільки спочатку завантажуватимуться лише ті, що знаходяться в області перегляду.
Також важливо зазначити, що проблеми "Відкладати позаекранні зображення" частіше виникають на мобільних, ніж на комп'ютерних веб-сайтах. Це життєво важливо, оскільки мобільний досвід більше залежить від часу завантаження , і користувачі мобільних пристроїв можуть просто не бажати так довго чекати на відображення сторінки.
Які причини появи повідомлення «Відкладати зображення поза екраном»?
Основна причина появи повідомлення Google Page Speed Insights «Відкладати зображення поза екраном» полягає в тому, що ви взагалі не використовуєте відкладене завантаження зображень у своєму магазині.
Здається логічним, що вам потрібно завантажити всі ресурси сторінки, щоб користувачі могли її переглядати, але це не є чітко визначеним. Як ми вже починали раніше, якщо ви завантажуєте всі важливі ресурси в області перегляду, завантаження решти може бути відкладено.
Просто немає сенсу завантажувати всі зображення сторінки, якщо відвідувач просто клацає десь угорі та переходить на іншу сторінку, чи не так?
Ось чому Google рекомендує вам впровадити ліниве завантаження або відкладене завантаження зображень. Таким чином, файли зображень не завантажуються, доки користувачі не почнуть прокручувати. Це допомагає покращити ваш рейтинг PSI та відповідно покращити взаємодію з користувачем.
Як виправити помилку "Відкладення зображень поза екраном"?
Як випливає з причин, чому в PSI з'являється повідомлення "Відкладення зображень поза екраном", щоб вирішити цю проблему, вам потрібно впровадити ліниве завантаження для вашого магазину.
Ви можете піти "складним" шляхом і додати відповідний атрибут до HTML-коду зображень "під згином":
<img src="https://yourwebsite.com/images/image-title.jpg" alt="Image Alt Tag" style="width:100%" loading="lazy">
Але зверніть увагу, що це не працює для старіших браузерів або будь-якої версії Safari, що є однією з причин, чому цей метод не широко використовується.
Інша причина, чому цей метод нехтують, полягає в тому, що існують чудові інструменти, такі як , які автоматично вирішують цю проблему. Все, що вам потрібно, це вибрати відкладене завантаження ВСІХ блоків або визначити деякі Блок відкладеного завантаження , які потрібно ігнорувати. Модуль покриє решту.
Варто спробувати виправити проблему "Відкладати зображення поза екраном" на вашому веб-сайті Magento.
Однак це зрештою не переведе ваш бал Google Page Speed Insights у зелену зону. Є й інші оптимізація зображень кроки, які ви повинні зробити, щоб переконатися, що вони не спричиняють затримки завантаження вашого магазину.
