Революционная технология, поддерживаемая во всех Chrome-браузерах, — Client Hints — стала доступна для всех пользователей Айри. Благодаря Client Hints мобильные устройства могут загрузить сразу нужные по размеру изображения, существенно сокращая размер веб-страниц в соответствии с реальным размером экрана устройства.
Что такое Client Hints
Client Hints — относительно новая технология, объединяющая наработанные практики в области клиентской оптимизации для мобильных устройств. Основная проблема в скорости сайтов для мобильных — это размер. И обычно — это размер изображений. Расширение Client Hints позволяет браузеру отправить на сервер актуальный размер экрана пользователя, а серверу отдать соответствующие этому экрану изображения. Таким образом решается проблема передачи избыточного размера изображений для медленных мобильных соединений и существенно ускоряется загрузка сайта для мобильных пользователей.
Схематично Client Hints работает следующим образом:
Сервер отправляет в браузер заголовки, что браузер может передавать размер экрана и глубину пикселя на сервер (Accept-CH: DPR,Viewport-Width). Браузер после этого запрашивает изображения с актуальной глубиной (DPR) и размером экрана (Viewport-Width). Сервер отдает в браузер подходящее изображения для заданных параметров.
Client Hints в Айри
Поддержка Client Hints автоматически включена в Айри с уровня Ускорения сайта 150%. В этом случае для всех изображений сайта предварительно создаются мобильные версии, которые отдаются только тем пользователям, для которых будет выигрыш в размере передаваемых данных без ухудшения качества отображения сайта.
При тестировании зафиксировано уменьшение исходных изображений вплоть до 7 раз (с 103 Кб до 14,7 Кб с учетом webp-оптимизации). В большинстве случаев выигрыш может быть меньше, и он будет действовать только для Chrome-браузеров (порядка 85-90% мобильных браузеров), но это , в среднем, дает существенный выигрыш в размере передаваемых данных.
В совокупности, технологии brotli, sdch, webp и client hints (они включаются в Айри при выставленном уровне ускорения сайта 150%) сокращают размер передаваемых данных в 3 раза для всех пользователей.