Що таке Lazy Loading та чому це має вас зацікавити у контексті SEO?

зміст

• Що таке Lazy Loading?
• Що ви можете змінити у процесі завантаження сайту? Що каже Google?
• Як імплементувати скрипт Lazy Loading?
• Готові плагіни для реалізації Lazy Loading.
• Корисні поради

Власник сайту має лише декілька секунд, щоб зацікавити користувача, після чого втримати його. Якщо після відкриття сайту, у користувача виникнуть якісь складності, наприклад, неправильне генерування контенту, жахлива архітектура сайту чи він побачить сторінку з помилкою завантаження, він просто піде на інший ресурс в інтернеті та ніколи не повернеться до вас. Саме тому, такі рішення, як Lazy Loading (укр. Ледаче Завантаження) та створення інтуїтивно зрозумілого інтерфейсу, є надзвичайно важливими для SEO-оптимізації. Чи знали ви, що згідно з даними Google, сайти, які завантажуються довше 5 секунд, втрачають до 40% конверсії. Це достатній аргумент, щоб зайнятись вирішенням проблеми.

Що таке Lazy Loading?

Хоча, саму фраза «Lazy Loading» можна зрозуміти, як «повільне завантаження», з точки зору SEO-оптимізації воно має зовсім інше значення. Це скрипт, вписаний у код сторінки, який контролює завантаження мультимедіа (фото та відео), які містяться у коді сторінки. Завдяки цьому, мультимедіа починає завантажуватись лише тоді, коли користувач доходить до певного розділу, а не під час переходу на саму сторінку. Завдяки цій схемі, завантаження сторінки прискорюється, що робить її більш бажаною для користувача. Як бачите, назва скрипту може бути оманливою. 

Варто відмітити, що одним із способів прискорення завантаження сторінки є асинхронне завантаження скриптів JavaScript. Знати про даний метод надзвичайно важливо, якщо усі скрипти розташовано на віддалених серверах. Обмін такими файлами відбувєаться занадто довго. Сам скрипт також може зупинити обробку інших елементів. У такому випадку потрібно змусити браузер проводити асинхронне завантаження. Більше про цей метод можна прочитати тут.

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

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

Згідно з даними досліджень Walmart, кожна секунда прискорення завантаження сайту збільшує конверсію до 2%. Кореляція між швидкістю завантаження сайту та продажами в інтернеті досить чітка.

Чому скрипт Lazy Loading – це чудове рішення для вашого сайту?

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

Приклад

Ковальські шукає мотоцикл. Він завжди мріяв про нього, але раніше не міг дозволити собі цю покупку. Нарешті, назбиравши 20 тис. злотих, він готовий до замовлення мотоциклу, про який так мріяв. Він заходить на сторінку пошуку та пише: «якісний мотоцикл до 20 тис. злотих».

Йому видасть:

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

Тим часом, як Ковальські буде сидіти на сайтах з оголошеннями досить довго, адже йому потрібно обрати модель мотоциклу, на інформаційних сайтах, він не проведе понад 8-10 хвилин на одній статті.

Важливим у цьому прикладі є те, що Ковальському не обов'язково завантажувати усі фотографії на підсторінці інформаційного сайту – усе, що йому потрібно – це графічний дизайн самої статті. Вам не потрібно надавати йому усі наявні зображення, доступні у мульти-пошуку. Йому вистачить лише декілька!

Схема роботи, яка називається «завантаження зображення за потребою», є найкращим рішенням для підтримки комфорту під час користування сайтом та швидкості його роботи. Ви виграєте час та отримуєте високі оцінки, за якість сайту. Ви можете скористатись інструментом Ajax Load More для досягнення цього ефекту. Так ви зможете додати кнопку, для завантаження наступних публікацій та автоматичного переходу на іншу частину сайту. Потім ви відмовитесь від стандартної нумерації, представляючи користувачу випадаючий список, який з'явиться після перегляду певного блоку тексту чи зображення.

Варто пам'ятати, що за допомогою Ajax також генерується короткий фрагмент коду, який можна додати до коду сторінки.

