Bagaimana cara menghapus file js yang tidak terpakai di wordpress?

Saat mencoba mengoptimalkan kecepatan situs, Anda benar-benar ingin menghapus file CSS JS yang tidak terpakai di WordPress. Ini juga dapat membantu Anda meningkatkan peringkat situs Anda di Google PageSpeed

Situs WordPress biasanya menggunakan banyak plugin. Ini termasuk plugin formulir kontak, pembuat halaman seperti Elementor, plugin e-niaga seperti WooCommerce, dan lainnya. Jadi, saat Anda mencoba mengoptimalkan waktu pemuatan halaman, Anda menemui hambatan

Anda mungkin memiliki host yang andal dan cepat, mengaktifkan caching, mengoptimalkan gambar Anda, dan menghapus semua plugin WordPress yang tidak benar-benar Anda gunakan

Berikutnya dalam daftar adalah mengoptimalkan atau menghapus file CSS JS yang tidak digunakan di WordPress

Meskipun Anda pasti dapat melakukan ini menggunakan plugin seperti Pembersihan Aset dan PurifyCSS, solusi CDN, atau alat seperti PurgeCSS, kami akan menjelaskan bagaimana Anda dapat melakukan ini tanpa memasang plugin lain di situs web WordPress Anda

Kami akan melewatinya

80% dari file CSS JS Anda mungkin tidak melakukan apa pun 80% dari waktu

Setelah desain ulang baru beberapa tahun yang lalu, saya telah melakukan pencarian pribadi untuk membatasi jumlah file CSS dan JavaScript di sini di Cozmoslabs

Setelah melalui skrip yang dimuat di situs kami, di beranda kami, kami berhasil memulai

• 15 skrip JS dan 11 file CSS untuk
• 4 skrip JS dan 2 file CSS

Mengapa plugin memuat begitu banyak file CSS JS?

Sangat masuk akal untuk menginvestasikan sedikit waktu untuk menghapus file CSS JS yang tidak terpakai di WordPress

Jika Anda mengambil plugin apa pun yang menawarkan kode pendek atau Widget untuk pengguna, kemungkinan itu akan memuat file JavaScript CSS di seluruh situs seperti itu

Apa yang dilakukan adalah memuat style.css dan filename.js di seluruh situs, terlepas dari kenyataan bahwa Anda menggunakan kode pendek tertentu pada satu halaman atau widget tertentu pada jenis posting kustom tertentu

Tidak ada cara untuk memilih di mana file CSS/JS tertentu dimuat. Jadi sangat masuk akal untuk menginvestasikan sedikit waktu untuk menghapus file CSS JS yang tidak terpakai di WordPress

Cara Menghapus File JS CSS yang Tidak Digunakan di WordPress

1. Lihat skrip apa yang dimuat di situs kami

Untuk menghapus skrip yang tidak digunakan, pertama-tama kita harus mencari tahu apa sebenarnya yang dimuat oleh tema dan plugin WordPress

Anda dapat melakukannya hanya dengan melihat kode sumber, membuat daftar file, dan kemudian mencari di mana tepatnya mereka dimuat dalam setiap plugin. Meskipun pendekatan ini berhasil, ada banyak solusi yang lebih baik di luar sana, jadi teruslah membaca

2. Daftar semua skrip yang dimuat dengan wp_enqueue_script

Hal pertama yang pertama, kami akan membuat plugin sederhana yang akan menampung semua kode kami

Buat file baru bernama wp_remove_assets.php dan tambahkan kode di dalam intisari ini. https. //inti. github. com/sareiodata/77796b5ed8108a516e82b888cb78bdae

Sebelum kita dapat menghapus file CSS JS yang tidak digunakan di WordPress, pertama-tama kita akan melihat apa yang dimuat

WordPress menggunakan dua variabel global untuk menyimpan skrip dan gaya

• $wp_scripts;
• $wp_styles;

Jika Anda melakukan var_dump dari kedua file global di front-end, Anda akan dapat melihat semua skrip terdaftar (berdasarkan plugin, tema, dan WordPress itu sendiri) serta yang saat ini dimuat di halaman kami

Kami terutama tertarik pada yang dimuat

Kami sedang melihat kaitan wp_print_footer_scripts_ dengan prioritas yang sangat tinggi untuk memastikan semua skrip selesai dimuat sebelum mencantumkannya

Selain itu, cantuman ini hanya ditampilkan jika Anda adalah administrator yang masuk. Jadi pengguna atau mesin telusur Anda tidak akan pernah melihat cantuman tersebut

wra_print_assets dan wra_asset_template akan dicantumkan

• nomor file CSS/JS saat ini;
• pegangan – ini adalah nama unik yang digunakan oleh wp_enqueue_scripts untuk memuat skrip sekali saja;
• sumber – lokasi file;
• dependensi – beberapa file memerlukan pustaka lain, seperti jquery;
• version – versi file CSS/JS saat ini

Ke depan, kita hanya memerlukan pegangan file CSS/JS, tetapi senang melihat informasi ini tercantum untuk mengetahui mengapa beberapa file dimuat

3. Hapus file CSS JS yang tidak digunakan di WordPress

Ada 4 fungsi utama ketika Anda ingin menghapus file CSS JS yang tidak terpakai di front-end WordPress

• wp_deregister_script($handle)
• wp_dequeue_script($pegangan)
• wp_deregister_style($handle)
• wp_dequeue_style($pegangan)

Anda dapat menggunakan tag bersyarat WordPress untuk menargetkan halaman tertentu atau seluruh jenis posting khusus

