Accelerated Mobile Pages Untuk Anda Yang Haus Akan Kecepatan

Share

Secara singkat, accelerated mobile pages (AMP) adalah format halaman open source untuk mobile web yang memungkinkan halaman itu berada sangat dekat dengan perangkat mobile yang mengaksesnya. Halaman AMP pada dasarnya sama dengan halaman HTML dan bisa dibuka di banyak web browser. Google mengungkapkan, halaman AMP bisa lebih cepat 15% bahkan sampai 85% daripada halaman non-AMP.  Sehingga akan sangat membantu sekali terutama ketika mengakses website dari perangkat mobile.

Pada dasarnya, AMP terdiri dari 3 kerangka dasar, yaitu :

  1. AMP HTML : Bagian dari HTML, bahasa markup ini memiliki beberapa tag custom dan adanya pembatasan dari penggunaan tag-tag HTML standar. Anda tidak akan mengalami kesulitan untuk beradaptasi dengan AMP HTML, karena pada prinsipnya sama dengan tag HTML biasa.
  2. AMP JS : Javascript untuk halaman mobile. Sebuah Javascript untuk memproses halaman AMP dan pemanggilannya secara asynchronous. Perlu diketahui bahwa pemuatan Javascript dari pihak ketiga tidak diperkenankan dalam halaman AMP.
  3. AMP CDN : Content Delivery Network bersifat optional, yang akan mengambil halaman AMP Anda, disimpan dalam cache dan kemudian didistribusikan.

Apa Yang Membuat Halaman AMP Sangat Cepat?

Sebenarnya, halaman AMP menggunakan HTML yang lebih ringkas. Jadi ada tag-tag yang tidak bisa Anda gunakan. Kemudian untuk css, semuanya ditulis langsung pada halaman. Anda bisa menggunakan sebagian besar kode css, tetapi pastikan semuanya optimal. Terakhir, penggunaan Javascript tidak diperbolehkan sama sekali. Kecuali untuk memanggil framework dari AMP yang dilengkapi dengan fitur lazy loading image. Sehingga halaman yang dihasilkan sangat sederhana, tapi sangat cepat. Anda bisa membandingkan kecepatan loading antara halaman AMP dan non-AMP dengan menggunakan berbagai macam tool, misalnya webpagetest.

AMP vs Responsive Design

Muncul pertanyaan responsive design juga sangat baik untuk mobile user. Ketika kita membicarakan halaman AMP, kita akan lebih fokus kepada sebuah halaman yang kaku artinya tidak fleksibel. Sedangkan responsive design adalah sebuah halaman web fleksibel yang mengikuti ukuran layar. AMP dan responsive design sebenarnya tidak bisa diadu karena memiliki tujuan yang berbeda. AMP untuk kecepatan sedangkan responsive design untuk kenyamanan di dalam mempresentasikan konten dalam berbagai ukuran layar. AMP bisa digunakan sebagai halaman alternatif dari halaman responsive design. Karena AMP lebih ditujukan untuk pengguna mobile dalam hal ini handphone.

Google memperbolehkan kita untuk membuat web mobile yang 100% menggunakan AMP ataupun menggunakan AMP dan non-AMP secara bersama-sama. Halaman AMP diwajibkan untuk menggunakan canonical tag, untuk yang standalone AMP valuenya diisi dengan halaman itu sendiri. Sedangkan yang AMP dan non-AMP valuenya saling mengisi seperti di bawah ini :

Pada halaman AMP
<link rel=”amphtml” href=”https://www.example.com/url/to/amp-version.html” />

Pada halaman non-AMP
<link rel=”canonical” href=”https://www.example.com/url/to/regular-html-version.html” />

Setelah drama mobile-geddon nya Google tahun lalu, kini Google sudah mengupdate algoritma pencariannya untuk mengenali halaman AMP. Sehingga bisa dipastikan dengan memiliki halaman AMP akan mempengaruhi ranking di dalam search engine. Untuk artikel berikutnya akan saya tulis tutorial untuk membuat halaman AMP 🙂

4 Comments

  1. Tapi kalo pake amp rasanya jadi sedikit lebih susah

    • mm
      yudana

      Mei 19, 2016 at 12:52 pm

      Sebenarnya tidak sulit, cuma perlu buatkan 1 halaman khusus sebagai amp. Kalau pakai WP kan ada plugins nya.

  2. dimana penempatan link rel canonical nya gan, dan apakah bisa digunakan untuk blogspot???

Tinggalkan Balasan

Your email address will not be published.

*