Cara menghapus CSS dan JS yang tidak digunakan di WordPress (Sangat Mudah)

Memiliki banyak CSS dan JS yang tidak digunakan di situs web Anda dapat mengurangi waktu buka situs web Anda. Jika Anda menjalankan situs web Anda melalui alat pengujian kecepatan seperti Google PageSpeed ​​Insight, Anda mungkin mendapatkan peringatan untuk menghapus CSS yang Tidak Digunakan.

Untungnya, ada cara yang sangat mudah untuk melakukannya. Anda tidak perlu memiliki pengetahuan teknis khusus untuk dapat menghapus CSS dan JS yang tidak digunakan dari situs WordPress Anda.

Ini karena plugin luar biasa yang dikenal sebagai Pembersihan Aset: Penguat Kecepatan Halaman. Dengan plugin ini menghapus CSS yang tidak digunakan semudah mengklik beberapa tombol. Atau, jika Anda tidak keberatan menghabiskan beberapa dolar setahun, dengan WP Rocket, ada tombol CSS yang tidak digunakan yang dihapus, cukup aktifkan dan plugin akan menghapus semua CSS yang tidak digunakan secara otomatis.

Lihat: 7 Hosting WordPress Google Cloud Terkelola Teratas

Apa itu CSS yang tidak digunakan?

CSS yang tidak digunakan adalah file CSS yang ada di halaman tetapi sebagian besar tidak diperlukan untuk memuat halaman. Saat pengunjung membuka situs web, browser biasanya harus mengunduh, mengurai, dan memproses semua lembar gaya eksternal pada halaman yang dikunjungi sebelum dapat menampilkan konten halaman kepada pengunjung. Jika ada CSS pada halaman seperti itu yang tidak digunakan pada halaman tersebut, browser akan membuang waktu untuk itu.

Contoh klasiknya adalah sebagian besar plugin formulir kontak yang digunakan. Plugin ini meskipun sebagian besar hanya digunakan di halaman Hubungi kami, memuat CSS-nya di seluruh situs web. Tidak masalah jika itu adalah beranda yang tidak digunakan, CSS akan dimuat.

Jika terlalu banyak CSS yang tidak diperlukan tetapi memuat dan memperlambat waktu browser untuk membaca dan menampilkan halaman, itu bisa menjadi masalah.

Selain plugin, pengembang tema menulis banyak hal ke dalam style.css yang sebagian besar tidak diperlukan. Tetapi apakah diperlukan atau tidak, mereka memuat setiap kali situs Anda dimuat!

Satu CSS yang tidak digunakan mungkin tidak menjadi masalah, tetapi banyak CSS yang tidak digunakan dapat memengaruhi waktu buka situs web Anda.

Checkout: Top 10 tema WordPress tercepat dan terbaik

Bagaimana mengidentifikasi CSS yang tidak digunakan

Menemukan CSS dan JS yang tidak digunakan adalah hal yang sangat mudah dilakukan. Ada dua pendekatan yang akan saya rekomendasikan.

Salah satunya adalah menganalisis situs web Anda melalui Google PageSpeed ​​Insight. Periksa apakah situs web Anda memiliki masalah penghapusan CSS yang tidak digunakan. Klik di atasnya dan Anda akan dapat mengidentifikasi komponen situs Anda yang bertanggung jawab untuk itu.

Anda dapat melihat dari atas ada satu kasus CSS yang tidak digunakan yang direkam. Saya dapat melihat plugin dan lokasi CSS yang tidak digunakan dengan melihat ini.

Opsi kedua adalah untuk mendapatkan analisis yang lebih rinci. Anda dapat mencapai ini dengan menggunakan alat Chrome Dev.

Di browser chrome Anda, buka alat Chrome Dev lalu buka cakupan. Kemudian klik tombol reload di dalam coverage area. Anda dapat menemukan panduan lengkap tentang cara melakukannya di alat Pengembang Google.

Opsi lainnya adalah menggunakan jitbit untuk memindai pemilih CSS yang tidak digunakan. Anda juga dapat menggunakan PurifyCSS untuk menemukan CSS yang tidak digunakan

Cara menghapus CSS yang tidak digunakan

Ikuti langkah-langkah ini untuk menghapus CSS yang tidak digunakan dari WordPress:

1. Instal Pembersihan Aset

Buka plugin lalu Tambahkan baru. Kemudian Anda mengetik "Pembersihan Aset" ke dalam kotak pencarian di halaman Tambahkan plugin baru. Instal dan aktifkan plugin.

2. Buka pengaturan plugin

Untuk mengakses pengaturan plugin, dari dasboard WordPress klik pengaturan lalu klik Pembersihan Aset.

