[caption id=”” align=”aligncenter” width=”678”]
The Flash. Image source: https://nerdhaunt.com[/caption]
Apa itu ⚡AMP?
⚡AMP (Accelerated Mobile Pages) merupakan library open source yang memberikan cara untuk menyajikan website dengan menarik, mulus dan yang pasti bisa dimuat dalam waktu mendekati instan kepada penggunanya. AMP merupakan project inisiatif dari Google melalui ampproject.org.Bagaimana mengenali ⚡AMP?
Pernahkah kamu perhatikan ketika sedang melakukan pencarian di Google Search melalui perangkat smartphone kalian? Sesekali akan kamu temui logo petir ⚡ di sebelah kiri dari hasil pencarian kamu.
[caption id=”” align=”aligncenter” width=”360”]
Contoh hasil pencarian dengan Google[/caption]
Ya, ini merupakan tanda yang sengaja disematkan oleh Google di dalam hasil pencarian kita ketika diakses melalui mobile device, tanda yang menunjukkan bahwa konten dari website tersebut telah mendukung teknologi AMP dan kita bisa optimis bahwa kalau kita klik hasil pencarian tersebut maka akan dimuat secara cepat mendekati instans.
Mengapa harus ⚡AMP?
Kamu mungkin bertanya-tanya kenapa harus ada AMP kalau semua kebutuhan kita untuk membuat sebuah website modern saat ini sudah terpenuhi, apa juga untungnya bagi kita untuk mengadopsi teknologi ini.AMP bagi saya pribadi (baca: opini) merupakan sebuah temuan yang revolusioner, AMP hadir justru karena pengetahuan yang sebenarnya sudah diketahui kita semua. Kita bersama-sama telah setuju dan mengerti bahwa dalam mengembangkan website semakin banyak hal yang kita kirim ke pengguna maka berakibat semakin lamban website tersebut dimuat. Sayangnya dengan derasnya perkembangan teknologi membuat hal ini juga dieksploitasi oleh para pengembang, mereka seolah ingin menyematkan berbagai hal keren ke dalam website mereka.
[caption id=”” align=”aligncenter” width=”800”]
The web = Endless possibilities[/caption]
AMP pada posisi ini menawarkan teknologi yang diharapkan bisa mengembalikan website seperti sedia kala, cepat dengan tanpa mengorbankan pengalaman pengguna.
[caption id=”” align=”aligncenter” width=”800”]
Reason for AMP’s existence[/caption]
Bagian inti dari ⚡AMP
AMP bukanlah sebuah sihir yang bisa membuat website kamu tiba-tiba menjadi cepat bahkan mendekati instan, AMP memiliki tiga bagian inti yang membuatnya menjadi cepat, seperti dijelaskan berikut:AMP HTML AMP HTML merupakan HTML biasa dengan berbagai restriksi agar bisa tetap dikirimkan dengan performa yang memuaskan.
AMP JS AMP JS merupakan library yang memastikan halaman AMP selalu cepat ketika melakukan rendering.
AMP Cache Google AMP Cache adalah cache yang disediakan untuk menyimpan halaman-halaman AMP agar lebih cepat ketika diakses.
[caption id=”” align=”aligncenter” width=”800”]
Screenshot from: https://www.ampproject.org/learn/overview/[/caption]
Bagaimana membuat ⚡AMP?
AMP seperti dijelaskan sebelumnya bukanlah sihir, ada beberapa langkah yang harus dikerjakan untuk mengadopsinya. Namun juga AMP tidak akan membabi buta menerapkan berbagai teknologi canggih sehingga kita tidak perlu belajar banyak hal untuk bisa bereksperimen dengan teknologi ini. Cukup terbiasa dengan HTML dan CSS serta sedikit pengetahuan JavaScript, kita sudah bisa membuat halaman AMP.[caption id=”” align=”aligncenter” width=”800”]
⚡AMP memiliki beberapa aturan strict[/caption]
Namun ada sedikit yang perlu diketahui sebelumnya, membangun AMP tidaklah sama persis dengan membangun website biasanya. Ada beberapa strictness yang diberlakukan oleh AMP agar tetap mempertahankan performa yang luar biasa cepat, diantaranya kita tidak boleh menambahkan javascript selain dari yang sudah divalidasi dan dijadikan standar komponen AMP, HTML di AMP juga memiliki aturan yang diperketat agar tidak terjadi bloated code pada website nantinya, dalam urusan CSS pun AMP pada dasarnya menginginkan kita membuat stylesheet yang tepat guna.
Tapi tidak usah khawatir, AMP bukanlah hal yang menyeramkan. Untuk membuat AMP bahkan kita cukup membuat skeleton dasar seperti berikut:
[caption id=”” align=”aligncenter” width=”800”]
Screenshot from: https://www.ampproject.org/docs/getting_started/create/basic_markup[/caption]
[caption id=”” align=”aligncenter” width=”679”]
Kebutuhan dasar sebuah halaman AMP. Source: https://www.ampproject.org[/caption]
Selengkapnya langkah-langkah membuat halaman ⚡AMP bisa disimak di tautan berikut: https://www.ampproject.org/docs/getting_started/create
🍬 Kisah manis
AMP akan memberikan kita berbagai pengalaman menyenangkan, seperti diantaranya:Dalam fase pengembangan, sebuah halaman AMP bisa dengan mudah diselesaikan, tidak dibutuhkan keahlian yang super untuk mengerjakannya. Seorang junior programmer pun bisa menyelesaikan dalam jangka waktu yang tidak terlalu lama.
Untuk mengerjakan halaman AMP dibutuhkan server side rendering karena kita tidak diperkenankan menyisipkan javascript selain dari AMP, sehingga mungkin dibutuhkan programmer yang familiar dengan server render templating yang disesuaikan dengan bahasa pemrograman masing-masing.
Pengerjaan ini semakin mudah karena dari team AMP sendiri sudah membuatkan website yang berisikan berbagai macam dokumentasi dan koleksi berbagai komponen AMP yang bisa kita gunakan dengan mudah karena sudah disertai contoh kode serta playground untuk mencoba kode tersebut. Kamu bisa melihat koleksi komponen dari AMP di tautan berikut https://www.ampproject.org/docs/reference/components, sedangkan untuk playground bisa dicoba di tautan https://ampbyexample.com/playground/.
☕ Kenyataan pahit
Kenyataanya hidup tak selamanya manis, pun dengan AMP. Setelah fase pengembangan yang terasa begitu mulus dan tanpa hambatan, lambat laun masalah mulai muncul dan tidak ada habisnya. Ya, AMP perlu selalu kamu monitoring untuk memastikan tetap valid dan tidak melanggar aturan yang telah dibuat.Kamu bisa memonitoring validitas dari halaman AMP yang ada melalui webmaster tools dari Google. Tools ini akan memberikan grafik berapa jumlah AMP yang berhasil di index dan berapa jumlah AMP yang rusak (baca: error) atau tidak valid. Setiap kerusakan yang terjadi akan dikelompokkan berdasarkan jenis kerusakannya. Kabar baiknya adalah tools ini memberikan penjelasan yang gamblang kesalahan yang terjadi karena apa serta bagian mana yang menyebabkan tidak valid.
[caption id=”” align=”aligncenter” width=”800”]
Contoh grafik hasil analisa https://mazipanneh.com/blog/ di webmaster tools[/caption]
Bila tools ini kurang memuaskan, kita bisa juga melakukan test secara live terhadap halaman AMP kita lewat tautan https://search.google.com/test/amp.
Dari pengalaman saya memonitoring halaman AMP ini, banyak kesalahan terjadi datang dari konten yang dinamis dan bisa semena-mena diisi atau ubah oleh tools semacam CMS atau tools WYSIWYG. Tools ini seringkali membawa hal-hal yang memang melanggar aturan dari AMP seperti inline stylesheet, tag-tag atau attribute yang tidak penting dalam html, bahkan sampai inject script. Hal ini juga yang membuat beberapa Wordpress Plugin seperti AMP for WP memutuskan untuk membuat text editor yang berbeda antara konten asli dengan konten yang akan disajikan untuk AMP.
Kabar baiknya lagi adalah Google Search dengan baik hati akan sangat cepat tanggap dengan terjadinya kesalahan di halaman AMP kalian, dengan cepat tanda petir ⚡ di hasil pencarian akan menghilang ketika terdeteksi kesalahan. Beda lagi jika kalian menambahakan halaman AMP baru, bisa butuh waktu berhari-hari untuk memunculkan tanda petir ⚡ ini.
🕺 Bonus: Tips
- Secepatnya buatlah halaman AMP untuk website kalian, AMP merupakan jalan tercepat membuat website kalian bisa diakses dengan cepat tanpa harus menunggu migrasi teknologi.
- Pengembangan halaman AMP tidak terlalu susah, tapi sebaiknya pelajari terlebih dahulu beberapa rule dasar yang ada di AMP termasuk hal-hal dasar yang membuat AMP itu dianggap tidak valid.
- Lebih baik menggunakan komponen yang sudah dibuatkan oleh AMP meskipun beberapa hal sebenarnya kalian bisa membuat sendiri, seperti tab, carousel, lightbox dan berbagai komponen lainnya.
- Konten pada halaman AMP harus dipantau secara periodik dan teratur agar berbagai kesalahan bisa cepat teridentifikasi, sediakan waktu untuk memantau Webmaster Tools.
- Kesalahan membuat halaman AMP tidak akan dianggap oleh hasil pencarian Google, oleh karenanya segera hotfix bila terdeteksi kesalahan pada halaman AMP.