Hapus css wordpress yang tidak terpakai tanpa plugin

Saat Anda mencari cara untuk menghapus kode CSS dan JavaScript yang tidak terpakai dari situs web WordPress Anda, kemungkinan besar Anda menyelam lebih dalam untuk meningkatkan kinerja situs. Lagi pula, kode apa pun yang tidak perlu dimuat oleh browser adalah kode yang tidak memperlambatnya

Namun, secara umum juga merupakan ide bagus untuk memeriksa situs WordPress Anda secara teratur jika Anda dapat menghapus CSS atau JavaScript yang tetap tidak terpakai. Ini terutama berlaku saat mengubah tema Anda atau memasang plugin baru. Dalam posting ini, Anda akan belajar bagaimana melakukannya secara manual dan melalui plugin

Apa itu CSS dan JavaScript yang Tidak Digunakan?

Kode yang tidak digunakan persis seperti apa itu. Markup CSS dan JavaScript yang dimuat saat seseorang melihat situs Anda tetapi sebenarnya tidak melakukan apa pun untuk tampilannya

Seperti yang ditunjukkan, ini buruk karena dapat mengurangi kecepatan memuat halaman Anda. Ini pada gilirannya dapat memengaruhi pengalaman pengguna, pendapatan, dan bahkan peringkat pencarian Anda. Sedemikian rupa sehingga ketika Anda menguji kecepatan situs web Anda, terkadang Anda dapat menemukan peringatan seperti ini di hasilnya

Dari Mana Ini Berasal?

Pertanyaan pertama yang mungkin Anda miliki adalah mengapa ada kode yang tidak digunakan di situs web Anda. Jika Anda menjalankan situs WordPress, ada banyak komponen yang dapat menambahkan kode ke halaman Anda

Pertama-tama, ada tema yang bertanggung jawab atas desain. Itu membawa lembar gaya CSS dan file JavaScript sendiri. Di sini, pengembang tema paling sering memasukkan semua kode CSS ke dalam satu file bernama style.css yang mencakup markup untuk semua jenis elemen (tombol, tabel, formulir, galeri, widget, dll. ). Sebagian besar waktu, ini memuat terlepas dari apakah elemen yang dipermasalahkan bahkan ada di halaman

Jadi, di luar gerbang, kemungkinan besar setidaknya ada beberapa CSS di halaman Anda yang tidak Anda gunakan. Selain itu, banyak tema dilengkapi dengan skripnya sendiri untuk fungsionalitas khusus. Pengiriman mereka mungkin tidak selalu dioptimalkan

Kemudian, jika Anda memasang plugin, plugin tersebut dapat menyertakan sumber dayanya sendiri. Misalnya, jika Anda menambahkan formulir kontak ke situs Anda, plugin yang Anda gunakan untuk itu kemungkinan akan memanggil beberapa CSS saat dimuat untuk gaya. Sama untuk plugin pembuat halaman, yang hadir dengan banyak pilihan desain

Selain itu, mungkin ada semua jenis skrip lain yang memuat halaman Anda seperti font web atau perangkat lunak analitik. Meskipun banyak di antaranya berukuran kecil dan biasanya dimuat dengan cepat, jumlahnya dapat bertambah dengan mudah

Selain itu, beberapa sumber daya dimuat di tempat yang tidak diperlukan. Misalnya, plugin formulir kontak mungkin memuat file bahkan di halaman yang tidak memiliki formulir kontak

Jika mulai menghambat kinerja Anda, saatnya untuk mempelajari cara menghapus aset CSS dan JavaScript yang tidak terpakai ini sehingga WordPress tidak memuatnya secara tidak perlu

Cara Menemukan Kode yang Tidak Digunakan di Situs WordPress Anda

Jadi, bagaimana Anda mengidentifikasi apakah ada kode di halaman Anda yang seharusnya tidak ada?

1. Alat Uji Kecepatan

