Kamis, 11 April 2019

Dasar-Dasar Implementasi AMP HTML

Dasar-Dasar Implementasi AMP HTML - AMP adalah cara untuk membangun halaman web untuk konten statis yang dipercepat. AMP dalam prosesnya terdiri dari tiga bagian yang berbeda:
  1. AMP HTML
  2. AMP Js
  3. Google AMP Cache
AMP HTML adalah HTML dengan beberapa pembatasan untuk kinerja yang handal, dan beberapa ekstensi untuk membangun konten yang kaya di luar HTML dasar. AMP JS library menjamin render cepat pada halaman AMP HTML. Google AMP Cache dapat digunakan untuk melayani cache AMP halaman HTML.

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.

Demikianlah artikel dari Situskita yang berjudul Dasar-Dasar Implementasi AMP HTML, semoga bermanfaat. Dan terima kasih untuk Anda yang telah berkunjung ke blog ini.

Lucky Bachtiar

Seorang blogger pemula yang tidak lagi muda