Centum-D-Lazyload (Ледаче завантаження)

Швидкість, за якою завантажується сайт, є ключовим аспектом оптимізації ресурсу. Метрика впливає на:

• час, проведений користувачем на ресурсі;
• відсоток відмови;
• позицію органічного видавання;
• ціну кліка в платних пошуках.

Основною причиною уповільнення завантаження сторінки є великі розміри зображень та відеоконтенту. Google за допомогою PageSpeed ​​Insights висуває рекомендації переліку рішень, які дають змогу оптимізувати медіафайли. Поміж таких рішень:

• Стиснути;
• Кешувати;
• Використовувати lazy loading.

Останній варіант ми обговоримо в цій статті.

Ледаче завантаження — що це?

Lazyload js — це рішення, завдяки якому оптимізується швидкість завантаження медіаконтенту, некритичного для відтворення сторінок або взаємодій із відвідувачами. Сам плагін реалізує правильне завантаження зображень із погляду SEO. Оригінальний функціонал WordPress підвантажує до атрибута «src» білу крапку, тобто порожнє зображення. Для коректної індексації зображень у таких пошукових системах як Google та Yandex необхідно в атрибут «src» підвантажувати правильне зображення відразу, а для коректної роботи lazyload використовувати атрибут «src-set». Бібліотека Lozad, яка використовується в цьому модулі, виконує ліниве завантаження зображень згідно з рекомендаціями вищезазначених пошукових систем.

На практиці: користувач розгортає сторінку і спочатку він спостерігає перший екран із текстовим наповненням і медіа. Сторінка не завантажується повністю, тому початковий вигляд сторінки відкривається максимально швидко. Гортання дає змогу підвантажити кожну наступну частину ресурсу. Це і є «лінивим завантаженням».

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

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

Типи Lazyload

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

• Скрол. Є найпопулярнішим варіантом. Для завантаження наступної частини контенту користувач має лише скролити. Такий вигляд є дуже зручним варіантом, адже не викликає необхідності робити додаткові дії та маніпуляції, а також дає змогу реалізувати «нескінченну» сторінку. Найкращий приклад — стрічка соціальної мережі, де контент змінюється іншим і може продовжуватися практично нескінченно.
• Клік. Під час досягнення останньої крапки сторінки користувач побачить пропонування кліка, який показуватиме наступну частину сторінки. Нерідко використовується в інтернет-магазинах, агрегаторах чи каталогах.
• Фонове завантаження. Метод схожий на гортання. Реалізується за допомогою початкового підвантаження першого екрану, і поки відвідувач переглядає запропонований блок, у фоновому режимі завантажується решта сторінки. Іноді це сприяє покращенню поведінкових чинників, адже під час гортання видніються глюки прогортання сторінок, а фонове завантаження є розв’язанням проблеми. Особливо актуально, якщо на сторінках публікуються зображення з великим розміром. Однак у таких випадках мають підвантажуватись лише ті елементи, які насправді необхідні користувачам.

Як правильно реалізувати Lazyload: кілька рекомендацій

• Переконайтеся, що контент може бути індексований краулером Google.
• Якщо почали реалізувати нескінченне прокручування, забезпечте можливість завантажувати контент посторінково. Так користувачі зможуть повернутись до попередньої сторінки.
• Тестувати Lazyload можна за допомогою скрипта Puppeteer та бібліотекою Node.js. Скрипт дає змогу створити знімок з екрана, що демонструє надання завантажуваного контенту для відвідувачів та краулерів.

Низка можливих проблем

Однією з головних проблем є така: частина контенту не індексуються пошуковими роботами, через що падає трафік із видавання пошукової системи як кожної окремої сторінки, так і всього ресурсу. Для виключення такого варіанта варто тестувати плагін після того, як технологію впроваджено спеціальним скриптом. Рекомендації Google розкажуть про подробиці. Також варто переконатись у підтримці Lazyload кожним основним браузером.

Lazyload від Centum-D

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