От автора: веб-производительность очень важна, но в последнее время я заметил, что данную тему развивают только front-end разработчики, а на саму производительность смотрят только на завершающем этапе разработки проекта. И теперь, когда бы я не слышал о решении урезать большой сайт, я понимаю, что эти предложения и приемы разработчики и проектировщики должны использовать сразу же после старта первого этапа проектирования.
Так что же в дизайне влияет на производительность? Те вопросы, которые может задать себе любой дизайнер:
Сколько шрифтов использовать?
Какую графику использовать?
Какие аналитические скрипты нам нужны?
Как пользователь будет скроллить по нашему приложению?
Как такой сложный компонент влияет на наш CSS код?
Как вообще писать CSS?
Какие фреймворки выбрать?
В большинстве случаев эти вопросы ведут к написанию дополнительного кода, повышению сложности и раздуванию системы дизайна. Все это происходит из-за:
Чем больше шрифтов мы загрузим, тем дольше мы заставляем наших пользователей ждать.
Выбранный нами тип графики для проекта повлияет на форматы изображений, которые мы будем использовать.
Если использовать чрезмерно много аналитических инструментов, мы можем замедлить работу всего сайта.
Использование сложных компонентов в CSS, которые будут задействованы один раз, ведет к раздуванию кода и дальнейшему замедлению первой отрисовки страницы (незначительному).
Выбранный фреймворк окажет огромное влияние на установленный порядок и сроки разработки.
Если коротко, то команды дизайнеров должны оценивать свой успех через веб-производительность, так как каждое принятое решение приведет к критическим изменениям конечного результата, который доходит до пользователя.
Я стал думать об этой теме в следующем ключе: любой диалог о дизайне – это также диалог о веб-производительности. Я стараюсь напоминать себе, что эти два понятия неразделимы. Как дизайнер, я должен внимательно рассматривать эти проблемы на самом раннем этапе проекта, а не на последнем.
Автор: Robin Rendle
Источник: //css-tricks.com/
Редакция: Команда webformyself.
