Дизайн и производительность сайта: приём, о котором должны знать креативные пары
Барбара Бермс в книге “Lean Websites” предлагает креативной команде заранее думать о производительности сайта. Чтобы было легче оценивать влияние контента на загрузку, она присвоила элементам вес в баллах. 6 — большим изображениям, 2 — средним и 1 — маленьким (включая элементы интерфейса). Чем больше ресурсов и чем они тяжелее, тем дольше загрузка страницы и выше процент отказов пользователей.
На основе этой схемы наш frontend-лид Илья построил более подробную систему: с оценкой видео, изображений и шрифтов. Мы суммируем вес всех элементов страницы — в идеале должно получиться не более 25 баллов. Условная граница, которая помогает контролировать вес сайта. Выходим за 25 — переносим контент на другие страницы.
Для высокой производительности сумма ресурсов на странице не должна превышать 25 баллов
Посмотрим, как это работает.
Сайт агентства Brands&Talents вообще ничего не весит. Самая тяжёлая — страница Team: 6 маленьких изображений + основной шрифт = 8 баллов. Поэтому при стандартном соединении сайт загружается в среднем за 2 секунды — он мобильный даже на десктопе.
⠀
Чтобы создать весёлое настроение на сайте детского лагеря Жемчужина России, мы использовали видео о детских летних приключениях (15 баллов), заголовки (2 балла) и яркие анимированные круги. Уложились в 25 баллов — видео оптимизировали, а параметрическая анимация не повлияла на загрузку. В итоге — важные элементы интерфейса доступны мгновенно, а до полной загрузки всего контента — 6 секунд при стандартном соединении.
⠀
Как и в любом правиле, здесь есть исключения — всё зависит от цели продукта. Главная сайта видеопродакшена Wind Channel весит 77 баллов — нам важно было показать захватывающие кадры в хорошем качестве. Нашли компромисс: дизайнеры сократили каждое из 5 видео до 5 секунд, а разработчики оптимизировали загрузку роликов. Поэтому весь контент загружается за 5 секунд.
⠀
По этой таблице нельзя с точностью просчитать, насколько тяжёлым будет сайт и как сложно его оптимизировать. Но она помогает ориентироваться в производительности сайта на раннем этапе разработки, правильно расставлять приоритеты и не перегружать сайт лишними элементами.