Cara mempercepat loading di web berita

Karena 53% mobile user meninggalkan web yang loadingnya lebih dari 3 detik

Arnold Saputra
May 27 · 3 min read

Masih membahas tentang mendesain untuk

Berita merupakan hal yang paling di gemari untuk pengguna di negara berkembang. Kemudahan user mencari berita dengan adanya smartphone membuat user makin haus akan informasi. Kapanpun dan dimanapun asalkan ada jaringan internet dan tentunya batere smartphone , berita bisa dengan mudah di dapatkan. Apalagi pengguna bisa memilih berita mana yang akan dia baca atau konsumsi tak seperti media konvensional yang hanya satu arah.

Kendala utama user membaca berita

Tampilan FB instant article

Dua kendala terbesar yang menghalangi user mengkonsumsi berita adalah koneksi internet yang lamban dan tidak optimalnya web untuk browser / peramban yang kurang populer. Mayoritas pengguna pertama smartphone (early user) menggunakan browser bawaan smartphone nya. Ada yang nama aplikasinya “Browser” seperti di perangkat Samsung, ada yang namanya “Internet” dan banyak pula yang menggunakan UC browser.

Padahal kebanyakan designer dan developer mengoptimalkan website untuk Chrome dan Firefox (Banyak loh yang lupa optimize untuk Safari yang merupakan default browser iOS). Walhasil banyak web yang tampil pecah-pecah, layout berantakan bahkan, error karena iklan yang di tampilkan menutupi halaman tidak bisa hilang sehingga membuat browser crash.


Solusinya

Salah satu solusi populer untuk menghadapi hal diatas adalah dengan cara membuat web kita yang ada berita, blog dan berbagai halaman informatif lainnya menjadi AMP.

Salah satu solusi mempercepat loading berita adalah AMP

adalah salah satu solusi yang di berikan Google untuk menghadapi masalah tersebut. Salah satu contoh suksesnya adalah Kompas dot com yang mengadopsi yang untuk memuat 1 page alhasil mengkonsumsi hanya 10% dari ukuran data aslinya dan 5X lebih cepat. Hal inipun pastinya meningkatkan konsumsi berita bagi user dan menurunkan bounce rate ( Web yang loadingnya lebih 4 detik itu bounce ratenya diatas 70% alias, 70% di tinggalkan user). Untuk melihat.


Kenapa AMP bisa ajaib seperti itu?

  1. Style CSSnya di jadikan default dari google. jadi web yang punya style, font dan berbagai layout yang custom akan terlihat sangat berbeda sekali dengan versi AMP.
  2. Iklan-iklan yang pop up dan berbagai iklan di dalam iklan (iklanception) di enyahkan. Kebutuhan user diatas adalah kebutuhan bisnis yang bisa menghalangi tujuan user Anda yakni, membaca berita. Percuma ada banyak iklan di halaman itu tapi, ga ada yang buka page nya.
  3. JavaScript di enyahkan. Hal kedua yang membuat web load lama adalah banyaknya Java script (hal pertamanya kebanyakan image yang ga di optimize). Dengan meniadakan JS maka akan menmpercepat waktu loading.
  4. Page yang sudah di AMP akan di taruh di dalam server khusus Google. Ibaratnya ini server CDN (content delivery network) khusus dari Google yang akan di update setiap hari. Makin jarang konten kamu di buka user maka secara otomatis akan di eliminasi dari server AMP. Kalau ada yang buka lagi maka akan masuk AMP lagi.

Kesimpulan:

Tampilan AMP yang sederhana namun, mumpuni dalam menghadirkan berita.

Bagi UX designer yang mengerjakan produk berita atau yang kontennya statis, AMP ini cocok banget untuk menurunkan bounce rate. Hal yang perlu diperhatikan adalah bagaimana mengetes halaman kalian dari versi normal dan AMP. Ada juga AMP Story yang lebih keren dari AMP versi di atas jadi, AMP bukan batasan kita untuk berkreasi yah.

AMP Story sebuah fitur baru yang lebih bagus dan keren dari Google. Jadi gak ada alasan lagi deh kalau AMP tidak bisa kece tampilannya.

Setidaknya ada beberapa komponen utama yang perlu kamu persiapkan, yaitu AMP HTML, AMP JS, dan AMP CDN. Sebagai UX juga perlu mengecek, Jangan sampai ada elemen penting yang hilang atau jadi aneh. Untuk yang ingin mengimplementasikan AMP bisa .

Selain Google AMP ada juga solusi dari Facebook yakni .

Insight

UI, UX, Bisnis Design

Arnold Saputra

Written by

🏝 UI/UX designer | Fearless Multimedia designer | Design Leadership | Still learning 🏝 — https://about.me/arnoldsaputra

Insight

Insight

UI, UX, Bisnis Design