5 Cara Paling Efektif untuk Mempercepat Waktu Loading Website

 Seberapa cepat situs web atau aplikasi Anda pertama kali dimuat adalah kesan pertama yang didapat pengguna Anda. Dalam panduan ini, kami akan membuat daftar teknik yang telah terbukti untuk memangkas detik-detik berharga dari pemuatan halaman awal.

Initial load time (Waktu muat awal)

Waktu yang diperlukan dari saat pengguna atau pelanggan Anda memasukkan nama domain situs web Anda hingga saat mereka melihat konten adalah beberapa detik terpenting yang Anda miliki untuk membuat kesan pertama yang baik.

Namun, banyak pengembang web menganggap ini sebagai renungan. Semakin banyak perpustakaan ditambahkan untuk semakin banyak fitur, dan secara bertahap dari waktu ke waktu, mereka mulai melihat lebih sedikit konversi. Lebih buruk lagi, kerugian dalam konversi ini sulit dideteksi karena meninggalkan halaman yang memuat lambat sebelum sempat mengirim metrik apa pun.

Beberapa di antaranya adalah teknik yang dapat diimplementasikan di front-end dan beberapa di back-end. Apa pun itu, aplikasi web harus dimuat dengan cepat.

Tambahkan pengukuran yang tepat

Hal pertama yang perlu Anda lakukan adalah menambahkan pengukuran. Ada banyak tahapan proses pemuatan, dan Anda tidak akan tahu di mana hambatannya tanpa mengukur segmen yang tepat. Artinya, Anda harus melacak metrik untuk setiap segmen diagram ini.

Mari kita pelajari bagaimana Anda bisa melakukan itu.

Browser request to response served:

Ukur ini di server Anda. Anda ingin mendapatkan momen saat API Anda menerima permintaan saat melayani respons. Bergantung pada apakah panggilan eksternal ke, misalnya, database dibuat, ini bisa sangat singkat atau hambatan yang signifikan.

Response served to the response received:

Ini lebih sulit untuk diukur, tetapi salah satu cara untuk melakukannya adalah dengan menambahkan stempel waktu ketika respons Anda meninggalkan server Anda dan mengukurnya dengan waktu saat ini di sisi pengguna pada saat pertama yang memungkinkan (tag skrip di kepala HTML halaman).

Response received to first contentful paint:

Cat konten pertama adalah saat elemen pertama dirender di DOM. Itu bisa berupa sesuatu yang sederhana seperti beberapa teks, atau latar belakang, atau pemintal pemuatan. Ini dapat diukur dengan menjalankan Lighthouse di alat pengembang Chrome.

First contentful paint to largest contentful paint:

Cat konten terbesar adalah saat elemen terbesar dirender di viewport browser pengguna. Ini biasanya menandakan akhir dari bagian "rendering" dari pemuatan halaman, dan pengguna melihat layar terisi. Ini juga diukur dengan menjalankan Lighthouse.

Largest contentful paint to time to interactive:

Terakhir, waktu untuk berinteraksi mengacu pada saat pengguna dapat melakukan tindakan seperti menggulir, mengeklik, dan mengetik. Ini bisa sangat membuat frustrasi jika durasi ini lama karena mereka akan melihat layar yang dirender di depan mereka tetapi tidak dapat melakukan apa pun ketika mereka mengharapkannya! Ini adalah metrik lain yang Lighthouse bantu kami ukur.

Kurangi kode

Sekarang setelah Anda memiliki pengukuran, Anda dapat mulai melakukan pengoptimalan. Pengoptimalan memiliki pengorbanan, dan pengukuran akan memberi tahu Anda mana yang layak.

Halaman tercepat untuk memuat adalah halaman kosong, tetapi banyak kode dapat ditambahkan ke aplikasi sebelum siapa pun dapat melihat perbedaan kecepatan memuat antara itu dan halaman kosong. Yang sering terjadi adalah peningkatannya sangat kecil sehingga Anda tidak melihat perbedaan dari build ke build hingga suatu hari, itu mulai terasa lambat. Anda menyadari aplikasi Anda membengkak, dan pada titik inilah pengurangan kode akan membuat perbedaan.

