Ні для кого не секрет, що швидкість веб-сайту є одним із найважливіших факторів рейтингу SEO не лише через саме завантаження, але й через його вплив на досвід користувачів. Ось чому вам потрібно постійно тестувати швидкість сайту з різними інструментами, щоб визначити проблеми, які уповільнюють роботу вашого магазину Magento 2.
Найпоширенішим інструментом, з яким знайомі всі є Google PageSpeed Insights або PSI. Він пропускає вашу URL-адресу через сервери Google і надає звіт про роботу вашого сайту.
Сьогодні ми хочемо звернути вашу увагу на повідомлення "Defer Offscreen Images", яка часто заважає вашому сайту потрапити в зелену зону PSI. Ми обговоримо, що це означає, і як ви можете виправити це , щоб покращити швидкість Magento.
Що означає "Defer Offscreen Images"?
"Defer Offscreen Images" — це повідомлення, яке відображається в Google PageSpeed Insights і містить перелік усіх зображень, які слід завантажувати відкладено за запитуваною URL-адресою. Він також показує потенційну економію розміру, яку ви отримаєте завантажуючи ці зображення відкладено. Повний опис від Google виглядає наступним чином:
"Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive."
Але що це насправді означає? І що таке lazy loading про яке ми говоримо?
Ваша веб-сторінка ділиться на 2 частини, коли відвідувач сайту відкриває її — верхню частину ( above the fold - ATF) і нижню частину (below the fold). Перша стосується області, видимої на екрані, яку Googlebots показує вам на знімках екрана у PSI. Іншими словами, це область у вікні огляду (viewport) відвідувачів.
Друга у свою чергу стосується області, невидимої під час початкового завантаження, або всього, що відображається після того, як ви починаєте прогортувати сторінку.
Без відкладеного завантаження всі зображення сторінки завантажуються перед відтворенням сторінки. Це викликає затримку, особливо якщо ви завантажуєте сторінку категорії або сторінку продукту з великою кількістю зображень.
Ось чому повідомлення "Defer Offscreen Images" пропонує спочатку завантажити файли, видимі лише у верхній частині сторінки, та відкласти завантаження решти зображень.
У цьому випадку завантаження всіх зображень одночасно не буде проблемою, оскільки першими завантажуватимуться лише ті, що знаходяться у вікні перегляду.
Також важливо зазначити, що проблеми з "Defer Offscreen Images" частіше з’являються на веб-сайтах для мобільних пристроїв, ніж для комп’ютерів. Це дуже важливо, оскільки мобільний досвід більшою мірою залежить від часу завантаження, і мобільні користувачі просто не бажають чекати поки сторінка завантажиться.
Які причини "Defer Offscreen Images"?
Основна причина, чому з’являється повідомлення Google Page Speed Insights "Defer Offscreen Images", полягає в тому, що ви взагалі не використовуєте відкладене завантаження зображень у своєму магазині.
Здається логічним, що вам потрібно завантажити всі ресурси сторінки, щоб користувачі могли її переглядати, але це не зовсім так. Як ми вже говорили раніше, поки ви завантажуєте всі важливі ресурси у вікно перегляду, завантаження решти може бути відкладеним.
Просто немає сенсу завантажувати всі зображення сторінки, якщо відвідувач просто клацне десь вгорі та перейде на іншу сторінку, чи не так?
Ось чому існує відкладене завантаження або lazy loading, яке Google рекомендує вам застосувати. Тому файли зображень не завантажуються, доки користувачі не почнуть прокручувати сторінку. Це допомагає покращити ваш показник PSI та досвід користувачів відповідно.
Як виправити "Defer Offscreen Images"?
Як випливає з причин, чому в PSI з’являється повідомлення "Defer Offscreen Images", щоб усунути його, вам потрібно застосувати відкладене завантаження для вашого магазину.
Ви можете піти «важким» шляхом і додати відповідний атрибут до HTML-коду для зображень below the fold:
<img src="https://yourwebsite.com/images/image-title.jpg" alt="Image Alt Tag" style="width:100%" loading="lazy">
Але зауважте, що він не працює для старих браузерів або будь-якої версії Safari, що є однією з причин, чому цей метод не часто використовується.
Інша причина, чому цим методом нехтують, полягає в тому, що існують чудові інструменти, такі як Magento 2 Image Lazy Load, які вирішують це автоматично. Все, що вам потрібно, це задати блоки з зображеннями, які потрібно завантажувати відкладено, а модуль зробить все інше.
Варто спробувати цей модуль, щоб вирішити проблему "Defer Offscreen Images" на вашому веб-сайті.
Однак це ще не означає, що ваш показник Google Page Speed Insights миттєво перейде у зелену зону. Існують інші кроки для оптимізації зображень, які потрібно зробити, щоб переконатися, що вони не провокуватимуть затримку завантаження вашого магазину.
