Optimasi Website: The Basic
Kita hidup di zaman yang serba instan.
Kalau kita ingin mencari berita, kita bisa dengan cepat melakukan pencarian di Google.
Kalau kita ingin menghubungi teman, kita bisa mengirim pesan teks ke Whatsapp.
Kalau kita ingin memesan makanan, kita bisa membuka aplikasi pesan antar makanan.
Sehingga kecepatan merupakan metrik yang penting saat ini.
Begitu juga dengan website.
Situs web yang lambat dapat membuat pengguna “kabur” atau setidaknya tidak nyaman menggunakan situs web kita.
Hal ini dapat mengakibatkan konversi seorang pengunjung ke hal yang kita tawarkan menjadi berkurang.
Hal ini juga dapat menjadi celah untuk kompetitor jika ingin menawarkan layanan yang lebih baik dari kita.
Namun bagaimana jika kita ingin mengoptimasi website kita? Apa saja langkah yang bisa kita lakukan? Mari kita bahas dibawah.
1. Optimasi Gambar
Optimasi pada gambar merupakan “easy-win”. Karena dengan mengatasi masalah ini kemungkinan besar kita sudah mengatasi masalah utama dalam optimasi situs web kita.
Cara yang dapat kita lakukan:
a. Mengompres gambar
Semakin kecil ukuran gambar yang kita gunakan, semakin cepat pula website kita memuat gambar tersebut.
Kalian bisa melakukan pengompresan manual jika hanya terdapat sedikit gambar.
b. Memuat dimensi sesuai yang dibutuhkan
Jika gambar tersebut hanya akan ditampilkan di perangkat mobile yang ukuran layarnya kecil, kita tidak perlu memuat gambar untuk layar desktop.
Dengan begini pengguna tidak perlu memuat gambar lebih dari yang mereka butuhkan alias ukuran gambar yang dimuat lebih kecil sehingga gambar dimuat lebih cepat.
c. Menggunakan Layanan Optimasi Gambar
Layanan ini akan mempermudah kita tidak hanya dalam mengoptimasi gambar secara otomatis seperti melakukan kompress dan mengatur ukuran tapi juga membantu pada pengolahan gambar tersebut misalnya melakukan crop atau mengubah kontras.
Selain itu layanan ini juga menyediakan CDN yang juga mempercepat proses pemuatan gambar karena sudah disimpan di memori, sangat berguna terutama untuk gambar yang sering dimuat.
Contoh layanan: imgix, Cloudinary, dan ImageKit
2. Lazy Loading
Jika semisalnya kita memuat sebuah laman suatu website, apa disaat bersamaan kita juga perlu memuat laman lainnya? Bisa jadi tidak.
Atau jika kita memuat suatu laman yang memuat sebuah tombol dan jika tombol itu dipencet akan menampilkan dialog, apa kita perlu memuat dialog itu terlebih dahulu juga? Bisa jadi tidak.
Bagaimana cara kita mencegah hal tersebut? Lazy loading adalah hal yang bisa membantu kita dalam hal ini.
Dengan lazy loading kita bisa membuat suatu laman / komponen hanya dimuat saat mereka dibutuhkan saja.
Dengan begini saat laman tersebut dimuat pertama kali akan terasa cepat karena yang dimuat hanya komponen yang dibutuhkan saja.
Kekurangannya? Saat kita memuat laman / komponen yang lain tersebut akan terjadi loading lagi karena laman / komponen tersebut belum dimuat saat pertama kali diakses.
Sehingga pertimbangkan lakukan ini pada laman / komponen yang frekuensi diaksesnya tidak sering saja.
Implementasi hal ini berbeda pada tiap library / framework. Namun berikut adalah contoh jika kita menggunakan Next.js.
import dynamic from 'next/dynamic'
const DynamicHeader = dynamic(() => import('../components/header'), {
loading: () => <p>Loading...</p>,
})
export default function Home() {
return <DynamicHeader />
}3. Pilih Package yang Optimal
Banyak sekali package yang bisa membantu kita dalam pekerjaan sehari-hari kita. Namun apakah bijak jika kita selalu menggunakan package untuk tiap masalah kita?
Ingat, menginstall package berarti menambah baris kode di dalam program kita. Menambah baris kode berarti menambah ukuran dan eksekusi program kita.
Sehingga gunakan package jika memang dibutuhkan saja.
Anggaplah kita sudah memutuskan jika kita membutuhkan suatu package dengan fungsionalitas tertentu untuk membantu kita.
Namun kita menemukan ternyata banyak pilihan yang dapat kita gunakan untuk masalah tersebut.
Salah satu cara yang dapat kita lakukan adalah memilih package yang seminimalis mungkin, misalnya yang ukurannya kecil atau memuat fungsionalitas yang kita butuhkan saja.
Untuk memilih package dengan ukuran kecil terbaik kita bisa menggunakan Bundlephobia untuk membandingkannya.
Pada gambar diatas kita mencoba mencari tahu library manipulasi waktu dan tanggal dengan ukuran terkecil, salah satu opsi yang populer adalah moment, namun dibawah kita bisa lihat package alternatif yang dapat kita gunakan beserta perbandingan ukurannya.
Ada juga konsep namanya tree shaking yaitu sekalipun sebuah package memiliki fungsionalitas lain yang tidak kita butuhkan, kita bisa melakukan import pada fungsionalitas yang kita butuhkan saja sehingga kode untuk fungsionalitas lain tersebut tidak ikut serta dalam kode final kita. Di Bundlephobia package yang mendukung itu ditandai dengan icon pohon bergoyang, di gambar diatas contoh package yang mendukung tree shaking adalah luxon dan date-fns.
4. Caching
Bagaimana jika kita mempunyai sebuah data yang sering diakses? Kita bisa menyimpan data tersebut pada cache.
Jika kita menggunakan layanan hosting seperti Vercel dan Cloudflare, website kita sudah otomatis dicache sehingga lebih cepat diakses. Begitu pula jika kita menggunakan layanan hosting gambar seperti yang disebutkan diatas.
Jika kita ingin mengatur cache sendiri misalnya pada api request atau gambar, kita bisa mengatur Cache-Control pada response header
Cache-Control: public, max-age=604800, immutableDengan begini maka response tersebut akan tersimpan di browser selama 7 hari.
Kalian bisa membaca lebih lanjut disini.
5. Virtualization
Kalau kata mereka, frontend itu utamanya melibatkan 2 hal yaitu mengurus form dan menampilkan list.
Nah, virtualization ini berguna untuk membantu kita dalam menampilkan list ini.
Dalam menampilkan list yang itemnya sedikit, kita bisa menampilkannya dengan naif atau dengan kata lain cukup menampilkan list tersebut apa adanya.
Namun jika list tersebut cukup banyak, hal tersebut akan mengakibatkan isu pada performa.
Karena tiap kali kita melakukan scroll pada list yang panjang, akan terjadi proses pembuatan DOM yang mahal dan item yang tidak ditampilkan di layar masih akan tersimpan di memori.
Virtualization bisa mengatasi hal tersebut dengan menggunakan kembali DOM yang telah dibuat pada saat awal dan cukup menampilkan data yang diperlukan sesuai posisi scroll saat ini tanpa menyimpan yang lainnya.
Kekurangannya adalah saat kita melakukan scroll saat cepat, kita akan melihat layar yang kosong sesaat karena komponen tersebut sudah tidak disimpan di memori sehingga diperlukan waktu untuk menampilkannya kembali.
Salah satu contoh yang pernah saya gunakan:
Sekarang kita sudah tahu beberapa cara mengoptimasi website kita, namun bagaimana cara kita mengeceknya? Kita bisa gunakan kakas berikut.
Auditing
Lighthouse
- Chrome extension gratis dari Google dimana kita bisa menganalisa salah satunya performa, setelah dilakukan analisa nanti akan diberi tahu hasilnya dan apa yang bisa kita tingkatkan
PageSpeed Insights
- Layanan gratis dari Google untuk menampilkan metrik web vital dan hal yang bisa kita tingkatkan
Web Vitals - Chrome Extension
- Chrome extension gratis dari Google untuk menampilkan performa website kita dari metrik web vital
Ada banyak lagi cara mengoptimasi website namun menurutku hal tersebut sudah cukup untuk dasar.
Perlu diketahui, tidak semua hal harus dioptimasi. Ada harga yang harus kita bayar untuk melakukan sebuah optimasi tersebut. Pastikan harga yang akan dibayar tersebut sepadan dengan dampak dari optimasi yang dilakukan.
Selamat bereksperimen!