Anda mendapatkan dua peningkatan kecepatan saat mengurangi kode:

• Aplikasi Anda ditransfer melalui jaringan lebih cepat.
• Browser pengguna menyelesaikan penguraian kode lebih cepat.

Percepatan pertama kecil; karena permintaan dikompres melalui kabel, jika Anda memotong 1 MB kode sumber, mungkin hanya menghemat 10 KB pada bandwidth. Namun, percepatan dari parsing sangat signifikan . Pengguna Anda mungkin menjalankan aplikasi Anda di seluruh spektrum browser dan komputer, banyak di antaranya tidak memiliki daya komputasi yang dapat mengurai kode secepat yang Anda lakukan sendiri.

Atau mereka dapat berjalan di perangkat seluler , bahkan dengan daya komputasi yang lebih kecil. Perbedaannya bisa dalam besarnya detik.

Jadi, semakin sedikit kode yang Anda miliki, semakin cepat browser dapat menyelesaikan penguraian dan menjalankan aplikasi Anda. Bahkan jika Anda ingin menampilkan layar pemuatan yang dikontrol Javascript, itu didahului dengan penguraian kode itu.

Tetapi Anda tidak ingin memotong fitur atau benar-benar menghapus kode. Untungnya, ada beberapa praktik standar untuk mengurangi kode tanpa harus melakukannya.

• Run your code through minifiers. Minifier melakukan pengoptimalan seperti nama panjang pendek menjadi pendek (signUpDarkModeButton menjadi ss), menghapus karakter spasi, dan lainnya untuk mendapatkan kode Anda sekompak mungkin tanpa kehilangan apa pun.
• Import partials. Perpustakaan sering dipenuhi dengan hal-hal yang tidak Anda perlukan tetapi dikemas bersama di bawah paket payung. Mungkin Anda hanya menginginkan fungsi tertentu dari pustaka utilitas, jadi alih-alih mengimpor seluruh pustaka, Anda dapat mengimpor kode yang diperlukan saja.
• Tree-shake dead code. Kadang-kadang Anda meninggalkan kode untuk keperluan debugging atau belum membersihkan fitur yang tidak digunakan lagi secara menyeluruh, dan meskipun ada di kode sumber Anda, fitur itu tidak pernah berjalan. Ada alat di rantai alat JavaScript , seperti Webpack, yang dapat mendeteksi kode mati atau dependensi yang tidak digunakan dan menghapusnya dari build produksi secara otomatis untuk Anda.

Membagi kode menjadi potongan-potongan

Setelah mengurangi sebanyak mungkin kode dari keseluruhan aplikasi, Anda dapat memikirkan untuk memeras ide ini lebih lanjut dan mengurangi kode yang diperlukan untuk pemuatan awal.

Katakanlah 20% dari kode Anda mendukung beberapa fitur aplikasi yang hanya dapat diakses pengguna setelah beberapa klik. Akan membuang-buang waktu bagi browser untuk mengurai kode tersebut sebelum menampilkan layar pemuatan. Membagi kode Anda menjadi beberapa bagian dapat secara signifikan mengurangi waktu untuk berinteraksi.

Alih-alih memiliki grafik ketergantungan impor yang saling terkait untuk semua file Javascript Anda, identifikasi area yang mudah dipotong. Misalnya, mungkin sebuah komponen memuat beberapa pustaka yang berat. Anda dapat mengisolasi komponen tersebut ke dalam filenya sendiri dan hanya mengimpornya saat pengguna siap berinteraksi dengan komponen tersebut.

Ada beberapa pustaka di luar sana untuk menunda pemuatan, bergantung pada kerangka yang Anda gunakan. Tidak perlu berlebihan dengan ini dan membagi setiap komponen karena pengguna memiliki beban awal yang cepat dan harus menunggu setiap interaksi selanjutnya. Temukan bagian terbesar yang dapat Anda segmentasikan, dan pisahkan kode sumber Anda di sana.

