logo
06 Apr 2021

Как ускорить загрузку сайта, если у вас много видео и фотографий товаров

Анжелика Елина BLOG

Руководитель агентства WAMP

У нас была задача ускорить работу сайта и увеличить скорость загрузки страниц. При этом надо было не потерять в качестве изображений и видео: клиент продает украшения из бриллиантов, а их важно показать детально.

Сжатие видео

Мы начали анализировать, что можно сделать с видео и как оно работает сейчас. Выяснили, что видео все загружены с аудиодорожкой, но при этом они везде воспроизводятся без аудио, то есть с тегом muted. Поэтому решили удалить аудиотреки и тем самым уменьшили размер на 15% в среднем.

Все видео были сконвертированы только в mp4. Мы же решили сделать версии в WebM-формате – чтобы для браузеров, которые поддерживают этот формат, воспроизводились WebM.

Запросили все видео у клиента в исходном качестве и поигрались с настройками кодирования. В итоге большинство видео конвертировали в WebM со значением 40 в настройках сжатия. Некоторые видео, где было много динамических сцен с мелкими деталями, пришлось кодировать с настройкой сжатия 30.

Видео на сайте клиента. Источник: WAMP

Настройки сжатия WebM варьируются от 1 до 65, где 1 – это самое лучшее качество. С выбранными нами настройками мы не потеряли в качестве в сравнении с mp4-видео, которые уже были на сайте. При этом нам удалось уменьшить размер в среднем на 50% относительно изначальных mp4 со звуком.

Потом в коде страницы мы добавили ссылку на видео в двух форматах, и теперь браузер сам решает, какой формат он может воспроизвести. Также дописали тег playsinline, чтобы в Safari работало автовоспроизведение. В итоге коды видео получились в таком формате:

<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. Поэтому мы пошли другим путем.

Изображения на сайте клиента. Источник: WAMP

У клиента в Cloudflare было настроено кеширование файлов. Был бесплатный тариф, и мы перешли на Pro за $20 в месяц. Прошлись по всем надстройкам в Cloudflare и включили следующие:

  • Polish – время загрузки изображений уменьшается за счет оптимизации размера изображений, а кодек WebP используется с поддерживаемыми клиентами для дополнительного повышения производительности.
  • Auto Minify уменьшает размер кода и скриптов на сайте.
  • Brotli ускоряет загрузку страницы для посетителей, применяя сжатие Brotli.
  • Enhanced HTTP/2 Prioritization за счет распараллеливания и мультиплексирования интеллектуально анализирует HTML-код сайта для определения порядка загрузки ресурсов с целью достижения максимальной производительности. Наибольшие улучшения увидят посетители, использующие браузеры Safari и Edge.
  • TCP Turbo уменьшает задержку и пропускную способность с помощью настраиваемых оптимизаций TCP.
  • Mirage уменьшает время загрузки страниц с изображениями на мобильных устройствах с медленным подключением, заменяя изображения на аналоги с низким разрешением и «ленивой загрузкой» (lazy loading).
  • Rocket Loader сокращает время отрисовки страниц, содержащих JavaScript.

Итоги

Раньше рейтинг desktop performance по PageSpeed Insights был:, а теперь:

Рейтинг mobile performance был:, теперь:

То есть все действия позволили в два раза увеличить скорость загрузки сайта и выйти в желтую и зеленую зоны по этим рейтингам.

Источник: Highload.today

Этот материал – не редакционный, это – личное мнение его автора. Редакция может не разделять это мнение.


Чем заняться на карантине: рекомендации от редакции MC.today

Друзья, время карантина лучше всего использовать для самообразования, чтобы, когда темные дни пройдут и шторм закончится, вы могли с новыми силами и знаниями дать толчок своему бизнесу и карьере.

Мы рекомендуем эти онлайн-курсы и семинары, потому что знакомы с организаторами, учились и уверены в качестве и полезности курсов.

Курсы мечты: вас бесплатно обучат программированию или веб-дизайну, а потом помогут устроиться на работу. Рома Апостол руководил командой разработчиков в нью-йоркском офисе Google, а потом вернулся в Украину и создал Mate Academy. Здесь бесплатно учат фронтенду, Java, веб-дизайну, разработке и QA (тестированию). За курсы вы заплатите, когда устроитесь на работу по новой профессии, в трудоустройстве тоже помогает академия.

Регистрация на курс UI/UX Design здесь, на курс QA тут. На курс Java можно зарегистрироваться по ссылке, на курс Full Stack регистрация тут, а обучиться Frontend можно тут.

В данной статье используются реферальные ссылки на онлайн-образовательные курсы наших партнеров. Создатели курсов не влияли на содержание данной статьи, она готовилась по редакционным стандартам. Если вы решите купить курс, который упоминается в статье, нам заплатят небольшое вознаграждение – так вы получите крутые знания и поддержите нашу редакцию, а мы сможем делать еще больше интересных материалов для вас. В партнерскую программу мы принимаем только те курсы, в качестве которых уверены.

Вакансии компаний

РАЗМЕСТИТЬ ВАКАНСИЮ
ЗА 1600 ГРН

Менеджер з комунікацій

ГО «Детектор медіа», Киев

Account Manager

SocialTech, Киев

ЕЩЕ 16 ВАКАНСИЙ

Вдохновляющие компании

iLogos Game Studios

Наши игры уже скачала седьмая часть жителей планеты. Чтобы увеличить эту цифру, мы ищем новых специалистов

GIGAGROUP

«Мы передаем, храним и защищаем данные клиентов – и делаем это лучше всех»

2 вакансии

Вакансии компаний

РАЗМЕСТИТЬ ВАКАНСИЮ
ЗА 1600 ГРН

Менеджер з комунікацій

ГО «Детектор медіа», Киев

Account Manager

SocialTech, Киев

ЕЩЕ 16 ВАКАНСИЙ

Спецпроект

«Аптека АНЦ»

Вдохновляющие компании-работодатели

Alfa
ABM Cloud
«БИОСФЕРА»

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: