Accelerated Mobile Page, “Senjata” agar Website Lebih Cepat

Last Updated on November 16, 2022 by

Saat ini, jumlah orang yang menjelajahi internet melalui smartphone sudah melampaui jumlah pengunjung internet yang menggunakan komputer desktop atau laptop. Bagi sebagian orang, telepon seluler pintar menjadi alat pencari dan pengolah informasi yang lebih terjangkau dari sisi harga dan lebih praktis digunakan di mana saja. Nah, maka dari itu wajar saja bila ingin meningkatkan pengalaman pengunjung web atau aplikasi, salah satu caranya bisa dengan memprioritaskan pengunjung dari smartphone. Hal ini dapat diwujudkan dengan menerapkan suatu standar bernama Accelerated Mobile Page agar website Anda dapat ditampilkan dan dioperasikan lebih cepat, bahkan pada perangkat yang tidak memiliki spesifikasi tinggi sekalipun. Penasaran mengetahui Accelerated Mobile Page lebih lanjut? Artikel kali ini akan membahasnya lebih dalam untuk Anda.

Accelerated Mobile Page adalah

Accelerated Mobile Pages atau disingkat AMP adalah framework dari Google yang mampu mengubah bentuk website menjadi lebih sederhana dan lebih cepat dimuat. Secara teknis, Accelerated Mobile Page adalah halaman HTML dari website yang dipangkas sehingga memiliki waktu muat yang lebih singkat daripada halaman HTML biasa. Website dapat menyajikan halaman versi AMP dengan menggunakan tag rel=amphtml pada struktur HTML website tersebut.

Komponen Accelerated Mobile Page

Halaman-halaman yang menerapkan Accelerated Mobile Pages terdiri dari tiga konfigurasi utama:

1. HTML: Karena JavaScript yang kompleks tidak dibolehkan, kode HTML yang disesuaikan bersama dengan tag unik akan digunakan. Framework AMP juga mengharuskan pemilik web untuk menggunakan versi CSS yang lebih sederhana.
2. JS: Digunakan untuk mendapatkan resourcedan menyederhanakannya sehingga tidak ada pemuatan bahan yang tidak penting. Dengan memanfaatkan komponen perpustakaan JS yang dimiliki AMP, pemilik web masih dapat memuat konten, membuat animasi, mengubah tata letak, dan masih banyak lagi.
3. CDN: Content Delivery Networkberbasis proxy yang disebut AMP cache adalah komponen penting dalam platform Setiap cache dari website versi AMP akan disimpan dalam banyak server CDN. Saat pengunjung dari suatu negara mengakses website, server terdekat dari pengunjung tersebut akan mengantarkan konten web AMP agar dapat dimunculkan lebih cepat.

Dengan kode yang sedikit, jika Anda mengintegrasikan AMP untuk menstandarisasi halaman mobile website, artinya Anda memberi prioritas pada kecepatan dan keterbacaan website Anda dibandingkan hal lain.

Cara kerja Google Accelerated Mobile Page

Untuk memuat halaman lebih cepat, Google AMP bekerja dengan cara:

1. Mengeksekusi seluruh JavaScript AMP secara asynchronous, artinya bagian dari halaman yang perlu dimuat ulang hanya yang mengalami perubahan saja. Sedangkan konten-konten lain yang tidak berubah dan tidak diperlukan tidak akan dimuat ulang.
2. Kemudian, AMP akan menentukan struktur dan ukuran halaman tanpa bantuan resourcelain, sehingga browser dapat mengetahui seberapa besar halaman yang akan dimuat.
3. Google AMP juga akan menaruh JavaScript pihak ketiga pada sandbox iframe, jadi elemen-elemen tersebut tidak dapat memblokir pemuatan elemen utama pada halaman.
4. AMP dapat mengutamakan pemuatan elemen yang penting, seperti konten dan gambar. Jadi elemen-elemen tersebut dapat dimuat lebih cepat.

Mengapa harus menerapkan AMP?

Menurut survey dari Google, 46% orang mengatakan bahwa menunggu pemuatan situs saat browsing menggunakan perangkat mobile adalah hal yang paling mereka tidak suka. Survey lainnya menunjukkan bahwa 50% dari pengunjung akan meninggalkan suatu halaman jika waktu pemuatannya lebih dari 10 detik.

