AMP (ACCELERATED MOBILE PAGES PROJECT) adalah cara untuk membangun halaman web Fast Render untuk konten statis. AMP dalam action terdiri dari tiga bagian yang berbeda:
AMP HTML adalah HTML dengan beberapa pembatasan untuk kinerja yang handal dan beberapa ekstensi untuk membangun konten yang kaya di luar HTML dasar. Perpustakaan AMP JS menjamin render yang cepat halaman AMP HTML. Google AMP Cache (opsional) memberikan halaman AMP HTML
AMP HTML
AMP HTML pada dasarnya HTML diperpanjang dengan sifat AMP kustom. 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 custom elements, yang disebut AMP komponen HTML, membuat pola-pola umum mudah diimplementasikan dengan cara performantan. Sebagai contoh, tag amp-img yang memberikan dukungan srcset penuh bahkan di browser yang tidak mendukung sebelumnya.
AMP JS
Perpustakaan AMP JS mengimplementasikan semua praktik kinerja terbaik AMP ini, mengelola pemuatan sumber daya dan memberi Anda custom tags yang disebutkan di atas, semuanya untuk memastikan render cepat halaman Anda.
Di antara optimasi terbesar adalah kenyataan bahwa itu membuat segala sesuatu yang datang dari sumber eksternal asynchronous, Jadi tidak ada di halaman yang dapat memblokir apa pun dari rendering.
Kinerja teknik lainnya semua iframe termasuk sandboxing, pra-perhitungan tata letak setiap elemen pada halaman sebelum sumber dimuat dan penonaktifan CSS yang lambat.
Google AMP Cache
Google AMP Cache adalah jaringan pengiriman konten berbasis proxy untuk memberikan semua dokumen AMP valid. Google AMP Cache mengambil halaman AMP HTML, cache dan meningkatkan kinerja halaman secara otomatis. Bila menggunakan Google AMP Cache, dokumen, semua file JS dan semua gambar memuat 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 untuk bekerja, dan bahwa hal itu tidak tergantung pada sumber daya eksternal. Sistem validasi menjalankan serangkaian pernyataan mengkonfirmasikan markup halaman ini memenuhi spesifikasi AMP HTML.
Versi lain dari validator dibundel dengan setiap halaman AMP. Versi ini dapat log kesalahan validasi langsung ke konsol browser saat halaman diberikan, memungkinkan Anda untuk melihat bagaimana perubahan kompleks dalam kode Anda mungkin dapat mempengaruhi kinerja dan pengalaman pengguna.
(Terjemahan dari www.ampproject.org)
2 komentar
AMP itu yang mau aku pelajarin ni, ajaring donk serius ni
Datang ke markas pak, nanti kita diskusikan
Berkomentarlah dengan sopan dan santun sesuai topik yang kami sajikan
EmoticonEmoticon