Cara menghapus css dan js yang tidak terpakai

CSS yang tidak digunakan adalah kode CSS apa pun yang ditambahkan oleh tema atau plugin WordPress Anda yang sebenarnya tidak Anda perlukan. Menghapus kode CSS ini meningkatkan kinerja WordPress dan pengalaman pengguna

Pada artikel ini, kami akan menunjukkan kepada Anda cara menghapus CSS yang tidak digunakan dengan mudah di WordPress tanpa merusak situs web Anda

Apa itu CSS yang Tidak Digunakan di WordPress?

CSS yang tidak digunakan di WordPress adalah kode CSS yang dimuat di situs web Anda, tetapi sebenarnya tidak diperlukan untuk menampilkan halaman

Kode tambahan dapat membuat browser pengunjung membutuhkan waktu lebih lama untuk merender halaman, yang menciptakan pengalaman pengguna yang buruk. Waktu pemuatan yang lebih lambat bahkan dapat memengaruhi peringkat pencarian Anda, sehingga mengurangi lalu lintas ke situs Anda

Anda dapat melihat bagaimana kode CSS yang tidak terpakai memengaruhi situs web Anda dengan menggunakan Google Pagespeed Insights. Ini akan menunjukkan kepada Anda bagian berjudul 'Hapus CSS yang tidak digunakan' dengan detail file CSS mana yang memengaruhi waktu pemuatan Anda

Mengapa CSS yang Tidak Digunakan Ditambahkan di WordPress?

CSS digunakan untuk menata tampilan situs web WordPress Anda. Tema WordPress Anda menyertakan CSS, dengan sebagian besar disertakan dalam satu gaya. file css

Selain CSS tema Anda, plugin WordPress Anda juga akan memuat CSS mereka sendiri. Misalnya, WooCommerce akan memuat CSS untuk menampilkan produk, plugin pembuat halaman akan menambahkan CSS-nya sendiri untuk menampilkan halaman khusus Anda, dan plugin pembuat formulir akan menyertakan CSS untuk menata formulir Anda

Kemudian, Anda memiliki font web, font ikon, dan elemen lain yang perlu menambahkan file CSS mereka sendiri juga

Biasanya, file-file ini berukuran sangat kecil dan memuat dengan cepat. Namun, jika situs WordPress Anda memiliki banyak sekali, maka efeknya dapat bertambah dan berdampak nyata pada kecepatan situs Anda

Cara Menghapus CSS yang Tidak Digunakan di WordPress

Ada beberapa cara berbeda untuk mengurangi CSS yang tidak digunakan di situs WordPress Anda

Namun, itu akan menjadi tugas yang cukup sulit untuk sepenuhnya menghapus semua CSS yang tidak digunakan di WordPress. Karena cara WordPress bekerja di balik layar, beberapa CSS yang tidak digunakan mungkin sulit ditemukan dan dihapus

Karena itu, kami akan menunjukkan kepada Anda dua metode untuk menghapus CSS yang tidak digunakan, dan Anda dapat memilih salah satu yang paling sesuai untuk Anda

Metode 1. Hapus CSS yang Tidak Digunakan di WordPress menggunakan WP Rocket

Cara ini lebih mudah dan direkomendasikan untuk pemula. Ini sangat meningkatkan pengiriman file CSS secara keseluruhan di situs web WordPress Anda, termasuk menghapus sebagian besar CSS yang tidak digunakan

Menurut kami ini adalah solusi terbaik untuk pemula karena lebih mudah dan mencapai tujuan utama untuk memberikan pengalaman yang lebih baik bagi pengguna Anda. Ini berarti situs web Anda memuat dengan cepat pada alat pengujian kecepatan dan juga terasa cepat bagi pengguna Anda

Pertama, Anda perlu menginstal dan mengaktifkan plugin WP Rocket. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress

Setelah aktivasi, Anda perlu mengunjungi halaman Pengaturan »WP Rocket dan beralih ke tab 'Pengoptimalan File'

Selanjutnya, Anda perlu menggulir ke bawah ke bagian File CSS dan kemudian mencentang kotak di sebelah opsi 'Hapus CSS yang Tidak Digunakan (Beta)'

Karena fitur WP Rocket ini dalam versi beta, ia akan menanyakan lagi apakah Anda ingin mengaktifkan pengaturan. Anda dapat melanjutkan dan mengklik tombol 'Aktifkan Hapus CSS yang Tidak Digunakan'

Setelah opsi 'Hapus CSS yang Tidak Digunakan' aktif, Anda kemudian dapat menentukan nama file CSS, ID, atau kelas yang tidak boleh dihapus di bawah kotak 'daftar aman CSS'

Selanjutnya, Anda harus menyimpan perubahan Anda dengan menggulir ke bawah dan mengklik tombol Simpan Perubahan. Saat Anda melakukannya, WP Rocket akan mulai memproses file CSS Anda dan menampilkan bilah kemajuan

Plugin memerlukan waktu beberapa menit untuk memproses dan menghapus file CSS yang tidak terpakai dari situs web Anda

Anda akan melihat 'Hapus CSS yang Tidak Digunakan selesai. ' pesan ketika plugin telah menyelesaikan proses

Sekarang, kunjungi alat Google Pagespeed Insights dan uji kinerja situs Anda

Hapus Render-Blocking CSS untuk WordPress

WP Rocket memungkinkan Anda mengoptimalkan file CSS dan menghapus CSS yang memblokir render dari situs web Anda

Untuk memulai, Anda dapat menavigasi ke tab 'Pengoptimalan File' di WP Rocket. Dari sini, gulir ke bawah ke bagian File CSS lalu centang kotak di sebelah opsi 'Optimalkan pengiriman CSS'

