Cintailah Produk-produk Indonesia

AMPHTML vs HTML5, Mana yang Lebih Baik? - Setelah melakukan eksperimen web design untuk template Blogger ini, saya menyadari beberapa hal terkait AMPHTML yang ingin saya share kali ini. Menurut kamu mana yang lebih bagus, AMPHTML atau HTML5? Kali ini, saya ingin memberikan pendapat saya mengenai itu. Mari kita coba cari jawaban terbaik untuk pertanyaan tersebut.

Mungkin nggak ada yang sadar bahwa di web/ blog ini saya menerapkan 2 template yang berbeda yaitu template LinkMagz versi 2.5 dari Mas Sugeng yang mana template ini valid HTML5 serta template Kompi Dark AMP dari KompiAjaib yang mana template ini valid AMPHTML.

Untuk lebih jelasnya kamu bisa cek link berikut ini:

Versi Non AMP Desktop + Mobile: Lihat disini

Versi AMP: Lihat disini

Dan setelah saya menerapkan dua versi template yang berbeda tersebut saya menyadari bahwa versi non AMP lebih memuaskan daripada AMP.

Kalau ada diantara kamu yang berpendapat itu karena pake template AMP nya salah, coba pakai yang ini atau yang itu, pasti hasilnya memuaskan. Maka akan saya jawab SALAH! Sebelum saya memutuskan menggunakan template KompiDark AMP untuk versi AMP dari web/ blog saya, saya sudah mencoba beberapa template AMP lainnya. Dan menurut saya template KompiDark AMP ini sudah cukup memuaskan karena beberapa alasan berikut:

1. Setting-nya mudah karena masih menggunakan layout version 1 dari Blogger.
2. Struktur dan lainnya sudah valid dari awal sehingga tidak perlu repot-repot optimasi dan benah-benah struktur lagi.
3. Tampilannya OK!

Kekurangan AMPHTML

1. Tidak Valid HTML5

Tidak bisa dipungkiri, AMPHTML menjadi salah satu faktor yang sangat penting untuk suatu blog dan juga sangat direkomendasikan oleh web developer dari si raksasa, Google. Namun, ada sesuatu yang mengganjal di hati saya, yaitu HTML5.

Beberapa waktu sebelum meledaknya AMPHTML ini, HTML5 menjadi andalan yang dianggap optimasi HTML paling baik dan masih dipercaya dan digunakan oleh banyak web developer. Sangat disayangkan, ketika saya melakukan validasi template HTML5 setelah saya menambahkan template blog versi AMPHTML, blog saya tidak lagi valid HTML5. Dengan kata lain, script bawaan AMPHTML menyebabkan error untuk HTML5.

Sebenarnya, saya masih belum yakin, apakah ini karena AMPHTML tidak sesuai dengan HTML5? Atau karena validator yang saya gunakan belum diperbaharui menggunakan update script AMPHTML? Yang jelas, ini adalah mainan baru yang cukup bagus untuk kalian yang memang gemar mengutak-atik script HTML. Saya pun belum menemukan solusi untuk pertanyaan tersebut.

Sekilas, bila kalian memperhatikan, sebenarnya AMPHTML menggunakan basis HTML5 dalam penyusunan tag. Contohnya, jika dalam HTML5 kita menggunakan video, maka dalam AMPHTML kita merubahnya menjadi amp-video dan ketika browser membaca tag tersebut, browser akan me-render amp-video menjadi video. Jadi, seharusnya sama saja.

2. Hasil Cek LSI dan GTMetrix Kacau!

Kalau kamu mengaktifkan atau menggunakan template berbasis AMP, maka jangan kaget kalau kamu menemukan report berwarna oren/ kuning ataupun merah di Google Pagespeed Insights ataupun GTMetrix. Sebagai Perbandingan, silahkan kamu perhatikan 2 gambar berikut:

Seperti yang kamu bisa lihat di gambar di atas, hasil untuk versi AMP halaman homepage web/ blog ini punya banyak PR berwarna oren dan merah dengan skor sekitar 80 di Google Pagespeed Insight sedangkan untuk versi non-AMP-nya lulus dengan nilai hampir sempurna.

Dan untuk PR dari versi AMP tersebut tidak bisa saya ulik atau perbaiki karena itu berasal dari script bawaan AMP yang kemudian menjadi bundle. Untuk masalah ini sampai sekarang pun pihak developer dari AMP menyatakan bahwa ini adalah bug yang masih dan sedang diusahakan solusinya.

