Signed HTTP Exchange (SXG)

SXG adalah mekanisme pengiriman yang memungkinkan autentikasi asal resource, terlepas dari cara pengirimannya.

Katie Hempenius
Katie Hempenius
X
Devin Mullins
Devin Mullins
X GitHub

Signed HTTP Exchange (SXG) adalah mekanisme pengiriman yang memungkinkan autentikasi asal resource secara independen dari cara pengirimannya. Penerapan SXG dapat meningkatkan Largest Contentful Paint (LCP) dengan mengaktifkan pengambilan data di awal lintas origin yang menjaga privasi. Selain itu, pemisahan ini mendukung berbagai kasus penggunaan seperti pengalaman internet offline dan penayangan dari cache pihak ketiga.

Artikel ini memberikan ringkasan komprehensif tentang SXG: cara kerjanya, kasus penggunaan, dan alatnya.

Kompatibilitas browser

SXG didukung oleh browser berbasis Chromium (mulai versi: Chrome 73, Edge 79, dan Opera 64).

Ringkasan

Sebagai kasus penggunaan utamanya, SXG menggunakan cache untuk pengambilan data di awal dan menyajikan konten yang telah ditandatangani secara kriptografis oleh origin. Hal ini membantu mempercepat navigasi lintas origin dari situs perujuk sekaligus memastikan bahwa halaman tetap tidak diubah dan diatribusikan dengan benar ke originnya. Semua informasi identitas pribadi disembunyikan hingga pengguna membuka situs, sehingga melindungi privasi pengguna. Google Penelusuran adalah pengguna awal kemampuan pengambilan data SXG dan untuk situs yang menerima sebagian besar traffic-nya dari Google Penelusuran, SXG dapat menjadi alat penting untuk memberikan pemuatan halaman yang lebih cepat kepada pengguna. Seiring waktu, kami berharap dampak ini akan meluas ke perujuk lainnya.

Cara kerjanya

Situs menandatangani pasangan permintaan/respons ("HTTP exchange") dengan cara yang memungkinkan browser memverifikasi origin dan integritas konten secara independen dari cara konten didistribusikan. Hasilnya, browser dapat menampilkan URL situs asal di kolom URL, bukan URL server yang mengirimkan konten.

Diagram yang menjelaskan cara kerja Signed HTTP Exchange. Browser berkomunikasi dengan cache yang berkomunikasi dengan situs tujuan

Sebelumnya, satu-satunya cara bagi situs untuk menggunakan pihak ketiga guna mendistribusikan kontennya sekaligus mempertahankan atribusi adalah dengan membagikan sertifikat SSL-nya kepada distributor. Hal ini memiliki kelemahan keamanan; selain itu, hal ini masih jauh dari membuat konten benar-benar portabel.

Format SXG

SXG dienkapsulasi dalam file berenkode biner yang memiliki dua komponen utama: pertukaran HTTP dan tanda tangan yang mencakup pertukaran tersebut. Pertukaran HTTP terdiri dari URL permintaan, informasi negosiasi konten, dan respons HTTP.

Berikut adalah contoh file SXG yang didekode.

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>

Parameter expires dalam tanda tangan menunjukkan tanggal habis masa berlaku SXG. SXG dapat berlaku maksimal selama 7 hari. Temukan informasi selengkapnya tentang header tanda tangan di Spesifikasi Signed HTTP Exchange.

Dukungan untuk personalisasi sisi server

SXG yang berisi header Vary: Cookie hanya akan ditampilkan kepada pengguna yang tidak memiliki cookie untuk URL permintaan bertanda tangan. Jika situs Anda menampilkan HTML yang berbeda kepada pengguna yang login, Anda dapat menggunakan fitur ini untuk memanfaatkan SXG tanpa mengubah pengalaman tersebut. Lihat detail tentang personalisasi sisi server dengan SXG Dinamis.

Web Packaging

SXG adalah bagian dari kelompok proposal spesifikasi Web Packaging yang lebih luas. Selain SXG, komponen utama lainnya dari spesifikasi Web Packaging adalah Web Bundle ("pertukaran HTTP yang dipaketkan"). Paket Web adalah kumpulan resource HTTP dan metadata yang diperlukan untuk menafsirkan paket.

Hubungan antara SXG dan Paket Web sering kali membingungkan. SXG dan Paket Web adalah dua teknologi berbeda yang tidak saling bergantung—Paket Web dapat digunakan dengan Signed Exchange dan Unsigned Exchange. Tujuan umum yang dikembangkan oleh SXG dan Paket Web adalah pembuatan format "pengemasan web" yang memungkinkan situs dibagikan secara keseluruhan untuk konsumsi offline.

Mempercepat pemuatan halaman dengan Signed HTTP Exchange

