你了解可显著提升加载性能的 103 Early Hints 状态码吗？

山月

发布于 2023-01-10 11:01:45

9460

发布于 2023-01-10 11:01:45

文章被收录于专栏：服务器运维笔记

103 状态码目前还是一个实验性的状态码，用于做一些 preconnect/preload 网络的优化优化。

preconnect/preload

在浏览器加载文档（即 HTML 页面）时，可在 HTML 页面的 <link> 标签中，指明对某条资源的优化提示，被称为 Resource Hints。一般有以下几种：

preconnect：在向服务器请求 HTTP 资源时，首先要建立连接，而目前对于 js/css 大部分在 CDN 的第三方域名，在 HTML 页面指定 preconnect 可提前建立对该链接的连接。
preload：预加载 Javascript/CSS/Font 等资源，提高资源加载的优先级，详见 resource priority。比如某些字体文件，可提前加载，避免出现页面已加载完成，而字体无法查看的问题。

在 Chrome 浏览器控制台，可查看每条资源的优先级。

<link rel="preconnect" href="https://example.com" />

<link rel="preload" href="style.css" as="style" />
<link rel="stylesheet" href="style.css" />

103 Eayly Hints

而通过 HTML 的 link 标签提前声明对某些资源的优化提示，需要待 HTML 资源加载进行解析时，才能够获得提示。

「而 103 Early Hints，可以更早地声明对某些资源的提示，首先发送 103 状态码的临时响应，再最终响应 HTML 文档内容以及对应的状态码。」显而易见，比在 HTML 中声明 Hints，将拥有更好的效果。

PS: 以上图片来自 Faster page loads using server think-time with Early Hints

响应报文如下所示，通过 link 响应头，完成以前 link 标签所做的事情。

103 Early Hint
Link: </image.png>; rel=preload; as=image

通过 103 优化后，网站的性能将得到显著提示，FCP/LCP 数据将有大约 10% 的提示。

PS: 数据以及图片来自 Early Hints update: How Cloudflare, Google, and Shopify are working together to build a faster Internet for everyone

示例

目前，仅有 1.6% 的网站使用了 103 状态码提升性能，数据详见 2022 年 HTTP 年鉴之 HTTP 篇。而使用 Preload 提升性能的网站，占到了 25%，数据详见 2022 年 HTTP 年鉴之 HTTP 篇。

如果能够将 HTML 中 link 标签优化为 103 Early Hints，将会有不错的性能提升。

以下是一家俄罗斯电商平台的 103 示例：

$ curl -I 'https://www.ozon.ru/' \ 
  -H 'sec-ch-ua: "Google Chrome";v="107", "Chromium";v="107", "Not=A?Brand";v="24"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: document' \
  -H 'sec-fetch-mode: navigate' \
  -H 'sec-fetch-site: same-origin' \
  -H 'sec-fetch-user: ?1' \
  --compressed
HTTP/2 103 
link: <//io.ozone.ru>; rel=preconnect, <//v.ozone.ru>; rel=preconnect, <//cdn1.ozone.ru>; rel=preconnect, <//cdn2.ozone.ru>; rel=preconnect, <//cdn0.ozone.ru>; rel=preconnect, <//cdn2.ozone.ru/s3/frontend-ozon-ru-public/fonts/GT-Eesti-Pro-Display-Bold.woff2>; as=font; crossorigin=anonymous; rel=preload, <//cdn2.ozone.ru/s3/frontend-ozon-ru-public/fonts/GT-Eesti-Pro-Display-Medium.woff2>; as=font; crossorigin=anonymous; rel=preload, <//cdn2.ozone.ru/s3/frontend-ozon-ru-public/fonts/GT-Eesti-Pro-Display-Medium-Italic.woff2>; as=font; crossorigin=anonymous; rel=preload, <//cdn2.ozone.ru/s3/frontend-ozon-ru-public/fonts/GT-Eesti-Pro-Display-Regular.woff2>; as=font; crossorigin=anonymous; rel=preload

HTTP/2 403 
date: Sat, 05 Nov 2022 04:14:25 GMT
content-type: text/html; charset=UTF-8
referrer-policy: same-origin
permissions-policy: accelerometer=(),autoplay=(),camera=(),clipboard-read=(),clipboard-write=(),fullscreen=(),geolocation=(),gyroscope=(),hid=(),interest-cohort=(),magnetometer=(),microphone=(),payment=(),publickey-credentials-get=(),screen-wake-lock=(),serial=(),sync-xhr=(),usb=()
cache-control: private, max-age=0, no-store, no-cache, must-revalidate, post-check=0, pre-check=0
vary: Accept-Encoding
server: cloudflare
cf-ray: 7652c3301863cec9-SJC
alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400