Signed Exchange (SXG)

SXG เป็นกลไกการนำส่งที่ทำให้สามารถตรวจสอบสิทธิ์ต้นทางของทรัพยากรอย่างอิสระจากวิธีการนำส่งทรัพยากรได้

Katie Hempenius
Katie Hempenius
X
Devin Mullins
Devin Mullins
X GitHub

Signed Exchange (SXG) เป็นกลไกการนำส่งที่ทำให้สามารถตรวจสอบสิทธิ์ต้นทางของทรัพยากรแบบอิสระจากวิธีการนำส่งทรัพยากรได้ การใช้ SXG ช่วยปรับปรุง Largest Contentful Paint (LCP) ได้ด้วยการเปิดใช้การดึงข้อมูลล่วงหน้าข้ามแหล่งที่มาเพื่อรักษาความเป็นส่วนตัว นอกจากนี้ การแยกนี้ยังช่วยเพิ่มกรณีการใช้งานที่หลากหลาย เช่น ประสบการณ์การใช้งานอินเทอร์เน็ตแบบออฟไลน์และการแสดงผลจากแคชของบุคคลที่สาม

บทความนี้จะให้ภาพรวมที่ครอบคลุมเกี่ยวกับ SXG ซึ่งรวมถึงวิธีการทํางาน กรณีการใช้งาน และเครื่องมือ

ความเข้ากันได้กับเบราว์เซอร์

SXG คือรองรับเบราว์เซอร์แบบ Chromium (เริ่มตั้งแต่เวอร์ชัน Chrome 73, Edge 79 และ Opera 64)

ภาพรวม

SXG เป็นกรณีการใช้งานหลักที่ใช้แคชเพื่อดึงข้อมูลล่วงหน้าและแสดงเนื้อหาที่มีการลงนามแบบเข้ารหัสโดยต้นทาง ซึ่งจะช่วยเพิ่มความเร็วในการไปยังส่วนต่างๆ ข้ามแหล่งที่มาจากเว็บไซต์อ้างอิง และช่วยให้มั่นใจว่าหน้าเว็บจะไม่มีการแก้ไขและมีการระบุแหล่งที่มาอย่างถูกต้อง ระบบจะซ่อนข้อมูลที่อาจระบุตัวตนได้จนกว่าผู้ใช้จะไปยังเว็บไซต์หนึ่งๆ เพื่อปกป้องความเป็นส่วนตัวของผู้ใช้ Google Search เป็นผู้ใช้กลุ่มแรกๆ ที่ใช้ประโยชน์จากความสามารถในการดึงข้อมูลล่วงหน้าของ SXG และสำหรับเว็บไซต์ที่รับการเข้าชมส่วนใหญ่จาก Google Search นั้น SXG อาจเป็นเครื่องมือสําคัญในการโหลดหน้าเว็บให้ผู้ใช้ได้เร็วขึ้น ในอนาคต เราหวังว่าผลกระทบนี้จะขยายไปสู่ผู้บอกต่อเพิ่มเติม

วิธีการทำงาน

เว็บไซต์จะเซ็นชื่อคู่คําขอ/การตอบกลับ ("HTTP Exchange") ในลักษณะที่ทําให้เบราว์เซอร์ยืนยันแหล่งที่มาและความสมบูรณ์ของเนื้อหาได้โดยไม่ขึ้นอยู่กับวิธีเผยแพร่เนื้อหา ดังนั้น เบราว์เซอร์จะแสดง URL ของเว็บไซต์ต้นทางในแถบที่อยู่แทน URL ของเซิร์ฟเวอร์ที่แสดงเนื้อหาได้

แผนภาพที่อธิบายวิธีการทำงานของ Signed Exchange เบราว์เซอร์สื่อสารกับแคชซึ่งสื่อสารกับเว็บไซต์ปลายทาง

ที่ผ่านมา วิธีเดียวที่เว็บไซต์จะใช้บุคคลที่สามเพื่อเผยแพร่เนื้อหาของตนไปพร้อมๆ กับการระบุแหล่งที่มาได้คือต้องแชร์ใบรับรอง SSL กับผู้ให้บริการ ซึ่งมีข้อเสียด้านความปลอดภัย และยังไม่ช่วยให้เนื้อหาใช้งานได้อย่างแท้จริง

