Ruport рассказывает о workhack'e для дизайнеров и копирайтеров — он помогает на этапе создания концепции сайта выстроить контент так, чтобы он загружался максимально эффективно.
…
Барбара Бермс в книге “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 секунд.
⠀
По этой таблице нельзя с точностью просчитать, насколько «тяжёлым» будет сайт и как сложно его оптимизировать. Но она помогает ориентироваться в производительности сайта на раннем этапе разработки, правильно расставлять приоритеты и не перегружать сайт лишними элементами.
А вот реально полезные 5 простых правил и никакие баллы не нужны:
1. Кэшируйте все, что только можно, на всех этапах, в том числе пользуйтесь CDN
2. Если от чего-то можно отказаться - отказывайтесь (часто видео на лендингах и хоумпейджах просто ну нужно, справится анимация/статичная картинка, метрику и поддержку доисторических браузеров в мусорку), если что-то можно уменьшить - уменьшайте (компрессия картинок, видео с минимальной потерей качества, для кода Google Closure и другие минификаторы).
3. Не пользуйтесь фреймворками (привет ангуларам, нпмам и компилятором фронтенда, которые очень модные, но очень прожорливые и не нужные в 95% сайтах).
4. Загружайте меньше файлов, делайте минимум запросов к серверу, если что-то можно объединить в один файл - объединяйте.
5. Если что-то можно нарисовать у пользователя в браузере - рисуйте, а не загружайте (динамически переливающийся фон не стоит качать mp4-файлом, а лучше нарисовать через CSS/Canvas).
Так это же просто 5 рандомных правил для разработчиков (кроме 2).