Roadshow AMP Baru.
AMP Roadshows

Upaya open source untuk menyempurnakan ekosistem konten bagi semua orang.

AMP adalah library open-source yang memberikan cara mudah untuk membuat halaman yang menarik, lancar, dan dimuat secara instan bagi pengguna. Halaman AMP hanyalah halaman tempat Anda dapat menautkan konten, dan dapat Anda kontrol.

AMP memanfaatkan framework dan keahlian Anda untuk membuat halaman. AMP didukung oleh berbagai platform, dan kompatibel di semua browser.

Ekosistem AMP mencakup 25 juta domain, 100+ penyedia teknologi, dan platform terkemuka, yang mencakup area penerbitan, periklanan, e-commerce, bisnis lokal dan kecil, dan lainnya.

Pelajari lebih lanjut dari video pengantar ini

Halaman AMP terdiri dari 3 komponen utama:

HTML AMP

HTML AMP adalah HTML yang memiliki beberapa batasan untuk memberikan performa yang andal.

HTML AMP pada dasarnya adalah HTML yang diperpanjang dengan properti AMP kustom. File HTML AMP yang paling sederhana akan tampak seperti berikut:

<!doctype html>
<html >
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

Meskipun sebagian besar tag di halaman HTML AMP adalah tag HTML biasa, sebagian tag HTML diganti dengan tag khusus AMP (lihat juga Tag HTML dalam spesifikasi AMP). Elemen kustom ini, yang disebut komponen HTML AMP, membuat pola umum jadi mudah diterapkan dengan cara yang baik.

Misalnya, tag amp-img memberikan dukungan srcset penuh, bahkan di browser yang belum mendukungnya. Pelajari cara membuat halaman HTML AMP pertama Anda.

Halaman AMP ditemukan oleh mesin telusur dan platform lainnya melalui tag HTML <link rel="">. Anda dapat memilih untuk menggunakan halaman versi non-AMP dan versi AMP, atau hanya versi AMP. Pelajari selengkapnya dalam Membuat Halaman Anda Dapat Ditemukan.

JS AMP

Library JS AMP memastikan rendering halaman HTML AMP yang cepat.

Library JS AMP menerapkan semua praktik performa terbaik untuk AMP, mengelola pemuatan resource, dan menyediakan tag kustom yang disebutkan di atas, semuanya untuk memastikan rendering halaman yang cepat.

Di antara pengoptimalan terbesarnya adalah membuat semua yang berasal dari sumber eksternal menjadi asinkron, sehingga rendering halaman dapat berjalan dengan lancar tanpa halangan apa pun.

Teknik performa lainnya meliputi penerapan sandbox pada semua iframe, perhitungan awal tata letak setiap elemen di halaman sebelum resource dimuat, dan penonaktifan pemilih CSS yang lambat.

Untuk mempelajari lebih lanjut tentang pengoptimalan sekaligus batasan, baca spesifikasi HTML AMP.

Cache AMP

Cache AMP Google dapat digunakan untuk menampilkan halaman HTML AMP yang tersimpan di cache.

Cache AMP Google adalah jaringan penayangan konten berbasis proxy untuk menayangkan semua dokumen AMP yang valid. Cache tersebut mengambil halaman HTML AMP, menyimpannya di cache, dan menyempurnakan performa halaman secara otomatis. Saat menggunakan Cache AMP Google, dokumen, semua file JS, dan semua gambar akan dimuat dari asal yang sama yang menggunakan HTTP 2.0 untuk mendapatkan efisiensi maksimum.

Cache tersebut juga dilengkapi dengan sistem validasi bawaan yang menegaskan bahwa halaman dijamin berfungsi, dan sistem tersebut tidak bergantung pada resource eksternal. Sistem validasi menjalankan serangkaian penegasan yang memastikan markup halaman telah memenuhi spesifikasi HTML AMP.

Versi lain validator sudah disematkan pada setiap halaman AMP. Versi ini dapat mencatat error validasi langsung ke konsol browser saat halaman dirender, yang memungkinkan Anda melihat kemungkinan pengaruh perubahan kompleks dalam kode Anda terhadap performa dan pengalaman pengguna.

Pelajari lebih lanjut cara menguji halaman HTML AMP.

Pelajari prinsip-prinsip desain AMP

Pelajari Prinsip-Prinsip Desain

Ketahui yang dapat dilakukan AMP untuk Anda