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

Не бояться больших картинок

Веб-дизайнеры переживают о мобильных пользователях, жителях дальних сёл и пенсионерах с устаревшими компьютерами. Это правильно. Но, к сожалению, эта забота породила у дизайнеров и разработчиков предрассудки.

Дизайнеры боятся поставить на страницу большие картинки. А если ставят, разработчики открывают отладчик и делают большие глаза — страница весит мегабайты! Последняя картинка загрузилась через полминуты!

Десять лет назад веб-дизайнеру приходилось разбивать разделы на страницы с помощью листалок, использовать небольшие превьюшки и пережимать каждую картинку до грани потери качества.

Но мир изменился. Важно, когда пользователь увидит страницу и как быстро она работает. Больше нет нужды заставлять пользователя нажимать на ссылку «следующая страница». Большие картинки не так страшны, если с ними правильно работать.

В книге «Типографика и вёрстка» 176 разворотов, почти на каждом из них есть картинки. Иллюстрации — в «ретиновом» разрешении. По внутреннему издательскому стандарту полноформатная иллюстрация сохраняется с шириной 3000 пикселей. При этом вся книга открывается в одном окне браузера и листается как пёрышко, а иллюстрации заранее ждут читателя.

Обновлённый раздел «Проекты» сайта бюро вообще состоит из одних картинок. Я расскажу, почему это стало возможно.

1. Самый важный для восприятия интервал — время от начала загрузки сайта до момента, когда браузер хотя бы что-то показал на экране. Разработчики называют его CRP (critical render path). В это время входит загрузка и обработка скриптов и стилей, поэтому важно держать их в порядке, следить за количеством и размером файлов.

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

2. У компьютеров, планшетов и телефонов ограничена память, поэтому страница с большим общим весом иллюстраций может замедлить или даже «повесить» браузер.

Но не стоит бояться страниц с большим количеством картинок. Разработчик может загружать и выгружать картинки в произвольном порядке, в том числе на телефонах. Управлять загрузкой может сложная стратегия с учётом сценариев чтения (как в наших книгах) или простейший скрипт, привязанный к прокрутке (как на нашем сайте). На мобильных устройствах важно не забывать выгружать лишние картинки.

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

3. Картинки можно оптимизировать автоматически. В первый день после открытия все картинки раздела весили сто с лишним мегабайт, на второй день — семьдесят.

Высший пилотаж — автоматический генератор «неретиновых» версий картинок — ведь читатель может прыгнуть через полстраницы. Этот подход уже работает в наших книгах и может быть рекомендован для любых сайтов с большими картинками.

Чтобы выжать ещё 10% скорости загрузки, наши разработчики рекомендуют использовать протокол ХТТП/2.

4. Отладчик, мегабайты, статистика — это всё очень важно и полезно, если разработчик смотрит на нужные цифры.

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

И наоборот — сколько бы мегабайт и секунд ни показывала панель отладчика, даже в первый «стомегабайтовый» день сайт бюро без проблем открывался на мобильном телефоне при плохом соединении.

В конечном итоге важны не размер и не время загрузки всех картинок, а время отображения нужного фрагмента страницы.

Спасибо Василию Половнёву за консультации. См. также о ретиновом загрузчике в бюрошных книгах.