รูปแบบ SXG

SXG ได้รับการบรรจุไว้ในไฟล์ที่เข้ารหัสไบนารีซึ่งมีคอมโพเนนต์หลัก 2 อย่าง ได้แก่ การแลกเปลี่ยน HTTP และลายเซ็นที่ครอบคลุมการแลกเปลี่ยน การแลกเปลี่ยน HTTP ประกอบด้วย URL คำขอ ข้อมูลการเจรจาต่อรองเนื้อหา และการตอบกลับ HTTP

นี่คือตัวอย่างไฟล์ SXG ที่ถอดรหัสแล้ว

format version: 1b3
request:
  method: GET
  uri: https://example.org/
  headers:
response:
  status: 200
  headers:
    Cache-Control: max-age=604800
    Digest: mi-sha256-03=kcwVP6aOwYmA/j9JbUU0GbuiZdnjaBVB/1ag6miNUMY=
    Expires: Mon, 24 Aug 2020 16:08:24 GMT
    Content-Type: text/html; charset=UTF-8
    Content-Encoding: mi-sha256-03
    Date: Mon, 17 Aug 2020 16:08:24 GMT
    Vary: Accept-Encoding
signature:
    label;cert-sha256=<em>ViFgi0WfQ+NotPJf8PBo2T5dEuZ13NdZefPybXq/HhE=</em>;
    cert-url=&quot;https://test.web.app/ViFgi0WfQ-NotPJf8PBo2T5dEuZ13NdZefPybXq_HhE&quot;;
    date=1597680503;expires=1598285303;integrity=&quot;digest/mi-sha256-03&quot;;sig=<em>MEUCIQD5VqojZ1ujXXQaBt1CPKgJxuJTvFlIGLgkyNkC6d7LdAIgQUQ8lC4eaoxBjcVNKLrbS9kRMoCHKG67MweqNXy6wJg=</em>;
    validity-url=&quot;https://example.org/webpkg/validity&quot;
header integrity: sha256-Gl9bFHnNvHppKsv+bFEZwlYbbJ4vyf4MnaMMvTitTGQ=</p>

<p>The exchange has a valid signature.
payload [1256 bytes]:</p>
<pre class="prettyprint"><code>&lt;title&gt;SXG example&lt;/title&gt;
&lt;meta charset=&#34;utf-8&#34;&gt;
&lt;meta http-equiv=&#34;Content-type&#34; content=&#34;text/html; charset=utf-8&#34;&gt;
&lt;style type=&#34;text/css&#34;&gt;
body {
    background-color: #f0f0f2;
    margin: 0;
    padding: 0;
}
&lt;/style&gt;
</code></pre>
<div>
    <h1>Hello</h1>
</div>

<p>

พารามิเตอร์ expires ในลายเซ็นระบุวันที่หมดอายุของ SXG SXG อาจใช้ได้นานสุด 7 วัน ดูข้อมูลเพิ่มเติมเกี่ยวกับส่วนหัวลายเซ็นได้ในข้อกำหนดของ Signed HTTP Exchange

รองรับการปรับเปลี่ยนในแบบของคุณฝั่งเซิร์ฟเวอร์

SXG ที่มีส่วนหัว Vary: Cookie จะแสดงต่อผู้ใช้ที่ไม่มีคุกกี้สําหรับ URL คำขอที่มีลายเซ็นเท่านั้น หากเว็บไซต์นำเสนอ HTML ที่แตกต่างกันแก่ผู้ใช้ที่ลงชื่อเข้าสู่ระบบ คุณจะใช้ฟีเจอร์นี้เพื่อใช้ประโยชน์จาก SXG ได้โดยไม่ต้องเปลี่ยนการใช้งาน ดูรายละเอียดเกี่ยวกับการปรับตามโปรไฟล์ของผู้ใช้ฝั่งเซิร์ฟเวอร์ด้วย SXG แบบไดนามิก

