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