Signed Exchange (SXG)

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

Katie Hempenius
Katie Hempenius
X
Devin Mullins
Devin Mullins
X GitHub

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

บทความนี้จะกล่าวถึงภาพรวมที่ครอบคลุมเกี่ยวกับ SXG: ลักษณะการทำงาน กรณีการใช้งาน และเครื่องมือ

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

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

ภาพรวม

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

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

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

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

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

รูปแบบ SXG

SXG อยู่ในไฟล์ที่เข้ารหัสแบบไบนารีซึ่งมี คอมโพเนนต์หลักอันได้แก่ การแลกเปลี่ยน 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 spec

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

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

แพ็กเกจเว็บ

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

ความสัมพันธ์ระหว่าง SXG และ Web Bundle เป็นประเด็นที่ทำให้เกิดความสับสนทั่วไป SXG และ Web Bundle เป็นเทคโนโลยี 2 แบบที่แตกต่างกัน อื่นๆ - Web Bundle ใช้ได้กับทั้ง 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 Exchange แล้ว สำหรับกรณีศึกษา เราจะดูว่าการใช้ Signed Exchange ได้ช่วยให้ RebelMouse ซึ่งเป็นระบบจัดการเนื้อหา (CMS) ที่โดดเด่นช่วยปรับปรุงลูกค้าของตนได้อย่างไร เมตริกประสิทธิภาพและธุรกิจ

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

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

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

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

AMP

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

คำแนะนำนี้มีตัวอย่างของ Apache และ nginx

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

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

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

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

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

บทสรุป

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

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