Load Website Cepat Dengan Optimasi JavaScript dan CSS

Photo By Pankaj Patel on Unsplash

Seperti yang kita tahu bahwa untuk mempercepat load website banyak yang harus dilakukan, salah satunya yaitu optimasi JavaScript dan CSS nya, supaya bisa lebih cepat dalam memuat website.

Mamang rasa temen-temen semua tahu tentang alat Google PageSpeed Insights yang biasa digunakan untuk mengecek load sebuah website. Silakan salin URL situs web kamu di dalamnya dan klik “Ananalize” sekarang juga.!

Jadi, apa yang akan mamang sharing pada artikel ini?

Mamang benar-benar berpikir bahwa dalam hasil pemeriksaan situs web kamu terdapat tugas untuk : menghilangkan JavaScript dan CSS atau melakukan optimasi yang memblokir render dalam konten sehingga akan menyebabkan load yang lama untuk website kamu.

Mungkin ini bisa menjadi sebuah tugas yang sangat sulit, tapi tenang kita akan perbaiki ini sama-sama, Jadi, bagaimana kita bisa memperbaikinya secara teori?

• Gabungkan semua JavaScript ke dalam satu file dan letakkan tepat sebelum tag penutup.
• Gabungkan semua CSS dan letakkan sebelum JavaScript, lalu, pilih gaya paling penting yang dibutuhkan untuk layar pertama situs web dan letakkan ke dalam situs web.

Itu hal yang harus kita coba lakukan, dan strategi diatas akan kita terapkan kedalam website kamu yang berbasis CMS (Content Management System) yaitu wordpress.

Dalam tema WordPress yang benar, semua file CSS dan JavaScript harus disertakan melalui fungsi wp_head()dan wp_footer().

Selain itu, kamu juga pasti tahu, file jQuery memiliki dependensi, misalnya, jika kamu memiliki plugin fancybox.js, maka plugin tersebut harus disertakan setelah jquery.jsfile dan tidak dapat disertakan sebelumnya. Artinya, jika jQuery ada di wp_footer(), maka Fancybox juga akan ada di footer.

Memindahkan jQuery dari wp_head() ke wp_footer().

Cara ini sangat mudah untuk menerapkannya, kamu cukup gunakan fungsi bawaan WordPress yaitu wp_deregister_script(), wp_register_script(), wp_enqueue_script() dan wp_enqueue_scripts action hook.

add_action('wp_enqueue_scripts', 'rudr_move_jquery_to_footer');

function rudr_move_jquery_to_footer() {
// unregister the jQuery at first
wp_deregister_script('jquery');

// register to footer (the last function argument should be true)
wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), false, null, true);

wp_enqueue_script('jquery');
}

Mamang ingin memberikan fakta bahwa beberapa file js dapat dipindahkan ke footer. Jadi, berhati-hatilah saat melakukan hal tersebut, agar website kamu tetap aman.

Hal ini sebenarnya tidak diperlukan untuk menggabungkan semua file JavaScript (Google PageSpeed hanya meminta untuk memindahkannya ke footer), tetapi mamang sangat menyarankan untuk melakukannya dengan lembar gaya CSS.

Coba kamu lihat Kembali gambar diatas yang mamang selipkan di awal artikel ini. Mengapa begitu banyak error yang harus diperbaiki? Tentu saja ini karena plugin WordPress.

Misalnya plugin Contact Form 7 memerlukan style sheet CSS-nya sendiri. Ukurannya tidak besar, tetapi ada satu permintaan HTTP lagi pada halaman. Jadi, apa yang dapat kita lakukan sekarang ?

1. Salin CSS plugin dan masukkan ke berkas CSS utama.
2. Periksa apakah ada tautan ke gambar di dalamnya url (‘pictures/loading.gif’). Ganti URL ke yang absolut, atau pindahkan gambar ke folder tema.
3. Buka pengaturan plugin dan cari tahu apakah kamu dapat menonaktifkan CSS plugin tanpa kode.
4. Jika tidak, buka tema kamu, kemudian buka functions.php dan sertakan kode dibawah ini

add_action( 'wp_print_styles', 'rudr_remove_contact_form_css', 100 );

function rudr_remove_contact_form_css() {
wp_deregister_style( 'contact-form-7' ); // the only parameter - ID of the CSS stylesheet
}

Bagaimana kita bisa mendapatkan id CSS untuk plugin lain? Caranya cukup sederhana, yaitu dengan buka HTML sumber halaman dan kamu akan melihat sesuatu seperti gambar dibawah :

Selain itu, kamu juga dapat mengotomatiskan tugas-tugas ini dengan plugin JS & CSS Script Optimizer, tetapi kami tidak menyarankan untuk menggunakan plugin untuk tujuan tersebut.

Itulah artikel yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru untuk Anda. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.

Sumber : Load Website Cepat Dengan Optimasi JavaScript dan CSS