Mengaktifkan Signed Exchange dapat membantu mempercepat performa halaman web sehingga memengaruhi Core Web Vitals situs Anda, khususnya Largest Contentful Paint (LCP). Sebagai pengguna awal, Google Penelusuran menggunakan SXG untuk memberikan pengalaman pemuatan halaman yang lebih cepat kepada pengguna untuk halaman yang dimuat dari halaman hasil penelusuran.

Google Penelusuran meng-crawl dan meng-cache SXG jika tersedia, serta mengambil data SXG yang kemungkinan akan dikunjungi pengguna—misalnya, halaman yang sesuai dengan hasil penelusuran pertama.

SXG berfungsi paling baik bersama dengan pengoptimalan performa lainnya seperti penggunaan CDN dan pengurangan subresource yang memblokir rendering. Setelah menerapkannya, ikuti rekomendasi ini untuk memaksimalkan manfaat LCP dari pengambilan data SXG. Dalam banyak kasus, pengoptimalan tersebut dapat menghasilkan pemuatan halaman yang hampir instan dari Google Penelusuran:

Dampak Signed HTTP Exchange

Dari eksperimen sebelumnya, kami mengamati pengurangan LCP rata-rata sebesar 300 md hingga 400 md dari pengambilan data yang diaktifkan SXG. Hal ini membantu situs memberikan kesan pertama yang lebih baik kepada pengguna dan sering kali berdampak positif pada metrik bisnis.

Beberapa merek dan situs global telah mendapatkan manfaat dari Signed HTTP Exchange. Sebagai studi kasus, mari kita lihat bagaimana penerapan Signed Exchange membantu RebelMouse, Sistem Pengelolaan Konten (CMS) terkemuka, meningkatkan performa dan metrik bisnis pelanggan mereka:

  • Narcity meningkatkan LCP sebesar 41%
  • Paper Magazine melihat peningkatan Sesi per pengguna sebesar 27%
  • MLT Blog mengurangi Waktu Pemuatan Halaman sebesar 21%

Cloudflare menemukan bahwa SXG meningkatkan TTFB untuk 98% situs yang diuji, dan meningkatkan LCP untuk 85% situs, dengan peningkatan median lebih dari 20% dalam pemuatan halaman yang memenuhi syarat SXG.

Pengindeksan

Representasi SXG dan non-SXG dari suatu halaman tidak diberi peringkat atau diindeks secara berbeda oleh Google Penelusuran. SXG pada akhirnya adalah mekanisme pengiriman—SXG tidak mengubah konten yang mendasarinya.

AMP

Konten AMP dapat dikirim menggunakan SXG. SXG memungkinkan konten AMP diambil dan ditampilkan menggunakan URL kanonisnya, bukan URL AMP-nya.AMP memiliki alat terpisah untuk membuat SXG.Pelajari cara menayangkan AMP menggunakan Signed HTTP Exchange di amp.dev.

Men-debug SXG dengan Chrome DevTools

Untuk melihat SXG secara langsung, gunakan browser Chromium, buka DevTools, buka panel Jaringan, dan buka contoh halaman penelusuran ini. Signed HTTP Exchange dapat diidentifikasi dengan mencari signed-exchange di kolom Jenis.

Screenshot yang menampilkan permintaan SXG dalam panel 'Jaringan' di DevTools
Panel Jaringan di DevTools

Tab Pratinjau memberikan informasi selengkapnya tentang konten SXG.

Screenshot tab 'Pratinjau' untuk SXG
Tab Pratinjau di DevTools

Alat

Penerapan SXG terdiri dari pembuatan SXG yang sesuai dengan URL tertentu, lalu penayangan SXG tersebut kepada pemohon (biasanya crawler).

Sertifikat

Untuk membuat SXG, Anda memerlukan sertifikat yang dapat menandatangani SXG, meskipun beberapa alat memperolehnya secara otomatis. Halaman ini mencantumkan certificate authority yang dapat menerbitkan jenis sertifikat ini. Sertifikat dapat diperoleh secara otomatis dari certificate authority Google menggunakan klien ACME apa pun. Web Packager Server memiliki klien ACME bawaan, dan sxg-rs akan segera memilikinya.

Alat SXG khusus platform

Alat ini mendukung stack teknologi tertentu. Jika Anda sudah menggunakan platform yang didukung oleh salah satu alat ini, Anda mungkin akan lebih mudah menyiapkannya daripada alat tujuan umum.

Alat SXG untuk tujuan umum

Server HTTP sxg-rs

sxg-rs http_server bertindak sebagai reverse proxy untuk menayangkan SXG. Untuk permintaan dari crawler SXG, http_server akan menandatangani respons dari backend dan merespons dengan SXG. Untuk mengetahui petunjuk penginstalan, lihat README.

Server Web Packager

Server Web Packager, webpkgserver, adalah alternatif untuk http_server sxg-rs, yang ditulis dalam Go. Untuk mengetahui petunjuk cara menyiapkan server Web Packager, lihat Cara menyiapkan Signed HTTP Exchange menggunakan Web Packager.

