Progressive Lazy Loading for Joomla
Створення чудового контенту на Joomla! - це одне, а забезпечення його доступності - інше. Lazy loading - одне з рішень, яке поєднує обидва аспекти без зміни вашого робочого процесу. З прогресивним lazy loadingзображення завантажуються тільки якщо і коли вони потрібні. Якщо читач ніколи не доходить до зображення на веб-сторінці, воно ніколи не завантажується. Тепер lazy loading також доступний на Joomla!
Переваги lazy loading численні; сторінки завантажуються швидше, що означає, що користувацький досвід кращий, показники SEO зростають, і ваш контент Joomla стає більш доступним для користувачів із низькопродуктивними пристроями або повільним інтернет-з'єднанням. Кілька тижнів тому ми представили вдосконалення базового lazy loading рецепту на WordPress. Сьогодні ми представляємо його для Joomla! теж, але перед цим розглянемо, як ви можете активувати прогресивне lazy loading на Joomla!
Активування Lazy Loading на Joomla!
Lazy loading на Joomla! є частиною розширення Speed Cache. Активування lazy loading настільки просте, як перемикання. Однак Joomla!’s Speed Cache також містить інші функції, які допомагають отримати максимум з lazy loading

Щоб налаштувати lazy loading на вашому блозі Joomla!, перейдіть до панелі керування Speed Cache. Звідти натисніть кнопку конфігурації, щоб перейти на нову сторінку налаштувань Speed Cache

Налаштування lazy loading знаходяться у вкладці параметри. Перейдіть туди або скористайтеся новою функцією пошуку, щоб знайти налаштування lazy loading. Щоб увімкнути lazy loading, просто увімкніть опцію lazy loading. Як тільки ви це зробите, Speed Cache покаже нові параметри для налаштування lazy loading відповідно до вашого веб-сайту.
Виключити зображення з відкладеного завантаження Joomla! Lazy Loading
З першими двома полями ви можете виключити певні зображення з lazy loading , якщо вони дуже маленькі, такі як іконки або невеликі логотипи. Це корисно для включення lazy loading тільки для зображень, які фактично впливають на час завантаження вашого блогу Joomla! З цієї причини переконайтеся, що ви виключаєте тільки дуже маленькі зображення, щоб не зробити lazy loading неефективним.
У деяких випадках, однак, ви можете виключити (або включити) цілі набори повідомлень або сторінок Joomla! з lazy loading. Причини, чому ви це робите, дуже різняться і є обґрунтованими — можливо, носій інформації, який вони містять, є невід'ємною частиною змісту. Наступні два поля використовуються для цього.

За допомогою першого поля ви можете увімкнути lazy loading тільки для певних сторінок, а за допомогою другого поля ви можете вимкнути lazy loading тільки для певного контенту. В обох випадках допускаються символи підстановки; використовуйте символ зірочки, щоб застосувати lazy loading до набору однойменної Joomla! публікації або сторінок. Збережіть зміни, щоб увімкнути lazy loading: lazy loading застосовується до вашого блогу Joomla! автоматично.
Як працює прогресивне відкладене завантаження на Joomla!
Lazy loading надає контент відразу ж, як тільки він потрібен. Зазвичай сторінки складаються з комбінації тексту та зображень. Завантаження медіа займає більше часу, ніж завантаження тексту, особливо на мобільних пристроях нижчого класу або при повільному інтернет-з'єднанні. Хоча ваш блог на Joomla! не може магічно прискорити мобільні пристрої або інтернет-з'єднання, він може зробити наступне найкраще: поліпшити користувацький досвід.
Що означає на практиці lazy loading — це те, що браузер спочатку завантажує текст, який зазвичай є невід'ємною частиною вашого блогу Joomla! Текст також набагато менший за розміром, тому він завантажується швидше, і ваші читачі можуть слідкувати за ним. Коли вони прокручують вниз і зображення потрапляє у поле зору, lazy loading завантажує та відображає зображення.

