Hapus wordpress javascript yang tidak digunakan tanpa plugin

Setelah kita serius dalam mengoptimalkan situs web WordPress, salah satu tugas penting adalah menemukan semua file JavaScript dan CSS yang tidak terpakai, dan menonaktifkannya

Daftar isi

Mengapa JavaScript dan CSS tidak berguna?

Nah, hal pertama yang harus Anda ketahui adalah bahwa mereka tidak selalu sia-sia

Mereka mungkin tidak diperlukan di beberapa halaman tetapi berguna di halaman lain, meskipun Anda mungkin juga menemukan beberapa file JavaScript dan CSS yang benar-benar tidak terpakai di seluruh situs web Anda

Salah satu alasan untuk menemukan file JavaScript dan CSS yang tidak digunakan adalah karena plugin, karena ketika pengembang membuat utilitas untuk WordPress, dia tidak tahu di mana setiap orang yang menginstal pluginnya akan menggunakannya, dan apakah itu membutuhkan JavaScript atau CSS

Contoh yang jelas adalah formulir kontak Formulir Kontak 7. Untuk pengoperasian dan tampilan yang benar, diperlukan JavaScript dan CSS, tetapi karena pembuat plugin tidak tahu di mana Anda akan meletakkan formulir, apa yang dilakukan plugin adalah memuat sumber daya yang diperlukan di seluruh web

Tapi tidak hanya plugin, WordPress juga membuat "kesalahan" semacam ini, misalnya memuat file untuk menampilkan emoji, bahkan jika Anda tidak menggunakannya di situs web Anda

Cara mendeteksi JavaScript dan CSS yang tidak terpakai

Jika jelas bagi Anda mengapa hal ini terjadi, mari kita lihat cara mendeteksi file kode yang tidak terpakai ini dan mempelajari cara menghapusnya, bergantung pada setiap kasus

Untuk mencapai ini, kami akan menggunakan konsol pengembangan browser. Tangkapan layar yang akan saya tunjukkan adalah tangkapan layar Chrome tetapi sangat mirip di peramban modern lainnya

Untuk memulai, buka konsol browser dengan kombinasi tombol atau dengan mengklik kanan halaman untuk menganalisis dan mengklik opsi "Periksa"

Setelah konsol terbuka, kami akan menambahkan alat yang disembunyikan secara default. Cakupan, yang akan Anda temukan dengan mengklik menu pengaturan → Alat lainnya → Cakupan

Saat Anda mengklik 'Cakupan', alat baru akan muncul di bagian bawah konsol, dengan ikon bagi Anda untuk memuat ulang halaman dan menganalisis sumber daya yang dimuatnya

Jika Anda mengklik ikon tersebut, halaman akan dimuat ulang dan daftar sumber daya akan muncul, diurutkan dari bobot terbesar hingga terkecil dalam byte, dan kolom yang kami cari, "Byte yang tidak digunakan"

Alat ini, 'Cakupan', digunakan untuk menunjukkan semua kode yang memuat halaman dan indeks cakupannya, yaitu seberapa penting kode tersebut untuk memuat halaman itu, dari 0 hingga 100

Seperti yang akan Anda lihat, ini sangat berguna untuk apa yang kami analisis

Nah, dalam daftar itu Anda akan melihat bahwa ada file JavaScript dan CSS dengan 100% byte yang tidak terpakai di halaman, yaitu file tersebut telah dimuat tetapi halaman tidak membutuhkannya untuk memuat dan menampilkan semua kontennya dengan benar.

Nah, dari sana, jika Anda mengklik file apa pun dengan byte yang tidak digunakan, kodenya akan ditampilkan di bagian atas, dengan indikator warna merah adalah byte yang tidak digunakan dan biru adalah byte yang digunakan.

Tentu saja, dalam file dengan 100% byte yang tidak terpakai, semua kode akan berwarna merah

Setelah Anda mengidentifikasi file JavaScript dan CSS mana yang tidak digunakan di halaman atau halaman Anda, kami tahu harus mulai dari mana, cara mengoptimalkan pemuatan dengan menghilangkan pemuatan semua kode yang tidak perlu

Catatan. Saat mengoptimalkan situs web WordPress Anda, menghapus JavaScript dan CSS yang tidak digunakan harus dilakukan per halaman. Ada beberapa file JS dan CSS yang tidak terpakai yang dimuat di seluruh situs, kebanyakan per halaman. Namun, sangat ideal untuk memulai dengan yang memuat tidak terpakai di seluruh situs terlebih dahulu

Cara menghapus kode JavaScript dan CSS yang tidak digunakan dan/atau tidak perlu

Ada beberapa cara untuk menghilangkan kode-kode yang tidak terpakai ini

Dengan kode

Seperti biasa, salah satu metode terbersih untuk menghilangkan apa yang tersisa adalah dengan menggunakan fungsi WordPress yang, dalam hal ini, menghindari pemuatan file yang tidak perlu ini.

Contoh yang sangat jelas adalah skrip dan gaya yang dimuat WordPress secara default untuk kompatibilitas dengan emoji yang, jika Anda tidak menggunakannya, mereka akan selalu dimuat secara tidak perlu.

