Bikin website dengan skor 100 sempurna

Jadi, ini adalah masalah pertama yang saya hadapi saat pertama kali membuat website blog ini. Keinginan untuk membuat website dengan skor sempurna tidak muncul tiba-tiba. Saat ini user experience (UX) menjadi faktor yang penting untuk SEO. Jadi untuk bisa memenangkan ranking Google, selain membuat konten yang bagus, experience di website tersebut harus memuaskan

Pentingnya UX untuk ranking SEO

Jadi, saat ini Google sudah tidak berfokus pada teknikal SEO seperti beberapa tahun yang lalu. Saya ingat beberapa tahun yang lalu, pada Google Search Result Page (SERP) masih banyak website yang hanya mengandalkan keyword tetapi isi konten nya tidak sesuai atau bahkan tidak bermanfaat bagi user. Karena pada saat itu, Google hanya berfokus pada banyak keyword dari pada manfaat yang didapatkan user.

Sedangkan saat ini, Google berfokus pada kenyamanan user. Jika website tersebut nyaman dan kontennya bermanfaat untuk pengguna, maka website tersebut akan dibantu oleh Google untuk bisa naik peringkat di SERP.

Selain konten yang bermanfaat, website dengan UX yang baik akan meningkatkan kenyamanan user. Salah satunya adalah kecepatan website. Sebenarnya ada banyak faktor lain yang berperngaruh seperti security dan juga desain, tetapi kecepatan website merupakan hal pertama yang akan dirasakan oleh user.

Kecepatan website berhubungan dengan UX

Jika website membutuhkan waktu beberapa detik untuk bisa muncul, maka kebanyakan user akan segera pergi karena tidak mendapatkan apa yang mereka inginkan. Hal ini biasa disebut sebagai bounce rate, atau persentase seberapa banyak orang ketika masuk ke halaman web dan langsung pergi.

Ini kan sangat berpengaruh dengan rangking SEO kita, karena jika orang klik website kita dari SERP, kemudian keluar dengan tidak puas karena websitenya perlu waktu untuk menampilkan informasi, maka Google akan menurukan ranking kita karena dianggap tidak bermanfaat.

Sebaliknya jika website kita di klik dari SERP, kemudian user menghabiskan waktu di website kita, dan keluar dengan puas karena menemukan apa yang mereka cari, maka ranking website kita akan dinaikkan oleh Google karena dianggap berhubungan dengan keyword user.

Alat ukur performa website

Yang jadi pertanyaan sekarang adalah, bagaimana cara untuk mengukur performa sebuah website? Untuk web developer biasa menggunakan Page Speed Insight(PSI) atau Lighthouse. PSI ini diperkenalkan oleh Google sebagai sebuah tolak ukur untuk UX baik di mobile atau di desktop.

PSI dapat menampilkan skor 0 sampai 100 untuk tiap kategori seperti Performance, Accessibility, Best Practices, dan SEO. Tiap kategori memiliki fungsi masing-masing:

• Performance: biasanya berisi saran untuk perbaikan terkait website seperti gambar, javascript, css, dll.
• Accessibility: biasanya berisi saran untuk perbaikan terkait desain website seperti warna text, ukuran text, ukuran tombol, dll.
• Best Practices: jujur saya belum pernah dapat saran perbaikan untuk kategori ini, karena biasanya angkanya selalu di atas 90. Tetapi kalau tidak salah ini berkaitan dengan implementasi website kita, seperti keamanan, penggunaan HTTPS, dll.
• SEO: biasanya berisi saran untuk perbaikan terkait SEO yang baik seperti struktur HTML, meta tag, dll.

Sebenarnya banyak metriks lain yang lebih detail terkait performance ini, tetapi mungkin akan saya tuliskan di artikel terpisah.

Bagaimana cara buat website dengan skor sempurna

Sekarang pertanyaannya adalah, bagaimana cara untuk membuat website dengan skor sempurna. Terlebih saat ini sudah banyak sekali web framework yang bisa membantu kita untuk membuat website tanpa perlu belajar kode.

Menurut saya website dengan file HTML dan CSS saja sudah cukup bagus untuk bisa mendapatkan skor yang optimal, akan tetapi diperlukan beberapa tools tambahan untuk bisa membantu kita dalam mengoptimalkan website kita. Seperti meminimalkan file HTML, CSS dan gambar. Ada satu web framework yang bisa saya sarankan untuk bisa mendapatkan skor yang sempurna, yaitu Astro.

Pengenalan awal Astro

Astro adalah web framework yang berfokus kepada konten seperti blog atau dokumentasi. Astro termasuk dalam framework agnostic yang artinya Astro tidak bergantung pada framework tertentu seperti React, Vue atau Svelte.

Secara default, Astro digunakan untuk menghasilkan Static Site Generation(SSG) atau web statik yang hanya menampilkan gambar. Akan tetapi Astro juga bisa digunakan untuk mengambil data dari API atau Server-Side Rendering(SSR).

Lalu bagaimana dengan Client-Side? Astro bisa menggunakan framework favorit kalian seperti React, Vue, Svelte dan lain sebagainya. Astro menggunakan pendekatan island architecture dan partial hydration, jadi tiap komponen dalam website bisa menjalankan script client mereka sendiri.

Kesimpulan

Menurut saya, Astro sangat cocok digunakan sebagai web framework karena tidak terikat dengan framework manapun. Jadi kita bisa membuat website dengan menggunakan React pada halaman tertentu dan Vue pada halaman yang lain.

Tapi yang utama bagi saya adalah website harus cepat. Saat ini user yang sedang kita hadapi adalah user yang tidak sabaran dan gampang bosan. Jika kita membangun sebuah website yang mewah tapi lemot, saya yakin user tidak akan sempat merasakan kemewahan tersebut. Di artikel lain, akan saya jelaskan bagaimana struktur dari Astro dan cara menggunakannya.