Lazy Loading для непотрібних ресурсів – це «необхідність» для будь-якого сайту, який хоче надавати користувачам доступ до свого контенту з якнайменшими затримками. Варто пам'ятати, що з липня 2018 року швидкість сайту стала офіційним чинником ранжування при визначені позиції у результатах пошуку в Google на мобільних пристроях, тому варто звернути увагу на цей аспект, під час SEO-оптимізації сайту.

 

Wojciech Skąpski, Cпівзасновник IF.pl 

Що ви можете змінити у процесі завантаження сайту? Що каже Google?

Швидкість завантаження сайту – це не лише елемент, який буде задовільняти клієнтів. Це також один з чинників рейтингу, який позитивно впливає на рейтинг позиціонованого сайту. Перш ніж користувач побачить його, браузер повинен виконати декілька дій над сайтом. Якщо на будь-якому етапі аналізу щось піде не так, користувачу прийдеться довго очікувати кінця завантаження сайту.

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

Lazy Loading зазвичай використовується для мультимедійних елементів у нижній частині сторінки. Зазвичай, це найважчі елементи сторінки, наприклад: зображення вагою 20 Кб дорівнює 20 тис. символів коду. Зупиняючи його завантаження, ми виграємо цінні мілесекунди під час візуалізації першого виду сторінки, що відображається у статистиці Lighthouse: First Contentful Paint (FCP) та First Meaningful Paint (FMP) – фактори, які Google використовує для оцінювання ефективності сайтів.

Wojciech Skąpski, Співзасновник IF.pl

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

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

Ще у 2009 році Amazon з'ясував, що кожні 0.1 секунду у затримці в роботі їх сайту, призводять до падіння продажів на 1%. Це означає, що кожна 1 секунда затримки, коштує їм «лише» 10% усього прибутку. 

Як імплементувати скрипт Lazy Loading?

Імплементація скрипту Lazy Loading полягає у впровадженні певних змін в коді сторінки. Щоб це зробити, можна скористатись готовими плагінами для CMS або JS.

Вам не потрібно розміщати усі знайдені зображення у верхній частині сайту, а всі логотипи «hero images» прямо у скрипті Lazy Loading. Якщо ви впроваджуєте Lazy Loading для зображень, які розташовні у верхній частині сайту, то замість миттєвого показу контенту користувачеві, скрипт додатково проаналізує процес, що призведе до затримок та значного зниження якості UX. Ефект від такої оптимізації, буде зворотнім тому, на який ви розраховуєте.

Неправильна реалізація Lazy Loading призведе до того, що ще на початковому етапі візуалізації сторінки, у користувача не відобразиться мультимедійний контент, а інший вміст сайту відобразиться некоректно. 

Готові плагіни для реалізації Lazy Loading.

Джерело: semstorm.com

Як саме скрипт імплементується в код?

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

Так виглядає приклад коду, у якому реалізовано Lazy Loading:

На жаль, пошукові боти віддають перевагу сайтам, чий HTML-код можна просканувати найшвидше. Googlebot може візуалізувати код JS, базуючись на Chrome41, але в таких випадках він не завжди правильно виконує індексацію. Простішими словами, роботи можуть не помітити такі зображення.

Саме тому, варто використовувати якісні посібники, наприклад: Deliver search-friendly JavaScript-powered websites. Все це потрібно для того, щоб переконатись, що швидкість завантаження сайтів належним чином оптимізована та скерована.

Корисні поради

Якщо ви помітили проблеми, пов'язанні із завантаженням сайту, то:

• Використовуйте стиснення Gzip, що є методом стиснення файлів HTML та CSS на стороні серверу. Його використання допоможе вам залишити приблизно від 40% до 80% оригінального розміру файлу,
• Перевірте та оновіть базу даних, яка збільшується після кожного оновлення та відкриття сайту,
• Подбайте про кешування у браузері. Серверу не доведеться завантажувати усі елементи кожного разу, як хтось відкриває сайт. бо вони вже будуть збережені у вигляді кешу,
• Видаліть усі непотрібні скрипти та плагіни, які не впливають на роботу сайту.

Мало порад? Знайдіть більше

Також, корисною буде стаття про функціональність robots.txt, адже вона може стати гарним доповненням, а також запрошуємо відвідати нашу Базу Знань.