+38(067)653-72-39
UX/UI Tips

Експеримент зі зменшення швидкості завантаження сайту втричі за рахунок запровадження lazy load

Володимир Кашинський
Head of Development в Sprava Agency
28.08.2019
UX/UI
Розробка
5 хвилин
Поділитися статтею
Наша розсилка

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

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

ЯК РОЗГАНЯТИ ЗАВАНТАЖЕННЯ САЙТУ?

Вам потрібно повторити всього три кроки, і тоді сайт буде, як то кажуть, просто «літати»:

  1. встановіть плагін jQuery Lazy і налаштування lazy loading для картинок;
  2. стисніть картинки в слайдері (або на сайті);
  3. спробуйте мініфікацію і включення в «ліниве завантаження» скриптів JS.

Розглянемо кожен крок окремо на конкретному прикладі.

ЯК ПЕРЕВІРИТИ ШВИДКІСТЬ ЗАВАНТАЖЕННЯ САЙТУ?

Для оцінки швидкості завантаження сайту використовували сервіс webpagetest.org, який дає змогу всебічно розглянути завантаження сайту. Перед початком робіт провели тест і отримали такі дані:

оцінка швидкості завантаження сайту через сервіс webpagetest.org

Скрін показує, що загальний час завантаження (Load Time) (1) становить 14,288 секунд, а для повного завантаження сторінки знадобилося 111 запитів до сервера (2).

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

ПІДКЛЮЧІТЬ КРУТИЙ ПЛАГІН

Наступним етапом оптимізації стало підключення плагіна jQuery Lazy для налаштування «лінивого завантаження» картинок.

Що таке lazy loading? Це відкладене завантаження ресурсів для відображення сайту, тобто запитувана сторінка завантажується не повністю, а частинами, за необхідності. Наприклад, якщо картинка, налаштована на «ліниве завантаження», знаходиться внизу сторінки і користувач не додивився сторінку до самого кінця, то файл картинки може не завантажитися в браузер зовсім. Переважно це застосовується для сторінок, де є багато картинок, але ми в межах експерименту використовували lazy load і для JS-файлів.

Після підключення вищезазначеного плагіна (скрін нижче) ми скоротили час завантаження (1) до 7,308 секунд, а кількість запитів (2) до 64.

оцінка швидкості завантаження після підключення плагіна jQuery Lazy

Аналіз діаграми «водоспад» (див. нижче) показав наявність «важких» за обсягом картинок (у середньому 1,5 Мб), розміщених у слайдері. Оскільки ці картинки з'являються першими при завантаженні сторінки, їх виключили з lazy load. Було прийнято рішення їх стиснути.

Аналіз діаграми «водоспад»

Після стиснення картинок слайдера з 1,5 МБ до 85 Кб час завантаження (1) скоротилося до 4,760 секунд. Це показав повторний тест.

швидкість завантаження після стиснення картинок слайдера

Але ми вирішили на цьому не зупинятися.

ТРЕТІЙ КРОК ДО ПРИСКОРЕННЯ САЙТУ – МІНІФІКАЦІЯ

Ми спробували провести мініфікацію (стиснення) і включення lazy load для скриптів JS. Так виграли ще трошки часу, що видно на скріншоті нижче:

результат включення lazy load для скриптів JS

Але було виявлено, що через це деякі блоки стали відображатися некоректно. Щоб цього уникнути, частину скриптів виключили з мініфікації і «лінивого завантаження».

У результаті проведення всіх трьох кроків вдалося скоротити час завантаження більш ніж утричі – з 14,288 до 4,087 секунд.

підсумковий результат оптимізації швидкості завантаження сайту

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

Використання lazy load відчутно скорочує час завантаження сторінки сайту, але домогтися найкращого результату можна тільки в комплексі з іншими методами оптимізації.

На цьому ми не зупиняємося. Експерименти з оптимізації тривають.

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

Володимир Кашинський
Head of Development в Sprava Agency
28.08.2019
UX/UI
Розробка
5 хвилин
Отримайте спеціальну пропозицію для вашого сайту!

Ми піклуємося про покращення ваших продажів :)

Останні статті та новини
+16
×
Ми цінуємо вашу конфіденційність.

Ми використовуємо файли cookie для поліпшення вашого веб-перегляду, показу персоналізованої реклами чи вмісту і аналізу нашого трафіку. Натисканням "Прийняти всі" ви надаєте згоду на використання нами файлів cookie.

Прийняти все Відхилити все