SXG adalah mekanisme pengiriman yang memungkinkan autentikasi asal resource secara terpisah dari cara pengirimannya.
Signed HTTP Exchange (SXG) adalah mekanisme pengiriman yang memungkinkan autentikasi asal resource secara terpisah dari cara pengirimannya. Menerapkan SXG dapat meningkatkan Largest Contentful Paint (LCP) dengan mengaktifkan pengambilan data lintas origin yang menjaga privasi. Selain itu, pemisahan ini meningkatkan berbagai kasus penggunaan seperti pengalaman internet offline dan inferensi dari cache pihak ketiga.
Artikel ini memberikan ringkasan komprehensif tentang SXG: cara kerjanya, kasus penggunaan, dan alat.
Kompatibilitas browser
SXG didukung oleh browser berbasis Chromium (dimulai dari versi: Chrome 73, Edge 79, dan Opera 64).
Ringkasan
Sebagai kasus penggunaan utamanya, SXG menggunakan cache untuk mengambil data dan menayangkan 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 situs asal tersebut. Setiap informasi yang berpotensi mengidentifikasi akan disembunyikan hingga pengguna selesai 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 mengirimkan pemuatan halaman yang lebih cepat kepada pengguna. Seiring waktu, kami berharap dampak ini akan meluas ke perujuk tambahan.
Cara Kerja
Situs menandatangani pasangan permintaan/respons ("pertukaran HTTP") dengan cara yang memungkinkan browser memverifikasi asal dan integritas konten secara terpisah dari cara konten didistribusikan. Akibatnya, browser dapat menampilkan URL situs asal di kolom URL, bukan URL server yang mengirimkan konten.
Secara historis, satu-satunya cara bagi situs untuk menggunakan pihak ketiga untuk mendistribusikan kontennya sambil mempertahankan atribusi adalah dengan membagikan sertifikat SSL-nya kepada distributor. Cara ini memiliki kelemahan keamanan; selain itu, jauh dari menjadikan konten yang benar-benar portabel.
Format SXG
SXG dienkapsulasi dalam file yang dienkode biner yang memiliki dua komponen utama: pertukaran HTTP dan tanda tangan yang mencakup pertukaran. Pertukaran HTTP terdiri dari URL permintaan, informasi negosiasi konten, dan respons HTTP.
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="https://test.web.app/ViFgi0WfQ-NotPJf8PBo2T5dEuZ13NdZefPybXq_HhE"; date=1597680503;expires=1598285303;integrity="digest/mi-sha256-03";sig=<em>MEUCIQD5VqojZ1ujXXQaBt1CPKgJxuJTvFlIGLgkyNkC6d7LdAIgQUQ8lC4eaoxBjcVNKLrbS9kRMoCHKG67MweqNXy6wJg=</em>; validity-url="https://example.org/webpkg/validity" header integrity: sha256-Gl9bFHnNvHppKsv+bFEZwlYbbJ4vyf4MnaMMvTitTGQ=</p> <p>The exchange has a valid signature. payload [1256 bytes]:</p> <pre class="prettyprint"><code><title>SXG example</title> <meta charset="utf-8"> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <style type="text/css"> body { background-color: #f0f0f2; margin: 0; padding: 0; } </style> </code></pre> <div> <h1>Hello</h1> </div> <p>
Parameter expires
dalam tanda tangan menunjukkan tanggal habis masa berlaku SXG. SXG mungkin 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 yang ditandatangani. Jika situs Anda menyajikan 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 Dynamic SXG.
Pengemasan Web
SXG adalah bagian dari kelompok proposal spesifikasi Web Packaging yang lebih luas. Selain SXG, komponen utama lainnya dari spesifikasi Web Packaging adalah Paket Web ("paket HTTP pertukaran"). 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 bergantung satu sama lain—Paket Web dapat digunakan dengan bursa yang ditandatangani dan tidak ditandatangani. Tujuan umum yang diwujudkan oleh SXG dan Paket Web adalah pembuatan format "pengemasan web" yang memungkinkan situs dibagikan secara keseluruhan untuk digunakan secara offline.
Mempercepat Pemuatan Halaman dengan Signed HTTP Exchange
Mengaktifkan Signed HTTP 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 dan mengambil data SXG yang mungkin 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 menerapkan, ikuti rekomendasi ini untuk memaksimalkan manfaat LCP dari pengambilan data SXG. Dalam banyak kasus, pengoptimalan tersebut dapat menghasilkan pemuatan halaman yang hampir instan yang berasal dari Google Penelusuran:
Dampak Signed HTTP Exchange
Dari eksperimen sebelumnya, kami telah mengamati rata-rata pengurangan LCP sebesar 300 md hingga 400 md dari pengambilan data yang diaktifkan SXG. Hal ini membantu situs membuat kesan pertama yang lebih baik bagi pengguna dan sering kali berdampak positif pada metrik bisnis.
Beberapa brand dan situs global telah mendapatkan manfaat dari Signed HTTP Exchange. Sebagai studi kasus, mari kita lihat bagaimana penerapan Signed HTTP Exchange membantu RebelMouse, Sistem Pengelolaan Konten (CMS) terkemuka, meningkatkan metrik bisnis dan performa pelanggan mereka:
- Narcity meningkatkan LCP sebesar 41%
- Paper Magazine mendapati peningkatan Sesi per pengguna sebesar 27%
- Blog MLT mengurangi waktu Muat Halaman sebesar 21%
Cloudflare menemukan bahwa SXG meningkatkan TTFB untuk 98% situs yang diuji, dan meningkatkan LCP untuk 85% situs, dengan peningkatan rata-rata lebih dari 20% pada pemuatan halaman yang memenuhi syarat SXG.
Pengindeksan
Representasi SXG dan non-SXG suatu halaman tidak diberi peringkat atau diindeks secara berbeda oleh Google Penelusuran. SXG pada akhirnya merupakan mekanisme pengiriman dan tidak mengubah konten yang mendasarinya.
AMP
Konten AMP dapat ditayangkan menggunakan SXG. Dengan SXG, konten AMP dapat diambil data dan ditampilkan menggunakan URL kanonisnya, bukan URL AMP-nya.AMP memiliki alat terpisah untuk menghasilkan 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, lalu kunjungi contoh halaman penelusuran ini. Signed HTTP Exchange dapat diidentifikasi dengan mencari signed-exchange
di kolom Jenis.
Tab Pratinjau memberikan informasi selengkapnya tentang konten SXG.
Alat
Penerapan SXG terdiri dari pembuatan SXG yang sesuai dengan URL tertentu, lalu menyalurkan SXG tersebut kepada pemohon (biasanya crawler).
Sertifikat
Untuk membuat SXG, Anda memerlukan sertifikat yang dapat menandatangani SXG, meskipun beberapa alat memperoleh sertifikat ini secara otomatis. Halaman ini berisi daftar certificate authority yang dapat menerbitkan jenis sertifikat ini. Sertifikat dapat diperoleh secara otomatis dari certificate authority Google menggunakan klien ACME. Web Packager Server memiliki klien ACME bawaan, dan sxg-rs akan segera hadir.
Alat SXG khusus platform
Alat ini mendukung technology stack tertentu. Jika sudah menggunakan platform yang didukung oleh salah satu alat ini, Anda mungkin akan lebih mudah menyiapkannya daripada alat serbaguna.
sxg-rs/cloudflare_worker
berjalan di Pekerja Cloudflare.sxg-rs/fastly_compute
berjalan di Fastly Compute@Edge.Automatic Signed Exchange adalah fitur Cloudflare yang secara otomatis memperoleh sertifikat dan menghasilkan Signed HTTP Exchange.
Modul NGINX SXG menghasilkan dan menayangkan SXG untuk situs yang menggunakan nginx. Petunjuk penyiapan dapat ditemukan di sini.
Envoy SXG Filter menghasilkan dan menayangkan SXG untuk situs yang menggunakan Envoy.
Alat SXG tujuan umum
Server HTTP sxg-rs
sxg-rs
http_server
bertindak sebagai reverse proxy untuk
menyalurkan SXG. Untuk permintaan dari crawler SXG, http_server
akan menandatangani
respons dari backend dan merespons dengan SXG. Untuk petunjuk
penginstalan, lihat
README.
Server Pemaket Web
Web Packager Server, webpkgserver
, adalah alternatif untuk http_server sxg-rs, yang ditulis dalam Go. Untuk mengetahui petunjuk tentang cara menyiapkan server Web Packager, lihat Cara menyiapkan pertukaran bertanda tangan menggunakan Web Packager.
CLI Paket Web
Web Packager CLI 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 ke server Anda dan tayangkan dengan
jenis MIME application/signed-exchange;v=b3
. Selain itu, Anda harus
melayani sertifikat SXG sebagai application/cert-chain+cbor
.
Library SXG
Library ini dapat digunakan untuk membangun generator SXG Anda sendiri:
sxg_rs
adalah library Rust untuk menghasilkan SXG. Library ini adalah library SXG paling berfitur dan digunakan sebagai dasar untuk alatcloudflare_worker
danfastly_compute
.libsxg
adalah library C minimal untuk membuat SXG. ID ini digunakan sebagai dasar untuk modul NGINX SXG dan Filter Envoy SXG.go/signed-exchange
adalah library Go minimal yang disediakan oleh spesifikasi paket web sebagai implementasi referensi untuk menghasilkan SXG. API ini digunakan sebagai dasar untuk alat CLI referensinya,gen-signedexchange
dan alat Web Packager yang lebih berguna.
Negosiasi konten
Server harus menyalurkan SXG saat header Accept menunjukkan bahwa nilai q untuk aplikasi/pertukaran bertanda lebih besar dari atau sama dengan nilai q untuk teks/html. Dalam praktiknya, hal ini berarti server asal akan menyalurkan SXG ke crawler, tetapi bukan browser. Banyak alat di atas melakukannya secara default, tetapi untuk alat lain, ekspresi reguler berikut dapat digunakan untuk mencocokkan header Accept dari permintaan yang seharusnya berfungsi sebagai SXG:
http
Accept: /(^|,)\s\*application\/signed-exchange\s\*;\s\*v=[[:alnum:]\_-]+\s\*(,|$)/
Rekomendasi ini mencakup contoh untuk Apache dan nginx.
Memperbarui 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 update cache API untuk mengetahui detailnya.
Menautkan ke SXG
Situs apa pun dapat meng-cache, menayangkan, dan mengambil data 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 untuk mengaktifkan pengambilan data lintas origin. Saat menentukan teknologi mana yang akan digunakan, Anda mungkin perlu mengambil alih antara mengoptimalkan berbagai aspek. Bagian berikut mengilustrasikan beberapa nilai unik yang diberikan SXG dalam peluang solusi. Faktor-faktor ini dapat berubah dari waktu ke waktu seiring berkembangnya ruang solusi yang tersedia.
Lebih sedikit permintaan untuk ditayangkan
Dengan pengambilan data lintas situs, server Anda mungkin perlu menayangkan permintaan tambahan. Hal ini sesuai dengan kasus saat halaman diambil data, tetapi pengguna tidak mengunjungi halaman tersebut, atau byte yang diambil data 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 hanya dapat ditangani oleh server cache.
- SXG dapat ditampilkan kepada pengguna dengan dan tanpa cookie di situs Anda. Dengan demikian, terkadang halaman perlu diambil lagi setelah navigasi.
Peningkatan kecepatan halaman
Anda mungkin melihat peningkatan kecepatan halaman tambahan karena platform dan kemampuan pengambilan data 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 terpisah dari cara pengiriman resource. Akibatnya, SXG dapat didistribusikan oleh pihak ketiga sekaligus mempertahankan atribusi penayang penuh.