Как сделать так, чтобы сайты с большим количеством видео и изображений загружались быстрее?
Наша задача заключалась в том, чтобы ускорить сайт и сделать его более быстрым в загрузке. В то же время необходимо было сохранить качество изображений и видео: клиент продает ювелирные изделия с бриллиантами, и важно показать их в деталях.
Сжатие видео
Мы провели большой анализ того, что можно сделать с видео и как оно работает сейчас. Мы обнаружили, что все видео загружаются с аудиодорожкой, но в то же время все они воспроизводятся без звука, с тегом 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.