การจัดแพ็กเกจเว็บ

SXG เป็นส่วนหนึ่งของกลุ่มข้อเสนอข้อกำหนดการจัดแพ็กเกจเว็บที่กว้างกว่า นอกจาก SXG แล้ว คอมโพเนนต์หลักอีกอย่างหนึ่งของสเปคการแพ็กเกจเว็บคือกลุ่มเว็บ ("การแลกเปลี่ยน HTTP ที่รวมไว้ด้วยกัน") ชุดของเว็บคือคอลเล็กชันทรัพยากร HTTP และข้อมูลเมตาที่จําเป็นสําหรับตีความชุด

ความสัมพันธ์ระหว่าง SXG กับ Web Bundle เป็นประเด็นที่ทําให้สับสนได้ทั่วไป SXG และ Web Bundle เป็นเทคโนโลยีที่แตกต่างกัน 2 รายการที่ไม่ขึ้นอยู่กับกันและกัน Web Bundle สามารถใช้กับทั้ง Signed Exchange และ Unsigned Exchange ได้ เป้าหมายร่วมกันที่ทั้ง SXG และ Web Bundle มุ่งส่งเสริมคือการสร้างรูปแบบ "การสร้างแพ็กเกจเว็บไซต์" ที่อนุญาตให้แชร์เว็บไซต์ทั้งเว็บไซต์สำหรับการบริโภคแบบออฟไลน์

การเพิ่มความเร็วในการโหลดหน้าเว็บด้วย Signed Exchange

การเปิดใช้ Signed Exchange จะช่วยเร่งประสิทธิภาพของหน้าเว็บและส่งผลต่อ Core Web Vitals ของเว็บไซต์ โดยเฉพาะใน Largest Contentful Paint (LCP) Google Search เป็นผู้เริ่มใช้งานตั้งแต่เนิ่นๆ และใช้ SXG เพื่อให้ผู้ใช้ได้รับประสบการณ์การโหลดหน้าเว็บที่เร็วขึ้นสำหรับหน้าเว็บที่โหลดจากหน้าผลการค้นหา

Google Search จะรวบรวมข้อมูลและแคช SXG เมื่อมีให้ใช้งาน และดึงข้อมูล SXG ที่ผู้ใช้มีแนวโน้มที่จะเข้าชมล่วงหน้า เช่น หน้าเว็บที่เกี่ยวข้องกับผลการค้นหารายการแรก

SXG จะทำงานได้ดีที่สุดเมื่อใช้ร่วมกับการเพิ่มประสิทธิภาพอื่นๆ เช่น การใช้ CDN และการลดทรัพยากรย่อยที่บล็อกการแสดงผล หลังจากใช้งานแล้ว ให้ทําตามคําแนะนําเหล่านี้เพื่อรับประโยชน์สูงสุดจาก LCP จากการอ่านล่วงหน้า SXG ในหลายกรณี การเพิ่มประสิทธิภาพดังกล่าวอาจส่งผลให้หน้าเว็บจาก Google Search โหลดเกือบจะทันที

ผลกระทบของ Signed Exchange

จากการทดสอบที่ผ่านมา เราพบว่าการดึงข้อมูลล่วงหน้าที่เปิดใช้ SXG ลดลงเฉลี่ย 300 มิลลิวินาทีถึง 400 มิลลิวินาที ซึ่งช่วยให้เว็บไซต์สร้างความประทับใจแรกที่ดียิ่งขึ้นแก่ผู้ใช้และมักส่งผลเชิงบวกต่อเมตริกทางธุรกิจ

แบรนด์และเว็บไซต์หลายแห่งทั่วโลกได้รับประโยชน์จาก Signed Exchanges แล้ว มาดูกรณีศึกษาที่การใช้ Signed Exchanges ช่วยให้ RebelMouse ซึ่งเป็นระบบจัดการเนื้อหา (CMS) ที่โดดเด่น ปรับปรุงประสิทธิภาพและเมตริกทางธุรกิจของลูกค้าได้อย่างไร

  • Narcity ปรับปรุง LCP ได้ 41%
  • Paper Magazine มีเซสชันต่อผู้ใช้เพิ่มขึ้น 27%
  • บล็อก MLT ลดเวลาในการโหลดหน้าเว็บลง 21%

