Home » Kuliah IT » Web » Accelerated Mobile Pages (AMP) Google

Accelerated Mobile Pages (AMP) Google

by Dadan Abdullah, S.Kom.
by Dadan Abdullah, S.Kom.

Accelerated Mobile Pages, merupakan salah satu proyek Google yang bertujuan untuk membantu situs web menjadi lebih baik dalam banyak hal terutama kecepatan dan performa situs web yang tinggi di berbagai perangkat dan platform, fokus utama proyek ini adalah meningkatkan kecepatan dan performa halaman situs web saat di akses menggunakan perangkat mobile (smatphone, PC tablet, PDA, dan lain sebagainya). (Baca juga : Virus Android Paling Berbahaya)

Beberapa sumber mengungkapkan bahwa proyek ini di buat sebagai bentuk “persaingan” atas fitur Instant Articles yang di usung Facebook pada pertengahan tahun 2015, fitur ini di klaim memiliki load time (waktu muat) rata – rata antara 0 sampai 300 mili detik setiap kali membuka artikel, sangat luar biasa cepat jika di bandingkan dengan load time artikel pada beberapa situs web pembanding dengan load time rata – rata 3.66 detik. (Baca juga : Manfaat Facebook dan Cara Mendapatkan Banyak Like di Facebook)

Apa manfaatnya ?

Meningkatkan kecepatan dan performa situs web tentu saja, saat suatu halaman pada situs web di akses menggunakan komputer (PC Desktop atau Laptop / Notebook) yang notabene memiliki diagonal layar yang luas (untuk komputer notebook saja minimal 10 inchi) tentunya tidak masalah saat membuka halaman web dengan banyak panel, misalnya panel di samping kiri yang berisi artikel terbaru, terpopuler, dan lain sebagainya. (Baca juga : Cara Mempercepat Kinerja Laptop)

Lain halnya jika halaman pada situs web yang sama di akses menggunakan perangkat mobile (smartphone, PC tablet, PDA dan lain sebagainya) dengan diagonal layar yang tentu saja jauh lebih kecil di bandingkan dengan diagonal layar komputer, hal tersebut tentunya sangat berpengaruh pada performa situs web terutama jika di nilai dari segi desain dan tata letak. (Baca juga : Bahasa Pemrograman Web Paling Populer)

Responsive design adalah salah satu solusi untuk mengatasi masalah ketidak konsistenan desain halaman pada situs web saat di buka menggunakan perangkat dengan diagonal layar yang bervariasi, beberapa web developer membuat frontend framework untuk memudahkan web developer lain dalam membangun desainsitus web yang responsive terhadap ukuran (diagonal layar), sebut saja beberapa frontend framework favorit Saya seperti Bootstrap dan Materialize, web developer atau web designer tentunya familiar dengan framework tersebut atau yang sejenisnya. (Baca juga : Fungsi Website Bagi Perusahaan)

Saya sudah menggunakan frontend framrework selama bertahun – tahun dan ya, penggunaan frontend framework sangat efektif untuk membuat desain situs web yang responsive, lalu kenapa Google membuat proyek Accelerated Mobile Pages kalau frontend framework dapat mengatasi masalah ketidak konsistenan desain halaman pada situs web saat di buka menggunakan perangkat dengan diagonal layar yang bervariasi? Jawabannya sederhana, karena masalah situs web tidak hanya mengenai “tampilan” saja. (Baca juga : Perbedaan Web dengan Blog)

Saat suatu situs web menggunakan desain yang responsive, desain dan tata letaknya tampak “menyesuaikan diri” dengan ukuran diagonal layar dari perangkat yang di gunakan, namun resource yang di butuhkan untuk mengakses situs web tersebut tetaplah sama, misalnya suatu situs web di buka menggunakan perangkat komputer dan membutuhkan resource data (akses internet) sebesar 1mb, saat di buka menggunakan perangkat mobile pun sama, akan memakan resource data sebesar 1mb.

Baca juga :

Bedanya kecepatan akses situs web (dengan kebutuhan resource 1mb) akan jauh lebih lambat saat menggunakan perangkat smartphone di bandingkan dengan saat di akses menggunakan perangkat komputer, hal tersebut di karenakan perbedaan spesifikasi perangkat keras (dan perangkat lunak juga sebetulnya), mulai dari clock processor, memory (RAM) bahkan network adapter dan web browser.

Baca juga :

