Дизайн и производительность сайта: приём, о котором должны знать креативные пары

Ruport рассказывает о workhack'e для дизайнеров и копирайтеров — он помогает на этапе создания концепции сайта выстроить контент так, чтобы он загружался максимально эффективно.

…

Барбара Бермс в книге “Lean Websites” предлагает креативной команде заранее думать о производительности сайта. Чтобы было легче оценивать влияние контента на загрузку, она присвоила элементам вес в баллах. 6 — большим изображениям, 2 — средним и 1 — маленьким (включая элементы интерфейса). Чем больше ресурсов и чем они тяжелее, тем дольше загрузка страницы и выше процент отказов пользователей.

На основе этой схемы наш frontend-лид Илья построил более подробную систему: с оценкой видео, изображений и шрифтов. Мы суммируем вес всех элементов страницы — в идеале должно получиться не более 25 баллов. Условная граница, которая помогает контролировать вес сайта. Выходим за 25 — переносим контент на другие страницы.

Посмотрим, как это работает.

Сайт агентства Brands&Talents вообще «ничего не весит». Самая «тяжёлая» — страница Team: 6 маленьких изображений + основной шрифт = 8 баллов. Поэтому при стандартном соединении сайт загружается в среднем за 2 секунды — он мобильный даже на десктопе.

⠀

Чтобы создать весёлое настроение на сайте детского лагеря «Жемчужина России», мы использовали видео о детских летних приключениях (15 баллов), заголовки (2 балла) и яркие анимированные круги. Уложились в 25 баллов — видео оптимизировали, а параметрическая анимация не повлияла на загрузку. В итоге — важные элементы интерфейса доступны мгновенно, а до полной загрузки всего контента — 6 секунд при стандартном соединении.

⠀

Как и в любом правиле, здесь есть исключения — всё зависит от цели продукта. Главная сайта видеопродакшена Wind Channel «весит» 77 баллов — нам важно было показать захватывающие кадры в хорошем качестве. Нашли компромисс: дизайнеры сократили каждое из 5 видео до 5 секунд, а разработчики оптимизировали загрузку роликов. Поэтому весь контент загружается за 5 секунд.

⠀

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