Signed Exchange (SXG)

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

Katie Hempenius
Katie Hempenius
X
Devin Mullins
Devin Mullins
X GitHub

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

บทความนี้จะแสดงภาพรวมที่ครอบคลุมของ SXG ซึ่งได้แก่ วิธีการทำงาน กรณีการใช้งาน และเครื่องมือ

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

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

ภาพรวม

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

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

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

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

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

รูปแบบ SXG

SXG จะรวมอยู่ในไฟล์ที่เข้ารหัสแบบไบนารีซึ่งมีองค์ประกอบหลัก 2 อย่าง ได้แก่ HTTP Exchange และลายเซ็นที่ครอบคลุม Exchange การแลกเปลี่ยน 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 แบบไดนามิก

Web Packaging

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

ความสัมพันธ์ระหว่าง 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 จะทำการ Crawl และแคช SXG เมื่อพร้อมใช้งาน และดึงข้อมูล SXG ที่ผู้ใช้มีแนวโน้มจะเข้าชมล่วงหน้า เช่น หน้าที่สอดคล้องกับผลการค้นหาแรก

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

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

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

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

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

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

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

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
แท็บแสดงตัวอย่างในเครื่องมือสำหรับนักพัฒนาเว็บ

เครื่องมือ

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

ใบรับรอง

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

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

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

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

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

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

เซิร์ฟเวอร์ Web Packager

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

Web Packager CLI

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 ขั้นต่ำที่ข้อกำหนดของแพ็กเกจเว็บมีให้เป็นการใช้งานอ้างอิงของการสร้าง 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 ออกจากแคชก่อนที่จะหมดอายุเนื่องจาก 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 สามารถแสดงต่อผู้ใช้ทั้งที่มีและไม่มีคุกกี้ในเว็บไซต์ของคุณ ดังนั้นจึงมีโอกาสน้อยลงที่หน้าเว็บจะต้องดึงข้อมูลอีกครั้งหลังจากการไปยังส่วนต่างๆ

การปรับปรุง Page Speed

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

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

บทสรุป

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

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