Opsi ini menghasilkan file CSS yang hanya berisi kode CSS yang diperlukan untuk menampilkan bagian yang terlihat dari situs web Anda. Itu memuat file itu terlebih dahulu, menampilkan halaman ke pengunjung Anda, dan kemudian memuat file CSS lainnya menggunakan teknologi yang disebut pemuatan yang ditangguhkan

Dengan menghapus CSS yang memblokir perenderan ini, situs web Anda menjadi dapat dilihat oleh pengguna jauh lebih cepat daripada jika Anda harus memuat semua file CSS sebelum halaman ditampilkan

Setelah mengaktifkan opsi 'Optimalkan pengiriman CSS', klik tombol 'Simpan Perubahan' dan tunggu WP Rocket menghasilkan file CSS yang diperlukan untuk semua posting dan halaman Anda. Ini juga akan secara otomatis menghapus cache untuk situs web Anda

Setelah selesai, Anda dapat melanjutkan dan menguji kembali performa situs web Anda menggunakan Google Pagespeed Insights

Tweak Pengiriman File Tambahan untuk Meningkatkan Kinerja

WP Rocket juga memungkinkan Anda menghapus string kueri dari file statis, menggabungkan file Google Fonts, dan memperkecil HTML. Semua penyesuaian ini menambah sedikit peningkatan pada kecepatan Anda secara keseluruhan, yang menambah pengalaman memuat lebih cepat bagi pengunjung Anda

Anda juga akan melihat opsi untuk mengecilkan dan menggabungkan file CSS. Opsi ini akan mengurangi permintaan HTTP dan memberi Anda peningkatan kecepatan tambahan

Namun, Anda harus hati-hati memeriksa situs web Anda untuk memastikan tidak ada yang rusak setelah mengaktifkan pengaturan ini

Selain itu, Anda dapat menerapkan pengoptimalan yang sama untuk file JavaScript di situs web Anda. Anda dapat mengecilkan dan menggabungkannya untuk berfungsi sebagai satu file dan menunda pemuatan file JavaScript untuk meningkatkan kinerja

Untuk detail lebih lanjut, lihat tutorial langkah demi langkah kami tentang cara mengatur WP Rocket dengan benar di WordPress

Metode 2. Hapus CSS yang Tidak Digunakan di WordPress menggunakan Pembersihan Aset

Metode ini sedikit lebih maju tetapi sangat kuat dan memungkinkan Anda menghapus CSS yang tidak terpakai dengan mudah dari halaman mana pun di situs web WordPress Anda

Namun, ini agak rumit dan Anda perlu menguji fungsionalitas dan tampilan situs web Anda secara menyeluruh untuk memastikan tidak ada yang rusak

Pertama, Anda perlu menginstal dan mengaktifkan plugin Pembersihan Aset. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress

Setelah aktivasi, Anda perlu mengunjungi halaman Pembersihan Aset »Pengaturan dan beralih ke tab Mode Tes. Dari sini, Anda perlu mengaktifkan opsi 'Enable Test Mode'

Ini memungkinkan Anda untuk mencoba berbagai pengaturan dan mengujinya sebagai administrator tanpa memengaruhi pengunjung situs web

Setelah itu, Anda perlu mengunjungi halaman Asset CleanUp »CSS/JS Manager. Dari sini, Anda dapat membongkar file CSS dan JavaScript yang tidak diinginkan berdasarkan halaman demi halaman

Ini pertama-tama akan mengambil beranda Anda dan akan menampilkan semua file CSS dan JavaScript yang dimuat di halaman itu

Anda perlu menggulir ke bawah dan meninjau file yang dimuat. Jika Anda melihat file yang tidak Anda perlukan, Anda dapat membongkarnya untuk halaman, jenis posting, atau seluruh situs tertentu

Plugin ini juga memungkinkan Anda untuk memilih posting atau halaman tertentu dari sini, atau Anda dapat mengakses opsi yang sama dengan mengedit posting atau halaman seperti biasa.

Pada layar edit postingan, Anda akan menemukan kotak Pembersihan Aset tepat di bawah editor postingan

Plugin akan secara otomatis mengambil dan mencantumkan semua file dan aset yang dimuat saat pengunjung melihat halaman ini di situs web Anda. Anda kemudian dapat membongkar file CSS atau JavaScript yang tidak terpakai yang tidak Anda perlukan di halaman itu

Penting. Jangan lupa untuk menguji situs web Anda setelah menghapus CSS atau JavaScript yang tidak terpakai untuk memastikan semuanya bekerja dengan baik

Setelah selesai membongkar dan menghapus file CSS dan JavaScript yang tidak terpakai, Anda dapat kembali ke halaman pengaturan plugin dan mematikan 'Test Mode'

Jangan lupa klik tombol Perbarui Semua Pengaturan untuk menyimpan perubahan Anda

Anda sekarang dapat menguji situs web Anda menggunakan Google Pagespeed Insights untuk melihat perubahan pemberitahuan CSS yang tidak digunakan

Kami harap artikel ini membantu Anda mempelajari cara menghapus CSS yang tidak digunakan dengan mudah di WordPress. Anda mungkin juga ingin mengikuti panduan lengkap kami tentang berapa biaya untuk membangun situs web, dan lihat daftar hosting WordPress terkelola terbaik kami

Jika Anda menyukai artikel ini, silakan berlangganan ke Channel YouTube untuk tutorial video WordPress. Anda juga dapat menemukan kami di Twitter dan Facebook

Bagaimana cara menghapus semua CSS yang tidak digunakan?

Bagaimana cara menghapus kode JS yang tidak terpakai?

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

Bagaimana cara memeriksa JS dan CSS yang tidak digunakan?