Cara mengubah web / blog WordPress menjadi AMP

Artikel ini terakhir diperbaharui pada 11 September 2020.

Halo selamat siang semua, gimana kabar nya ? semoga tetap sehat dan baik-baik saja ya. Kali ini saya akan share pengalaman mentransformasi web / blog menjadi berstruktur dan berskema AMP, khusus nya web / blog yang sangat saya banggakan yakni WordPress.

Artikel ini cukup panjang, sehingga saya sarankan anda membacanya dengan seksama, karena anda harus memahami terlebih dahulu apa itu AMP, manfaat nya, kekurangannya dan setelah anda memahaminya, anda bisa putuskan apakah situs anda cocok menggunakan AMP atau tidak.

Apa itu AMP

Sebelum melangkah untuk mentransformasi web / blog menjadi AMP, saya jelaskan secara sederhana kepanjangan dari AMP, karena sebenarnya AMP ini adalah akronim dari kalimat berbasa inggris, AMP (Accelerated Mobile Page), yakni framework / kerangka kerja untuk mempercepat loading halaman yang diakses dari perangkat mobile.

Kenapa butuh AMP

Speed up your web / blog

Kenapa web / blog khusus nya membutuhkan AMP, pertama dan paling utama adalah speed reason, kecepatan akses website yang jadi prioritas dari framwork ini, semakin banyaknya perangkat mobile yang terhubung dengan internet memberikan kesempatan besar bahwa web dan blog kita akan lebih banyak diakses melalui mobile phone.

Samakin cepat website anda di akses, from my experience as a website visitor, jika content delivery nya cepat maka pertama saya akan merasa nyaman dengan situs yang saya kunjungi, kedua pastinya isi konten dari situs itu sendiri. Tapi ingat yang pertama adalah cepat.

Memungkinkan situs kita di akses menggunakan sumber daya network internet yang kecil, sehingga walaupun koneksi internet user yang mengakses situs kita sedang kurang bagus signalnya, content tetap terdelivery.

Google dan Bing cache

Pada dasarnya website yang menggunakan kerangka kerja AMP akan di simpan pada server (cache) google dan bing untuk di deliveri ke user yang mengakses web tersebut dengan kecepatan yang maksimal, sehingga saat anda mencari sebuah situs digoogle dan bing anda akan langsung dilayani secara khusus oleh cache search engine besar ini. Menarik bukan ?

Silahkan anda baca terkait google cache disini : GOOGLE CACHE dan bing cache disini : BING CACHE

Ciri web AMP

Situs dengan ciri AMP dapat dijelaskan jika kita melihat code program / source code dari situs itu ditandai dengan <html amp>.

view source in chorme

Namun demikian jika anda kesulitan atau bukan seorang expert dalam web maka bisa dilihat dari hasil penulusuan situs tersebut di google search engine, contohnya adalah anda coba ketikan hendrawijaya.net kemudian tekan enter.

Jika nanti pada sebelah kanan alamat situs terdapat tanda gundala putra petir artinya situs tersebut mengadopsi kerangka kerja AMP. Simple kan ?

Btw, saya pribadi sudah mentransformasikan blog ini ke AMP.

Cara ubah web jadi AMP

Untuk mengubah web atau blog anda menjadi ber framework AMP anda bisa mengikuti pakem/aturan dari penulisan framework AMP pada situs resminya. Contohnya ada disini : AMP Guide Lines

Namun demikian sebagai pengguna WordPress anda dapat dengan mudah untuk mentransform situs dengan hanya menginstall plungin resmi yang dikembangkan oleh google dan automatic. Seperti hal nya pada blog ini (menggunakan plugin).

Alamat dari plugin amp silahkan klik pada link ini : plugin amp

Before Installation

Sebelum anda menginstall plugin AMP, yang perlu anda ketahui adalah AMP ini akan meminimalkan penggunaan css dengan batasan 75KB atau budget css anda hanya sebesar itu, dan paling anti dengan java script, jika pada situs anda terdapat plugin-plungin yang banyak memanfaatkan css dan java script sudah barang tentu AMP tidak akan berjalan secara maksimal, sebelum anda menghapus css yang over budget atau java script yang memblock render AMP.

css budget

Namun demikian, AMP memberikan jalan tengah dengan cara 3 model pendekatan ke situs anda. Yakni : standar, transitional, dan reader.

Pada dasarnya mode yang original/full adalah standart, jika situs anda ingin full AMP maka pilih standart, tapi konsekwensi nya java script harus hilang dan css tidak over budget dari 75Kb. Jika anda ingin tetap ada java script dan ingin mencoba AMP gunakan mode transitional. Jika hanya sebatas untuk membaca maka gunakan mode reader.

