А. Г. |
Я продолжаю рассказывать, какими принципами мы руководствовались и какие решения принимали в работе над новым сайтом бюро. Не бояться больших картинокДизайнеры боятся поставить на страницу большие картинки. А если ставят, разработчики открывают отладчик и делают большие глаза — страница весит мегабайты! Последняя картинка загрузилась через полминуты! Десять лет назад Но мир изменился. Важно, когда пользователь увидит страницу и как быстро она работает. Больше нет нужды заставлять пользователя нажимать на ссылку «следующая страница». Большие картинки не так страшны, если с ними правильно работать. В книге «Типографика и вёрстка» 176 разворотов, почти на каждом из них есть картинки. Иллюстрации — в «ретиновом» разрешении. По внутреннему издательскому стандарту полноформатная иллюстрация сохраняется с шириной 3000 пикселей. При этом вся книга открывается в одном окне браузера и листается как пёрышко, а иллюстрации заранее ждут читателя. Обновлённый раздел «Проекты» сайта бюро вообще состоит из одних картинок. Я расскажу, почему это стало возможно. 1. Самый важный для восприятия интервал — время от начала загрузки сайта до момента, когда браузер хотя бы Но загрузка и отрисовка картинок не входят в это время, потому что браузеры загружают их фоном. Поэтому если большинство картинок — вне первого экрана, то нестрашно, если они не загрузятся к моменту показа страницы. 2. У компьютеров, планшетов и телефонов ограничена память, поэтому страница с большим общим весом иллюстраций может замедлить или даже «повесить» браузер. Но не стоит бояться страниц с большим количеством картинок. Разработчик может загружать и выгружать картинки в произвольном порядке, в том числе на телефонах. Управлять загрузкой может сложная стратегия с учётом сценариев чтения (как в наших книгах) или простейший скрипт, привязанный к прокрутке (как на нашем сайте). На мобильных устройствах важно не забывать выгружать лишние картинки. И, конечно, разработчик должен позаботиться о том, чтобы картинки на первом экране загрузились первыми, чтобы пользователь не сидел перед отрисованной, но пустой страницей. 3. Картинки можно оптимизировать автоматически. В первый день после открытия все картинки раздела весили сто с лишним мегабайт, на второй день — семьдесят. Высший пилотаж — автоматический генератор «неретиновых» версий картинок — ведь читатель может прыгнуть через полстраницы. Этот подход уже работает в наших книгах и может быть рекомендован для любых сайтов с большими картинками. Чтобы выжать ещё 10% скорости загрузки, наши разработчики рекомендуют использовать протокол ХТТП/2. 4. Отладчик, мегабайты, статистика — это всё очень важно и полезно, если разработчик смотрит на нужные цифры. Но дизайнеру важно верить глазам и ощущениям. В первом задании на движок книги было написано: «Прокрутка должны быть максимально лёгкая, ощущение, что под пальцами пёрышко, а не гиря». И если под пальцами получалось не «пёрышко», никакие цифры разработчиков меня бы не убедили принять результат. И наоборот — сколько бы мегабайт и секунд ни показывала панель отладчика, даже в первый «стомегабайтовый» день сайт бюро без проблем открывался на мобильном телефоне при плохом соединении. В конечном итоге важны не размер и не время загрузки всех картинок, а время отображения нужного фрагмента страницы. Спасибо Василию Половнёву за консультации. См. также о ретиновом загрузчике в бюрошных книгах. |