Підвищуємо продуктивність як завантажувати зображення за допомогою
Продуктивність має значення
Веб-продуктивність відіграє велику роль, особливо якщо ваш сайт націлений на країни, що розвиваються, з повільним інтернетом і дорогими тарифними планами. Серед стандартних завдань підвищення продуктивності, які ми робимо, можна виділити мініфікацію файлів JS і стилів, стиснення медіа файлів, зменшення зображень. Якщо виконати ці маніпуляції, наш сайт отримає значний приріст продуктивності. Але чи це так?
Варто зауважити, що це лише симуляція. Тут навіть не враховуються налаштування сервера, затримка та інші технічні складності. Насправді продуктивність могла бути ще гіршою.
То як же підвищити продуктивність завантаження сторінок?
Вузьке місце
По-перше, у нас багато зображень. Сторінка завантажується повільно, тому що всі вони стукають у канал одночасно під час першого завантаження сторінки. Якщо уважніше подивитися на попереднє зображення, можна помітити, що там зображення завантажуються не паралельно: частина зображень починає завантажуватися тільки після рендерингу інших зображень, що гальмує всю сторінку в цілому.
Якщо на одній сторінці у нас багато зображень, можна завантажувати їх асинхронно і лише за потребою. Так браузер зможе повністю провантажувати видиму частину сторінки, не чекаючи на рендеринг всіх зображень. У результаті ми заощадимо на трафіку користувача.
Щоб далі працювати, скачайте index-starter.html із репозиторію. Також там лежить файл стилів css/styles-starter.css, можете ним скористатися.
Насамперед, нам потрібно замінити зображення на дуже маленькі, переважнозакодовані в base64, щоб уникнути зайвих HTTP запитів. Ці зображення гратимуть роль плейсхолдерів перед завантаженням повноцінних зображень. Справжні зображення ми зберігатимемо в атрибуті користувача data-src.