Apa yang dimaksud dengan AMP HTML ?

Trend saat ini menunjukkan browsing internet pada smartphone mengalami kenaikan .Bagi kebanyakan banyak orang, membaca di web mobile masih memiliki hasil yang mengecewakan, akibat loading webiste yang masih dibilang lambat. Dengan demikian menyebabkan pengalaman browsing yang tidak mengasyikkan. Namun berbeda jika pemilik website telah menerapkan teknologi Accelerated Ponsel Pages (AMP).

Dalam bahasan berikut ini, kita akan membahas dengan penekanan tentang apa yang dimaksud dengan teknologi teknologi Accelerated Ponsel Pages (AMP), dukungan dalam teknologi AMP serta manfaat teknologi AMP

Apa yang dimaksud dengan AMP ?

AMP adalah sebuah cara untuk membangun halaman web agar rendering konten menjadi lebih cepat oleh browser di smartphone anda.AMP dalam aksi terdiri dari tiga bagian yang berbeda :.

Seperti apa teknologi AMP ?

Teknologi AMP yang pertama kali digagas oleh Google dan Twitter terdiri dari tiga bagian yang berbeda :

1. AMP HTML

AMP HTML is basically HTML extended with custom AMP properties. The simplest AMP HTML file looks like this:

AMP HTML pada dasarnya adalah teknologi HTML seperti biasa, namun telah di perluas dengan memasukkan propertis dari teknologi AMP . 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 tag spesifik dari AMP.

2. AMP JS

Library AMP JS mengelola proses loading dari sebuah website yang menggunakan librari java script sehingga memastikan proses rendering dari sebuah halaman web berjalan dengan cepat. Kita tidak diizinkan menggunakan library JS yang dihosting dari pihak ketiga. Semua menggunakan library dari CDN Google. Misal inggin menggunakan library JS untuk tombol share, gunakan yang disediakan librari yang tersedia dalam teknologi AMP seperti contoh berikut :

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

3. GOOGLE AMP CACHE

Google AMP Cache adalah CDN berbasis proxy untuk memberikan semua dokumen AMP valid. Google AMP Cache mengambil (fetch) halaman AMP HTML kemudian melakukan proses cache dan meningkatkan kinerja halaman secara otomatis. Bila menggunakan Google AMP Cache, dokumen, semua file JS dan semua gambar memuat dari asal yang sama yang menggunakan HTTP 2.0 untuk proses efisiensi maksimum.

Apa keuntungan menerapkan teknologi AMP HTML ?

Hal ini menjadi dasar bagi sebagian orang untuk beradaptasi dengan sebuah teknologi baru. Bagi pemilik website yang menginginkan agar ditampilkan di halaman utama dari google search ketika user menggunakan smartphone untuk berselancar internet, maka ini adalah sebuah keharusan. Terlebih bagi para blogger atau pelaku dunia e-commerce.

Apa yang dimaksud dengan AMP HTML ?

Serba_Definisi November 27, 2016