Accelerated Mobile Pages tak hanya meningkatkan performa situs web dari segi responsibilitas desain, tapi juga efektifitas dan efisiensi resource yang di butuhkan dalam mengakses suatu halaman dari situs web, pastinya Anda pernah membuka suatu situs web menggunakan perangkat mobile, misalnya dosenit.com lalu tiba – tiba di redirect dengan sendirinya ke dosenit.com/mobile atau ke m.dosenit.com, kita bisa menduga bahwa situs web tersebut menggunakan teknologi Accelerated Mobile Pages Google.

Baca juga :

Bagaimana cara Penggunaannya ?

Google menyajikan tiga komponen inti untuk membangun situs web dengan Accelerated Mobile Pages (di kenal dengan AMP), komponen tersebut di antaranya AMP HTML, AMP JS, dan AMP Cache, sebenarnya hampir tidak ada bedanya dengan HTML, JS, dan Cache pada umumnya hanya saja Google menambahkan beberapa library AMP sehingga untuk membuat situs web yang mendukung AMP pengembang harus mengikuti aturan / standar yang di tetapkan AMP Project. (Baca juga : Dasar Dasar HTML)

Baik, kita mulai dengan membahas mengenai penggunaan AMP HTML, menurut Saya ini merupakan bagian paling mudah karena sejatinya AMP HTML merupakan HTML dengan beberapa perubahan untuk meningkatkan performa halaman suatu situs web, bahkan pada implementasinya AMP HTML menggunakan kode HTML dasar namun dengan tambahan properti yang telah di custom oleh AMP, berikut adalah kode AMP HTML paling sederhana :

<!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>

  • Di mulai dengan tag <!doctype html>, tag ini merupakan tag standar yang di syaratkan HTML5.
  • Di lanjutkan dengan tag <html amp> (tak hanya <html>), tag <html amp> termasuk top level tag dan di syaratkan oleh AMP Project.
  • Di lanjutkan dengan tag <head> dan tag <body>, tag ini merupakan tag standar HTML.
  • Di lanjutkan dengan tag <meta charset=”utf-8″>, tag ini juga merupakan tag standar HTML.
  • Di lanjutkan dengan tag <script async src=”https://cdn.ampproject.org/v0.js”></script>, tag ini memuat AMP JS (JavaScript), merupakan library javascript yang di syaratkan oleh AMP Project.
  • Di lanjutkan dengan tag <link rel=”canonical” href=”[url dokumen HTML reguler atau pada dokumen AMP HTML]” />.
  • Di lanjutkan dengan tag <meta name=”viewport” content=”width=device-width,minimum-scale=1″>, juga di sarankan untuk menambahkan nilai initial-scale=1 pada atribut content.
  • Di lanjutkan dengan tag style berikut

<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>
Memang membingungkan jika hanya melihat kode saja, cara terbaik adalah dengan mempraktikannya, Anda yang telah terbiasa menggunakan aplikasi sejenis WYSIWYG Editor (seperti Dreamweaver) mungkin sedikit kesulitan untuk mengimplementasikannya, namun untuk Anda yang terbiasa mengedit kode (tidak hanya mengandalkan WYSIWYG) Saya yakin akan sangat mudah dalam mengimplementasikan AMP Project ke dokumen web Anda. (Baca juga : Fungsi Software Pengolah Kata)

Intinya hampir sama saat Anda menggunakan frontend framework pada umumnya, Anda di haruskan mengikutsertakan CSS (Styles) dan JS (Scripts) pada halaman HTML yang Anda buat, bedanya AMP Project memodifikasi beberapa tag, atribut dan value pada tag HTML, selain itu (HTML, CSS, dan JS) yang menjadi salah satu fitur unggulan AMP Project adalah adanya komponen AMP Cache yang memungkinkan suatu situs web di muat lebih cepat pada perangkat mobile. (Baca juga : Kelebihan dan Kekurangan Javascript)

Memasukkan Gambar ke Halaman Web dengan AMP Image

Sebagaimana telah di bahas pada bagian sebelumnya, AMP Project memodifikasi tag, atribut dan nilai, salah satu tag yang di modifikasi (untuk optimasi) adalah tag <img>, sebagaimana kita ketahui bersama bahwa tag <img> di gunakan untuk memasukkan file gambar ke halaman web, file gambar tersebut di muat sebagai nilai pada atribut src, contoh <img src=”file_gambar.jpg”/>.

Pada halaman web AMP HTML tag yang di gunakan adalah <amp-img></amp-img>, contoh <amp-img src=“file-gambar.jpg” ></amp-img>, jadi saat Anda menggunakan AMP Project untuk membuat suatu situs web optimal di akses di perangkat mobile, Anda di haruskan membuat setdaknya dua desain web, satu untuk mobile (biasanya minimalis) dan satu lagi untuk versi desktop.

