Почему тяжёлые медиа убивают сайт и что с этим делать

Сайт с портфолио неизбежно тяжёлый: фотографии и видео — это и есть содержание. Вопрос не в том, как избавиться от медиа, а в том, как сделать, чтобы посетитель увидел страницу раньше, чем закончится его терпение.

Цена задержки

Терпение измеряется секундами. Каждая дополнительная секунда ожидания заметно увеличивает долю тех, кто закрывает вкладку, не дождавшись. На мобильном интернете разница между 500 килобайтами и 5 мегабайтами — это разница между «открылось» и «не открылось».

Что даёт основной выигрыш

• Постер вместо видео при первой отрисовке. Картинка в 30 килобайт вместо ролика в 600 — страница собирается мгновенно
• Отложенная загрузка. Видео и картинки ниже экрана не грузятся, пока к ним не подошли
• Размер по факту показа. Не грузить кадр вдвое больше, чем занимает место на странице
• Заданные размеры в разметке. Иначе страница прыгает по мере загрузки
• Никаких внешних шрифтов и библиотек. Каждый внешний адрес — отдельное соединение
• Стили внутри страницы. Для небольшого сайта это убирает лишний запрос
• Разнесение запусков во времени. Пять роликов, стартующих одновременно, мешают друг другу

Что переоценено

Минификация разметки, сжатие пробелов и прочая экономия байтов в коде. На фоне мегабайтов медиа это доли процента. Оптимизировать нужно то, что весит, а весят картинки и видео.

Как проверить

Откройте страницу в браузере с включённой панелью разработчика на вкладке сети и включите ограничение скорости. Смотрите не на итоговое время, а на момент, когда экран стал осмысленным. Именно этот момент определяет впечатление.

Материалы предназначены для лиц старше 18 лет и носят информационный характер.