Rizkyblog.com – JavaScript adalah salah satu dari tiga bahasa utama di halaman web. Meskipun tidak diperlukan, sebagian besar situs memerlukan JavaScript agar berfungsi. Anda dapat memiliki peralatan server terbaik di pasaran, namun kode JavaScript yang buruk dapat menjadi penghambat dan memperlambat waktu muat situs Anda. Berikut beberapa tip untuk mempercepat situs Anda dengan penyesuaian JavaScript sederhana.
Memanipulasi Elemen Sebelum Menambahkannya ke DOM
DOM adalah setiap elemen termasuk HTML dan datanya yang dicetak di browser. Merupakan hal yang umum bagi pengembang untuk mengambil nilai dari DOM dan mengubahnya berdasarkan masukan pengguna. Ini mungkin tampak membosankan, tetapi memanipulasi nilai setelah Anda mencetaknya ke DOM memerlukan waktu lebih lama dibandingkan melakukannya dengan menghapus elemen DOM.
Misalnya, jika Anda memiliki beberapa konten yang ingin Anda cetak ke elemen div, gunakan JavaScript untuk membuat perubahan pada konten sebagai string, lalu cetak string ke elemen tersebut. Anda mengurangi kebutuhan mesin JavaScript untuk memproses HTML saat Anda bekerja dengan konten variabel.
Mempercepat Kode JavaScript Anda
- Perkecil File JavaScript Anda
Saat Anda membuat file JavaScript, pemformatan membantu Anda membaca kode dan memahami logikanya. Setiap pembuat kode yang pernah lulus kuliah mengetahui pentingnya memformat sintaks agar lebih mudah dibaca. Namun, server web tidak memerlukan karakter format ini untuk memproses file. Anda dapat mengurangi ukuran file JavaScript dengan memperkecilnya.
Minifying adalah proses menghilangkan karakter pemformatan khusus seperti tab dan spasi tambahan dari file pengkodean. Ukuran file dikurangi beberapa byte menghemat waktu pengguna Anda mengunduh skrip. Langkah ini penting untuk situs yang memiliki beberapa skrip eksternal yang harus dimuat agar situs web dapat berfungsi.
- Gunakan Caching
File JavaScript Anda jarang berubah. File CSS Anda juga jarang berubah. Caching keduanya hanya menyisakan konten pada halaman yang perlu diunduh. Jika Anda menggunakan CDN, maka Anda tidak perlu khawatir tentang caching.
Anda harus menggunakan CDN bila Anda bisa. Banyak perpustakaan JavaScript populer tersedia di CDN. JQuery, Bootstrap, dan Angular adalah tiga contoh perpustakaan yang tersedia di host cloud populer. Cukup colokkan URL CDN, dan Anda tidak perlu lagi khawatir menyimpan file di server Anda. CDN secara otomatis menyimpan objek dalam cache sehingga Anda dapat fokus pada kode lokal, bukan pada pustaka bersama.
- Tempatkan Script Termasuk di Bagian Bawah Halaman HTML Anda
Saat browser memuat halaman web, browser memuatnya dari atas ke bawah. Merupakan kebiasaan bagi pengembang untuk menempatkan link CSS dan JS di bagian kepala halaman HTML. Bagian ini biasanya ditempatkan di bagian atas halaman setelah tag HTML pembuka, yang berarti browser terlebih dahulu memuat file JS dan CSS, setelah itu memuat konten tag body.
Detik yang diperlukan untuk memuat file JS dan CSS akan membuat perbedaan dalam keterlibatan pengguna, terutama jika Anda memiliki beberapa file untuk dimuat sebelum konten. Karena file JS dan CSS tidak menampilkan konten apa pun kepada pengguna, cara tradisional menyusun HTML ini dapat memengaruhi statistik keterlibatan pengguna Anda. Sebagai gantinya, Anda dapat menempatkan file JS dan CSS di bagian bawah halaman Anda di bawah tag body.
Penting untuk dicatat bahwa halaman masih dimuat dalam jangka waktu yang sama, namun kecepatan yang dirasakan jauh lebih cepat. Pengguna melihat konten sebelum file JS dan CSS dimuat, sehingga tampak lebih cepat meskipun dimuat dalam jangka waktu yang sama, sebuah fenomena yang disebut sebagai kecepatan aktual versus kecepatan yang dirasakan. Peningkatan kecepatan yang dirasakan akan meningkatkan keterlibatan pengguna tanpa menambahkan sumber daya server yang mahal ke jaringan Anda.
- Kompres File dengan GZip
GZip adalah alat kompresi file yang mengurangi ukuran unduhan skrip Anda. Itu dapat melakukan hal yang sama untuk gambar Anda. Anda mengompresi file dan menyimpan versi ini di server Anda. Browser mengunduh versi file yang lebih kecil dan terkompresi dan mengekstraknya ketika konten lengkap diunduh ke komputer lokal.
Gunakan GZip ketika Anda memiliki beberapa file besar yang disertakan di situs Anda. Hal ini biasa terjadi pada situs seperti situs pengunduhan gambar atau situs web yang menggunakan file besar untuk menyajikan data. Ini dapat menghemat waktu memuat situs Anda dan meningkatkan keterlibatan pengguna. Ini juga menghemat ruang penyimpanan, jadi jika Anda membayar host berdasarkan sumber daya yang Anda gunakan, tagihan hosting Anda juga bisa dikurangi.
- Hindari Penggunaan Pernyataan “Dengan”.
Pernyataan “dengan” cocok untuk pembuat kode, tetapi dalam hal kecepatan pemrosesan, pernyataan ini buruk. Pernyataan “with” adalah kode singkat yang memungkinkan pembuat kode melewatkan pengetikan nama variabel dan hanya mereferensikan properti dan metode untuk objek menggunakan karakter titik (“.”). Itu membuat pengkodean lebih cepat dan mudah, tetapi mesin JS memuat semua properti dan metode, bukan hanya yang direferensikan ketika nama variabel lengkap diketik.
Menggunakan “dengan” adalah cara yang mahal untuk membuat kode ketika kecepatan menjadi masalah. Periksa skrip Anda dan ganti referensi “dengan” dengan nama variabel.
- Perhatikan Loop Anda, Terutama Loop Bersarang
Loop dapat membebani mesin apa pun, tetapi hal itu penting. Cara terbaik untuk menjaga kode Anda tetap optimal adalah dengan bertanya pada diri sendiri apakah suatu fungsi dapat digunakan alih-alih perulangan yang kompleks. Biasanya, fungsi yang lebih baik untuk kecepatan pemrosesan dapat menggantikan loop tersebut.
Perulangan bersarang bisa sangat melelahkan jika Anda memiliki beberapa ratus catatan untuk diulang. Juga mudah untuk menimbulkan bug dalam kode Anda dengan terlalu banyak loop bersarang. Pertimbangkan untuk memfaktorkan ulang kode Anda jika Anda menemukan bahwa loop menyebabkan situs Anda tersendat.
- Selalu Gunakan Kata Kunci “var” untuk Definisi Variabel
Kata kunci “var” mendefinisikan variabel baru, tetapi ini bukan suatu keharusan. Jika Anda tidak menggunakan “var”, mesin JavaScript akan dipaksa untuk mencari seluruh rantai cakupan. Anda mungkin akan menetapkan variabel dengan nilai fungsi yang dikembalikan, tetapi jangan melewatkan deklarasi “var”. Ini menghemat waktu pemrosesan ketika mesin JS dapat menemukan variabel lokal tanpa mencari rantai cakupan.
Selain menggunakan “var”, hindari penggunaan variabel global jika variabel lokal sudah mencukupi. Variabel global dalam bahasa apa pun tidak disukai karena selalu memerlukan lebih banyak waktu untuk memproses dan mengurangi kecepatan aplikasi.
Ringkasan
Mengoptimalkan file JavaScript hanyalah salah satu solusi untuk situs web yang lamban. Jika Anda telah menilai situs Anda dan ternyata situs Anda terlalu lambat, maka langkah pertama yang baik adalah mengevaluasi file JS dan kode Anda.