- AMP HTML
- AMP Js
- Google AMP Cache
AMP HTML
AMP HTML pada dasarnya adalah HTML berekstensi yang dapat dikustomasi. Yang paling sederhana File AMP HTML terlihat 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>
Meskipun sebagian besar tag di halaman AMP HTML adalah tag HTML biasa, beberapa tag HTML diganti dengan AMP-spesifik tag (lihat juga Tag HTML di AMP spec). Unsur ini, yang disebut AMP komponen HTML, membuat pola-pola umum mudah diimplementasikan dengan cara performant.
Sebagai contoh, tag amp-img memberikan dukungan srcset penuh bahkan di browser yang belum mendukung. Pelajari cara membuat halaman AMP HTML pertama Anda.
AMP JS
Librari AMP JS mengimplementasikan semua praktik kinerja terbaik AMP ini. Mengelola pemuatan sumber daya dan memberi Anda tag kustom yang disebutkan di atas, semua untuk memastikan render cepat halaman.Di antara optimasi terbesar adalah kenyataan bahwa itu bersumber dari asynchronous eksternal. Jadi tidak ada pemblokiran apapun pada halaman yang sedang dirender.
Kinerja teknik lainnya termasuk sandboxing semua iframe, pra-perhitungan tata letak setiap elemen pada halaman sebelum sumber dimuat dan penonaktifan CSS yang bekerja lambat.
Untuk mempelajari lebih lanjut, bukan hanya optimasi tetapi juga batasan-batasan, silahkan membaca spesifikasi AMP HTML.
Google AMP Cache
Google AMP Cache adalah jaringan pengiriman konten berbasis proxy untuk memberikan semua dokumen valid AMP. Ia mengambil halaman AMP HTML, cache, dan meningkatkan kinerja halaman secara otomatis. Bila menggunakan Google AMP Cache maka dokumen, semua file JS dan semua gambar dimuat dari sumber yang sama, yang menggunakan HTTP 2.0 untuk efisiensi maksimum.Cache juga dilengkapi dengan sistem validasi built-in yang menegaskan bahwa halaman dijamin bekerja, dan bahwa hal itu tidak tergantung pada sumber daya eksternal. Sistem validasi menjalankan serangkaian pernyataan untuk mengkonfirmasikan markup halaman ini memenuhi spesifikasi AMP HTML.
Versi lain dari validator dibundel bersama setiap halaman AMP. Versi ini memperoleh log kesalahan validasi langsung ke konsol browser saat halaman diberikan. Hal ini memungkinkan Anda untuk melihat bagaimana perubahan kompleks dalam kode Anda sehingga mempengaruhi kinerja dan pengalaman pengguna.
Pelajari lebih lanjut tentang pengujian halaman HTML AMP Anda.