НАШИ
РАБОТЫ
Блог Контакты Услуги RU_PORT Наша
команда
Мы
побеждаем
Наши
клиенты
Мы
ищем
Мы —
RUPORT

Portfolio Blog Contacts Team Clients RU_PORT Vacancies Services We are RUPORT Awards
Branding Digital and mobile Media Брендинг Digital и mobile Видео Реклама Video Advertisement

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

<p>Ruport рассказывает о workhack&#39;e для дизайнеров и копирайтеров &mdash; он помогает на этапе создания концепции сайта выстроить контент так, чтобы он загружался максимально эффективно.</p> <p>&hellip;</p> <p>Барбара Бермс в книге &ldquo;Lean Websites&rdquo; предлагает креативной команде заранее думать о производительности сайта. Чтобы было легче оценивать влияние контента на загрузку, она присвоила элементам вес в баллах. 6 &mdash; большим изображениям, 2 &mdash; средним и 1 &mdash; маленьким (включая элементы интерфейса). Чем больше ресурсов и чем они тяжелее, тем дольше загрузка страницы и выше процент отказов пользователей.</p> <p>На основе этой схемы наш frontend-лид Илья построил более подробную систему: с оценкой видео, изображений и шрифтов. Мы суммируем вес всех элементов страницы &mdash; в идеале должно получиться не более 25 баллов. Условная граница, которая помогает контролировать вес сайта. Выходим за 25 &mdash; переносим контент на другие страницы.</p> <p><img alt="" src="https://leonardo.osnova.io/054976c2-abd2-398b-c8d7-84d977270a39/" style="width: 806px; height: 868px;" /></p> <p>Посмотрим, как это работает.</p> <p><a href="http://brandsandtalents.ru/" target="_blank">Сайт агентства Brands&amp;Talents</a>&nbsp;вообще &laquo;ничего не весит&raquo;. Самая &laquo;тяжёлая&raquo; &mdash; страница Team: 6 маленьких изображений + основной шрифт = 8 баллов. Поэтому при стандартном соединении сайт загружается в среднем за 2 секунды &mdash; он мобильный даже на десктопе.</p> <p><img alt="" src="https://leonardo.osnova.io/fbd12a3f-ab7e-ac9b-30f7-cb34d063b4e3/" style="width: 806px; height: 428px;" /><br /> <br /> Чтобы создать весёлое настроение на сайте&nbsp;<a href="https://gemrussia.ru/" target="_blank">детского лагеря &laquo;Жемчужина России&raquo;</a>, мы использовали видео о детских летних приключениях (15 баллов), заголовки (2 балла) и яркие анимированные круги. Уложились в 25 баллов &mdash; видео оптимизировали, а параметрическая анимация не повлияла на загрузку. В итоге &mdash; важные элементы интерфейса доступны мгновенно, а до полной загрузки всего контента &mdash; 6 секунд при стандартном соединении.</p> <p><img alt="" src="https://leonardo.osnova.io/a2ad0dde-7e55-615f-78c6-47644eeb3f89/" style="width: 806px; height: 428px;" /><br /> <br /> Как и в любом правиле, здесь есть исключения &mdash; всё зависит от цели продукта. Главная&nbsp;<a href="http://wind-channel.com/" target="_blank">сайта видеопродакшена Wind Channel</a>&nbsp;&laquo;весит&raquo; 77 баллов &mdash; нам важно было показать захватывающие кадры в хорошем качестве. Нашли компромисс: дизайнеры сократили каждое из 5 видео до 5 секунд, а разработчики оптимизировали загрузку роликов. Поэтому весь контент загружается за 5 секунд.</p> <p><img alt="" src="https://leonardo.osnova.io/411db2e0-0855-082b-f688-3b2ec29fa2cf/" style="width: 806px; height: 428px;" /></p> <p>По этой таблице нельзя с точностью просчитать, насколько &laquo;тяжёлым&raquo; будет сайт и как сложно его оптимизировать. Но она помогает ориентироваться в производительности сайта на раннем этапе разработки, правильно расставлять приоритеты и не перегружать сайт лишними элементами.</p>