Оптимізація швидкості сайту: ледачий/відкладений завантаження для зображень

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

Чому швидкість завантаження так важлива?

Одним з самих важливих моментів в оптимізації сайту є швидкість завантаження. Від неї залежить:

• ціна за клік при платному пошуку;
• місце веб-сторінки або порталу в природною видачу;
• тимчасової проміжок, на котрий відвідувач затримується на сторінці;
• відсоток відмов.

При повільної завантаженні користувач не може відразу повноцінно користуватися сайтом. Він змушений очікувати, поки усi медіафайли подгрузятся. Причиною такого явища частіше всього стає великий Об `єм контенту (відео, картинки, анімація і інше).

Сервіс Google рекомендує вирішити цю проблему декількома способами: здійснити стиснення файлів, провести кешування або використовувати ледачу завантаження. Саме на останньому методі ми сьогодні зупинимося Детальніше.

Суть техніки і кому вона потрібна

Ледачою завантаженням називається метод оптимізації завантаження сайту, при якому контент не завантажується до тих пір, поки він не буде потрібен користувачу. На даний момент цей показник є ключовим при оцінюванні показника завантаження контенту на смартфонах, планшетах і інших подібних пристроях.

Кажучи простим мовою, усi картинки, відео і інші файли не занурюються поки відвідувач їх не бачить. По міру скролінгу або при натисканні користувача на конкретний елемент контент завантажується і відображається.

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

Різні техніки роботи ледачою завантаження

Отложенная завантаження медіафайлів може мати кілька варіантів їх відображення на сайті:

• Scrolling - контент подгружается по міру гортання сторінки. Цей спосіб часто використовують новинні сайти, інтернет-магазини, онлайн-каталоги з нескінченної стрічкою прокрутки. Від самого початку картинки відображаються на веб-сторінці в вигляді блоку, потім на його місце завантажується картинка або інший елемент в високому як.
• Click - файли відображаються при натисканні. До наприклад, якщо ви бачите мініатюру картинки з анкорной посиланням або підписом "Детальніше" внизу і натискаєте на неї, вас автоматично перекидає на медиафайл.
• Background - картинки, відео і інші елементи вантажаться в фоновому режимі. Такий метод корисний тільки в тих випадках, коли медіафайли дійсно потрібні користувачу для роботи. Це стосується різних документів, креслень, схем і інших елементів.

Складно сказати, який саме тип ледачою завантаження підійде тому або іншому сайту. Кожну техніку необхідно тестувати на на прикладі конкретного порталу.

Сервіс Google про впровадженні ледачою завантаження для медіафайлів

Сервіс дає кілька рад про тому, як краще впровадити техніку ледачою завантаження на тому або іншому сайті. Способи різняться в залежно від того, яким чином медіафайли розміщені на сайті (вбудовані або в CSS).

Якщо контент вбудований і реалізований через метатег Google рекомендує вдатися до:

1. Scroll, resize або будь-якого іншому обработчику подій. Якщо вам необхідно, щоб браузери були сумісні, вибирайте цей спосіб.
2. Intersection Observer API. У цього методу є один вагомий мінус - він не дружить з деякими браузерами. Головним перевагою є відсутність необхідності писати код, користувачу досить зареєструватися в як спостерігача.

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

Такий механізм роботи вже значно відкладає завантаження медіафайлів. При допомоги JS можна визначити момент попадання документів в поле зору користувача і довантажити фонову картинку.

Як реалізувати Lazy loading - ТОП 5 готових рішень

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

Використовуйте скрипт від Девіда Волша

Цей варіант є самим простим в плані реалізації. Даний скрипт заміщає атрибут src (імпортує файл зі скриптами з зовнішнього файлу) на data-src в метатеге , котрий призначений для відображення на сторінці картинок в форматах GIF, JPEG або PNG.

HTML-елементи img, в яких містяться теги data-src, не відображені в CSS. Після завантаження зображень вони починають плавно і з переходами відображатися.

Після цього до всім HTML-елементам img прикріплюється атрибут src, по підсумку виходить нове значення data-src. Коли завантаження картинок буде завершена, значення атрибута з img забереться.

Прога Робіна Осборна

В цьому випадку лінива завантаження на JavaScript стане апгрейдом для мов програмування HTML і CSS. Техніка буде працювати через скролінг без використання додаткових плагінів і фреймворков.

Дане прогресивний апгрейд дозволить відвідувачеві порталу або веб-сторінки побачити картинку навіть при відключеному скрипте або появі збою, блокуючого його функціонування.

Опробуйте плагін bLazy.js

Стандартний спосіб впровадження техніки отложенной завантаження з допомогою даного плагіна виглядає так:

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

Lazy Load ХТ jQuery- ще один відмінний плагін

З його допомогою можна писати власні скрипти для реалізації отложенной завантаження. Спрощена версія плагіна відмінно підійде, якщо поступово довантажуватися будуть тільки картинки (не відео і інші подібні медіафайли).

Як ж використовувати цей плагін? Додайте через нього jQuery-бібліотеку перед закрывающимся метатегом і вкажіть значення jquery.lazyloadxt.js.

Також можна використовувати Lazy Load XT jQuery частково і застосовувати лайтовый варіант скрипта jqlight.lazyloadxt.min.js. Робиться це таким чином:

Lazy Load XT jQuery починає працювати автоматично. В деяких випадках може знадобитися ручна активація, здійснюється вона так:

Плагіни від WP

WordPress пропонує користувачам кілька плагінів, які допоможуть впровадити ледачу завантаження контенту на сайті:

1. BJ Lazy Load. Програмний модуль, котрий отлаживает завантаження мініатюрних зображень, картинок в постах, призначених для користувача фото. Медіафайли завантажуються при скроллинге або наближенні до браузерному вікна.
2. Lazy Load by WP Rocket. Працює зі усіма типами картинок. Медіафайли завантажуються по міру появи їх в поле зору користувача. Плагін не задіє JS і jQuery.
3. Loading Page with Loading Screen. У час подгрузки картинок на сайті на екрані користувача відображається екран з відсотком завершення завантаження. Після її завершення він зникає.

Самим популярним і простим по думку користувачів вважається плагін BJ Lazy Load.

Розмиті медіа від розробника Крэга Баклера

Переваги цього методу:

• він продуктивний;
• не вимагає задіяння додаткових бібліотек і фреймворков;
• підтримує різні типи зображень;
• підтримує адаптивные і фонові зображення;
• легкий в використанні.

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

Якщо хочете детальніше вивчити цей метод, перейдіть по засланні https://github.com/craigbuckler/progressive-image.js.

Поширені проблеми при використанні ледачою завантаження

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

Переконайтеся в тому, що пошукова система бачить контент, котрий завантажується на ваш сайт за допомогою Lazy loading. Зробити це можна через плагін Puppeteer. Відкрийте його і вбийте такі команди:

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

Висновок

Лінива завантаження - відмінний спосіб вплинути на одну з найважливіших метрик в оптимізації сайту під Google, яка називається "швидкість завантаження". Від неї у чому залежить, наскільки сайт буде продуктивним і кликабельным.

Основний плюс Lazy loading полягає в тому, що вона робить кожен сайт максимально робочим. Після запуску порталу користувачу не потрібно чекати, поки подгрузятся усi медіафайли. Він отримує відразу робочий сайт.