Coming to a city near you: The AMP Roadshow.
Come to the AMP Roadshow.

AMP memberikan pengalaman pengguna yang lebih baik di berbagai platform

Putar Video

Halaman AMP dibuat dengan 3 komponen inti.

AMP HTML

AMP HTML adalah HTML dengan beberapa pembatasan untuk performa yang dapat diandalkan.

AMP HTML pada dasarnya adalah HTML yang diperluas dengan properti AMP khusus. File AMP HTML yang paling sederhana tampak seperti ini:

<!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>

Meski sebagian besar tag dalam halaman AMP HTML adalah tag HTML reguler, sebagian tag HTML digantikan dengan tag AMP yang bersifat spesifik (lihat juga Tag HTML dalam spesifikasi AMP). Elemen khusus ini, yang disebut sebagai komponen AMP HTML, membuat pola-pola umum mudah diimplementasikan dengan cara yang berperforma tinggi.

Misalnya, tag amp-img menyediakan dukungan srcset lengkap meski dalam browser yang belum mendukungnya. Pelajari cara membuat halaman AMP HTML pertama Anda.

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

AMP JS

Library AMP JS memastikan perenderan halaman AMP HTML dilakukan dengan cepat.

Library AMP JS mengimplementasikan semua praktik performa terbaik AMP, mengelola pemuatan konten dan memberi Anda tag khusus seperti yang disebut di atas, yang semuanya memastikan perenderan halaman Anda dilakukan dengan cepat.

Di antara pengoptimalan terbesar adalah fakta bahwa hal tersebut memastikan semua yang berasal dari konten eksternal menjadi asinkron, sehingga tidak ada satu pun yang dapat menghalangi perenderan di halaman.

Teknik performa lainnya meliputi proses sandbox semua iframe, perhitungan awal layout setiap elemen pada halaman sebelum konten dimuat, dan menonaktifkan pemilih CSS yang lambat.

Untuk mempelajari lebih lanjut tentang bukan hanya pengoptimalan namun juga batasannya, baca spesifikasi AMP HTML.

AMP Cache

Google AMP Cache dapat digunakan untuk menayangkan halaman AMP HTML dalam cache.

Google AMP Cache adalah jaringan penayangan konten berbasis proxy untuk menayangkan semua dokumen AMP yang valid. Jaringan ini mengambil halaman AMP HTML, menempatkannya dalam cache, dan meningkatkan performa halaman secara otomatis. Ketika menggunakan Google AMP Cache, dokumen, semua file JS, dan semua gambar yang dimuat dari asal yang sama yang menggunakan HTTP 2.0 untuk mendapatkan efisiensi maksimum.

Cache ini juga disertai dengan sistem validasi bawaan yang memastikan bahwa halaman dijamin berfungsi, dan halaman tidak bergantung pada konten eksternal. Sistem validasi ini menjalankan serangkaian pernyataan yang memastikan terpenuhinya markup halaman sesuai dengan spesifikasi AMP HTML.

Versi validator lainnya tersedia dalam satu paket pada setiap halaman AMP. Versi ini bisa mencatat error validasi secara langsung ke konsol browser saat halaman dirender, sehingga Anda dapat melihat seberapa besar pengaruh perubahan kompleks dalam kode Anda terhadap performa dan pengalaman pengguna.

Pelajari lebih lanjut tentang menguji halaman AMP HTML.

Lihat apa saja yang dapat dilakukan AMP untuk Anda