Cloudflare พบว่า SXG ได้ปรับปรุง TTFB สำหรับเว็บไซต์จำนวน 98% ที่ทดสอบ และเพิ่ม LCP สำหรับ 85% ของเว็บไซต์โดยมีค่ามัธยฐานของการโหลดหน้าเว็บที่มีสิทธิ์ SXG เพิ่มขึ้นกว่า 20%

การจัดทำดัชนี

Google Search ไม่ได้จัดอันดับหรือจัดทำดัชนีการแสดงผล SXG และที่ไม่ใช่ SXG ของหน้าเว็บแตกต่างกัน ท้ายที่สุดแล้ว SXG คือกลไกการนำส่ง ไม่ได้เปลี่ยนแปลงเนื้อหาพื้นฐาน

AMP

คุณส่งเนื้อหา AMP โดยใช้ SXG ได้ SXG ช่วยให้สามารถดึงข้อมูลเนื้อหา AMP ล่วงหน้าและแสดงโดยใช้ Canonical URL แทน URL ของ AMP ได้ AMP มีเครื่องมือแยกต่างหากสำหรับสร้าง SXG ดูวิธีแสดง AMP โดยใช้ Signed Exchange ได้ที่ amp.dev

การแก้ไขข้อบกพร่อง SXG ด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

หากต้องการดู SXG ด้วยตนเอง ให้ใช้เบราว์เซอร์ Chromium, เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์, เปิดแผงเครือข่าย และไปที่หน้าการค้นหาตัวอย่างนี้ คุณจะระบุ Signed Exchange ได้โดยมองหา signed-exchange ในคอลัมน์ประเภท

ภาพหน้าจอแสดงคำขอ SXG ภายในแผง &quot;เครือข่าย&quot; ในเครื่องมือสำหรับนักพัฒนาเว็บ
แผงเครือข่ายในเครื่องมือสำหรับนักพัฒนาเว็บ

แท็บแสดงตัวอย่างจะแสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาของ SXG

ภาพหน้าจอของแท็บ &quot;แสดงตัวอย่าง&quot; สำหรับ SXG
แท็บแสดงตัวอย่างใน DevTools

เครื่องมือ

การติดตั้งใช้งาน SXG ประกอบด้วยการสร้าง SXG ที่สอดคล้องกับ URL หนึ่งๆ แล้วแสดง SXG นั้นต่อผู้ขอ (โดยปกติคือ Crawler)

ใบรับรอง

หากต้องการสร้าง SXG คุณจะต้องมีใบรับรองที่สามารถลงนามใน SXG แม้ว่าเครื่องมือบางรายการจะรับใบรับรองเหล่านี้โดยอัตโนมัติก็ตาม หน้านี้แสดงรายชื่อผู้ออกใบรับรองที่ออกใบรับรองประเภทนี้ได้ คุณขอใบรับรองจากผู้ออกใบรับรองของ Google โดยอัตโนมัติได้โดยใช้ไคลเอ็นต์ ACME ใดก็ได้ เซิร์ฟเวอร์ Web Packager มีไคลเอ็นต์ ACME ในตัว และ sxg-rs จะมีในเร็วๆ นี้

เครื่องมือ SXG เฉพาะแพลตฟอร์ม

เครื่องมือเหล่านี้รองรับ Technology Stack ที่เฉพาะเจาะจง หากคุณใช้แพลตฟอร์มที่เครื่องมือใดเครื่องมือหนึ่งรองรับอยู่แล้ว คุณอาจพบว่าการตั้งค่าง่ายกว่าเครื่องมืออเนกประสงค์

เครื่องมือ SXG อเนกประสงค์

เซิร์ฟเวอร์ HTTP ของ sxg-rs