Secara resmi pengembang AMP menjelaskan alasan kenapa mereka mengganti tag <img> menjadi <amp-img>, pada situs resmi ampproject.org di jelaskan bahwa alasan penggunaan tag khusus (<amp-img> dan bukan tag standar HTML, <img>) adalah:

  • Layanan AMP perlu memahami tata letak halaman terlebih dahulu sebelum memuat assets (dalam hal ini file gambar dan mungkin CSS)
  • Layanan AMP juga perlu mengendalikan permintaan jaringan, apakah sumber daya (maksudnya adalah file gambar dan mungkin CSS) yang di minta dari segi prioritas

Tidak hanya file gambar, tapi file video dan audio serta file gambar bergerak pun menggunakan tag khusus dengan alasan tersebut di atas, dengan demikian saat assets (gambar, gambar bergerak, video, atau audio) di muat pada halaman web, semuanya telah memenuhi syarat efisiensi dari segi tata letak dan prioritas, tujuannya tentu saja meningkatkan performa assets yang di muat.

Sama dengan file gambar yang di muat menggunakan tag khusus yaitu <amp-img>, file animasi atau gambar bergerak seperti gambar dengan ekstensi .gif dimuat dengan tag khusus yaitu <amp-anim>, sedangkan file video di muat dengan tag <amp-video> dan file audio di muat dengan tag <amp-audio>.

Baca juga :

Memodifikasi tampilan dengan styles (CSS)

Sama seperti penggunaan CSS yang di tanam pada dokumen HTML (embedded CSS), penggunaan tag <style> juga masih di syaratkan sebagai halaman web standar, namun pada halaman web AMP tag <style> di lengkapi juga dengan atribut yang di buat khusus, salah satunya amp-custom, contoh sederhananya adalah sebagai berikut:
<style amp-custom>
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>

Suatu halaman web memiliki tampilan yang berbeda untuk versi mobile dan desktop, mungkinkan?

Sangat mungkin, Anda pernah membandingkan tampilan situs web Google saat Anda buka di layar komputer (desktop) dengan di layar smartphone atau PC tablet? Atau tampilan situs web Facebook, Tokopedia dan masih banyak lagi situs web yang ketika di buka di perangkat mobile tampilannya menyerupai native app, misalnya Saya meng – install aplikasi Tokopedia di smartphone Android (diagonal layar 4 inchi, sebagai informasi saja), lalu Saya juga membuka situs tokopedia.com di web browser pada smarphone Saya tersebut, URL tokopedia langsung di redirect ke m.tokopedia.com (Anda juga dapat membukanya di komputer).

Tampilan halaman situs web m.tokopedia.com dengan aplikasi Tokopedia sama persis, dan Saya tidak berfikir bahwa halaman situs web m.tokopedia.com sama dengan halaman situs web tokopedia.com (ingat fitur responsive pada frontend framework), Saya yakin desain kedua halaman situs web tersebut di buat berbeda dokumen, sehingga tokopedia memiliki dua desain, satu untuk desktop (di akses melalui tokopedia.com) dan satu lagi untuk mobile (m.tokopedia.com, sub domain dari tokopedia.com, sebenarnya bisa saja di buat seperti ini, tokopedia.com/mobile atau semacamnya).

Apakah tokopedia menggunakan AMP Project? Mungkin iya mungkin juga tidak (kalau Saya lihat source-nya sih tidak), AMP project memahami perangkat yang di gunakan terlebih dahulu sebelum memuat sumber daya (file web), jadi saat Anda membuka situs tokopedia.com pada perangkat mobile, maka akan di redirect ke sub domain m.tokopedia.com, namun AMP hanya salah satu solusi, bukan satu – satu nya cara membuat situs web yang responsive seperti pembahasan kita sebelumnya.

Saya pikir cukup sekian pembahasan kita kali ini, semoga ada manfaat yang dapat di ambil dari apa yang kita bahas, intinya perkembangan web menuntut para pengembang untuk terus berinovasi memenuhi kebutuhan penggunanya, terlebih dengan hadirnya perangkat mobile yang secara nyata merevolusi cara pengguna dalam mengakses internet, tak hanya masalah tampilannya saja tapi juga performa halaman web yang di akses haruslah optimal, itulah salah satu alasan lahirnya proyek AMP, baik sampai jumpa di artikel selanjutnya.

You may also like