Дисклеймер

Інформація на сайті tseivo.com є суб'єктивною та відображає особисті погляди та досвід авторів та авторок блогів.

Використовуйте цей ресурс як одне з декількох джерел інформації під час своїх досліджень та прийняття рішень. Завжди застосовуйте критичне мислення. Людина сама несе відповідальність за свої рішення та дії.

Що таке HTTP Client hints (Підказки клієнта)?

Store Image
HTTP Client Hints (підказки клієнта) - це механізм веб-браузера, який передає серверу інформацію про можливості та обмеження клієнта, що відправляє запит на веб-ресурс
Ці підказки можуть включати такі дані, як параметри браузера (розмір), розмір екрану, кількість точок на дюйм (DPI) та інші характеристики пристрою. Вони допомагають веб-серверам оптимізувати вміст для конкретного клієнта, що покращує швидкість завантаження та взаємодії з веб-сторінкою. Підказки клієнта передаються через відповідні HTTP заголовки, такі як Accept-CH, які дозволяють серверу адаптувати відповідь до потреб та можливостей конкретного клієнта.

Приклад HTTP Client Hint

Припустимо, що веб-сайт має різні версії зображень для різних екранів (з різною роздільною здатністю). Використання заголовка Accept-CH може допомогти серверу відправити оптимізовані версії зображень в залежності від можливостей клієнта.
Клієнт відправляє запит на сервер:
GET /image/example.jpg HTTP/1.1
Host: www.example.com
Accept-CH: DPR, Width, Viewport-Width
Далі cервер отримує запит і перевіряє заголовок Accept-CH. Заголовок Accept-CH вказує на те, що клієнт підтримує заголовки DPR (Device Pixel Ratio), Width (ширина екрану) та Viewport-Width (ширина видимого області екрану).
Далі сервер відправляє оптимізовану відповідь. На основі інформації з заголовка Accept-CH сервер обирає оптимальну версію зображення для відображення на пристрої клієнта. Наприклад, якщо клієнт має високий DPR (наприклад, Retina екран), сервер може надіслати зображення високої якості з високим розширенням. Якщо клієнт має старенький екран, сервер може відправити зображення з меншою роздільною здатністю для економії пропускної здатності та швидкості завантаження.

Hint Life-Time (Час життя підказки)

Час життя підказок визначає період, протягом якого вони (Client Hints) повинні залишатися активними і доступними для сервера. Це важливий аспект управління та оптимізації передачі даних між клієнтом і сервером.
Час життя підказок визначається заголовком Accept-CH-Lifetime, який передається разом з клієнтськими підказками. Цей заголовок вказує серверу, протягом якого часу можна вважати підказки дійсними і використовувати їх для оптимізації відповідей.
Правильне встановлення часу життя підказок дозволяє ефективно керувати ресурсами сервера і мережі, забезпечуючи належну актуальність та достовірність даних, що передаються.
Наприклад, у заголовку Accept-CH-Lifetime може бути вказано значення "604800" (в секундах), що відповідає одному тижню. Це означає, що клієнтські підказки повинні залишатися активними протягом цього терміну.

Low Entropy Hints

Низька ентропія вказує на ситуацію, коли характеристики клієнта мають обмежену різноманітність або низьку складність. Це може виникати з різних причин, таких як обмежена функціональність пристрою, обмеженість мережі або низька якість зв'язку.
Підказки з низькою ентропією можуть включати значення, які значно не змінюються або не мають великого діапазону можливих варіантів. Наприклад, низька роздільна здатність екрану, обмежена швидкість мережі або обмеженість підтримуваних форматів вмісту.
Коли сервер отримує підказки з низькою ентропією, він може враховувати цю інформацію при оптимізації відповіді для клієнта. Наприклад, зменшення якості зображень для пристроїв з низькою роздільною здатністю екрану або використання менш об'ємних форматів вмісту для пристроїв з обмеженим доступом до мережі.
Розуміння підказок з низькою ентропією допомагає серверам ефективно керувати ресурсами та забезпечувати оптимальну взаємодію з клієнтами. Це дозволяє зменшити навантаження на сервер та забезпечити кращу продуктивність веб-додатків для всіх користувачів, незалежно від характеристик їхніх пристроїв та мережевих умов.
Низька ентропія підказок важлива для розуміння можливостей та обмежень клієнтів і дозволяє ефективно оптимізувати відповіді сервера для кожного конкретного користувача.
Прикладом може бути обмеженість форматів вмісту, які підтримує клієнт. Наприклад, якщо клієнт може обробляти лише базовий HTML із зображеннями у форматі JPEG, це обмежує різноманітність можливих форматів вмісту (має низьку ентропію в цьому контексті).

Critical client hints

Критичні клієнтські підказки - це підмножина Client Hints, які мають особливу важливість для оптимізації відображення контенту на сторінці для покращення швидкості завантаження та користувацького досвіду.
Ці підказки визначаються як критичні на основі їхнього впливу на процес відображення сторінки і їхнього потенційного впливу на швидкість завантаження. Вони так само можуть включати такі параметри, як ширина екрану, роздільна здатність, DPI (dots per inch - кількість точок на дюйм), масштабування та інші.
Використання критичних клієнтських підказок дозволяє серверу передавати клієнту лише необхідний контент для першого відображення сторінки, зменшуючи час завантаження. Це особливо корисно для пристроїв з обмеженими ресурсами або умовами мережі з низькою пропускною здатністю.
Заголовок Sec-CH-UA-* вказує на критичні клієнтські підказки і надає серверу інформацію про них, що дозволяє серверу оптимізувати відповіді для кожного конкретного клієнта.
Sec-CH-UA-* (Security Critical User-Agent Header). Заголовок який дозволяє клієнту надати серверу критичні підказки щодо характеристик пристрою та браузера. Приклад використання цього заголовка:
GET /example-resource HTTP/1.1
Host: tseivo.com
Sec-CH-UA: "Chromium";v="88", "Google Chrome";v="88"
Sec-CH-UA-Mobile: ?0
Sec-CH-UA-Full-Version: "88.0.4324.182"
Sec-CH-UA передає інформацію про браузер, в цьому випадку це "Chromium" та "Google Chrome" з версією "88".
Sec-CH-UA-Mobile вказує, чи браузер є мобільним (?0 означає "ні").
Sec-CH-UA-Full-Version передає повну версію браузера.
Ця інформація дозволяє серверу адаптувати контент для конкретного клієнта.
Ще приклад Critical client hints:
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Sec-CH-Prefers-Reduced-Motion
Vary: Sec-CH-Prefers-Reduced-Motion
Critical-CH: Sec-CH-Prefers-Reduced-Motion
Accept-CH передає серверу інформацію про те, які client hints підтримує браузер клієнта. У цьому випадку, браузер вказує, що віддає перевагу зменшеному руху (Sec-CH-Prefers-Reduced-Motion).
Vary вказує на те, що відповідь сервера може змінюватися в залежності від значення Sec-CH-Prefers-Reduced-Motion. Це дозволяє забезпечити кешування різних версій відповіді.
Critical-CH заголовок вказує, що Sec-CH-Prefers-Reduced-Motion є критичною підказкою для оптимізації відображення сторінки. Це означає, що сервер обов'язково має враховувати цю інформацію при наданні відповіді.
Store Image

🙌 Підтримати блог @memecode

Ви можете поширити цей допис у соцмережах, чим допоможете платформі цейво розвиватись (* ^ ω ^)

📝 Більше публікацій: