{"id":532,"date":"2017-08-01T00:00:00","date_gmt":"2017-07-31T17:00:00","guid":{"rendered":"https:\/\/www.yogie.id\/2017\/08\/01\/mengapa-harus-memasang-amp-accelerated-mobile-pages-di-wordpress\/"},"modified":"2017-08-01T00:00:00","modified_gmt":"2017-07-31T17:00:00","slug":"mengapa-harus-memasang-amp-accelerated-mobile-pages-di-wordpress","status":"publish","type":"post","link":"https:\/\/www.yogie.id\/532\/mengapa-harus-memasang-amp-accelerated-mobile-pages-di-wordpress\/","title":{"rendered":"Mengapa Harus Memasang AMP (Accelerated Mobile Pages) di WordPress"},"content":{"rendered":"<p>Sebagai dosen sekaligus praktisi, saya harus terus mengikuti perkembangan teknologi yang sedang terjadi di sekitar. Salah satunya adalah teknologi web yang merupakan salah satu bidang yang saya kuasai. Ketika membandingkan website di tahun 90-an dengan website di tahun 2017, lompatan teknologinya sudah sangat jauh, bahkan di beberapa tahun terakhir ini sudah bermunculan teknologi yang tidak terbayangkan sebelumnya.<\/p>\n<p>Masih ingat ketika awal-awal munculnya smartphone, dimana pengguna sudah tidak memerlukan lagi perangkat komputer\/laptop untuk dapat mengakses website. Disini perubahan paradigma desain website sudah harus berubah, tidak lagi berlomba-lomba menampilkan fitur dan efek yang wah, tapi sekarang harus memikirkan bagaimana tampilan website harus bisa dibuka dengan cepat dan ringan di perangkat smartphone. Bahkan muncul istilah baru, &#8220;responsive web design&#8221;.<\/p>\n<p>Tentunya perubahan ini memakan korban, yaitu Flash. Memang sih, ketika semua orang masih mengakses website menggunakan komputer\/laptop, Flash sangat berjaya, karena bisa menampilkan efek-efek yang indah di mata. Bahkan saat itu Javascript seakan-akan terpinggirkan dan tidak menarik untuk dipelajari. Namun begitu semua orang pakai smartphone, Flash tidak bisa bersaing karena masalah kompatibilitas. Padahal, website seharusnya multi-platform.<\/p>\n<p>Javascript, yang tadinya sempat terlupakan ternyata diam-diam mengembangkan dirinya berevolusi menjadi teknologi yang sekarang menjadi tulang punggung layanan web (web services). Sekarang kita bisa menikmati teknologi website yang sesungguhnya, yaitu multi-platform.<\/p>\n<p>Sekarang smartphone telah menguasai dunia, siapapun telah memilikinya, dan Indonesia adalah pengguna smartphone terbesar di Asia Tenggara (ya iya lah..). Jadi ada pasar besar yang menanti disini, tinggal gimana caranya supaya website bisa diakses oleh penggunanya yang memiliki koneksi Internet bervariasi.<\/p>\n<p>Saya sudah mencoba hampir semua cara untuk mengoptimasi website supaya bisa diakses dengan cepat, hasilnya cukup memuaskan. Tetapi muncul masalah apabila website itu dikunjungi dari website lain, misalnya dari mesin pencari atau dari social media. Artinya, pengunjung tidak melakukan direct access melainkan datang dari website lain untuk menuju ke website kita.<\/p>\n<p>Maksudnya begini, misalnya Anda sedang melakukan pencarian di Google kemudian mendapatkan hasilnya. Lalu Anda klik salah satu website yang terdaftar disana, maka Anda akan di-redirect dari Google menuju ke website yang dituju. Disinilah jeda itu muncul, meskipun hanya sepersekian detik namun jika Anda sedang melakukan riset dan ingin mendapatkan hasilnya secepat mungkin, maka waktu jeda itu terasa lama. Belum lagi jika website yang dikunjungi ternyata sedang down\/maintenance.<\/p>\n<p><a href=\"https:\/\/www.ampproject.org\/id\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4043 size-large\" src=\"https:\/\/www.yogie.id\/wp-content\/uploads\/2018\/10\/amp.png\" alt=\"\" width=\"525\" height=\"291\" title=\"\"><\/a><\/p>\n<p>Disinilah peran AMP (<a href=\"https:\/\/www.ampproject.org\/id\/\" target=\"_blank\" rel=\"noopener\">Accelerated Mobile Pages<\/a>) diperlukan, terima kasih kepada Javascript yang telah membuat website menjadi lebih keren. Jadi AMP memungkinkan website dapat dibuka lebih cepat hampir tanpa ada delay, hal ini dikarenakan proses rendering akan berada di background sehingga user tidak merasakan proses menunggu saat loading website. AMP juga mengoptimasi penggunaan <a href=\"https:\/\/www.w3.org\/TR\/resource-hints\/#dfn-preconnect\" target=\"_blank\" rel=\"noopener\">API preconnect<\/a> supaya menghemat resource di prosesnya. Selain itu AMP mengharuskan untuk memodifikasi layout skrip sesuai dengan standar yang telah ditentukan.<\/p>\n<p>Menarik ya? Bagaimana implementasinya?<\/p>\n<p>Inilah salah satu alasan saya menyukai WordPress sebagai framework untuk pembuatan website. Memasang AMP di WordPress sangat mudah karena cukup menginstall plugin <a href=\"https:\/\/id.wordpress.org\/plugins\/amp\/\" target=\"_blank\" rel=\"noopener\">AMP<\/a> sebagai pondasinya dan plugin\u00a0<a href=\"https:\/\/id.wordpress.org\/plugins\/accelerated-mobile-pages\/\" target=\"_blank\" rel=\"noopener\">AMP for WP \u2013 Accelerated Mobile Pages<\/a> untuk modifikasi lebih lanjutnya. Kedua plugin ini sebaiknya diinstall semuanya supaya mendapatkan konfigurasi yang lebih lengkap.<\/p>\n<p>Proses konfigurasi juga tidak rumit, setelah plugin Anda aktifkan cukup menuju ke halaman pengaturan plugin untuk memilih layout yang akan digunakan. Pada saat tulisan ini dibuat, saya menggunakan layout 3 sebagai theme AMP saya. Lanjutkan dengan konfigurasi pada menu-menu yang lain. Bila sudah selesai, maka Anda akan memiliki url tambahan \/amp di setiap url website Anda. Contohnya https:\/\/yogie.id\/amp.<\/p>\n<p>Url berakhiran \/amp itulah yang menandakan bahwa WordPress sudah siap untuk melayani dalam mode AMP. Untuk memastikan, bisa dengan melakukan validasi di web <a href=\"https:\/\/validator.ampproject.org\/\" target=\"_blank\" rel=\"noopener\">The AMP Validator<\/a>, pastikan statusnya: PASS. Hasilnya, apabila ada orang yang melakukan pencarian di Google menggunakan perangkat smartphone, maka website Anda akan memiliki simbol AMP seperti gambar di bawah ini.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4047\" src=\"https:\/\/www.yogie.id\/wp-content\/uploads\/2018\/10\/Screenshot_2017-08-01-06-45-17-619_com.android.chrome.png\" alt=\"\" width=\"525\" height=\"934\" title=\"\"><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sebagai dosen sekaligus praktisi, saya harus terus mengikuti perkembangan teknologi yang sedang terjadi di sekitar. Salah satunya adalah teknologi web yang merupakan salah satu bidang yang saya kuasai. Ketika membandingkan website di tahun 90-an dengan website di tahun 2017, lompatan teknologinya sudah sangat jauh, bahkan di beberapa tahun terakhir ini sudah bermunculan teknologi yang tidak [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":535,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[68,6],"_links":{"self":[{"href":"https:\/\/www.yogie.id\/wp-json\/wp\/v2\/posts\/532"}],"collection":[{"href":"https:\/\/www.yogie.id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yogie.id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yogie.id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yogie.id\/wp-json\/wp\/v2\/comments?post=532"}],"version-history":[{"count":0,"href":"https:\/\/www.yogie.id\/wp-json\/wp\/v2\/posts\/532\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yogie.id\/wp-json\/wp\/v2\/media\/535"}],"wp:attachment":[{"href":"https:\/\/www.yogie.id\/wp-json\/wp\/v2\/media?parent=532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yogie.id\/wp-json\/wp\/v2\/categories?post=532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yogie.id\/wp-json\/wp\/v2\/tags?post=532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}