Bagian yang sangat keren dari melakukannya seperti ini adalah Anda dapat menggunakan tag bersyarat WordPress untuk menargetkan halaman tertentu atau seluruh jenis posting kustom. Ini memberi kami fleksibilitas yang kami butuhkan untuk memuat file CSS/JS tepat di tempat yang dibutuhkan

Hapus skrip yang tidak berfungsi dengan wp_dequeue_script

Terkadang skrip ditambahkan secara berbeda. Cara yang paling umum adalah dengan menampilkan skrip atau tag gaya langsung di header atau footer

Sekarang, ini salah karena banyak alasan

• Pengembang lain tidak mungkin melakukan deque aset;
• Bukan bagian dari variabel global $wp_scripts, konflik dapat muncul karena plugin lain dapat memuat jQuery versi lokal;
• Ini bukan praktik terbaik dan tidak boleh digunakan kecuali Anda benar-benar tahu apa yang Anda lakukan

Untuk menghapus skrip yang ditambahkan seperti di atas, Anda dapat menghapus seluruh pengait dari eksekusi

Kami menggunakan fungsi remove_action() yang disediakan WordPress. Saat menghapus tindakan, sebaiknya diingat

• Prioritas dari deklarasi add_filter() diperhitungkan saat melakukan remove_filter();
• Fungsi remove_filter() harus dipanggil setelah add_filter() yang ingin kita hapus ditambahkan

Dalam kasus khusus kami, saat menghapus file CSS/JavaScript yang tidak terpakai, salah satu skripnya adalah jetpack. css yang karena alasan tertentu ditambahkan dengan cara tertentu sehingga wp_dequeue_style() tidak berfungsi

Untuk beberapa alasan saya tidak bisa mengeluarkan jetpack. css, namun, ada pengait di dalam fungsi Jetpack implode_frontend_css() yang memungkinkan kami untuk tidak memuat file tersebut. Lihat fungsi wra_remove_jetpack() di dalam kode plugin

4. Seluruh plugin

Dan itu saja. Anda dapat menyalin/menempel seluruh plugin dari sini dan melakukan modifikasi agar lebih sesuai dengan situs WordPress Anda sendiri

Cara yang lebih baik untuk plugin untuk menyertakan file CSS/JS

Plugin memuat aturan CSS/file JS secara global karena berbagai alasan. Alasan utamanya adalah sebagai pengembang, tidak ada cara standar untuk mengetahui apakah kode pendek Anda digunakan di halaman atau tidak. Jadi kami memuat semua aset secara global

Juga, itulah yang WordPress. org merekomendasikan Anda melakukannya pada Codex sebagai contoh

Dengan begitu banyak contoh pemuatan skrip secara global, mudah untuk memahami mengapa hampir semua situs WordPress memuat 15+ sumber daya untuk setiap halaman ketika hanya membutuhkan beberapa di antaranya

Muat aset hanya jika kode pendek dijalankan

Kami telah menggunakan teknik ini di hampir semua aset plugin kami selama beberapa waktu

Pada dasarnya, kami memiliki variabel global yang dimulai dalam kode pendek kami, dan jika disetel dan benar, kami memuat aset kami seperti itu

Sayangnya, ada kekurangannya juga

• skrip perlu ditambahkan ke wp_footer dengan prioritas terlambat karena jika kita menambahkannya ke wp_enqueue_scripts, variabel global kita memiliki peluang bagus untuk tidak disetel;
• jika Anda memerlukan sesuatu yang ditambahkan di tajuk situs, ini tidak akan berfungsi;
• di wp_enqueue_script() Anda harus menyetel $in_footer ke true

Kesimpulan

Situs WordPress terdiri dari kode PHP, HTML, JS, dan CSS. Jika Anda ingin menghapus file CSS JS yang tidak terpakai di WordPress sebenarnya tidak terlalu rumit

Masalah yang lebih besar di sini adalah cara aset ditambahkan dalam tema dan plugin WordPress, banyak di antaranya ditambahkan secara global terlepas dari apakah diperlukan atau tidak.

Solusi lain untuk masalah ini dapat mencakup menggabungkan aset, tetapi meskipun demikian, memiliki file CSS dan JS yang besar akan memperlambat waktu muat halaman situs WordPress Anda, terutama pada perangkat seluler karena harus merender semua file CSS tersebut dan menjalankan semua itu.

Jaringan pengiriman konten (CDN) juga membantu, tetapi Anda masih memuat sumber daya yang tidak dibutuhkan. Ini juga dapat membantu Anda meningkatkan peringkat situs Anda di Google SERPs

Saya tidak dapat memikirkan solusi otomatis karena setiap situs berbeda, namun, ada plugin seperti Pembersihan Aset dan PurifyCSS dan alat untuk kode JS dan CSS yang diperkecil, seperti plugin cache WP Rocket atau PurgeCSS. Misalnya, mereka tidak memiliki fleksibilitas untuk menargetkan seluruh jenis kiriman khusus, namun, mereka jauh lebih mudah digunakan untuk pengguna non-teknis daripada menulis aturan bersyarat Anda sendiri

Jika Anda memiliki saran lain tentang bagaimana plugin dapat memuat CSS/JS dengan cara yang lebih hati-hati dan tidak secara global, saya ingin masukan Anda di bagian komentar

Bagaimana cara menghapus JS yang tidak digunakan?

Bagaimana cara menghapus JS yang tidak terpakai di WordPress tanpa plugin?

Bagaimana cara mengurangi JS di WordPress?

Bagaimana cara mengurangi mercusuar JavaScript yang tidak digunakan?