sxg-rs http_server จะทําหน้าที่เป็นพร็อกซีย้อนกลับสําหรับแสดง SXG สําหรับคําขอจาก Crawler ของ SXG http_server จะลงนามในการตอบกลับจากแบ็กเอนด์และตอบกลับด้วย SXG ดูวิธีการติดตั้งได้ที่ไฟล์ README

เซิร์ฟเวอร์เครื่องมือแพ็กเกจเว็บ

เซิร์ฟเวอร์ Web Packager webpkgserver เป็นทางเลือกแทน sxg-rs http_server ที่เขียนด้วย Go ดูวิธีการตั้งค่าเซิร์ฟเวอร์ Web Packager ได้ที่วิธีตั้งค่า Signed Exchange โดยใช้ Web Packager

CLI ของ Web Packager

Web Packager CLI สร้าง SXG ที่สอดคล้องกับ URL ที่กำหนด

webpackager \
    --private\_key=private.key \
    --cert\_url=https://example.com/certificate.cbor \
    --url=https://example.com

เมื่อสร้างไฟล์ SXG แล้ว ให้อัปโหลดไฟล์ไปยังเซิร์ฟเวอร์และแสดงไฟล์ด้วยประเภท MIME application/signed-exchange;v=b3 นอกจากนี้ คุณจะต้องแสดงใบรับรอง SXG เป็น application/cert-chain+cbor

ไลบรารี SXG

คุณสามารถใช้ไลบรารีเหล่านี้เพื่อสร้างเครื่องมือสร้าง SXG ของคุณเองได้

  • sxg_rs เป็นไลบรารี Rust สำหรับการสร้าง SXG ซึ่งเป็นคลัง SXG ที่มีคุณสมบัติมากที่สุดและใช้เป็นหลักสําหรับเครื่องมือ cloudflare_worker และ fastly_compute

  • libsxg เป็นไลบรารี C ขั้นต่ำสำหรับการสร้าง SXG โดยใช้เป็นพื้นฐานสำหรับโมดูล NGINX SXG และตัวกรอง Envoy SXG

  • go/signed-exchange เป็นไลบรารี Go ขั้นต่ำที่ข้อกำหนดของ Webpackage ระบุไว้เพื่อการใช้งานอ้างอิงในการสร้าง SXG ซึ่งจะใช้เป็นพื้นฐานสำหรับเครื่องมือ CLI อ้างอิง, gen-signedexchange และเครื่องมือ Web Packager ที่มีฟีเจอร์มากขึ้น

การเจรจาต่อรองเนื้อหา

เซิร์ฟเวอร์ควรแสดง SXG เมื่อส่วนหัว Accept ระบุว่าค่า q สำหรับ application/signed-exchange มากกว่าหรือเท่ากับค่า q สำหรับ text/html ในทางปฏิบัติ หมายความว่าเซิร์ฟเวอร์ต้นทางจะแสดง SXG แก่ Crawler แต่จะไม่แสดงต่อเบราว์เซอร์ เครื่องมือส่วนใหญ่ข้างต้นจะดำเนินการนี้โดยค่าเริ่มต้น แต่สำหรับเครื่องมืออื่นๆ คุณสามารถใช้นิพจน์ทั่วไปต่อไปนี้เพื่อจับคู่ส่วนหัว Accept ของคำขอที่ควรแสดงเป็น SXG ได้ http Accept: /(^|,)\s\*application\/signed-exchange\s\*;\s\*v=[[:alnum:]\_-]+\s\*(,|$)/

คําแนะนํานี้มีตัวอย่างสําหรับ Apache และ nginx

อัปเดต API ของแคช

แคช SXG ของ Google มี API ที่เจ้าของเว็บไซต์สามารถใช้เพื่อนำ SXG ออกจากแคชก่อนที่ SXG จะหมดอายุเนื่องจาก Cache-Control: max-age ดูรายละเอียดได้ที่ข้อมูลอ้างอิงเกี่ยวกับ API อัปเดตแคช

การลิงก์กับ SXG

