Прискорюємо зображення ще більше за допомогою HTTP2 Progressive JPEG

31

Від автора: прогресивні зображення на HTTP2 швидше відмальовує на екрані, що підвищує сприйняття продуктивності. Використовуйте скануючі шари JPEG зображень для показу зрозумілого контенту при відправці всього лише 25% від самого зображення. Для максимального збільшення продуктивності ключових зображень використовуйте HTTP2 Server Push для скануючих шарів JPEG.

Проблеми із зображеннями

Зображення дуже важливі: вони заманюють нас, бісять, спонукають до чого-небудь. Інтернет у відомій нам формі залежить від зображень. Зображення складають ~65% від загальної ваги сторінки, а також вони сильно пов’язані з часом завантаження сторінки і індексом швидкості. Якщо коротко, зображення дуже важкі і все уповільнюють.

Стискайте!

Ускоряем изображения еще больше при помощи HTTP2 и Progressive JPEG

Стиснення – кращий спосіб виправлення негативного ефекту від завантаження зображень. За допомогою сервісів типу ImageOptim від Kornel Lesiński, який використовує чудові бібліотеки mozjpeg і pngquant, можна зменшити вагу зображень без візуальних втрат якості. Завдяки бібліотекам типу DSSIM ми можемо тестувати якість зображень на різних рівнях стиснення.

Погана новина полягає в тому, що навіть після стиску зображень в середньому на ~29% з допомогою описаних вище інструментів, а також при використанні інших форматів типу WebP, зображення все одно залишаються найбільшими файлами на сайті. Найближчий побратим в цьому відношенні – JS. Треба знайти спосіб, як швидше постачати ці компоненти, щоб швидше заманювати користувача.

Знайомство з передачею багатоканальної

Ускоряем изображения еще больше при помощи HTTP2 и Progressive JPEG

Частково питання продуктивності вирішується з допомогою HTTP2. Одне з головних переваг даного протоколу – багатоканальна передача – здатність обробляти кілька запитів та відповідей за раз, використовуючи одне з’єднання TCP.

Багатоканальна передача прискорює завантаження файлів з сайту. В залежності від структури сайту можна виставити пріоритет ресурсів при багатоканальної передачі: якщо критичного CSS поставити високий пріоритет, він буде завантажуватися швидше через HTTP2. Крім того, подгружая ще не запитані файли через HTTP2 Server Push, при правильному підході можна серйозно поліпшити сприйняття продуктивності. Більш детально на цю тему трохи нижче.

Ускоряем изображения еще больше при помощи HTTP2 и Progressive JPEG

При завантаженні зображень через багатоканальну передачу даних з’являється цікавий побічний ефект: з точки зору сприйняття продуктивності окремі типи зображень завантажуються значно швидше із-за того, що первинна інформація про зображення завантажується паралельно через багатоканальну передачу даних HTTP2. До таких типів можна віднести прогресивний JPEG і черезрядковий PNG.

Всі прогресивно

Ускоряем изображения еще больше при помощи HTTP2 и Progressive JPEG

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

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

Ускоряем изображения еще больше при помощи HTTP2 и Progressive JPEG

Джон Меллор з Google в 2012 році вже говорив про сприйняття продуктивності та індексі швидкості при завантаженні скануючих шарів прогресивних JPEG зображень через HTTP2 Multiplexing. Він експериментував з протоколу SPDY, попередником HTTP2. Сьогодні ми можемо просунути ще далі його відкриття і змусити прогресивні зображення завантажуватися швидше.

Повертаємо владу в наші руки або скануючі файли

Ускоряем изображения еще больше при помощи HTTP2 и Progressive JPEG

За замовчуванням в прогресивних JPEG зображеннях 10 скануючих шарів. Тобто для завантаження зображення з вихідним якістю проходить 10 ітерацій з завантаженням шарів з інформацією. Перший шар JPEG зображення завжди має високу пікселізація і найчастіше виконаний в чорно-білому варіанті для економії на колірних каналах. Хочете дізнатися, як виглядають всі верстви? Скористайтеся інструментом jsk від Frédéric Kayser, в якому прогресивне зображення можна розбити на окремі шари.

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

Ускоряем изображения еще больше при помощи HTTP2 и Progressive JPEG

На відміну від зображень PNG, де для створення черессточных шарів використовується фіксований метод кодування Adam7, JPEG кодування можна розширити директивами: прапор «-scans» для кодувань JPEG. З mozjpeg прапори можна використовувати наступним чином: «cjpeg -quality 75 -scans customscans.txt -outfile output.jpg input.jpg». Кодери JPEG приймають текстові файли з вашими командами для створення шарів.

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

В скануючому файлі є три канали – яскравість (Y), синій (Cb) і червоний (Cr) під номерами 0, 1 і 2 відповідно. Індекс матриці у файлі починається з 0 і йде до 63, покриваючи блок 64 пікселя (кодування JPEG має блок 8х8).

Креативимо

Ускоряем изображения еще больше при помощи HTTP2 и Progressive JPEG

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

Перший шар представлений в скануючому файлі забезпечує нас відповідними кольорами. Другий шар – це вже прийнятне превью зображення. На третьому і четвертому шарі міститься необхідна інформація про колір: червоний канал розташований перед синім, так як червоний канал набагато важливіше для підвищення візуальної якості, наприклад, при показывании осіб. Останній п’ятий шар дає нам кінцеве зображення з промальовуванням найдрібніших деталей. Ці поліпшення виливаються в примірний зростання індексу швидкості на 6%, що в свою чергу впливає на сприйняття продуктивності.

Ускоряем изображения еще больше при помощи HTTP2 и Progressive JPEG

Ускоряем изображения еще больше при помощи HTTP2 и Progressive JPEG

Скрипт сканування вище – лише один приклад налаштування кодування прогресивних JPEG зображень: використовуючи цей підхід, можна відтворити техніку LQIP від Guy Podjarny в прогресивних зображеннях JPEG, як показав Jon Sneyers.

Push! Push! Push!

Для ще більш швидкого завантаження зображень HTTP є ще один інструмент — Server Push. На серверах з підтримкою HTTP2 є можливість позначати окремі шари прогресивних JPEG зображень високим пріоритетом, що змусить сервер передати ці шари Push-кеш браузера користувача ще до самого запиту на зображення. Браузери можуть вибудовувати структуру сторінки і отрісовивать первинні шари зображення з кешу, прискорюючи тим самим для користувачів сприйману малювання зображень.

Більш детально вивчити HTTP2 Server Push можна в чудовій статті в розділі Performance Advent Calendar.

Ускоряем изображения еще больше при помощи HTTP2 и Progressive JPEG

Ускоряем изображения еще больше при помощи HTTP2 и Progressive JPEG

Дану техніку варто використовувати тільки для вибудовування стратегії: з’ясуйте зображення, які в першу чергу впливають на залучення користувачів на сторінці, наприклад, банери, пробуджують певні емоції, або зображення з оглядом на товар, і використовуйте Server Push для завантаження первинних шарів цих JPEG зображень. Так ви привернете користувачів, що виллється в підвищення конверсії без шкоди загальною завантаження сайту.

Висновок

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

Управління створенням прогресивних JPEG зображень може дати користувачеві кращий візуальний досвід.

HTTP2 Server Push може поліпшити сприйняття продуктивності важливих зображень.