Як зробити так, щоб сайти з великою кількістю відео та зображень завантажувалися швидше?
Нашим завданням було пришвидшити роботу сайту та пришвидшити його завантаження. При цьому потрібно було зберегти якість зображень і відео: клієнт продає ювелірні прикраси з діамантами, і важливо показати вироби в деталях.
Стиснення відео
Ми багато аналізували, що можна зробити з відео і як воно працює зараз. Ми виявили, що всі відео завантажувалися зі звуковою доріжкою, але в той же час вони відтворювалися без звуку, з тегом mute. Тому ми вирішили видалити звукову доріжку, зменшивши розмір відео в середньому на 15%.
Усі відео були конвертовані лише у формат mp4. Для браузерів, які підтримують WebM, ми вирішили створити WebM-версії.
Ми погралися з налаштуваннями кодування, запитуючи у клієнта всі відео в оригінальній якості. Це призвело до того, що більшість відео було конвертовано у WebM зі стисненням 40. Деякі відео довелося кодувати з коефіцієнтом стиснення 30, оскільки в них було багато динамічних сцен з дрібними деталями.
Налаштування стиснення WebM варіюються від 1 до 65, де 1 - найкраща якість. Ми не втратили жодної якості порівняно з відео у форматі mp4, вже розміщеними на сайті, з обраними нами налаштуваннями. У той же час, ми отримали середнє зменшення розміру на 50% порівняно з оригінальним mp4 зі звуком.
Потім ми додали посилання на відео у двох форматах в код сторінки. Тепер браузер сам вирішує, який формат йому відтворювати. Щоб автозапуск працював у Safari, ми також додали тег playsinline. В результаті коди відео виглядають наступним чином:
video autoplay playsinline muted loop
source src="https://static.sybaritejewellery.com/video/home_page.webm" type="video/webm"
source src="https://static.sybaritejewellery.com/video/home_page.mp4" type="video/mp4"
/video
Стиснення фотографій
А потім ми перейшли до самих зображень. Ми переглянули їх усі і зробили JPG-конвертацію всіх великих зображень.
Потім ми хотіли зробити дублікати зображень у форматі WebP, за аналогією з відео, але після деяких роздумів відмовилися від цієї ідеї. Сайт динамічний, додаються нові статті та фотографії статей, а поточна адмін-панель не підтримує завантаження у форматі WebP. Тому ми вирішили піти іншим шляхом.
Cloudflare CDN
Клієнт налаштував CDN у Cloudflare. Ми перейшли на Pro за $20 на місяць. Був і безкоштовний план. Пройшлися по всіх доповненнях в Cloudflare, в тому числі:
1. Polish - зменшує час завантаження зображень шляхом оптимізації розміру зображення та використовує кодек WebP на підтримуваних клієнтах для подальшого покращення продуктивності.
2. Auto Minify - зменшує розмір коду та скриптів на сайті.
3. Brotli - прискорює завантаження сторінок для відвідувачів, застосовуючи стиснення Brotli.
4. Покращена пріоритезація HTTP/2 - за допомогою розпаралелювання і мультиплексування інтелектуально аналізує HTML-код сайту, щоб визначити порядок завантаження ресурсів для максимальної продуктивності. Відвідувачі, які використовують браузери Safari та Edge, побачать найбільші покращення.
5. TCP Turbo - зменшує затримку і пропускну здатність за допомогою спеціальних оптимізацій TCP.
6. Mirage - зменшує час завантаження сторінок із зображеннями на мобільних пристроях з повільним з'єднанням, замінюючи зображення низької роздільної здатності, що повільно завантажуються.
7. Rocket Loader - зменшує час рендерингу сторінок, що містять JavaScript.
+50% швидкість завантаження сайту
94 Desktop PageSpeed
66 Mobile PageSpeed
WebM & WebP
Рейтинг продуктивності Desktop PageSpeed Insights становив:
а тепер після оптимізації Desktop показує:
Рейтинг продуктивності Mobile PageSpeed Insights був:
а тепер після оптимізації Mobile показує:
50% скорочення часу завантаження веб-сторінок
Всі вищезазначені дії призвели до скорочення часу завантаження сайту на 50%, досягнувши зеленої та жовтої зон згідно з рейтингом Google PageSpeed Rating.
