Mengenal dan Memahami Apa Itu Accelerated Mobile Pages (AMP)
Hingga kini pembahasan tentang AMP (Accelerated Mobile Pages) masih hangat diperbincangkan banyak orang di internet terutama oleh para blogger. Awal saya terjun ke dunia blogger saya tidak paham apa-apa, tidak mengerti apa saja yang harus dikuasai oleh seorang blogger. Namun dunia blogger tidak sesempit lapangan sepak bola yang setiap sudutnya memiliki garis pembatas. Semua informasi bisa kita dapatkan dengan mudah tanpa batas melalui internet termasuk pembahasan tentang Accelerated Mobile Pages (AMP).
Saya telah terjun ke dunia blogger dan menggunakan template AMP, jadi mau tidak mau saya harus mengenal dan memahami apa sebenarnya yang dimaksud Accelerated Mobile Pages (AMP). Di sini saya tidak menjelaskan bagaimana cara membuat blog atau website menjadi valid AMP. Tetapi hanya berbagi informasi tentang istilah AMP (pengertian AMP), apa saja komponen penting AMP, dan apa saja manfaat AMP. Semuanya saya rangkum supaya lebih mudah dipahami dan dipelajari.
Berikut beberapa penjelasan tentang istilah atau pengertian Accelerated Mobile Pages (AMP).
AMP dikembangkan melalui studi kasus pada pengguna internet diseluruh dunia. Bahwa rata-rata kecepatan website lebih cepat diakses melalui desktop dan lambat jika diakses melalui mobile. Sedangkan pengguna internet lebih banyak dan aktif menggunakan mobile. Akhirnya para pengguna internet baik publisher maupun pembaca merasakan dampak negatif akan lambatnya akses website tersebut.
Menjawab semua permasalahan itu, kehadiran AMP memberikan jalan keluar kepada para pengguna internet. Dengan hadirnya AMP, pembaca mampu mencari informasi dengan cepat tanpa mengurangi isi informasi dan merasa lebih nyaman menjelajah isi website.
Manfaat kehadiran AMP juga sangat dirasakan oleh publisher atau penyedia informasi. Dimana dengan blog AMP yang memiliki loading cepat akan meningkatkan nilai SEO di mata google. Tingginya nilai SEO memperbesar kemungkinan konten berada di halaman utama mesin pencari (search engine) sehingga besar kemungkinan pengunjung akan melihat dan menemukan informasi yang diinginkan. Dengan demikian peringkat blog menjadi lebih baik.
Ada tiga komponen penting yang perlu diperhatikan serta dipelajari jika kita ingin menggunakan AMP pada blog atau website kita. Tiga komponen di bawah inilah yang membangun struktur blog menjadi valid AMP. Saya akan berusaha menjelaskan serinci mungkin supaya berikutnya bisa membedakan antara web valid AMP dengan web non AMP.
a. AMP HTML ;
Apa itu HTML?
Secara sederhana HTML adalah bahasa standar pemograman web yang disusun untuk menampilkan halaman web. Bahasa tersebut berupa simbol dan kode yang dirancang khusus untuk membangun sebuah halaman website.
Lebih mudahnya tentang HTML kita gambarkan seperti ini; orang Inggris memiliki bahasa Inggris, orang Arab memiliki bahasa Arab, orang Cina memiliki bahasa Cina. Untuk menyampaikan pesan kepada mereka maka kita harus menggunakan bahasa masing-masing. Nah, begitupun website juga memiliki bahasa khusus sendiri yaitu HTML.
Seperti yang dijelaskan di atas bahwa AMP HTML adalah elemen khusus yang dirancang untuk mempercepat halaman web. Jadi ada aturan khusus untuk AMP HTML yang berbeda dengan HTML reguler pada umumnya. Inilah yang nantinya cukup merepotkan bagi pengguna AMP, karena AMP HTML belum seberapa familier dikalangan pengguna website (developer).
Supaya lebih jelas perbedaanya saya buatkan contoh sederhana masing-masing. Saya ambil contoh untuk menampilkan gambar pada halaman web kita.
Contoh HTML reguler (non AMP)
Contoh AMP HTML (valid AMP)
Apa yang berbeda dari keduanya?
Perhatikan tag img pada contoh HTML reguler dan perhatikan tag amp-img pada contoh AMP HTML. Tag tersebutlah yang membedakan antara keduanya. Berlaku juga untuk tag-tag lainnya seperti tags video menjadi amp-video, tags iframe menjadi amp-ifram, begitu seterusnya.
b. AMP JS ;
Apa itu JavaScript?
Secara sederhana JavaScript adalah bahasa pemograman web yang lebih tinggi. Sama halnya dengan HTML, namun JavaScript memiliki tingkat bahasa lebih tinggi (lebih rumit) dari pada HTML.
Di sini saya tidak menjelaskan banyak tentang pengertian JavaScript. Namun lebih fokus menjelaskan fungsi AMP JS dan perbedaannya dengan JavaScript non AMP.
Serupa dengan AMP HTML, AMP JS juga dirancang khusus yang berfungsi untuk merender semua halaman web dan memastikan halaman dimuat dengan cepat. Guna memastikan blog kita valid AMP maka kita harus menggunakan AMP JS yang ada di pustaka AMP JS dengan menggunakan script async, tidak boleh ada JavaScript selain dari pustaka AMP JS.
Bingung dengan penjelasanya? Langsung saja lihat perbedaannya di bawah ini:
Contoh JavaScript eksternal (non AMP)
Contoh AMP JS (valid AMP)
Kedua contoh di atas semoga bisa membedakan antara JavaScript eksternal yang pada umumnya digunakan pada blog non amp dan AMP JS yang dikhususkan untuk blog atau website AMP.
c. AMP Cache ;
Apa itu cache?
Singkatnya cache adalah komponen penyimpanan data yang baru digunakan yang berfungsi untuk mempercepat kembali akses data tersebut.
Ketika kita selesai menjelajah halaman web maka data penjelajahan akan tersimpan sebagai cache pada browser yang kita gunakan. Cache tersebut berfungsi untuk menyimpan data-data halaman yang kita jelajahi. Cache yang tersimpan memungkinkan kita bisa mengakses kembali halaman tersebut dengan akses yang lebih cepat.
AMP cache dimodifikasi khusus disertai sistem validasi bawaan yang memastikan dan menjamin semua data (file JavaScript, HTML, dan dokumen lain) dapat dimuat dengan efektif dan efisien.
Demikian keterangan tentang komponen penting AMP. Oh iya, mohon maaf sebelumnya. Karena saya di sini juga masih belajar, mungkin ada beberapa penjelasan yang sulit dipahami. Oleh sebab itu, jika teman-teman ingin mempelajari lebih lanjut tentang AMP, silahkan kunjungi website resmi Accelerated Mobile Pages Project.
Seperti apa yang telah kita baca di atas bahwa tujuan dan fokus utama kehadiran AMP adalah meningkatkan kecepatan loading halaman website atau blog. Kecepatan akses sebuah halaman web merupakan dambaan setiap pengguna internet. Jadi manfaat AMP sangat menguntungkan pengunjung juga publhiser.
Bagi Pengunjung ; kita pakai logika saja, jika kita sebagai pengunjung, harapan kita adalah bisa mengakses situs yang ingin kita kunjungi dengan ringan dan cepat. Dengan begitu waktu yang kita gunakan untuk mendapatkan informasi yang kita cari tidak terbuang percuma untuk menunggu loading situs tersebut. Jika kita berkunjung ke situs dengan loading ringan kita juga bisa leluasa mencari informasi-informasi lain tanpa kuatir kehabisan data internet.
Bagi Publisher ; jujur saja jika kita sebagai publisher maka tujuan utama kita adalah mendapatkan banyak pengunjung. Dengan memiliki website cepat maka pengunjung lebih nyaman berselancar di website kita. Mereka (para pengunjung) juga tidak akan ragu kembali mengunjungi untuk mendapatkan informasi yang kita publishkan.
Baca juga:
Cara Membuat Postingan supaya Valid AMP
Saya telah terjun ke dunia blogger dan menggunakan template AMP, jadi mau tidak mau saya harus mengenal dan memahami apa sebenarnya yang dimaksud Accelerated Mobile Pages (AMP). Di sini saya tidak menjelaskan bagaimana cara membuat blog atau website menjadi valid AMP. Tetapi hanya berbagi informasi tentang istilah AMP (pengertian AMP), apa saja komponen penting AMP, dan apa saja manfaat AMP. Semuanya saya rangkum supaya lebih mudah dipahami dan dipelajari.
#1. Apa yang dimaksud dengan AMP?
Berikut beberapa penjelasan tentang istilah atau pengertian Accelerated Mobile Pages (AMP).
- Istilah AMP merupakan singkatan dari bahasa Inggris “Accelerated Mobile Pages” jika diterjemahkan dalam bahasa Indonesia berarti “Halaman Ponsel yang Dipercepat”.
- Google AMP merupakan proyek terbaru google yang dikembangkan bersama para pakar teknologi melalui diskusi bersama untuk menciptakan inovasi baru yaitu memungkinkan pengguna lebih cepat mengakses informasi melalui mobile.
- AMP HTML merupakan struktur web yang dirancang khusus seminim mungkin guna membangun loading halaman semakin ringan dan cepat.
- AMP mulai diperkenalkan sejak akhir tahun 2015 tepatnya tanggal 07 Oktober 2015 dan benar-benar rilis pada tanggal 24 Februari 2016.
- AMP termasuk jenis aplikasi open source sehingga memungkinkan pengguna bebas mempelari, memodifikasi, dan mendistribusi sesuai kebutuhan pengguna.
AMP dikembangkan melalui studi kasus pada pengguna internet diseluruh dunia. Bahwa rata-rata kecepatan website lebih cepat diakses melalui desktop dan lambat jika diakses melalui mobile. Sedangkan pengguna internet lebih banyak dan aktif menggunakan mobile. Akhirnya para pengguna internet baik publisher maupun pembaca merasakan dampak negatif akan lambatnya akses website tersebut.
Menjawab semua permasalahan itu, kehadiran AMP memberikan jalan keluar kepada para pengguna internet. Dengan hadirnya AMP, pembaca mampu mencari informasi dengan cepat tanpa mengurangi isi informasi dan merasa lebih nyaman menjelajah isi website.
Manfaat kehadiran AMP juga sangat dirasakan oleh publisher atau penyedia informasi. Dimana dengan blog AMP yang memiliki loading cepat akan meningkatkan nilai SEO di mata google. Tingginya nilai SEO memperbesar kemungkinan konten berada di halaman utama mesin pencari (search engine) sehingga besar kemungkinan pengunjung akan melihat dan menemukan informasi yang diinginkan. Dengan demikian peringkat blog menjadi lebih baik.
#2. Apa saja komponen penting AMP?
Ada tiga komponen penting yang perlu diperhatikan serta dipelajari jika kita ingin menggunakan AMP pada blog atau website kita. Tiga komponen di bawah inilah yang membangun struktur blog menjadi valid AMP. Saya akan berusaha menjelaskan serinci mungkin supaya berikutnya bisa membedakan antara web valid AMP dengan web non AMP.
a. AMP HTML ;
Apa itu HTML?
Secara sederhana HTML adalah bahasa standar pemograman web yang disusun untuk menampilkan halaman web. Bahasa tersebut berupa simbol dan kode yang dirancang khusus untuk membangun sebuah halaman website.
Lebih mudahnya tentang HTML kita gambarkan seperti ini; orang Inggris memiliki bahasa Inggris, orang Arab memiliki bahasa Arab, orang Cina memiliki bahasa Cina. Untuk menyampaikan pesan kepada mereka maka kita harus menggunakan bahasa masing-masing. Nah, begitupun website juga memiliki bahasa khusus sendiri yaitu HTML.
Seperti yang dijelaskan di atas bahwa AMP HTML adalah elemen khusus yang dirancang untuk mempercepat halaman web. Jadi ada aturan khusus untuk AMP HTML yang berbeda dengan HTML reguler pada umumnya. Inilah yang nantinya cukup merepotkan bagi pengguna AMP, karena AMP HTML belum seberapa familier dikalangan pengguna website (developer).
Supaya lebih jelas perbedaanya saya buatkan contoh sederhana masing-masing. Saya ambil contoh untuk menampilkan gambar pada halaman web kita.
Contoh HTML reguler (non AMP)
<img alt="alt gambar" border="0" src="https://alamat-gambar.jpg" title="title gambar" /></div>
Contoh AMP HTML (valid AMP)
<amp-img alt="alt gambar" width="650" height="350" layout=”responsive” src=" https://alamat-gambar.jpg" title="title gambar"><amp-img>
Apa yang berbeda dari keduanya?
Perhatikan tag img pada contoh HTML reguler dan perhatikan tag amp-img pada contoh AMP HTML. Tag tersebutlah yang membedakan antara keduanya. Berlaku juga untuk tag-tag lainnya seperti tags video menjadi amp-video, tags iframe menjadi amp-ifram, begitu seterusnya.
b. AMP JS ;
Apa itu JavaScript?
Secara sederhana JavaScript adalah bahasa pemograman web yang lebih tinggi. Sama halnya dengan HTML, namun JavaScript memiliki tingkat bahasa lebih tinggi (lebih rumit) dari pada HTML.
Di sini saya tidak menjelaskan banyak tentang pengertian JavaScript. Namun lebih fokus menjelaskan fungsi AMP JS dan perbedaannya dengan JavaScript non AMP.
Serupa dengan AMP HTML, AMP JS juga dirancang khusus yang berfungsi untuk merender semua halaman web dan memastikan halaman dimuat dengan cepat. Guna memastikan blog kita valid AMP maka kita harus menggunakan AMP JS yang ada di pustaka AMP JS dengan menggunakan script async, tidak boleh ada JavaScript selain dari pustaka AMP JS.
Bingung dengan penjelasanya? Langsung saja lihat perbedaannya di bawah ini:
Contoh JavaScript eksternal (non AMP)
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<script src='http://leafo.net/sticky-kit/src/jquery.sticky-kit.js' type='text/javascript'/>>
<script type='text/javascript'>....</script>
Contoh AMP JS (valid AMP)
<script async='async' src='https://cdn.ampproject.org/v0.js'/>
<script async='async' custom-element='amp-sidebar' src='https://cdn.ampproject.org/v0/amp-sidebar-0.1.js'/>
<script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'/>
Kedua contoh di atas semoga bisa membedakan antara JavaScript eksternal yang pada umumnya digunakan pada blog non amp dan AMP JS yang dikhususkan untuk blog atau website AMP.
c. AMP Cache ;
Apa itu cache?
Singkatnya cache adalah komponen penyimpanan data yang baru digunakan yang berfungsi untuk mempercepat kembali akses data tersebut.
Ketika kita selesai menjelajah halaman web maka data penjelajahan akan tersimpan sebagai cache pada browser yang kita gunakan. Cache tersebut berfungsi untuk menyimpan data-data halaman yang kita jelajahi. Cache yang tersimpan memungkinkan kita bisa mengakses kembali halaman tersebut dengan akses yang lebih cepat.
AMP cache dimodifikasi khusus disertai sistem validasi bawaan yang memastikan dan menjamin semua data (file JavaScript, HTML, dan dokumen lain) dapat dimuat dengan efektif dan efisien.
Demikian keterangan tentang komponen penting AMP. Oh iya, mohon maaf sebelumnya. Karena saya di sini juga masih belajar, mungkin ada beberapa penjelasan yang sulit dipahami. Oleh sebab itu, jika teman-teman ingin mempelajari lebih lanjut tentang AMP, silahkan kunjungi website resmi Accelerated Mobile Pages Project.
#3. Apa manfaat penggunaan AMP?
Seperti apa yang telah kita baca di atas bahwa tujuan dan fokus utama kehadiran AMP adalah meningkatkan kecepatan loading halaman website atau blog. Kecepatan akses sebuah halaman web merupakan dambaan setiap pengguna internet. Jadi manfaat AMP sangat menguntungkan pengunjung juga publhiser.
Bagi Pengunjung ; kita pakai logika saja, jika kita sebagai pengunjung, harapan kita adalah bisa mengakses situs yang ingin kita kunjungi dengan ringan dan cepat. Dengan begitu waktu yang kita gunakan untuk mendapatkan informasi yang kita cari tidak terbuang percuma untuk menunggu loading situs tersebut. Jika kita berkunjung ke situs dengan loading ringan kita juga bisa leluasa mencari informasi-informasi lain tanpa kuatir kehabisan data internet.
Bagi Publisher ; jujur saja jika kita sebagai publisher maka tujuan utama kita adalah mendapatkan banyak pengunjung. Dengan memiliki website cepat maka pengunjung lebih nyaman berselancar di website kita. Mereka (para pengunjung) juga tidak akan ragu kembali mengunjungi untuk mendapatkan informasi yang kita publishkan.
Baca juga:
Cara Membuat Postingan supaya Valid AMP
Belum ada Komentar untuk "Mengenal dan Memahami Apa Itu Accelerated Mobile Pages (AMP)"
Posting Komentar