Read Time:3 Minute, 47 Second

Dalam mengukur performa pagespeed website khususnya menggunakan pagespeed insights, maka sebenarnya kita juga sedang mengoptimalkan tingkat user experience (UX) website. Apakah website kita ini sudah nyaman bagi pengguna ataukah malah justru sebaliknya. Jika masih rendah tingkat UX nya maka mau tidak mau harus kita perbaiki. Nah dalam kesempatan ini, saya akan memberikan sedikit tips agar nilai pagespeed website anda menjadi di atas 90%an. atau paling tidak mendapatkan nilai warna hijau.

“User Experience (UX) adalah: pengalaman seseorang merasakan ketika ia menggunakan sebuah produk, aplikasi, sistem, ataupun jasa. Pengalaman ini juga termasuk persepsi seseorang terhadap aspek-aspek praktis seperti kegunaan, kemudahan penggunaan, dan efisiensi dari sebuah sistem atau aplikasi”

Dikutip dan disadur dari wikipedia.org
Langsung saja kepokok bahasannya. Didalam Pagespeed Insights, ada 6 faktor yang menjadi tolak ukur dalam menilai tingkat UX suatu website. Apa saja 6 faktor itu?

Apa saja yang menjadi faktor penilaian dari PageSpeed Insight?

Yang menjadi faktor dalam mengukur performa website, pagespeed insight menggunakan 6 point yaitu Avoid app install interstitials that hide content, Avoid plugins, Configure the viewport, Size content to viewport, Use legible font sizes, dan Size tap targets appropriately.

Berikut ini akan kita bahas satu-persatu dari ke-6 point diatas :

1. Avoid App Install Interstitials That Hide Content

Masalah ini biasanya muncul jika website Anda mempunyai iklan pop-up atau konten yang tetap tampil meskipun website anda diakses via mobile. Hal ini dikarenakan keterbatasan space dari layar handphone. Sehingga popup ini dianggap mengganggu kenyamanan pengunjung dan membuat mereka kesulitan melihat isi konten lain selain pop-up tersebut. Pop-up ini bisa berupa form untuk email subscribe, banner promo, iklan, dan lain-lain.

BACA JUGA  Pentingnya SEO untuk Perkembangan Website.

Cara Mengatasinya

Untuk mengatasinya, anda bisa membuat pengaturan di CSS (biasanya di dalam elemen @media screen only) agar tidak menampilkan pop-up untuk versi mobile. Caranya dengan menyisipkan kode css berikut ini:

#id_pop-up{display:none;}

Sesuaikan #id_pop_up tersebut dengan id pop up pada website anda masing-masing.

2. Avoid Plugins

Plugins yang dimaksud disini bukanlah plugin wordpress seperti yang banyak kita pakai. Plugin yang dimaksud adalah plugin yang digunakan untuk mensupport tampilan konten seperti Flash dan Java. Untuk isu ini tidak akan saya bahas karena memang jarang sekali muncul kecuali Anda mempunyai web yang kaya akan konten media.

3. Configure the viewport & 4. Size content to viewport

Kedua isu ini biasanya muncul pada website yang menggunakan theme-theme lama (termasuk theme blog ini sebelum saya permak) yang belum responsive dan belum support mobile. Jika anda menggunakan template versi premium mungkin ini tidak jadi masalah. karena biasanya kalau template premium sudah dioptimasi sedimikian rupa oleh sang pembuatnya. Lain halnya dengan saya pribadi, Karena saya menggunakan template gratis, dan juga keterbatasan saya dalam hal coding, maka saya butuh hampir seminggu untuk menyelesaikan tampilan responsive blog ini.

Cara mengatasinya

Untuk mengatasi hal ini, sebaiknya anda konsultasikan pada sang pembuat template website anda atau belajar dengan ahlinya ya..hehehe soalnya saya masih belum menguasi betul tentang coding. Baru sekedar mengenal dikit-dikit.

5. Use legible font sizes

Masalah ini biasanya masih berhubungan dengan 2 point diatas, yaitu dikarenakan theme yang belum responsive dan belum support mobile. Sehingga ketika diakses dari mobile, ukuran font jadi terlalu kecil untuk dibaca.

Cara Mengatasinya

Jika theme Anda sudah responsive tapi masih tetap terkena malasah ini, maka Anda bisa mencoba memperbesar ukuran font pada konten yang bermasalah. Caranya dengan mengedit css nya, kemudian cari id atau class dari konten yang bermasalah tersebut. Sesuaikan font-size ke ukuran yang lebih besar. Misalnya, kode web yang bermasalah seperti ini:

 #post-contents{font-size:8px;float:left;padding:5px;margin:auto}

Maka bisa anda rubah menjadi:

#single-contents{font-size:12px;float:left;padding:5px;margin:auto}

atau jika ingin lebih besar lagi:

#single-contents{font-size:14px;float:left;padding:5px;margin:auto}

6. Size Tap Targets Appropriately

Dari keenam masalah yang ada, isu inilah yang paling sering muncul. Isu size tap targets appropriately terjadi karena tap targets atau elemen-elemen yang bisa di klik (entah itu link, image, banner, dsb) berada terlalu berdekatan antara satu dengan yang lainnya. Biasanya ini terjadi pada elemen tags, breadcrumbs dan custom menu link.

BACA JUGA  Cara Menentukan Tujuan dan Target Ngeblog

Cara Mengatasi

Untuk pengguna wordpress, anda bisa menggunakan plugin gratis yang bernama Live Customizer. Jadi tinggal instal saja plugin tersebut, kemudian setting sesuai selera. Namun untuk pengguna blogspot, anda harus lebih tau tentang css dan html untuk mengatasinya. Silahkan gunakan inspect elemen pada layar tampilan website anda, kemudian cari elemen css mana yang perlu diperbaiki. Mungkin itulah faktor-faktor yang menjadi penentu peringkat UX website anda, semoga artikel ini dapat sedikit membantu untuk anda yang sedang mengoptimalkan tampilan Website ataupun blog nya.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Social profiles