Dalam ekosistem pemasaran digital saat ini, penting untuk mengoptimalkan kinerja atau waktu buka halaman situs web Anda untuk mencapai hasil terbaik. Terbukti bahwa halaman web yang dimuat dalam waktu 3 detik memiliki pengalaman pengguna yang lebih baik dan karenanya mengurangi rasio pentalan atau dengan kata lain meningkatkan konversi. Secara statistik, ~50% pengguna cenderung berhenti jika dibutuhkan >3 detik untuk memuat halaman.
Mengukur performa
Kecepatan situs web didasarkan pada banyak aspek seperti kinerja server cloud, bandwidth jaringan, lalu lintas pengguna, konten halaman, volume gambar yang akan diunduh, pilihan tumpukan teknologi, waktu respons API, dll.
Cara yang paling disukai untuk memeriksa kinerja halaman web adalah menggunakan Google PageSpeed Insights. Alat ini menawarkan saran untuk meningkatkan kecepatan situs web. Namun, untuk memahami seberapa cepat kinerja situs web Anda dalam penerapan di dunia nyata, seseorang sering menggunakan pengukuran kecepatan dari Google Analytics.
Optimalkan waktu rendering file JS dan CSS
Mari kita ambil contoh pengendara sepeda di sini. Ketika dia bersepeda, waktu untuk mencapai tujuan akan tergantung pada jumlah gundukan kecepatan yang dia temui di jalan. Demikian pula, untuk halaman web setiap file JS dan CSS yang akan dimuat bertindak sebagai speed bump. Meskipun kami tidak dapat sepenuhnya menghindarinya, kami harus mencoba mengoptimalkannya agar memuat lebih cepat.
Hapus semua file JS atau CSS yang tidak diinginkan untuk dimuat pada saat pemuatan halaman — simpan hanya files yang diperlukan untuk memuat dan merender lipatan pertama halaman web. Yang tersisa dapat dimuat sesuai permintaan berdasarkan tindakan gulir/klik.
Perkecil dan kompres file JS dan CSS untuk mengurangi waktu buka.
Gunakan CDN seperti CloudFlare atau CloudFront untuk menyimpan file JS dan CSS di server edge, dan memungkinkan penyajian file dari lokasi terdekat dari pengguna akhir.
Gunakan properti seperti ‘async’ dan ‘defer’ untuk menunda pemuatan file.
Waspadai piksel pelacakan Web Anda
Hal lain yang harus diperhatikan adalah piksel pelacakan yang digunakan pada halaman Anda. Mereka dapat digunakan untuk pelacakan pengguna, pemetaan panas aktivitas, dll. Sebagai pengembang halaman web, Anda mungkin tidak memiliki kendali atas skrip pihak ketiga ini. Disarankan untuk memuat file skrip ini di akhir halaman sehingga waktu buka awal halaman Anda tidak terpengaruh.
Terapkan pengoptimalan gambar Web
Pertimbangkan situs web yang menggunakan banyak gambar — sesuatu yang khas dari sebagian besar situs web yang menghadap konsumen. Apa yang terjadi jika Anda mencoba memuat semua gambar di awal itu sendiri? Perlambatan definitif dalam waktu pemuatan. Tujuannya adalah untuk memberikan gambar berkualitas tinggi tetapi dalam ukuran terkecil. Bagaimana mengelola itu?
Gunakan format WebP dengan kompresi lossless, bukan JPEG atau PNG. Gambar SVG juga dapat digunakan jika memungkinkan.
Muat gambar berdasarkan resolusi perangkat. Untuk perangkat seluler, pilih dimensi yang lebih kecil dibandingkan dengan yang digunakan untuk desktop. Gunakan atribut srcset HTML untuk ini. CDN dapat dikonfigurasi untuk mengubah ukuran gambar secara otomatis dengan cepat sesuai resolusi perangkat.
Baca Juga : Tips Penggunaan Fotografi Pada Desain Website
Terapkan pemuatan lambat gambar — jika gambar tidak dimuat di lipatan pertama, maka gambar hanya dimuat saat Anda menggulir halaman ke bawah dan area pandang mencapai posisi gambar.
Optimalkan waktu respons server Web
Salah satu faktor utama dalam kecepatan halaman adalah waktu respons server cloud. Itu dapat dipengaruhi oleh faktor-faktor seperti konfigurasi atau spesifikasi server, solusi hosting yang digunakan, jumlah lalu lintas pengguna, kecepatan kueri basis data, dll. Selain mengoptimalkan faktor-faktor ini, beberapa ide lain untuk meningkatkan waktu respons server mungkin adalah:
Gunakan API dan caching basis data untuk meningkatkan kinerja API.
Cache halaman web di jaringan server global menggunakan CDN — ketika browser pengguna meminta file dari halaman web kami, permintaan itu akan dialihkan ke server terdekat yang memiliki salinan cache halaman Anda.
Jaga agar kode tetap bersihWeb
Terakhir, satu hal yang perlu diingat adalah “kode yang lebih bersih lebih mudah untuk dioptimalkan”. Yang bisa membantu adalah:
Jauhkan JS dan stylesheet dari file HTML.
Hindari menggunakan file CSS dan JS sebaris dalam kode HTML.
Gunakan kerangka kerja seperti AngularJS, ReactJS, NextJS atau VueJS untuk mendapatkan kontrol lebih untuk merancang perangkat lunak frontend secara modular.
Semoga tips ini membantu perjalanan Anda menuju penerapan halaman web yang dioptimalkan dan mendapatkan konversi yang lebih baik ke lalu lintas situs Anda!