Насправді, може знадобитися деякий час, щоб зображення завантажилося. Тому прогресивне відкладене завантаження зображень автоматично створює невелику версію зображень — завширшки 20 пікселів, з 4 кольорами і розміром лише кілька КБ — розтягує їх до початкового розміру, а потім розмиває. Ефект полягає у розмитій версії повнорозмірного зображення, що вказує на те, що зображення ще завантажується. Коли відкладене завантаження завершує завантаження зображення, Joomla! замінює розмите зображення повним зображенням.
Прогресивне lazy loading автоматично вмикається з lazy loading, що означає, що вам не потрібно робити жодних додаткових змін. Найкраще те, що використовуючи лише невеликі версії зображення, прогресивне lazy loading додає дуже мало додаткового простору до вашого сховища Joomla!.
Lazy Loading у галереях Joomla!
Lazy loading не дискримінує. Speed Cache’с lazy loading працює для будь-якого зображення, включаючи галереї, такі як галереї Droppics . Подібно до звичайних зображень, Speed Cache збільшує маленьку версію зображень у галереї та розмиває її. Коли користувачі прокручують вниз, lazy loading завантажує повнорозмірні зображення.

Найкраще з усього, Speed Cache’с lazy loading не заважає вашому робочому процесу. Натомість, він додає lazy loading у ваш процес: просто вставте зображення або галерею будь-де на своєму блозі Joomla! і Speed Cache автоматично завантажує зображення ледачо за допомогою AJAX одне за одним після того, як основний контент—в основному текст і невеликі зображення, виключені вашими налаштуваннями—було завантажено.
Розумний Lazy Loading на основі висоти екрана
Lazy loading - це все про прокручування та висоту екрана. Speed Cache’s lazy loading дуже розумний, оскільки застосовується лише до поточної висоти екрана (на основі вікна перегляду) і попередньо завантажує наступний. Тож якщо у вас швидке підключення або якщо ви повільно прокручуєте, ви навіть не помітите, що lazy loading активовано на вашому сайті Joomla.
Крім того, цей lazy loading , заснований на висоті екрана, застосовується тільки до поточної висоти екрана, навіть якщо він знаходиться посередині сторінки, наприклад, у випадку посилання на якір. Потім lazy loading застосовується, коли ви прокручуєте вгору або вниз.
Joomla SEO та Lazy Loading
lazy loading , що використовується в Speed Cache , не впливає на SEO. Насправді, пошукові системи, які сканують ваш контент, такі як Google bot, побачать лише переваги:
- Час завантаження сторінки значно кращий;
- Весь контент зображень, включаючи альтернативний текст, назву зображення та опис, завантажується негайно без lazy loading; і
- Підписи до зображень також завантажуються при першому відображенні сторінки.
Прогресивне lazy loading - це компроміс між відображенням медіа та затримкою їх завантаження шляхом додавання візуальних підказок. У той же час, lazy loading робить навігацію вашим блогом Joomla! швидшою та приємнішою. Не повинно бути жодних обмежень для поширення чудового контенту, і тепер, з прогресивним lazy loading на Joomla!, немає обмежень для забезпечення його доступності.
Звичайно, ми також можемо мати на увазі, що Speed Cache також пропонує багато інших чудових інструментів, таких як дійсно приємний модуль кешу, який дозволить нам прискорити наші сайти і вивести їх на новий рівень!
Перевірте Speed Cache для Joomla: https://www.joomunited.com/products/speed-cache
Коли ви підпишетесь на блог, ми будемо надсилати вам електронний лист, коли з'являться нові оновлення на сайті, щоб ви не пропустили їх.


Коментарі 1
Я шукаю lazy loading вбудованих відеоплеєрів (YouTube). Багато з них спричиняють великий трафік під час завантаження сторінки. У цій статті не згадуються відео, лише зображення, тому я припускаю, що це не застосовується.
До речі, я не можу розібрати текст "Час завантаження сторінки набагато кращий".