Berbagi Tips dan Cara Optimalisasi Aplikasi Web NextJS
Hallo apa kabar? Semoga kalian baik-baik saja dimana pun kalian berada. Kali ini saya akan berbagi tips bagainana cara mengoptimasi aplikasi web yang menggunakan NextJS untuk tools benchmarking-nya saya menggunakan Lighthouse.Untuk kamu yang belum tahu, Lighthouse merupakan tools yang wajib digunakan untuk kamu developer aplikasi web. Dengan tools ini kamu akan mengetahui apakah aplikasi website kamu sudah memenuhi beberapa kaidah seperti dari segi performa, aksesbilitas (berkaitan dengan user experience), best pratices, SEO, dan juga PWA. Untuk tools lain yang sering saya gunakan kamu bisa membaca artikel ini. Kamu juga bisa menggunakan WebDev Measure untuk mengukur performa website. Kemarin saya sempat mengukur performa website saya, hasilnya seperti ini.
Performance
- Serve images in next-gen formats
Apakah kamu tahu kalau Google mempunyai format image yang baru, yakni WebP. Format ini memiliki kemampuan lossy dan loseless. Apa itu lossy dan loseloss? Jadi gambar akan mengalami kompresi sehingga ukurannya akan lebih kecil dibandingkan ukuran aslinya (lossy). Meski begitu gambar tidak otomatis berubah atau berbeda (secara visual) dibandingkan gambar asli atau gambar sudah dikompres tidak kehilangan kualitasnya.
Beberapa web browser modern seperti Google Chrome, Firefox, Opera dan Edge, sudah support format WebP. Untuk coverage support-nya bisa kamu lihat di situs ini Can I Use, di situ dijelaskan bahwa hingga saat ini coverage support-nya sudah 94%. Sudah cukup baik bukan?
Memang belum semuanya ter-cover, kalau kamu tidak mau menggunakan WebP kamu masih bisa menggunakan format lain seperti PNG atau JPEG. Situs yang biasa saya gunakan adalah TinyPNG dan juga TinyJPG.
- Gunakan attribute "lazy" saat memuat gambar
Salah satu aspek yang mesti diperhatikan dalam pembuatan website adalah FCP atau First Content Painful. Menurut survei, 53% pengguna akan pergi apabila suatu website membutuhkan waktu lebih dari 3 detik untuk merender halaman website. Salah satu yang memperlambat proses render website adalah pada saat memuat image atau gambar. Untuk mengatasi masalah ini kamu bisa menambahkan atribute "lazy" pada saat memuat gambar, dengan menambahkan atribute ini seperti memberitahu pada browser "bagian ini nanti saja dirender, render dulu bagian lain yang lebih penting". Untuk contoh kodenya seperti berikut : <img src="./gambarku.png" loading="lazy">. Untuk lebih lengkapnya kamu bisa membaca artikel berikut ini dan juga ini.
Accessbility
- <html> element does not have a [lang] attribute
Dengan menambahkan atribut "lang" pada tag html akan sangat berguna dan membantu untuk meningkatkan SEO website kamu. Jadi Google akan tahu apakah website kamu menggunakan bahasa Inggris atau bahasa Indonesia. Sehinngga Google akan lebih merekomendasikan artikel atau website kamu apabila cocok dengan background pengguna seperti lokasi dan faktor lainnya. Selain itu, hal ini akan sangat membantu bagi para teman tuna netra yang biasa menggunakan bantuan tools Narator untuk membacakan isi teksnya. Jadi mesin narrator akan menyesuaikan gaya bicara sesuai atribute lang yang ditambahkan, jadi akan lebih enak didengar.
- Background and foreground colors do not have a sufficient contrast ratio
Ketika membuat tampilan website ada baiknya kamu juga mempertimbangkan penggunaan warna. Hal ini terkait dengan aksesbilitas dalam hal kemudahaan membaca teks. Apabila warna teks dengan background tidak memiliki kontras yang cukup maka hal ini dapat menyusahkan user. User akan menatap lebih lama ke layar yang dituju sampai menemukan maksud teks tersebut. Solusinya kamu bisa menggunakan berbagai macam tools untuk mengecek kontras, salah satunya adalah website ContrastRatio. Pastikan nilainya di atas 4.5, semakin besar semakin bagus.
- Nanti dilanjut lagi... :)
0 komentar:
Posting Komentar