Главное Свежее Вакансии   Проекты
Продвинуть свой проект
31 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

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

b_5c752eb329d52.jpg

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

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

b_5c752eec46deb.jpg

Для высокой производительности сумма ресурсов на странице не должна превышать 25 баллов

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

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

b_5c752f33b1f68.jpg

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

b_5c752f5b39cc2.jpg

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

b_5c752f7a2cc09.jpg

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

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Популярные за неделю
Показать следующие
Комментарии
Первые Новые Популярные
Комментариев еще не оставлено
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать
Комментарии