Panduan Lengkap Remove Asset di WordPress

Panduan Lengkap Remove Asset di WordPress

Pada optimasi WordPress salah satu hal yang paling penting adalah memanagemen CSS dan JavaScript. Kebanyakan pengguna menggunakan plugin untuk menonaktifkan CSS dan JavaScript pada suatu halaman. Panduan Lengkap Dequeue Asset di WordPress diperuntukkan untuk Anda yang menghindari plugin dalam memanagemen CSS dan JavaScript.

Permasalahan yang sering terjadi di dalam WordPress adalah ada berbagai macam aset yang termuat seperti CSS dan JavaScript yang tidak digunakan pada suatu laman. Dengan menonaktifkan salah satu CSS maupun JavaScript pada suatu laman dapat meningkatkan kecepatan dalam website Anda.

Umumnya, metode yang digunakan pengguna adalah menggunakan plugin seperti Asset Cleanup dan Asset Manager. Namun penggunaan plugin terlalu banyak tentunya tidak bagus. Terutama Asset Cleanup memiliki fitur yang tidak diperlukan seperti: minifikasi CSS dan JavaScript. Penggunaan plugin yang terlalu banyak juga dapat memperlambat website, membebani server, dan memperlambat WordPress Dashboard.

? Panduan Lengkap Remove Asset di WordPress

Tingkat Kesulitan: Sulit
Plugin yang dibutuhkan: Code Snippets atau Advanced Scripts

Cara ini cukuplah sulit butuh kesabaran terutama dalam mencari $handle pada Style dan Scripts. Anda bisa memasukkan kode ini pada function.php. Namun, saya lebih memilih menggunakan Code Snippets atau Advanced Scripts. Pasalnya jika menggunakan function.php Anda harus memiliki Child Theme. Agar tidak merusak website Anda.

Code Snippets dan Advanced Scripts adalah plugin yang memungkinkan Anda untuk menulis PHP, CSS, maupun JavaScript tanpa merusak website Anda. Sedangkan Advanced Scripts Anda dapat memasukkan kode SCSS (SASS) dan LESS.

Install Plugin Code Snippets atau Advanced Script

Pada tutorial ini Anda memerlukan plugin Code Snippets atau Advanced Scripts. Plugin ini memudahkan Anda untuk menulis code PHP ke dalam website Anda tanpa merusak website Anda. Ditambah lagi, plugin ini dapat mudah untuk mengaktifkan dan menonaktifkan plugin yang tidak diperlukan.

Install Plugin Code Snippets (Gratis)

Langkah pertama adalah Install Plugin Code Snippets. Anda dapat menuju Plugin kemudian klik Add New Plugin atau Tambahkan Plugin. Kemudian klik Install Now dan aktivasi plugin dengan klik tombol Activate.

Code Snippet
Plugin Code Snippets

Install Plugin Advanced Scripts (Paid/Berbayar)

Jika Anda memiliki plugin Advanced Scripts Anda dapat mengupload dan mengaktivasi plugin tersebut. Jika Anda belum memilikinya, Anda dapat membeli plugin Advanced Script disini.

Keunggulan plugin ini adalah Anda dapat menonaktifkan code dan mengaktifkan code dengan mudah. Dan Anda dapat menuliskan CSS, SASS (SCSS), LESS, HTML, maupun Javascript.

Ada fitur yang menarik dari Advanced Script yaitu Condition. Anda bisa mengatur code dapat termuat pada halaman tertentu melalui Shortcode, melalui condition seperti Post Type dan lain sebagainya. Sehingga Anda tidak perlu menambahkan code tambahan untuk condition di dalam PHP.

Melakukan Pengujian Website

Langkah selanjutnya adalah melakukan pengujian. Anda dapat menggunakan Chrome DevTools atau GTMetrix untuk melihat aset apa saja yang termuat pada laman website Anda.

