Cara Menghapus CSS yang Tidak Digunakan di WordPress

Jika situs WordPress Anda menggunakan tema WordPress berbayar atau yang populer dari repositori Tema WordPress resmi, kemungkinan tema tersebut dikembangkan untuk berbagai kasus penggunaan. Dan Anda mungkin hanya menggunakan sebagian kecil dari semua fitur yang tersedia dalam tema.

Dalam hal ini, situs Anda memuat banyak CSS yang tidak digunakan yang tidak diperlukan untuk menata halaman situs Anda. Misalnya, tema WordPress yang Anda gunakan mungkin memiliki gaya untuk halaman WooCommerce juga, tetapi jika Anda hanya menjalankan blog di situs WordPress Anda, maka Anda tidak menggunakan CSS yang disertakan untuk halaman WooCommerce di situs Anda dan dengan demikian menyajikan yang tidak digunakan CSS kepada pengguna.

Jika Anda telah menguji situs web Anda di alat Google Pagespeed, Anda mungkin sudah menyadari bahwa situs Anda memiliki masalah CSS yang tidak digunakan. Dalam panduan ini, kami akan menunjukkan cara memeriksa CSS yang tidak digunakan terlebih dahulu, kemudian menggunakan alat gratis untuk menghapus CSS yang tidak digunakan dari situs WordPress Anda.

Cara Memeriksa CSS yang Tidak Digunakan

Google Chrome DevTools (yang Anda lihat saat mengeklik opsi "Periksa" di menu konteks) memiliki fitur Cakupan di dalam tab Sumber. Anda dapat menggunakan opsi Cakupan untuk menemukan CSS dan JS yang tidak digunakan yang dimuat situs web Anda.

  1. Buka situs web Anda di Chrome di desktop.
  2. Klik kanan pada ruang putih kosong di situs Anda, dan pilih Memeriksa dari menu konteks.
  3. Klik pada Sumber tab, tekan Ctrl + Shift + P untuk membuka jendela perintah, lalu ketik liputan dan pilih Mulai melengkapi cakupan dan memuat ulang halaman dari perintah yang tersedia.
  4. Di bawah tab Cakupan, klik pada Filter URL dan masukkan domain root situs Anda di sini untuk hanya menampilkan file CSS/JS internal.

    Filter URL Tab Cakupan Sumber Chrome

    Periksa Byte yang tidak digunakan kolom untuk melihat persentase data yang dimuat dalam file CSS/JS dari tema Anda.

  5. Klik pada file CSS untuk melihat CSS yang tidak digunakan (ditandai dengan bilah merah) yang dimuat oleh situs Anda. CSS yang sedang digunakan pada halaman saat ini akan ditampilkan dengan bilah hijau.

    Tampilan Chrome CSS yang tidak digunakan

Setelah Anda menganalisis semua CSS yang tidak digunakan yang dimuat di situs web Anda, saatnya untuk menghapusnya. Ada beberapa alat gratis yang tersedia untuk menghapus CSS yang tidak digunakan dari halaman web. Di bawah ini adalah salah satu alat populer yang telah saya uji dan gunakan pada proyek saya sendiri.

Gunakan PurifyCSS Online Untuk Menghapus CSS yang Tidak Digunakan

Biasanya, Anda dapat menemukan plugin untuk hampir semua hal di WordPress. Tetapi untuk menghapus CSS yang tidak digunakan, sayangnya, tidak ada satu pun plugin yang tersedia. Jadi kami akan menggunakan alat khusus non-wordpress manual untuk menghapus CSS yang tidak digunakan dari situs Anda.

PurifyCSS adalah yang paling alat non-pengembang yang ramah Anda dapat menemukan untuk menangani CSS yang tidak digunakan. Alat ini memiliki UI sederhana untuk memungkinkan pengguna memberikan URL Situs Web ATAU kode HTML dan CSS. Untuk WordPress, kami akan menggunakan opsi URL dan menyediakan tautan ke semua jenis halaman di situs Anda agar alat ini dapat mengambil CSS dari semua dan mengoptimalkan CSS yang tidak digunakan.

Hapus-CSS-PurifyCSS-Online-tool

Berikut daftar cepat halaman yang harus Anda masukkan ke dalam alat:

  • URL beranda
  • Beberapa URL halaman posting dari setiap Kategori di situs Anda

    Ini untuk memastikan bahwa CSS disertakan untuk semua elemen posting.

  • Kontak, Tentang, Privasi, dan segala macam halaman berbeda yang mungkin Anda miliki di situs Anda.
  • Halaman arsip, halaman Pencarian, halaman Penulis
  • Halaman Jenis Posting Kustom

Kiat Panas: Buat posting / halaman 'fitur' dengan semua elemen tema yang Anda gunakan atau mungkin gunakan di masa mendatang seperti Tabel, Galeri Gambar, Kode, Pra, Daftar yang dipesan, Daftar tidak berurutan, Formulir, Tab, Akordeon, Blok Gutenberg yang biasanya Anda gunakan , dll.

Gunakan URL posting 'fitur' ini di alat PurifyCSS Online untuk memastikan bahwa CSS untuk elemen yang umum digunakan disertakan.

tekan Bersihkan CSS setelah Anda menambahkan semua jenis URL yang relevan dari situs Anda ke alat PurifyCSS Online.

Salin CSS baru yang dihasilkan oleh alat tersebut dan gunakan di situs Anda. Pastikan Anda cadangan gaya asli.css dan file CSS lainnya di tema Anda sebelum mengganti CSS baru yang dihasilkan oleh PurifyCSS.

Tip: Anda dapat menggunakan Editor Tema WordPress bawaan untuk mengedit file CSS tema Anda, atau Anda dapat menggunakan program FTP/SFTP untuk terhubung ke server dan mengedit file dengan nyaman menggunakan editor Notepad.