Розглянемо ресурсні підказки і директиви (Resource Hints). Ці інструменти прискорюють веб-сайти і веб-додатки. Розберемо відмінності між підказками preload, prefetch і preconnect. Це допоможе успішно їх використовувати. Ось деякі їх переваги:
1) оптимізують доставку ресурсів;
2) скорочують кількість мережевих затримок;
3) доставляють контент швидше, - в той час, поки користувач дивиться сторінку.
1. Директива preload
Чим же preload відрізняється від prefetch? Preload працює з поточної навігацією і ресурсами з високим пріоритетом. Prefetch - ресурси з низьким пріоритетом для наступної навігації. Відзначимо, що preload не блокує window-подія onload.
1.1. Перевага директиви preload
Ось деякі переваги директиви preload:
- Дозволяє браузеру встановлювати пріоритет ресурсу. що, в свою чергу, дозволяє веб-розробникам оптимізувати доставку ресурсів.
- Дозволяє браузеру з'ясувати тип ресурсу. що, в свою чергу, дозволяє дізнатися, чи можна той же самий ресурс знову використовувати в подальшому.
- Дозволяє браузеру з'ясувати, чи підтримує запит з політикою безпеки контенту відповідно до атрибутом as.
- Дозволяє браузеру послати відповідні заголовки accept, заснованих на типі ресурсів (такі як image / webp).
1.2. приклади
Ось дуже простий приклад попереднього завантаження зображення.
Нижче приклад попереднього завантаження шрифтів.
Зауваження. При попередній завантаженні зв'язків з дозволеними CORS-ресурсами необхідний атрибут crossorigin.
1.3. Браузерна підтримка preload
2. Prefetch
Prefetch - це фонової ресурсна підказка, що дозволяє браузеру вибирати в фоновому режимі (у вільний час) ті ресурси, які можуть стати в нагоді пізніше, і зберігати їх в кеші браузера. Як тільки сторінка закінчить завантажуватися, prefetch завантажує деякі додаткові ресурси. Коли користувач тисне на prefetch-посилання, prefetch негайно завантажує контекст. Є три різних типи prefetch, розглянуті далі:
1) контрольний;
2) DNS;
3) prerendering.
На малюнку 3 показані чотири кроки виконання посилального prefetch.
Крок 2 (Step 2). Браузер знаходить prefetch-посилання (Browser finds prefetch links).
Крок 3 (Step 3). Браузер вибирає викликана контент, щоб показати на екрані prefetch-сторінки. Одночасно з цим контент зберігається в кеші, поки користувач клацає по посиланню. Внизу зображено кеш браузера.
Мал. 3. Чотири кроки виконання посилального prefetch
2.1. Нормативний prefetch
Як сказано вище, контрольний prefetch дозволяє браузеру вибрати ресурси і зберегти їх в кеші. припускаючи. що потім користувач їх запросить. Браузер шукає prefetch в HTML в тезі або в його заголовку Link:
- HTML:
- HTTP Header: Link: ; rel = prefetch
Зауваження. «Ця техніка прискорить багато інтерактивні сайти, але не буде працювати завжди і всюди з наступних причин:
2.2. DNS prefetch
DNS prefetch дозволяє браузеру виконувати пошук DNS на сторінці в фоновому режимі. в той час як користувач переглядає сайт. Це мінімізує час очікування, оскільки пошук DNS вже відбувся, коли користувач клацне по посиланню.
DNS prefetch входить в URL як атрибут тега link: rel = "prefetch». Використовується для шрифтів Google, Google Analytics і CDN.
«DNS-запити швидкі в сенсі пропускної здатності, але час очікування може бути велике, особливо в мобільних мережах. Теоретично DNS prefetch може значно зменшити час очікування в певні моменти, наприклад, коли користувач клацає по посиланню. Іноді час очікування можна зменшити на цілу секунду. »
Mozilla Developer Network.
Це також використовується при розподілі ресурсів. Ось приклад:
Мал. 5. DNS prefetch 10 хостів для майбутніх завантажень. Перший стовпець Ім'я хоста. другий - Як давно (чч: мм: сс). третій - Джерело
Також можна використовувати Pagespeed-фільтр insert_dns_prefetch, який поміщає теги в заголовок сторінки автоматично для всіх доменів або спеціалізовані сервіси, такі як Айрі.рф.
З приводу Pagespeed-фільтра см. Коротку статтю «Пакет програм Page Speed від Google» на Хабрахабр
2.3. Prerender
«Підказка prerender використовується додатком для вказівки наступної імовірною цілі HTML-навігації. При цьому для користувача агент вибере і обробить вказаний ресурс як HTML-відповідь. А ось для того, щоб вибрати інший тип контенту, або ж коли попередня обробка HTML небажана, додаток використовує іншу підказку - prefetch. »
Мал. 7. Схематично показано, як prerender запускається тегом
Потрібна обережність з prerender, це - важкий ресурс, і його використання може викликати падіння пропускної здатності, особливо на мобільних пристроях.
На малюнку 8 показаний приклад перевірки наявності prerender за допомогою chrome: // net-internals / # prerender
Мал. 8. Приклад перевірки наявності prerender за допомогою chrome: // net-internals / # prerender
Prefetch має деякі недоліки, наприклад, проблеми з секретністю.
3. Preconnect
Нарешті, розглянемо preconnect. Preconnect дозволяє браузеру встановити з'єднання перш, ніж HTTP-запит буде відправлений на сервер. Ця процедура включає пошуки DNS, «переговори» TLS і «рукостискання» TCP. Що в свою чергу усуває кругові затримки і економить час користувача.
«Preconnect - важливий інструмент оптимізації ... він усуває дорогі кругові затримки з шляху запиту. Іноді час очікування запиту скорочується на сотні і навіть тисячі мілісекунд ».
Ілля Григорик (англ. Ilya Grigorik).
На малюнку 10 порівнюється час завантаження DNS / TCP / TLS з використанням preconnect і без нього. У верхній частині малюнка наведено час завантаження без використання preconnect, рівне 2,6 с. Внизу - з використанням preconnect, час завантаження одно 2,1 с.
Мал. 10. Порівняння часу завантаження DNS / TCP / TLS з використанням preconnect і без нього
У цьому конкретному сценарії preconnect видаляє три кругові затримки з критичного шляху і скорочує час очікування більше ніж на півсекунди.
Мал. 11. Приклад використання preconnect зі шрифтами Google
Можливо, тепер розуміння того, що є preload, prefetch і preconnect, стало трохи краще. А також стратегії їх використання для прискорення доставки контенту. Буде приємно, якщо використання директиви preload зросте в найближчі місяці, а веб-розробники візьмуть її на озброєння.