Signed Exchange (SXG)

SXG คือกลไกการนำส่งที่ช่วยให้ตรวจสอบสิทธิ์แหล่งที่มาของทรัพยากรได้โดยไม่ขึ้นอยู่กับวิธีการนำส่ง

Katie Hempenius
Katie Hempenius
X
Devin Mullins
Devin Mullins
X GitHub

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

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

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

เบราว์เซอร์ที่พัฒนาบน Chromium รองรับ SXG (ตั้งแต่เวอร์ชัน Chrome 73, Edge 79 และ Opera 64)

ภาพรวม

SXG ใช้แคชเพื่อดึงข้อมูลเนื้อหาล่วงหน้าและแสดงเนื้อหาที่แหล่งที่มาเข้ารหัสไว้เป็น Use Case หลัก ซึ่งจะช่วยเพิ่มความเร็วในการไปยังส่วนต่างๆ ข้ามแหล่งที่มาจากเว็บไซต์อ้างอิง และช่วยให้มั่นใจว่าหน้าเว็บจะไม่มีการแก้ไขและมีการระบุแหล่งที่มาอย่างถูกต้อง ระบบจะซ่อนข้อมูลที่อาจระบุตัวตนได้จนกว่าผู้ใช้จะไปยังเว็บไซต์หนึ่งๆ เพื่อปกป้องความเป็นส่วนตัวของผู้ใช้ 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 A 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 Exchanges จะช่วยเพิ่มประสิทธิภาพหน้าเว็บและส่งผลต่อ Core Web Vitals ของเว็บไซต์ โดยเฉพาะ Largest Contentful Paint (LCP) Google Search เป็นผู้เริ่มใช้งานตั้งแต่เนิ่นๆ และใช้ SXG เพื่อให้ผู้ใช้ได้รับประสบการณ์การโหลดหน้าเว็บที่เร็วขึ้นสำหรับหน้าเว็บที่โหลดจากหน้าผลการค้นหา

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

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

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

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

แบรนด์และเว็บไซต์หลายแห่งทั่วโลกได้รับประโยชน์จาก 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 ในคอลัมน์ประเภท

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

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

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

เครื่องมือ

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

ใบรับรอง

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

เครื่องมือ SXG สำหรับแพลตฟอร์มที่เฉพาะเจาะจง

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

เครื่องมือ 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 และตัวกรอง SXG ของ Envoy

  • 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

Update cache 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 ได้ในขณะที่ยังคงมีการระบุแหล่งที่มาของผู้เผยแพร่โฆษณาอย่างเต็มรูปแบบ

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