Jika tapak WordPress anda menggunakan tema WordPress berbayar atau tema popular daripada repositori Tema WordPress rasmi, kemungkinan besar tema tersebut dibangunkan untuk pelbagai kes penggunaan. Dan anda mungkin hanya menggunakan satu set kecil daripada semua ciri yang tersedia dalam tema.
Dalam kes itu, tapak anda memuatkan banyak CSS yang tidak digunakan yang tidak diperlukan untuk menggayakan halaman tapak anda. Sebagai contoh, tema WordPress yang anda gunakan mungkin mempunyai gaya untuk halaman WooCommerce juga tetapi jika anda hanya menjalankan blog di tapak WordPress anda, maka anda tidak menggunakan CSS yang disertakan untuk halaman WooCommerce di tapak anda dan dengan itu menyajikan yang tidak digunakan CSS kepada pengguna.
Jika anda telah menguji tapak web anda pada alat Google Pagespeed, anda mungkin sudah sedar bahawa tapak anda mempunyai isu CSS yang tidak digunakan. Dalam panduan ini, kami akan menunjukkan kepada anda cara menyemak CSS yang tidak digunakan dahulu, kemudian gunakan alat percuma untuk mengalih keluar CSS yang tidak digunakan daripada tapak WordPress anda.
Bagaimana untuk menyemak CSS yang tidak digunakan
Google Chrome DevTools (yang anda lihat apabila anda mengklik pilihan "Periksa" dalam menu konteks) mempunyai ciri Liputan dalam tab Sumber. Anda boleh menggunakan pilihan Liputan untuk mencari CSS dan JS yang tidak digunakan yang dimuatkan oleh tapak web anda.
- Buka tapak web anda dalam Chrome pada desktop.
- Klik kanan pada ruang putih kosong di tapak anda dan pilih Periksa daripada menu konteks.
- Klik pada Sumber tab, tekan Ctrl + Shift + P untuk membuka tetingkap arahan, kemudian taip liputan dan pilih Mulakan liputan instrumen dan muat semula halaman daripada arahan yang tersedia.
- Di bawah tab Liputan, klik pada Penapis URL medan dan masukkan domain akar tapak anda di sini untuk menunjukkan hanya fail CSS/JS dalaman.
└ Semak Bait yang tidak digunakan lajur untuk melihat peratusan data yang dimuatkan dalam fail CSS/JS daripada tema anda.
- Klik pada fail CSS untuk melihat CSS yang tidak digunakan (ditandakan dengan bar merah) yang dimuatkan oleh tapak anda. CSS yang sedang digunakan pada halaman semasa akan ditunjukkan dengan bar hijau.
Sebaik sahaja anda telah menganalisis semua CSS yang tidak digunakan yang dimuatkan di tapak web anda, tiba masanya untuk mengalih keluarnya. Terdapat beberapa alat percuma yang tersedia untuk mengalih keluar CSS yang tidak digunakan daripada halaman web. Di bawah ialah salah satu alat popular yang telah saya uji dan gunakan pada projek saya sendiri.
Gunakan PurifyCSS Dalam Talian Untuk Mengalih Keluar CSS yang Tidak Digunakan
Biasanya, anda boleh mencari pemalam untuk hampir semua perkara dalam WordPress. Tetapi untuk mengalih keluar CSS yang tidak digunakan, malangnya, tidak ada satu pemalam yang tersedia. Jadi kami akan menggunakan alatan manual bukan khusus wordpress untuk mengalih keluar CSS yang tidak digunakan daripada tapak anda.
PurifyCSS adalah yang paling banyak alat bukan pembangun yang mesra anda boleh mencari untuk berurusan dengan CSS yang tidak digunakan. Alat ini mempunyai UI yang mudah untuk membolehkan pengguna menyediakan sama ada URL Laman Web ATAU kod HTML dan CSS. Untuk WordPress, kami akan menggunakan pilihan URL dan menyediakan pautan ke semua jenis halaman di tapak anda untuk membolehkan alat tersebut mengambil CSS daripada semua dan mengoptimumkan CSS yang tidak digunakan.
Berikut ialah senarai pantas halaman yang perlu anda masukkan ke dalam alat:
- URL halaman utama
- Berbilang URL halaman siaran daripada setiap Kategori di tapak anda
└ Ini adalah untuk memastikan CSS disertakan untuk semua elemen siaran.
- Kenalan, Perihal, Privasi dan semua jenis halaman berbeza yang mungkin anda ada di tapak anda.
- Halaman arkib, halaman Carian, halaman Pengarang
- Halaman Jenis Catatan Tersuai
Petua Panas: Cipta siaran/halaman 'ciri' dengan semua elemen tema yang anda gunakan atau mungkin gunakan pada masa hadapan seperti Jadual, Galeri Imej, Kod, Pra, Senarai Tertib, Senarai tidak tersusun, Borang, Tab, Akordion, Blok Gutenberg yang biasa anda gunakan , dan lain-lain.
Gunakan URL siaran 'ciri' ini dalam alat PurifyCSS Online untuk memastikan CSS untuk elemen yang biasa digunakan disertakan.
Tekan Bersihkan CSS butang setelah anda menambahkan semua jenis URL yang berkaitan dari tapak anda ke dalam alat PurifyCSS Online.
Salin CSS baharu yang dijana oleh alat dan gunakannya di tapak anda. Pastikan anda sandarkan gaya asal.css dan fail CSS lain dalam tema anda sebelum menggantikan CSS baharu yang dijana oleh PurifyCSS.
Petua: Anda boleh sama ada menggunakan Editor Tema WordPress terbina dalam untuk mengedit fail CSS tema anda, atau anda boleh menggunakan program FTP/SFTP untuk menyambung ke pelayan dan mengedit fail dengan selesa menggunakan editor Notepad.