Buka halaman website Anda. Sebagai contohnya, saya membuka halaman utama website saya yaitu https://bagisaham.com/. Kemudian klik kanan dan click inspect. dan Kemudian klik Network dan klik CTRL + R. Kemudian akan tertampilkan aset apa saja yang termuat di dalam laman Anda.

Melakukan Pengujian
Aset yang termuat di dalam halaman utama Bagisaham

Pada hasil pengujian, diketahui ada beberapa aset yang ingin saya hapus. Saya akan menghapus beberapa aset yang memang tidak dibutuhkan di dalam halaman ini seperti wpFeatherlight.pkgd.min.js, copy-the-code, beserta aset CSSnya.

Mencari Handles

Pada tahapan ini, merupakan tahapan yang paling butuh banyak kesabaran dan ketelatenan. Untuk mencari handle dari Script maupun Style pada WordPress dibutuhkan ketelitian. Karena pada satu website dapat memuat lebih dari ratusan handle.

Masukkan kode dibawah ini ke dalam Code Snippets. Kode ini digunakan untuk mengetahui handle yang ada di dalam halaman website Anda.

function mencari_handle()
{
// Registered styles
var_dump(wp_styles()->registered);
// Queued styles
var_dump(wp_styles()->queue);
// Registered scripts
var_dump(wp_scripts()->registered);
// Queued scripts
var_dump(wp_scripts()->queue); }
add_action( 'wp_enqueue_scripts', 'mencari_handle', 100 );
Memasukkan code ke dalam website
Memasukkan Code ke dalam plugin Code Snippets (Klik untuk memperbesar gambar)

Berikan judul seperti contohnya saya memberikan nama Mencari Handle, kemudian Copy Paste Code diatas dan masukkan. Kemudian Klik Only run on site front-end. Langkah terakhir klik Save Changes and Activate.

Kemudian buka halaman website Anda. Akan muncul kode, dan mungkin Anda menganggap website Anda rusak. Tenang saja, berkat adanya Code Snippets maupun Advanced Scripts. Tidak akan merusak website Anda.

Mencari Handle 1
Tampilan setelah dimasukkan kode php diatas. Tenang saja website Anda tidaklah rusak.

Tenang saja, website Anda tidaklah rusak. Pada langkah ini klik CTRL+F untuk mencari handle pada website Anda. Sebagai contohnya saya akan menonaktifkan wpFeatherlight.pkgd.min.js, copy-the-code, beserta aset CSSnya.

Copy Paste featherlight untuk mencari asset dari wpFeatherlight.

Menghapus aset pada WordPress
Mencari handle featherlight (klik gambar untuk memperbesar)

diketahui handle dari wpFeatherlight adalah wp-featherlight. Kemudian lakukan hal yang sama untuk mencari copy-the-code. Dan diketahui pula handle copy-the-code adalah copy-the-code.

menonaktifkan code pada code snippet
Menonaktifkan kode pada Code Snippets

Jika Anda telah selesai untuk mencari handle yang dibutuhkan. Nonaktifkan kode pada Code Snippets. Buka Plugin Code Snippets pada halaman Dashboard WordPress Anda. Kemudian klik tombol dan kode otomatis ternonaktifkan.

Remove Asset di WordPress

Langkah terakhir, adalah menghapus aset yang tidak dibutuhkan pada halaman website Anda menggunakan kode berikut ini. Ada dua kode yang pertama untuk menghapus aset CSS dan kedua untuk menghapus kode JavaScript.

Dequeue CSS WordPress

function coolaborative_hapus_style(){

// dequeue style untuk CSS
wp_dequeue_style($handle);
wp_dequeue_style($handle);

}
add_action( 'wp_enqueue_scripts', 'coolaborative_hapus_style', 9999 );

untuk $handle diisi dengan handle yang kita dapatkan dari bagian Mencari Handle. Tadi kita mendapatkan handle wp-featherlight dan copy-the-code. Maka masukkan code seperti ini:

function coolaborative_hapus_style(){

// dequeue style untuk CSS
wp_dequeue_style('wp-featherlight');
wp_dequeue_style('copy-the-code');

}
add_action( 'wp_enqueue_scripts', 'coolaborative_hapus_style', 9999 );

