Google AMP Cache menayangkan salinan dalam cache dari konten AMP valid yang dipublikasikan ke web. Menayangkan konten langsung dari Google AMP Cache untuk memberikan pengalaman pengguna yang cepat.
Untuk memanfaatkan Google AMP Cache, URL AMP harus diakses langsung dari cache menggunakan format URL AMP Cache. Setiap kali pengguna mengakses konten AMP dari cache, konten diperbarui secara otomatis, dan versi yang diperbarui ditayangkan kepada pengguna berikutnya setelah konten di-cache.
Format URL Cache AMP
Format URL AMP Cache terdiri dari komponen berikut:
Komponen | Deskripsi |
---|---|
Nama subdomain | Subdomain yang dibuat oleh Google AMP Cache akan dapat dibaca manusia jika batas karakter dan spesifikasi teknis memungkinkan, dan akan sangat mirip dengan domain milik penayang. Jika memungkinkan, Google AMP Cache akan membuat setiap subdomain dengan:
Misalnya, |
Jenis konten | Jenis konten adalah salah satu dari berikut ini: 'c' untuk dokumen HTML AMP, 'i' untuk gambar, atau 'r' untuk resource seperti font. Google AMP Cache menampilkan error 404 untuk resource yang tidak cocok dengan jenis konten ini (lihat error inti). |
Opsional 's' | Jika ada, Google harus mengambil konten dari asal menggunakan TLS (HTTPS aman). Jika 's' tidak ada, maka konten diambil dari asal menggunakan HTTP biasa. |
URI | URI konten yang akan diambil. URI tidak boleh berisi skema; yaitu, tanpa `http://` atau `https://`. |
Menemukan nama subdomain
Biasanya, nama subdomain untuk URL Google AMP Cache akan menjadi konversi yang dapat dibaca manusia dari URL asli menggunakan langkah-langkah yang diuraikan di atas. Namun, karena ada situasi ketika hal ini tidak benar, cara terbaik untuk mengambil URL Google AMP Cache untuk aplikasi yang siap produksi adalah menggunakan Google AMP Cache URL API.
Untuk situasi non-produksi, untuk menentukan nama subdomain yang dihasilkan Google AMP Cache, coba alat interaktif Using the Google AMP Cache di amp.dev.
Contoh permintaan dokumen menggunakan TLS
Permintaan untuk dokumen HTML AMP (ditentukan dengan awalan /c
) yang diambil dari https://example.com/amp_document.html
:
https://example-com.cdn.ampproject.org/c/s/example.com/amp_document.html
Karena /s
mengikuti awalan /c
, dokumen akan diambil dari example.com menggunakan TLS.
Contoh permintaan gambar menggunakan HTTP biasa
Permintaan gambar (ditentukan dengan awalan /i
) yang diambil dari http://example.com/logo.png
:
https://example-com.cdn.ampproject.org/i/example.com/logo.png
Karena tidak ada /s
yang mengikuti awalan /i
,
Google mengambil gambar dari example.com menggunakan HTTP biasa,
bukan HTTP melalui TLS.
Contoh parameter kueri
Format URL AMP Cache juga dapat menyertakan parameter dalam string kueri.
Berikut adalah contoh HTTPS dengan parameter:
https://example-com.cdn.ampproject.org/c/s/example.com/g?value=Hello%20World
Update Google AMP Cache
Saat pengguna meminta dokumen AMP dari Google AMP Cache, cache secara otomatis meminta pembaruan agar dapat menayangkan konten baru kepada pengguna berikutnya setelah konten di-cache. Dengan model ini, update pada dokumen AMP diterapkan secara otomatis dan cepat; hanya beberapa pengguna yang akan melihat versi yang belum diupdate setelah update.
Cache mengikuti model "stale-while-revalidate".
Header tersebut menggunakan header cache asal, seperti Max-Age
, sebagai petunjuk dalam memutuskan apakah dokumen atau resource tertentu sudah usang.
Saat pengguna membuat permintaan untuk sesuatu yang tidak berlaku,
permintaan tersebut menyebabkan salinan baru diambil, sehingga pengguna berikutnya mendapatkan konten baru.
Untuk membatasi jumlah beban yang dihasilkannya bagi situs penayang, Google AMP Cache menganggap setiap dokumen baru selama setidaknya 15 detik, dan setiap resource yang diperbarui setidaknya selama 1 menit. Perhatikan bahwa angka tersebut dapat berubah di masa mendatang, saat kami menyesuaikan cache untuk keseimbangan optimal antara keaktualan dan pemuatan di situs penayang.
Pengoptimalan dan modifikasi cache
Google AMP Cache melakukan pengoptimalan dan modifikasi, seperti berikut:
- Memvalidasi konten benar-benar dalam format AMP, yang memenuhi semua sasaran performa AMP.
- Menyimpan gambar dan font ke dalam cache selain dokumen AMP.
- Membatasi dimensi gambar maksimum untuk mencegah masalah memori browser dan daya respons yang buruk.
- Berbagai transformasi untuk meningkatkan efisiensi pengiriman gambar
melalui tag
amp-img
, seperti:- Penghapusan data yang tidak terlihat atau sulit dilihat, seperti metadata tertentu.
- Konversi gambar ke format gambar yang lebih kecil dan lebih mobile-friendly, seperti mengonversi gambar format GIF, PNG, dan JPEG ke WebP di browser yang mendukung WebP.
- Transformasi gambar ke kualitas yang lebih rendah jika permintaan menyertakan header Save-Data.
- Pembuatan versi berukuran alternatif dan menambahkan atribut
srcset
untuk mendukung pengiriman gambar berukuran responsif.
- Menyalurkan melalui saluran aman (HTTPS) dan menggunakan protokol web terbaru (SPDY, HTTP/2).
- Melakukan pembersihan dokumen AMP untuk mencegah serangan XSS berdasarkan komentar HTML, komentar, dan lainnya yang salah ditutup.
Dalam melakukan transformasi di atas, Google AMP Cache mengabaikan header “Cache-Control: no-transform”.
Sanitasi HTML
Google AMP Cache menulis ulang semua dokumen untuk menormalkan penguraian. Contohnya antara lain:
- Semua komentar HTML dihilangkan.
- Nama tag dan atribut ditulis dalam huruf kecil.
- Nilai atribut dikutip dan di-escape secara konsisten.
- Semua tag ditutup, kecuali untuk elemen void HTML5.
- Spasi kosong di dalam tag dihilangkan.
- Teks di-escape.
- Karakter teks berenkode akan disederhanakan dengan menggunakan karakter yang setara dengan UTF-8.
- Elemen yang hanya dapat berada di
body
dipindahkan kebody
. - Link keluar dijadikan absolut sehingga dapat terus berfungsi saat dokumen ditayangkan dari asal Google AMP Cache, bukan asal penayang.
Menyisipkan tag pengambilan data
Google AMP Cache menambahkan berbagai tag petunjuk pengambilan data untuk browser
guna membantu memuat resource lebih awal.
Misalnya,
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet’>
berubah menjadi:
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <link href="https://fonts.gstatic.com" rel="dns-prefetch preconnect">