Developer Muslim

025 AMP Roadshow Lebih Dalam

–

Episode ini merupakan lanjutan dari episode 24 yang secara singkat membahas AMP Roadshow di Jakarta & beberapa wawancara sama pesertanya. Di episode ini gw coba untuk membahas sedikit lebih detil mengenai agendanya dari catatan-catatan gw di acara itu.

Kalo ga mau baca semuanya karena kepanjangan, setidaknya lihat link-link penting dalam episode ini:

Intro & Keynote

Setelah memperkenalkan apa itu AMP, Paul Baukus – Advokat Google untuk AMP – menceritakan kisah-kisah sukses perusahaan-perusahaan yang sudah mengimplementasikannya. Di antaranya

  • Wego
    • search-to-converseion rate meningkat 49%
    • partner’s conversion rates_ meningkat 95%
  • Ali Express juga mengalami hal serupa
  • Plista meningkatkan publisher revenue dengan AMP
  • Triplelift & Cloudflare membantu Time Inc.’s revenue dengan AMP Ads

Lebih lanjut bisa lihat studi kasus perusahaan-perusahaan ini dan perusahaan lainnya.

Advanced interactivity with AMP

Prestasi-prestasi di atas itu hebat karena AMP ga lagi sekedar loading yang cepat, tapi lebih dari itu, tim AMP ingin agar user itu lebih nyaman berinteraksi di halaman AMP. Buat apa kalo situsnya cepat, tapi user ga bisa interaksi seperti kasih rating, komentar atau beli barang.

Beberapa solusi AMP untuk advanced interactivity adalah dengan on="event:action" attribute dan beberapa tag AMP yang baru di antaranya:

  • amp-bind
  • amp-mustache
  • amp-list
  • amp-live-list
  • amp-selector

Semua tag AMP, berbagai macam contoh interaksi dan penanganan event yang umumnya terjadi pada sebuah aplikasi web ada di AMP by Example.

AMP in Production

  1. Generate
    • Wordpress (plugin), Drupal
    • Buat secara manual dari awal sesuai dengan kebutuhan
  2. Optimize
    • import amp html saat perlu
    • import CSS hanya yg diperlukan untuk halaman yg ditampilkan aja
    • Sama halnya dengan gambar.
  3. Validate
    • Validator ada di situs resmi.
    • Penting untuk melakukan validasi karena kalau ada sebagian halaman yang ga valid, cache nya akan memberikan error.
    • Pastikan semua halaman itu valid dengan cara memasukkan proses validasi AMP menjadi bagian proses build & CI. Sementara ini bisa menggunakan amphtml-validator.
    • Untuk halaman yang dihasilkan dari user (user-generated seperti komentar, forum, atau nulis artikel), bisa melakukan cronjob untuk validasi secara berkala.
    • Validasi juga bisa dilakukan secara manual di Google Search Console.
    • Lakukan Web Page Test
  4. Measure
  5. Distribute
    • bisa melalui Google, Bing, Twitter dll.

Monetization in AMP & Progressive Web AMPs

Saat sesi AMP for fun and profit saya dapat telpon dan ada urusan jadi ga mencatat banyak. Kemudian untuk Progressive Web AMPs tidak saya bahas karena terlalu teknis. Silahkan lihat materi presentasi.

Diskusi Panel

Tanya: Kapan mulai implementasi AMP?
  • Kaskus & Kompas mulai implementasi awal 2016 diajak oleh Google untuk implementasi AMP
  • Bukalapak akhir 2016
  • Blibli 2 bulan lalu, sekitar Juli - Agustus 2017.

Tanya: kesulitan implementasi

  • Kaskus: awal-awal sempat kesulitan karena komponen-komponen nya banyak yg belum siap & Kaskus itu user-generated content.
  • Blibli: persiapan 2 bulan.
  • Kompas: Perlu waktu research, kemudian implementasi 2 bulan. Dapat bimbingan dari Google.
  • BukaLapak: 2 - 3 bulan. Karena mereka melakukan deployment setiap hari, BukaLapak punya jalur microservice khusus untuk AMP.

Tanya: SDM yang diperlukan

  • BukaLapak: 2 orang
  • Blibli: 1 orang fulltime dengan 2 orang magang

Tanya: Setimpal / sepadan ga antara usaha implementasi dengan hasil yang didapat?

  • Kaskus: trafik langsung meningkat begitu Google menampilan hasil pencarian
  • Blibli:
    • Loading lebih cepat (5 detik dari sebelumnya)
    • Lama waktu user ada di situs meningkat (12 detik lebih lama)
  • Kompas:
    • Kenaikan trafik sampai 5x & jumlah user yg akses meningkat 3x
    • Kecepatan halaman di buka lebih cepat hampir 2x (dari 3 detik, jadi 1,6 detik).
    • BukaLapak: hampir sama dengan yang lain.

Tanya: PWA dulu / AMP dulu?

  • BukaLapak & blibli: PWA itu lebih banyak komponen & komleks jadi lebih susah untuk diintegrasikan dengan sistem yang ada.
  • Kompas: bikin masing-masing & berencana akan digabungkan
  • Kaskus: yang utama di situs Kaskus belum implementasi PWA, namun properti yang lain https://garasi.id sudah PWA yang mungkin akan diteruskan dengan AMP.

Tanya: Untuk yang punya native apps, bagaimana rencananya (akan diapakan)? mengingat Progressive Web Applications sudah lumayan baik

  • Segmen user nya berbeda & tujuan awal Google dengan adanya PWA adalah mengoptimalkan mobile web dengan keterbatasan-keterbasannya.
  • BukaLapak & Kaskus menilai engagement user di aplikasi natif itu masih jauh lebih besar dibanding dari PWA.
  • PWA jadi strategi Kaskus (garasi.id) karena lebih cepat dibangun.
  • BukaLapak & Kaskus: Secara umum AMP, namun harus diperhatikan juga bounce rate nya karena sebagian besar cukup rendah.
  • Kompas: Kalau hal-hal yang ada di kedua versi itu sama, maka pake AMP.

Tanya: Gimana melakukan backend tracker yang sifatnya internal?

Berbagi itu Tanda Peduli

Jangan merasakan manfaat episode ini sendirian aja. Ayo sampaikan informasi ini ke teman-teman developer lainnya. Kasih rating & komentar yang bagus di layanan-layanan podcast ini. Saya juga senang sekali dapat tanggapan & komentar di bawah.

Menu