Tambahkan code baru pada Code Snippets. Masukkan judul dan klik Only run on site front-end dan Kemudian klik Save Changes and Activates

Dequeue Script WordPress

function coolaborative_hapus_script(){

// dequeue script untuk JavaScript
wp_dequeue_script($handle);
wp_dequeue_script($handle);

}
add_action( 'wp_enqueue_scripts', 'coolaborative_hapus_script', 9999 );

Kebetulan, handle dari style dan script sama. Maka masukkan handle yang sama seperti diatas. Dalam beberapa kasus Style dan Script memiliki handle yang berbeda.

function coolaborative_hapus_script(){

// dequeue script untuk JavaScript
wp_dequeue_script( 'wp-featherlight' );
wp_dequeue_script( 'copy-the-code' );

}
add_action( 'wp_enqueue_scripts', 'coolaborative_hapus_script', 9999 );

Tambahkan code baru pada Code Snippets. Masukkan judul dan klik Only run on site front-end dan Kemudian klik Save Changes and Activates.

Bagaimana caranya menonaktifkan pada halaman tertentu? Semisal menonaktifkan pada halaman utama, post type tertentu, atau halaman yang spesifik?

Remove Asset atau Dequeue Asset pada halaman tertentu

Menghapus asset pada halaman spesifik melalui ID:

function coolaborative_hapus_asset(){
if( is_page(ID) ){
wp_dequeue_script( 'wp-featherlight' );
wp_dequeue_script( 'copy-the-code' );

wp_dequeue_style('wp-featherlight');
wp_dequeue_style('copy-the-code');

}
add_action( 'wp_enqueue_scripts', 'coolaborative_hapus_asset', 9999 );

Catatan Penting:
Anda dapat menggabungkan antara antara wp_dequeue_script dengan wp_dequeue_style secara bersamaan.

Masukkan ID page atau post Anda semisal ID adalah 4559 maka:

function coolaborative_hapus_asset(){
if( is_page(4559) ){
wp_dequeue_script( 'wp-featherlight' );
wp_dequeue_script( 'copy-the-code' );

wp_dequeue_style('wp-featherlight');
wp_dequeue_style('copy-the-code');

}
add_action( 'wp_enqueue_scripts', 'coolaborative_hapus_asset', 9999 );

Tambahkan code baru pada Code Snippets. Masukkan judul dan klik Only run on site front-end dan Kemudian klik Save Changes and Activates.

Menghapus asset pada Post Type Tertentu:

function coolaborative_hapus_asset(){
if ( is_singular( 'post' ) ){
wp_dequeue_script( 'wp-featherlight' );
wp_dequeue_script( 'copy-the-code' );

wp_dequeue_style('wp-featherlight');
wp_dequeue_style('copy-the-code');

}
add_action( 'wp_enqueue_scripts', 'coolaborative_hapus_asset', 9999 );

Sebagai contohnya saya menghapus pada Post Type Post maka masukkan post. Jika halaman masukkan page, dan jika Anda memiliki Custom Post Type. Masukkan sesuai dengan Custom Post Type Anda.

Menghapus asset pada halaman utama:

function coolaborative_hapus_asset(){
if (  is_front_page() ){
wp_dequeue_script( 'wp-featherlight' );
wp_dequeue_script( 'copy-the-code' );

wp_dequeue_style('wp-featherlight');
wp_dequeue_style('copy-the-code');

}
add_action( 'wp_enqueue_scripts', 'coolaborative_hapus_asset', 9999 );

Lakukan hal yang sama yaitu menambahkan kode. Simpan dan aktivasi kode Anda. Jika Anda memiliki pertanyaan Anda dapat menanyakan di grup jika Anda berlangganan Lifetime. Tulis di kolom komentar jika ada kesalahan kode.

Artikel ini dibuat oleh: Narwastu Nagoro dan Arya Dhiratara

Bagikan Artikel
magnifiercrosschevron-down