Salah satu caranya adalah dengan menggunakan plugin pengujian kecepatan yang disebutkan di atas. Saat Anda menjalankan halaman Anda melalui Google PageSpeed ​​Insights, Anda mungkin melihat peringatan yang ditampilkan di atas pada Peluang. Ketika Anda mengkliknya, layanan bahkan akan menampilkan file yang menyebabkan peringatan tersebut

GTmetrix juga akan mencantumkan ini sebagai masalah di bawah Struktur termasuk file yang menyebabkannya

2. Alat Pengembang Peramban

Pilihan lainnya adalah menggunakan alat pengembang browser. Di Chrome, buka alat (melalui menu, lalu Alat Lainnya > Alat Pengembang atau Cmd/Ctrl+Shift+I), tekan Esc untuk membuka laci, lalu gunakan ikon tiga titik di pojok kiri atas untuk membuka Cakupan

Alternatifnya, bisa juga dengan menekan Cmd/Ctrl+Shift+P untuk membuka baris perintah. Ketik "cakupan" dan pilih Tampilkan Cakupan dari daftar yang muncul

Setelah siap, klik tombol muat ulang untuk mulai merekam. Ini akan memberi Anda daftar file yang dimuat browser untuk halaman dan informasi seperti jenis, ukuran, dan yang paling penting, persentase dan byte yang tidak digunakan halaman

Klik dua kali salah satu file untuk melihat perincian baris demi baris tentang kode mana yang benar-benar berkontribusi pada halaman dan mana yang tidak

Ini bisa sangat menenangkan tetapi merupakan tempat yang bagus untuk mulai mencari tahu kode apa di situs Anda yang benar-benar diperlukan dan mana yang tetap tidak terpakai

Meninggalkan pertanyaan, apakah Anda harus menguji setiap halaman seperti itu?

Jika situs Anda kecil, ini mungkin. Namun, jika tidak, mulailah dengan halaman terpenting Anda seperti beranda, artikel landasan Anda, tentang halaman, toko, dll. Alternatifnya, targetkan halaman Anda yang paling lambat terlebih dahulu, di mana kemungkinan besar Anda akan menemukan masalah seperti ini. Periksa artikel pengujian kecepatan situs web untuk lebih jelasnya

Menghapus CSS dan JavaScript yang Tidak Digunakan Dengan Plugin WordPress

Baiklah, sekarang kita tahu cara menemukan kode yang tidak terpakai di situs Anda, saatnya berbicara tentang cara menghilangkannya. Hal pertama yang ingin kita lihat adalah bagaimana melakukannya dengan plugin WordPress

Ada beberapa opsi yang membuat ini relatif mudah. Untuk contoh ini, kami akan menggunakan plugin Pembersihan Aset. Anda akan menemukan beberapa opsi lagi di bawah ini

1. Instal Plugin

Hal pertama yang perlu Anda lakukan adalah menginstal plugin. Untuk itu, buka Plugins > Add New dan cari berdasarkan nama. Temukan Pembersihan Aset di hasil pencarian dan klik tombol Instal Sekarang, lalu klik Aktifkan setelah selesai menginstal

2. Aktifkan Mode Tes

Sebelum mulai menghapus kode CSS dan Javascript yang tidak digunakan, Anda perlu mengalihkan situs WordPress Anda ke mode pengujian. Dengan begitu, Anda dapat mencoba hal-hal tanpa langsung memengaruhi situs web Anda dan berpotensi merusak sesuatu. Semua perubahan yang Anda buat hanya dapat dilihat oleh Anda sebagai administrator. Atau, gunakan situs pengembangan atau pementasan

Anda menemukan opsi untuk mode uji di bawah Pengaturan > Mode Uji

Di sini, klik penggeser di sebelah Aktifkan Mode Tes? . Ketika Anda telah melakukan semuanya dengan benar, seharusnya ada indikator hijau di sebelah Test Mode di sidebar dan seharusnya mengatakan TEST MODE is ON di bilah admin WordPress