Perhatikan kata-kata, SEDANG DIUSAHAKAN SOLUSINYA. Itu berarti, pihak developer AMP pun tahu bahwa ada bug tersebut di script AMP mereka yang menyebabkan error atau report dari LSI menjadi oren-oren dan merah-merah.

Namun, mereka tidak bisa menghapus atau mengatasi segera karena script AMP yang dibangun sudah dirancang sedemikian rupa supaya compatible dengan banyak script lain seperti third-party script AddThis dan lainnya.

3. Editing yang agak malesin (khusus pengguna Blogger)

Berhubung Blogger belum mengeluarkan fitur yang membuat penggunanya bisa mengakses fitur AMP dengan mudah, pengguna yang mau mencicipi fitur AMP harus mau mengedit manual postingan dan template blog-nya agar valid AMP.

Dan karena manual, memerlukan waktu yang nggak sebentar untuk mengeditnya.

Untuk blog saya pribadi, saat baru menyinkronkan versi AMP saya harus mengedit kurang lebih 100 postingan saya agar semuanya valid AMP. Cukup memakan waktu, loh.

Jadi buat kamu yang udah nge-blog agak lama menggunakan format HTML5 atau non AMP, saya sangat tidak rekomendasikan untuk mengubah template kamu jadi AMP karena kamu diharuskan untuk mengedit satu per satu setiap postingan kamu.

Seriusan itu cukup melelahkan.

Kelebihan AMPHTML

Kalau ditanya tentang kelebihan maka menurut saya pribadi ada beberapa keunggulan dengan mengaktifkan fitur AMP ini. Beberapa diantaranya adalah:

1. Loading versi mobile lebih cepat

Ini adalah pendapat saya pribadi mengakses versi AMP dari blog saya di handphone loadingnya memang lebih cepat. Statement ini memang bertentangan dengan argumen saya sebelumnya yang mengatakan bahwa hasil LSI dan GTMetrix-nya merah dan oren.

Argumen ini bisa saja invalid karena berdasarkan opini pribadi tapi begitulah fakta yang saya rasakan. Kalau ada yang nggak setuju, silahkan disampaikan saja.

Dan seperti yang kita semua ketahui, loading blog yang cepat memberi nilai plus untuk SEO blog/ web kita.

2. Dapat logo AMP di Hasil Pencarian

Satu lagi keunggulan dari menerapkan AMPHTML adalah tampilan di hasil pencarian Google yang berbeda. Kalau bisa mengoptimasi struktur dari AMP, kamu bisa membuat web story untuk setiap tampilan dari hasil pencarian artikel di web / blog kamu. Untuk lebih jelasnya silahkan lihat gambar di bawah ini:

Perhatikan nomor 1 dimana itu adalah tanda khusus yang diberikan Google untuk web yang menerapkan AMP.

Keuntungan mempunyai logo itu di hasil pencarian adalah:

1. Meningkatkan CTR pada artikel karena orang yang mengerti maksud dari tanda tersebut mengetahui bahwa loading dari web atau blog kamu cepat dan mudah di akses.
2. Meningkatkan visibility (daya tarik untuk dilihat) di hasil pencarian. Sebelum di-klik tentu artikel kamu harus menarik dulu dan hadirnya lambang itu bisa menarik perhatian pengguna Google, loh.
3. Ini masih isu tapi konon web yang menerapkan AMP mendapatkan perhatian lebih dari Google di hasil pencarian. Sekali lagi, untuk poin ketiga ini masih isu dan masih saya selidiki.

Penutup

Terlepas dari itu semua, saya sendiri memutuskan untuk menerapkan versi AMP untuk diterapkan dalam blog saya. Jadi, saya memutuskan untuk menggunakan 2 versi yaitu HTML5 sebagai base template dan AMPHTML sebagai tambahan atau alternatif sambil berdoa, AMPHTML dapat dianggap valid dalam konsep HTML5.

Bagaimana menurut kamu? Apa basis template blog/ web kamu? HTML5 atau sudah menerapkan AMPHTML? Mana yang menurut kamu lebih baik? Saya tunggu jawaban kalian di kolom komentar. Mari kita diskusikan ini bersama!

Semoga artikel ini ada manfaatnya dan sampai jumpa di artikel saya selanjutnya.