Berdasarkan pengalaman menggunakan AMP ini, pertama saya gunakan mode standart (full AMP) kemudian saya analisa satu per satu mana plugin yang tidak compatible atau memblock render AMP, kemudian saya hapus plugin nya dan saya mencari plugin pengganti (sejenis) yang compatible dengan AMP.

Cara melihat nya adalah dengan indikator pada toolbar wordpress anda jika AMP berjalan dengan baik maka berwarna centang hijau, jika ada masalah dengan AMP maka berwarna kuning dengan tanda seru. Klik pada tanda warning berwarna kuning dan anda cek script mana yang melakukan blocking.

amp validation

Theme and plugin

Untuk mengatasi plugin dan theme yang tidak compatible dengan AMP, maka anda bisa kunjungi situs : AMP WP yang memberikan informasi terkait ekosistem apa saja yang sudah support AMP, termasuk plugin dan theme populer bisa anda cek di : AMP Ecosystem.

Seperti contohnya theme yang saya pakai ini astra (sepertinya theme astra sedang diblokir oleh wordpress.org katanya ada TOS yang dilanggar, jadi anda perlu download langsung dari situs theme astra nya bukan dari wordpress.org), sudah full support dengan AMP.

Search Consule

Pada halaman search consule nantinya anda dapat menambahkan analisan terkait situs anda yang sudah support AMP untuk dianalisa apakah anda masalah dengan strukture nya atau tidak. Jika nanti ada masalah google akan mengirimkan email ke anda untuk segera di perbaiki, misalnya gambar terlalu kecil atau strukture AMP anda berubah dll.

Setelah anda perbaiki, akan diminta untuk validasi oleh google, waktu validasi tergantung berapa lama, bisa 1 hari atau beberapa hari untuk link anda apakah sudah sesuai dengan standart AMP atau belum

Anda bisa cek menggunakan tools ini Google Test AMP untuk mengecek apakah framwork anda sudah benar atau belum dalam implementasi AMP, kemudian anda bisa open AMP report pada menu dibawah yang ada tulisan See my site’s AMP status.

Indexing

Setelah anda transformasi ke full AMP / standart mode maka biarkan google melakukan indexing situs anda agar saat pencariann dan situs anda di akses akan lebih cepat dan mantap.

Kekurangan

Tentu banyak dari anda yang menanyakan apa kekurangan menggunakan AMP, sebagai gambaran karena AMP sangat membatasi css dan java script maka secara keseluruhan semua situs anda mungkin tidak berjalan seperti yang anda harapkan.

Bisa saja terkait dengan adsense, dan analytics, namun demikian google (jika anda gunakan google adsense dan analytics) sudah mengupayakan solusi untuk integrasi dengan AMP, anda bisa baca disini : ADSENSE GOOGLE amp landing-pages.

Untuk google analityc anda bisa baca artikel ini : google AMP FOR google analytics karena blog saya juga pasang google analitic dan tidak ada masalah. Karena pada menu dasboard AMP anda, komunikasi antara situs dengan server analytic diubah menggunakan Json.

Untuk adsense pada WordAds punya WordPress, anda harus mengubah ke mode transitional agar adsense bisa tampil, adsense WordAds di bundle dengan plugin jetpack pada menu traffic (jika anda upgrade layanan atau anda diterima oleh wordpress.com untuk memasang iklan di situs anda).

Kesimpulan

Pada akhirnya AMP memberikan solusi kecepatan yang signifikan pada situs yang menggunakan kerangka kerja ini, anda mungkin tidak bisa merasakan seberapa cepat karena mungkin koneksi internet anda sedang stabil dan anda hanya mengakses dari 1 provider internet.

Untuk test AMP ini benar-benar bermanfaat bagi situs anda adalah dengan melakukan uji coba seperti yang sudah saya lakukan pada beberapa koneksi internet, termasuk beberapa ISP seperti telkom, centrin, biznet. Dan juga penyedia telekomunikasi seperti indosat, xl, telkomsel dan smartren, serta gunakan beberapa browser untuk melakukan testing seperti : chrome, edge, firefox, uc browser, samsung browser, safari, duck duck go, opera, dll.

Hasilnya AMP ini sangat membantu dalam hal speed up pada blog saya. Tentunya saya berharap teman-teman yang sudah pengalaman menggunakan AMP bisa berkomentar untuk memberikan masukan. Terimakasih

Wassalam
Hendra Wijaya

Leave a Comment