3. Mulai Bongkar CSS dan JavaScript

Setelah itu, Anda ingin pergi ke CSS/JS Manager

Di sini, di halaman pertama, Anda melihat daftar file CSS dan JavaScript yang dimuat di beranda Anda. Untuk mencegah mereka melakukannya, cukup gunakan penggeser yang bertuliskan Bongkar di halaman ini. Alternatifnya, gunakan kotak centang Bongkar seluruh situs untuk menonaktifkan file tertentu untuk seluruh situs web Anda

Klik Perbarui di bagian bawah untuk menyimpan perubahan Anda

Di bagian atas, Anda dapat menggunakan tab untuk melakukan hal yang sama untuk posting, halaman, jenis posting khusus, dan halaman media. Cukup cari bagian konten berdasarkan judul atau id dan Anda mendapatkan opsi yang sama dengan beranda

Selain itu, plugin Pembersihan Aset juga menambahkan fungsi yang sama di bagian bawah editor WordPress tempat Anda dapat melakukan perubahan saat menulis

4. Uji dan Komitmen

Sebelum menerima perubahan Anda, saatnya untuk menguji apakah semuanya bekerja dengan baik. Dalam mode uji coba, Anda hanya dapat melakukannya secara manual dengan memuat dan melihat halaman. Seperti yang disebutkan, perubahan hanya berlaku untuk Anda, oleh karena itu, Anda tidak dapat mengambilnya dengan alat pengujian kecepatan. Untuk alasan yang tepat, melakukan ini di situs pengembangan mungkin merupakan ide yang lebih baik

Setelah puas, kembali ke pengaturan dan nonaktifkan mode uji. Sekali lagi, Perbarui Semua Pengaturan untuk menyimpan. Saat Anda sekarang menjalankan kembali pengujian di alat pengujian kecepatan Anda, perubahannya akan terlihat

Pilihan lain

Selain plugin di atas, ada beberapa solusi lain yang dapat membantu Anda menghapus aset CSS dan JavaScript yang tidak terpakai dari situs WordPress Anda

• CSS JS Manager — Plugin lain yang memungkinkan Anda untuk menghapus file CSS dan JavaScript individual dari halaman WordPress Anda jika Anda menganggapnya tidak terpakai. Ini sedikit lebih rumit untuk ditangani tetapi tetap kuat
• WP Rocket — Plugin caching berbayar ini memiliki opsi untuk menghilangkan CSS yang tidak terpakai dan menunda eksekusi JavaScript di situs Anda. Keduanya adalah metode untuk menghilangkan peringatan dari Google, lebih lanjut di bawah ini
• Perfmatters — Plugin berbayar lainnya untuk meningkatkan kecepatan halaman dengan berbagai cara. Muncul dengan pengelola skrip yang memungkinkan Anda untuk menentukan halaman apa yang harus dan tidak boleh dimuat oleh file JavaScript Anda

Cara Menghapus CSS dan JS yang Tidak Digunakan Secara Manual di WordPress

Baiklah, setelah kita mengetahui rute plugin, saatnya untuk melihat bagaimana kita dapat melakukan hal yang sama secara manual. Kami akan membahas dua metode yang mungkin paling praktis

Hal pertama yang ingin Anda lakukan adalah membuat tema anak sehingga setiap perubahan yang Anda buat tidak akan ditimpa saat Anda memperbarui tema utama Anda

1. Pisahkan Lembar Gaya

Salah satu masalah utama saat mencoba menghapus CSS yang tidak digunakan dari situs WordPress Anda adalah bahwa dalam sebagian besar kasus, hampir semuanya ada dalam satu file style.css. Dalam contoh cakupan Chrome di atas, kami telah melihat bahwa hanya sebagian kecil dari file tersebut yang benar-benar digunakan pada halaman tertentu. Untuk alasan itu, masuk akal untuk membagi style sheet utama menjadi beberapa yang lebih kecil yang hanya memuat di tempat yang dibutuhkan