Yang harus Anda lakukan adalah, dalam hal ini, nonaktifkan mereka seperti ini

// Disable Emojis
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );



Code language: JavaScript (javascript)

Contoh bagus lainnya, yang berlaku untuk banyak plugin, adalah mengganti gaya dan skrip Formulir Kontak 7 pada halaman yang tidak memiliki formulir, seperti ini

// Remove styles Contact Form 7 in pages without forms
add_action( 'wp_print_styles', 'wphelp_deregister_styles', 100 );
function wphelp_deregister_styles() {
if ( ! is_page( 'contact' ) ) {
wp_deregister_style( 'contact-form-7' );
}
}
// Remove JavaScript Contact Form 7 in pages without forms
add_action( 'wp_print_scripts', 'wphelp_deregister_javascript', 100 );
function wphelp_deregister_javascript() {
if ( ! is_page( 'contact' ) ) {
wp_deregister_script( 'contact-form-7' );
}
}
Code language: JavaScript (javascript)

Untuk menghapus file CSS dan JS yang tidak digunakan, Anda dapat menggunakan fungsi __return_false() atau __return_empty_array()

Sebagai contoh

add_filter( 'jetpack_implode_frontend_css', '__return_false' );
Code language: JavaScript (javascript)

Anda juga dapat menggunakan fungsi wp_dequeue_script atau wp_deregister_script() untuk mengganti skrip atau wp_deregister_style() untuk mengganti gaya

Sebagai contoh

add_action( 'wp_enqueue_scripts', function ()
{
wp_dequeue_script( 'devicepx' );
}, 20 );
Code language: JavaScript (javascript)

Dengan plugin

Jika Anda tidak cukup percaya diri untuk menghapus file JSS dan CSS tanpa menggunakan kode, ada plugin yang dapat membantu kami dalam tugas ini

Dan favorit saya tanpa ragu, adalah Pembersihan Aset, yang meskipun memiliki versi Pro berbayar, dengan versi gratis yang kami miliki di direktori WordPress. org melayani kami dengan cukup baik untuk tugas ini

Pembersihan Aset. Penguat Kecepatan Halaman

Asset CleanUp adalah plugin untuk mengoptimalkan WordPress yang memiliki banyak utilitas tambahan, sangat mirip dengan Autoptimize, tetapi yang menonjol di atas yang lain adalah pengelolaan JavaScript dan CSS, baik secara global maupun halaman demi halaman.

Untuk melakukan ini, ia memiliki beberapa layar pengaturan untuk mengonfigurasi apa yang ingin kita analisis dan optimalkan dan bagaimana caranya

Tapi yang paling penting, itu menambahkan sebuah kotak ke editor WordPress dari mana kita dapat memeriksa file JS dan CSS mana yang dimuat di setiap halaman dan, dari sana, memutuskan apakah akan menonaktifkannya atau tidak.

Mereka ditampilkan diurutkan berdasarkan kode yang berasal dari plugin, tema, inti WordPress, pihak ketiga dan kode khusus, dan untuk melihat wajah sumber daya tertentu Anda harus mengembangkannya

Setiap bagian memberi tahu Anda file JS dan CSS mana yang dimuat, dari mana sumber dan opsinya

• Nonaktifkan di halaman saat ini
• Nonaktifkan di seluruh situs
• Nonaktifkan pada semua jenis konten saat ini (posting, halaman, dll. )

Selain itu, Anda akan melihat bahwa ada opsi lanjutan, ditandai dengan gembok, milik versi Pro, tetapi dengan opsi versi gratis kami dapat dengan mudah menonaktifkan JavaScript dan CSS yang tidak digunakan

Yang mengatakan, jika Anda mengidentifikasi pada langkah sebelumnya file JavaScript dan CSS mana yang tidak digunakan pada halaman, Anda memiliki informasi yang diperlukan, dari pengaturan plugin, menonaktifkannya dengan aman dan cepat, dengan mengklik tombol

Ingatlah untuk menyegarkan halaman tempat Anda mengubah pengaturan

Menipu. Jika Anda mengetahui JS atau CSS apa pun yang hanya diperlukan untuk halaman atau posting tertentu, Anda tidak perlu menonaktifkannya berdasarkan halaman demi halaman kecuali yang membutuhkannya. Nonaktifkan secara global dan kemudian Anda hanya dapat mengaktifkannya di halaman itu

Saya harap saya telah membantu Anda memahami tugas penting pengoptimalan WordPress ini, dan ini akan membantu Anda mengelola sumber daya web dengan lebih efisien, menawarkan waktu pemuatan yang lebih baik, dan pengalaman yang lebih baik bagi pengunjung dan pengguna Anda

Bagaimana cara menghapus JavaScript yang tidak terpakai di WP?

Bagaimana cara menghapus CSS dan JS yang tidak digunakan secara manual di WordPress?

Bagaimana cara mengurangi JavaScript yang tidak terpakai?

Bagaimana cara mengurangi JavaScript yang tidak terpakai di PHP?