Saat website Anda mampu muncul lebih cepat, pengunjung akan merasa betah karena punya waktu lebih banyak untuk berinteraksi di dalam website. Untuk situs berita, artikel, atau blog, pengunjung dapat lebih nyaman membaca artikel tanpa adanya hal-hal yang membuat mereka terganggu, seperti iklan yang menutupi halaman dan memperlambat perangkat. Jika situs Anda merupakan situs jual-beli, calon pelanggan akan lebih mudah menemukan produk dan melakukan transaksi. Proses ini yang disebut konversi, dimana pengunjung web akan berubah menjadi pembeli jika mereka puas berbelanja di tempat Anda, kemudian akan menjadi pelanggan jika mereka membeli produk Anda berulang kali. Hal-hal ini tentu akan memberi kesan yang positif pada pengunjung.

Ditambah lagi, waktu pemuatan website menjadi salah satu faktor paling penting agar website Anda memiliki nilai yang baik di mata mesin pencari seperti Google. Jadi, jika Anda terus meningkatkan pengalaman pada website salah satunya dengan mengurangi waktu pemuatannya, besar kemungkinan website Anda akan muncul pada halaman awal di hasil pencarian yang juga akan berdampak pada semakin banyaknya orang yang akan menemukan website Anda.

Penerapan Accelerated Mobile Page

Pada awalnya, AMP dirancang untuk halaman-halaman statis dan sederhana, seperti artikel, situs berita, serta blog. Namun seiring perkembangannya, AMP juga dapat diterapkan untuk website jual beli atau e-commerce. Biasanya website jual beli perlu waktu lebih lama untuk memuat konten karena banyaknya elemen yang harus dimunculkan. Jika website tidak segera muncul dan tidak segera merespon semua yang diklik oleh pengunjung, pastinya mereka akan meninggalkan halaman web tersebut dan mencari hasil lainnya yang bisa lebih cepat memunculkan informasi yang mereka inginkan. AMP dapat membantu website-website yang memiliki banyak resource untuk menyederhanakan tampilannya, sehingga mempersingkat waktu pemuatan dan respon halaman.

Untuk mengimplementasi AMP pada website, Anda perlu menggunakan tag spesifik AMP. Beberapa tag berikut perlu diikutsertakan sehingga setiap halaman dapat memunculkan versi AMP-nya dengan benar:

• Document type standar untuk halaman HTML: <!doctype html>
• Tag bersifat top-levelyang menunjukkan halaman AMP: <html amp>
• Tag <head> dan <body> wajib digunakan. Tag-tag berikut diletakkan dalam tag head:
  • Tag untuk menunjukkan encoding: <meta charset=”utf-8”>
  • Tag untuk memuat library AMP JS: <script async src=”https://cdn.ampproject.org/v0.js”></script>
  • Tag canonical: <link rel=”canonical” href=”(alamat menuju halaman web tersebut)”>
  • Tag agar halaman bersifat responsive terhadap ukuran layar pengguna: <meta name=”viewport” content=”width=device-width” />
  • Gunakan AMP boilerplate code.

Selain itu, untuk konten seperti gambar, audio, atau video perlu menggunakan tag dari AMP seperti amp-img, amp-video, amp-audio atau amp-iframe, yang disesuaikan dengan jenisnya. Untuk seluruh daftar tag AMP dapat Anda lihat di halaman berikut ini.

Halaman-halaman yang paling bagus diterapkan AMP adalah halaman yang paling sering dikunjungi, tergantung jenis website Anda. Untuk website yang banyak memuat artikel, AMP dapat diterapkan pada halaman-halaman artikel. Untuk website e-commerce, AMP bisa diterapkan pada halaman daftar produk dan halaman produk itu sendiri. Namun apapun jenis website Anda, jangan lupa untuk gunakan AMP pada halaman utama (homepage), karena homepage inilah yang akan menjadi “muka depan” website Anda yang akan banyak dilihat pengunjung.

Kesimpulan

Demikian pembahasan kali ini mengenai Accelerated Mobile Pages, yaitu suatu komponen yang telah distandarisasi oleh Google yang bertujuan untuk mengubah halaman web menjadi lebih sederhana. Accelerated Mobile Page dapat membantu Anda dalam mengubah website menjadi lebih mobile-friendly dengan waktu tunggu yang lebih singkat dan pengoperasian yang lebih lancar, bahkan dalam perangkat dengan spesifikasi yang rendah sekalipun. Maka dari itu, siap meningkatkan pengalaman pengunjung website Anda dengan menerapkan AMP?

Jangan lupa untuk terus ikuti kami di APPKEY.id untuk informasi menarik tentang pengembangan website dan aplikasi mobile lainnya!