Render sisi server

Karena browser perlu melakukan semua penguraian dan kompilasi yang intensif dan memiliki pengguna di Chromebook dan perangkat seluler, salah satu teknik umum untuk mengurangi waktu muat adalah membuat server Anda mengambil sebagian dari beban itu. Artinya, alih-alih memberikan halaman kosong dan kemudian menggunakan Javascript untuk mengisi semua konten, seperti yang dilakukan sebagian besar aplikasi satu halaman saat ini, Anda dapat menjalankan mesin Javascript di server Anda (biasanya Node.js) dan mengisinya sebanyak mungkin data dan konten.

Server Anda akan jauh lebih cepat dan lebih dapat diprediksi daripada browser pengguna. Mau tidak mau, mereka masih perlu mengurai beberapa kode Javascript agar aplikasi menjadi interaktif. Tetap saja, perenderan sisi server dapat mengisi sebagian besar konten awal sehingga ketika pengguna mendapatkan halaman, itu sudah menunjukkan layar pemuatan atau bilah progres minimal.

Dan jika data diperlukan untuk tampilan awal, klien tidak perlu membuat permintaan terpisah untuk mendapatkannya; itu sudah terhidrasi dalam aplikasi untuk digunakan klien.

Kompres aset

Aset membuat halaman menjadi hidup, dan halaman tidak terasa dimuat sepenuhnya sampai aset tersebut selesai dirender. Ini mungkin latar belakang Anda, ikon antarmuka pengguna, gambar profil pengguna, bahkan pemintal pemuatan. Seringkali, aset juga dapat mengubah tata letak, jadi jika pengguna mulai mencoba berinteraksi dengan sesuatu, halaman mungkin terus melompat-lompat saat aset dimuat. Terkadang, aset ini adalah cat konten terbesar.

Tetapi aset juga merupakan salah satu bagian terberat dari sebuah aplikasi. Sebuah gambar dapat berukuran beberapa megabita, dan memuat banyak ikon dapat dengan mudah melampaui batas permintaan jaringan bersamaan maksimum browser, menyebabkan antrean pemuatan yang mengejutkan.

Anda hampir tidak pernah ingin mengunduh gambar dari internet dan kemudian mereferensikannya di aplikasi Anda. Gambar harus diubah ukurannya ke dimensi sekecil mungkin yang akan ditampilkan. Jika Anda memiliki profil pengguna yang ditampilkan dalam elemen kecil berukuran 50 piksel kali 50 piksel, tanpa mengubah ukuran, aplikasi Anda akan memerlukan waktu untuk mengunduh gambar lengkap yang terlihat tajam seperti wallpaper desktop, lalu mengubah ukurannya menjadi ukuran kecil.

Kedua, gambar dapat dikompresi tergantung pada formatnya. Hari-hari ini, webmadalah format yang lebih disukai, tetapi bidang kompresi di web terus ditingkatkan, dan banyak format baru akan segera hadir. Karena sifat format yang berubah, beberapa browser mungkin tidak mendukung yang lebih baru! Untungnya, teknologi browser memungkinkan browser pengguna memuat format apa pun yang mereka dukung.

Jadi, kompres ke format terbaru dan terhebat, tetapi juga pertahankan versi yang kurang modern, dan gunakan pictureserta videoelemen yang mendukung format mundur.

Kesimpulan

Ini adalah lima teknik paling efektif untuk memberi pengguna Anda pemuatan pertama yang sangat cepat di aplikasi Anda. Ini akan meningkatkan tingkat konversi Anda, kebahagiaan pengguna, dan bahkan peringkat pencarian , karena SEO menghargai waktu muat yang cepat. Di Terrastruct , kami menggunakan teknik ini dan lebih banyak lagi sehingga pengguna dapat membuat dan melihat diagram yang Anda lihat di artikel ini secepat mungkin.