3. Bongkar CSS dan JS yang tidak diinginkan

Pada pengaturan plugin, Anda mungkin perlu menerima bahwa Anda tahu cara kerja plugin di bawah keran lemak pengupasan sebelum Anda mulai.

Untuk membongkar CSS dan JS klik pada manajer CSS dan JSS. Dari sana Anda dapat menghapus CSS dan JS apa pun yang tidak Anda perlukan. Anda dapat menghapusnya hanya untuk beranda, untuk seluruh situs, atau untuk URL tertentu. Anda juga dapat menghapus untuk posting, halaman, atau kategori.

Contohnya adalah membongkar formulir kontak apa pun dari pemuatan untuk seluruh situs kecuali halaman hubungi kami

Luangkan waktu Anda dan bongkar setiap CSS dan JS yang Anda tahu tidak diperlukan. Pastikan Anda menguji situs Anda setelah selesai untuk memastikan semuanya baik-baik saja.

Hapus plugin WordPress CSS yang tidak digunakan

Berikut adalah beberapa plugin yang dapat Anda gunakan untuk menghapus CSS yang tidak digunakan di WordpPress:

1. Pembersihan Aset: Penguat Kecepatan Halaman

Pembersihan Aset: Penguat Kecepatan Halaman memudahkan untuk menghapus CSS dan JS yang tidak digunakan di WordPress bahkan untuk pemula. Yang harus Anda lakukan adalah menonaktifkan CSS tertentu yang tidak diperlukan untuk halaman tertentu.

Anda juga dapat menonaktifkan untuk masing-masing posting saja. Dengan versi premium, Anda dapat menonaktifkan CSS/JS yang tidak digunakan dengan plugin.

Plugin ini adalah plugin kinerja lengkap dengan banyak opsi lain untuk mempercepat WordPress. Menghapus CSS/JS yang Tidak Digunakan hanyalah bagian dari itu.

Dalam posting ini, saya menggunakan plugin ini memiliki panduan.

2. Roket WP

WP Rocket adalah plugin kinerja premium WordPress nomor satu. Jika Anda seorang noob, maksud saya jika Anda tidak berpengalaman atau tidak nyaman dengan WordPress, maka WP Rocket adalah cara termudah untuk menghapus CSS yang tidak digunakan.

Anda perlu membeli plugin, setelah Anda selesai melakukannya, Anda dapat mengunduhnya dari akun Anda atau memeriksa email Anda untuk tautan unduhan.

Instal plugin melalui Dashboard>plugins>Add new>Upload.

Cukup arahkan ke pengaturan WP Rocket lalu klik tab "Optimasi File". Kemudian gulir ke bawah dan Anda akan melihat "Hapus CSS yang Tidak Digunakan", centang kotak, simpan, dan hapus cache.

3. Performa

Perfmatters adalah plugin premium yang dikembangkan oleh Brian Jackson dan saudaranya, Brett Jackson. Plugin ini dapat membantu menghapus CSS yang tidak digunakan dengan sangat mudah.

Pertama, Anda perlu membeli plugin. Kemudian instal. Aktifkan lisensi. Saat Anda menavigasi ke pengaturan, aktifkan pengelola skrip.

Cukup buka halaman atau posting mana pun di situs web Anda, Anda akan melihat ikon pengelola skrip di menu dasbor, klik di atasnya. Anda akan dapat menghapus CSS dan JS yang tidak digunakan dari halaman atau secara global.

Plugin ini adalah plugin kinerja, hadir dengan banyak opsi lain untuk mempercepat WordPress. Menghapus CSS/JS yang tidak digunakan adalah bagian dari itu.

4. Manajer CSS JS

CSS JS Manager dapat secara khusus menghapus CSS atau JS dari Seluler atau Desktop. Tergantung pada apa yang ingin Anda capai.

Plugin ini juga dapat menunda pemuatan file CSS atau JS.

Kesimpulan

Jika Anda memiliki banyak CSS dan JS yang tidak digunakan, Anda akan melihat peningkatan besar dalam kecepatan dan skor kinerja.

Mungkin tidak mungkin untuk menghapus semua CSS yang tidak digunakan tetapi Anda dapat meminimalkannya. Saya menggunakan Asset CleanUp untuk menghapus CSS yang tidak digunakan untuk TargetTrend.

Ingat, optimalkan tetapi jangan terlalu terobsesi dengannya, kecuali jika Anda ingin situs Anda terlihat seperti situs web tercepat di dunia.

Baca juga:

Cara Menghilangkan sumber pemblokiran render di WordPress

Cara membuat WordPress sangat cepat

Cara mengarahkan lalu lintas ke blog Anda