Скорость загрузки сайта, скорость сайта у пользователей и ощущаемая скорость сайта — три разные понятия. Ваш сайт может быть максимально быстрым, при этом у пользователей он будет загружаться медленно, но восприятие загрузки сайта будет плавным — и будет казаться, что сайт «летает».
Как этого добиться?
Метрики восприятия скорости
В руководстве для разработчиков Firefox OS (мобильной операционной системы Mozilla) приведен рекомендации по разработке отзывчивого интерфейса:
- 0-0,25 с — обратная связь от нажатия кнопки / перехода по ссылке (пользователь должен понимать, что что-то произошло).
- 0,25 с-1 с — обратная связь от приложения, что происходит загрузка (с индикатором загрузки, по возможности).
- 1 с — загрузка основных визуальных элементов приложения.
- 1,25 с — загрузка основных элементов взаимодействия приложения.
Временные интервалы основаны на глубоких исследованиях комфортного взаимодействия пользователей с мобильными приложениями и сайтами. Основной вывод, который можно сделать из этих данных: сайт должен обеспечивать обратную информацию не позже, чем через 250 мс после действия пользователей и показывать какой-либо интерфейс или элементы ожидания не более чем через 1 секунду. В идеале, через 1,25 секунды сайт должен быть полностью готов к взаимодействию с пользователей (загружая дополнительную логику или оставшиеся экраны).
Методы улучшения воспринимаемой скорости сайта
Первое, о чем мы писали в блоге, — это отложенная загрузка изображений. Общее время загрузки страницы не уменьшается, но визуально страница становится полностью готова к действиям пользователей в 1,5-2 раза быстрее.
Второе — это индикаторы загрузки. На мобильных приложениях индикаторы уже встроены в браузер и показывают полосу загрузки страницы сверху, полоса заполняется по мере готовности страницы. Это дает обратную связь пользователю, что сайт загружается, и делает ожидание готовности страниц намного приятнее.
Другой тип индикаторов загрузки — крутящийся круг (как по умолчанию используется браузерами в адресной строке или в области вкладок) — также достаточно широко используется на сайтах. Он позволяет максимально сократить ощущаемое время между получение содержания страниц сайта (загрузкой данных) и отрисовкой страницы в браузере (готовностью документа). Последняя техника теперь может быть включена в Айри максимально просто: это настройка «Индикатор загрузки» в Общих настройках сайта (блок Настройки ускорения).
Включение индикатора позволяет сократить ощущаемое время загрузки сайта на 30-50% — за счет стадии отрисовки страницы в браузере. Совместно с техникой кэширования страниц (и регулярного их авто-обновления) это позволяет сделать сайт по-настоящему реактивным для пользователей.