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 mengganggu waktu muat situs web Anda. Jika Anda menjalankan situs web Anda melalui alat uji 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.

Hal ini karena plugin luar biasa yang dikenal sebagai Pembersihan Aset: Peningkat Kecepatan HalamanDengan plugin ini, menghapus CSS yang tidak digunakan semudah mengklik beberapa tombol. Atau, jika Anda tidak keberatan mengeluarkan 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.

Checkout: 7 Hosting WordPress Google Cloud Terkelola Teratas

Apa itu CSS yang tidak digunakan?

CSS yang tidak digunakan adalah berkas CSS yang ada di suatu halaman tetapi sebagian besar tidak diperlukan agar halaman dapat dimuat. Saat pengunjung membuka situs web, peramban biasanya harus mengunduh, mengurai, dan memproses semua stylesheet eksternal pada halaman yang dikunjungi sebelum dapat menampilkan konten halaman kepada pengunjung. Jika ada CSS yang ada di halaman tersebut yang tidak digunakan, peramban akan membuang-buang waktu untuk itu.

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

Jika ada terlalu banyak CSS yang tidak diperlukan tetapi dimuat dan memperlambat waktu browser untuk membaca dan menampilkan halaman, hal itu dapat menjadi masalah.

Selain plugin, pengembang tema menulis banyak hal ke dalam style.css yang sebagian besar tidak diperlukan. Namun, terlepas diperlukan atau tidak, plugin akan dimuat setiap kali situs Anda dimuat!

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

Checkout: 10 tema WordPress tercepat dan terbaik 

Cara mengidentifikasi CSS yang tidak digunakan

Menemukan CSS dan JS yang tidak terpakai 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 menghapus CSS yang tidak digunakan. Klik masalah tersebut dan Anda akan dapat mengidentifikasi komponen situs Anda yang bertanggung jawab atas masalah tersebut.

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

Pilihan kedua adalah mendapatkan analisis yang lebih rinci. Anda dapat melakukannya dengan menggunakan alat Chrome Dev.

Di browser chrome Anda, buka Chrome Dev tools lalu buka coverage. Lalu klik tombol reload di dalam coverage area. Anda dapat menemukan panduan lengkap tentang cara melakukan ini di alat Pengembang Google.

Pilihan lainnya adalah menggunakan jitbit untuk memindai pemilih CSS yang tidak digunakan. Anda juga bisa menggunakan MemurnikanCSS untuk menemukan CSS yang tidak digunakan

Cara menghapus CSS yang tidak digunakan

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

1. Instal Pembersihan Aset

Buka plugin lalu Tambah baru. Kemudian ketik “Asset CleanUp” ke dalam kotak pencarian di halaman Tambah plugin baru. Instal dan aktifkan plugin.

2. Buka pengaturan plugin

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

3. Bongkar CSS dan JS yang tidak diinginkan

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

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

Contohnya adalah membongkar semua formulir kontak agar tidak dimuat di seluruh situs kecuali halaman hubungi kami.

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

Hapus plugin CSS WordPress yang tidak digunakan

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

1. Pembersihan Aset: Penguat Kecepatan Halaman

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

Anda juga dapat menonaktifkannya untuk setiap posting saja. Dengan versi premium, Anda dapat menonaktifkan CSS/JS yang tidak digunakan melalui plugin.

Plugin ini merupakan plugin performa lengkap dengan banyak opsi lain untuk mempercepat WordPress. Menghapus CSS/JS yang Tidak Digunakan hanyalah sebagian darinya.

Dalam posting ini, saya menggunakan plugin ini memiliki panduan.

2. WP Rocket

WP Rocket adalah plugin WordPress premium nomor satu. Jika Anda seorang pemula, 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 tersebut, setelah Anda melakukannya, Anda dapat mengunduhnya dari akun Anda atau memeriksa email Anda untuk tautan unduhan.

Instal plugin melalui Dashboard>plugin>Tambah baru>Unggah.

Cukup navigasikan ke pengaturan WP Rocket, lalu klik tab “File Optimization”. Lalu gulir ke bawah dan Anda akan melihat “Remove Unused CSS,” centang kotak, simpan, dan hapus cache.

3. Perfmatters

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 tersebut. Kemudian instal. Aktifkan lisensi. Saat Anda membuka 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 ikon tersebut. Anda akan dapat menghapus CSS dan JS yang tidak digunakan dari halaman atau secara global.

Plugin ini adalah plugin performa, dilengkapi dengan banyak opsi lain untuk mempercepat WordPress. Menghapus CSS/JS yang tidak digunakan adalah salah satu bagiannya.

4. Manajer CSS JS

Manajer CSS JS dapat menghapus CSS atau JS secara khusus dari Ponsel 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 mustahil untuk menghapus semua CSS yang tidak digunakan, tetapi Anda dapat menguranginya seminimal mungkin. Saya menggunakan Asset CleanUp untuk menghapus CSS yang tidak digunakan untuk TargetTren.

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

Baca juga:

Cara Menghilangkan Sumber Daya Pemblokiran Render di WordPress

Cara membuat WordPress sangat cepat

Cara mengarahkan lalu lintas ke blog Anda