Ini mungkin terlihat seperti ini

• basis. css
• formulir. css
• halaman Depan. css
• meja. css
• komentar. css

Anda dapat menggunakan alat seperti UnCSS untuk menghasilkan hanya CSS yang benar-benar digunakan halaman Anda. Masukkan HTML dan CSS dari halaman yang ingin Anda optimalkan dan itu akan mengeluarkan markup yang dipersingkat

Anda dapat menyalinnya ke lembar gaya baru dan mengunggahnya ke tema anak Anda. Setelah itu, ini semua tentang menghapus antrean file CSS dan kode sebaris yang ada dan mengantrekan lembar gaya baru yang dioptimalkan

Anda bahkan dapat melakukan ini secara kondisional dan menggunakan file yang berbeda untuk halaman yang berbeda. Namun, ini sedikit di luar cakupan yang dapat kami bahas di sini, namun, Anda dapat menemukan contoh yang bagus termasuk cuplikan kode di WebPerfTools

2. Tunda File JavaScript atau Muat Secara Bersyarat

Untuk menghilangkan peringatan JavaScript yang tidak digunakan, Anda memiliki dua opsi. tunda skrip Anda dimuat atau nonaktifkan dari halaman yang tidak diperlukan

Cara paling umum untuk menunda JavaScript adalah dengan memindahkan skrip ke footer. Ini paling mudah jika Anda langsung mengedit tema (anak) yang mengantrekan skrip yang dimaksud. Dalam hal ini, Anda hanya perlu mengatur parameter terakhirnya ke true dan itu akan dimuat secara otomatis di footer. Inilah tampilannya

function ns_load_scripts_in_footer() {
	wp_enqueue_script('script-name', get_template_directory_uri() . '/scripts/myscript.js', '', '', true );
}

add_action( 'wp_enqueue_scripts', 'ns_load_scripts_in_footer' );

Demikian pula, Anda juga dapat mendaftarkannya untuk kondisi tertentu, seperti saat browser memuat halaman di tempat yang Anda inginkan. Berikut cara memuat skrip yang sama hanya di beranda Anda

function ns_load_scripts_in_footer() {
	if (is_home()) {
		wp_enqueue_script('script-name', get_template_directory_uri() . '/scripts/myscript.js', '', '', true );
	}
}

add_action( 'wp_enqueue_scripts', 'ns_load_scripts_in_footer' );

Akhirnya, jika masalah Anda adalah dengan skrip yang tidak ada dalam file terpisah tetapi langsung ditampilkan di halaman, Anda perlu menemukan dari mana asalnya dan kemudian menyalinnya ke file sendiri dan mengunggahnya ke tema anak Anda. Dari sana, Anda kemudian dapat mendaftarkannya untuk dimuat di footer seperti yang ditunjukkan di atas

Kesimpulan

Menghapus CSS dan JavaScript yang tidak digunakan dari situs WordPress Anda adalah cara yang bagus untuk mempercepatnya. Ini mengurangi ukuran halaman, mengurangi permintaan HTTP, dan membuat situs web Anda lebih ramping. Akibatnya, itu akan lebih menyenangkan untuk digunakan bagi pengunjung Anda dan terlihat lebih baik di mesin telusur - apa yang tidak disukai?

Di atas, Anda telah mempelajari dari mana asal kode yang tidak digunakan, cara menemukannya, dan cara membuangnya. Anda sekarang diperlengkapi dengan baik untuk menerapkan perubahan ini

Bagaimana Anda menangani file CSS dan JavaScript yang tidak terpakai di situs Anda?

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

Bagaimana cara menghapus CSS yang tidak terpakai dari WordPress secara gratis?

Bagaimana cara mengurangi CSS dan JS yang tidak digunakan di WordPress?