ทุกเว็บไซต์สามารถแคช แสดง และดึงข้อมูล SXG ของหน้าเว็บที่ลิงก์ไป (หากมี) ได้โดยใช้แท็ก และ : html <a href="https://example.com/article.html.sxg"> <link rel="prefetch" as="document" href="https://example.com/article.html.sxg"> บทความนี้จะแสดงวิธีใช้ nginx เพื่อกระจาย SXG

ข้อได้เปรียบที่ไม่ซ้ำใคร

SXG เป็นหนึ่งในเทคโนโลยีหลายอย่างที่ใช้สำหรับการดึงข้อมูลล่วงหน้าข้ามแหล่งที่มา เมื่อตัดสินใจเลือกเทคโนโลยีที่จะใช้ คุณอาจต้องเลือกระหว่างการเพิ่มประสิทธิภาพในด้านต่างๆ ส่วนต่อไปนี้แสดงให้เห็นถึงค่าเฉพาะบางอย่างที่ SXG มีให้ในขอบเขตของโซลูชันที่เป็นไปได้ ปัจจัยเหล่านี้อาจเปลี่ยนแปลงเมื่อเวลาผ่านไปเนื่องจากโซลูชันที่มีให้ใช้งานมีการเปลี่ยนแปลง

มีการขอให้แสดงน้อยลง

เมื่อใช้การโหลดล่วงหน้าข้ามเว็บไซต์ เซิร์ฟเวอร์อาจต้องให้บริการคำขอเพิ่มเติม ซึ่งจะสอดคล้องกับกรณีที่มีการดึงข้อมูลหน้าเว็บล่วงหน้า แต่ผู้ใช้ไม่ได้เข้าชมหน้าเว็บหรือจำนวนไบต์ที่ดึงข้อมูลล่วงหน้าแสดงต่อผู้ใช้ไม่ได้ สำหรับ SXG คุณสามารถลดคำขอเพิ่มเติมที่ไม่ได้ใช้เหล่านี้ได้อย่างมาก

  • ระบบจะแคช SXG และอาจส่งไปยังผู้ใช้จนกว่าจะหมดอายุ ดังนั้นการดึงข้อมูลล่วงหน้าจำนวนมากจึงได้รับการจัดการโดยเซิร์ฟเวอร์แคชเพียงอย่างเดียวเท่านั้น
  • SXG สามารถแสดงต่อผู้ใช้ทั้งที่มีและไม่มีคุกกี้ในเว็บไซต์ ดังนั้น ระบบจึงต้องดึงข้อมูลหน้าเว็บอีกครั้งหลังจากการไปยังส่วนต่างๆ น้อยลง

การปรับปรุงความเร็วหน้าเว็บ

คุณอาจเห็นการปรับปรุงความเร็วหน้าเว็บเพิ่มเติมเนื่องจากแพลตฟอร์มและความสามารถของการดึงข้อมูลล่วงหน้าที่แพลตฟอร์มเหล่านี้รองรับในปัจจุบัน

  • SXG สามารถแสดงแก่ผู้ใช้ที่มีคุกกี้สำหรับเว็บไซต์ของคุณ
  • นอกจากนี้ SXG จะยังโหลดทรัพยากรย่อยล่วงหน้าสําหรับหน้าเว็บ เช่น JavaScript, CSS, แบบอักษร และรูปภาพ เมื่อระบุโดยใช้ส่วนหัว Link
  • ในอนาคตอันใกล้นี้ การดึงข้อมูล SXG ล่วงหน้าจาก Google Search จะพร้อมใช้งานสำหรับผลการค้นหาประเภทอื่นๆ มากขึ้น

บทสรุป

Signed Exchanges เป็นกลไกการนำส่งที่ช่วยให้ยืนยันแหล่งที่มาและความถูกต้องของทรัพยากรได้โดยไม่ขึ้นอยู่กับวิธีนำส่งทรัพยากร ด้วยเหตุนี้ บุคคลที่สามจึงสามารถเผยแพร่ SXG ได้ในขณะที่ยังคงมีการระบุแหล่งที่มาของผู้เผยแพร่โฆษณาอย่างเต็มรูปแบบ

อ่านเพิ่มเติม