CLI Web Packager

CLI Web Packager menghasilkan SXG yang sesuai dengan URL tertentu.

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

Setelah file SXG dibuat, upload file tersebut ke server Anda dan tayangkan dengan jenis MIME application/signed-exchange;v=b3. Selain itu, Anda harus menayangkan sertifikat SXG sebagai application/cert-chain+cbor.

Library SXG

Library ini dapat digunakan untuk membuat generator SXG Anda sendiri:

  • sxg_rs adalah library Rust untuk membuat SXG. Library ini adalah library SXG yang paling kaya fitur dan digunakan sebagai dasar untuk alat cloudflare_worker dan fastly_compute.

  • libsxg adalah library C minimal untuk membuat SXG. Libsxg digunakan sebagai dasar untuk modul SXG NGINX dan Filter SXG Envoy.

  • go/signed-exchange adalah library Go minimal yang disediakan oleh spesifikasi paket web sebagai implementasi referensi untuk membuat SXG. Alat ini digunakan sebagai dasar untuk alat CLI referensinya, gen-signedexchange dan alat Web Packager yang lebih kaya fitur.

Negosiasi konten

Server harus menyajikan SXG jika header Accept menunjukkan bahwa nilai q untuk application/signed-exchange lebih besar dari atau sama dengan nilai q untuk text/html. Dalam praktiknya, ini berarti server asal akan menyajikan SXG ke crawler, tetapi tidak ke browser. Banyak alat di atas melakukan hal ini secara default, tetapi untuk alat lain, ekspresi reguler berikut dapat digunakan untuk mencocokkan header Accept dari permintaan yang harus disajikan sebagai SXG: http Accept: /(^|,)\s\*application\/signed-exchange\s\*;\s\*v=[[:alnum:]\_-]+\s\*(,|$)/

Rekomendasi ini menyertakan contoh untuk Apache dan nginx.

Update cache API

Cache SXG Google memiliki API yang dapat digunakan pemilik situs untuk menghapus SXG dari cache sebelum masa berlakunya habis karena Cache-Control: max-age. Lihat referensi API update cache untuk mengetahui detailnya.

Menautkan ke SXG

Situs mana pun dapat meng-cache, menayangkan, dan mengambil data di awal SXG halaman yang ditautkannya, jika tersedia, menggunakan tag dan : html <a href="https://example.com/article.html.sxg"> <link rel="prefetch" as="document" href="https://example.com/article.html.sxg"> Artikel ini mengilustrasikan cara menggunakan nginx untuk mendistribusikan SXG.

Keunggulan unik

SXG adalah salah satu dari banyak teknologi yang memungkinkan pengambilan data lintas origin. Saat memutuskan teknologi yang akan digunakan, Anda mungkin perlu mempertimbangkan pengoptimalan berbagai aspek. Bagian berikut mengilustrasikan beberapa nilai unik yang diberikan SXG dalam ruang solusi yang memungkinkan. Faktor-faktor ini dapat berubah seiring waktu seiring berkembangnya ruang solusi yang tersedia.

Lebih sedikit permintaan untuk ditayangkan

Dengan pengambilan data lintas situs, server Anda mungkin perlu menyajikan permintaan tambahan. Hal ini sesuai dengan kasus saat halaman diambil lebih awal, tetapi pengguna tidak mengunjungi halaman tersebut, atau byte yang diambil lebih awal tidak dapat ditampilkan kepada pengguna. Untuk SXG, permintaan tambahan yang tidak digunakan ini dapat dikurangi secara signifikan:

  • SXG di-cache dan dapat dikirim ke pengguna hingga masa berlakunya habis. Dengan demikian, banyak pengambilan data dapat ditangani sepenuhnya oleh server cache.
  • SXG dapat ditampilkan kepada pengguna dengan dan tanpa cookie di situs Anda. Dengan demikian, halaman akan lebih jarang perlu diambil lagi setelah navigasi.

Peningkatan kecepatan halaman

Anda mungkin melihat peningkatan page speed tambahan karena platform dan kapabilitas pengambilan data di awal yang saat ini didukung:

  • SXG dapat ditampilkan kepada pengguna dengan cookie untuk situs Anda.
  • SXG juga mengambil data subresource untuk halaman Anda, seperti JavaScript, CSS, font, dan gambar, jika ditentukan menggunakan header Link.
  • Dalam waktu dekat, pengambilan data SXG dari Google Penelusuran akan tersedia di lebih banyak jenis hasil penelusuran.

Kesimpulan

Signed HTTP Exchange adalah mekanisme pengiriman yang memungkinkan verifikasi asal dan validitas resource secara independen dari cara resource dikirimkan. Hasilnya, SXG dapat didistribusikan oleh pihak ketiga sekaligus mempertahankan atribusi penayang sepenuhnya.

Bacaan lebih lanjut