Peringatan "Kurangi CSS yang tidak digunakan" dipicu oleh PageSpeed Insights saat Anda memiliki kode yang dimuat oleh plugin atau tema Anda yang tidak diperlukan atau digunakan di halaman. Pengembang biasanya hanya mengantrekan lembar gaya jika sedang digunakan. Namun, sering kali, gaya tambahan yang mungkin tidak diperlukan juga ditambahkan. Ini menghasilkan banyak CSS yang tidak terpakai, yang memperlambat situs WordPress Anda. Itu juga dapat memicu peringatan pemblokiran render
Selain memperbaiki peringatan, menghapus CSS yang tidak digunakan berdampak besar pada penurunan First Contentful Paint (FCP), Largest Contentful Paint (LCP), dan Time to Interactive (TTI)
Kurangi peringatan CSS yang tidak digunakan di PageSpeed Insights
Bagaimana menemukan CSS yang tidak terpakai
Cara termudah untuk menemukan CSS yang tidak terpakai adalah dengan menguji URL dengan PageSpeed Insights. Jika ada CSS yang tidak digunakan, Anda akan melihat peringatan seperti di atas. Seperti semua hal dengan Wawasan PageSpeed, itu hanya akan memicu peringatan jika Anda melampaui ambang batas dari apa yang mereka anggap cukup penting untuk ditandai
Cara lain untuk menemukan CSS yang tidak digunakan adalah menggunakan Chrome DevTools. Mereka memiliki apa yang disebut alat Cakupan mereka, yang akan menunjukkan kepada Anda byte yang tidak terpakai oleh CSS dan JS
Chrome tidak menggunakan CSS dalam alat cakupan
Berikut adalah beberapa hal yang dapat Anda lakukan untuk memperbaiki peringatan "Kurangi CSS yang tidak digunakan", beserta beberapa saran.
Hapus CSS yang tidak terpakai dengan Perfmatters
Cara termudah untuk mengatasi peringatan "Kurangi CSS yang tidak digunakan" adalah dengan mengaktifkan fitur "Hapus CSS yang Tidak Digunakan" di Perfmatters, yang melakukan semuanya secara otomatis. Kami telah menguji fitur ini di ratusan URL (menggunakan berbagai tema dan penyiapan), dan inilah beberapa hasil yang kami dapatkan
- Rata-rata penurunan FCP sebesar 15. 20%
- Rata-rata penurunan LCP sebesar 19. 66%
- Rata-rata penurunan TTI sebesar 14. 95%
Rekomendasi
Sebelum mengaktifkan fitur “Remove Unused CSS” di Perfmatters, sebaiknya lakukan hal berikut
- Hapus preload CSS yang ada yang telah Anda siapkan di Perfmatters (tidak termasuk stylesheet Font Google Lokal)
- Pisahkan CSS Anda. Menggabungkan CSS adalah teknik pengoptimalan yang tidak digunakan lagi sejak HTTP/2. Dalam beberapa kasus, menggabungkan CSS Anda sebenarnya dapat merusak kinerja Anda
- Pastikan Anda belum mencoba menghapus CSS yang tidak terpakai dengan plugin lain
Langkah 1
Klik ke pengaturan plugin Perfmatters
Pengaturan plugin Perfmatters
Langkah 2
Klik pada tab "Aset".
Perfmatter aset
Langkah 3
Gulir ke bawah dan di bawah bagian "CSS", aktifkan "Hapus CSS yang Tidak Digunakan. ”
Hapus CSS yang tidak terpakai di Perfmatters
Langkah 4 (menggunakan metode CSS)
Anda memiliki dua metode berbeda untuk dipilih tentang bagaimana CSS yang digunakan ditangani
- Sebaris (bawaan). CSS yang Anda gunakan disisipkan di paro atas di kode sumber situs Anda. Opsi ini terbaik untuk skor PageSpeed
- Mengajukan. CSS bekas Anda dimasukkan ke dalam stylesheet (file) CSS terpisah. Ini adalah yang terbaik untuk pengguna dan kinerja yang dirasakan karena file dapat di-cache pada kunjungan berulang dan mengurangi ukuran dokumen HTML
Metode CSS yang digunakan
Langkah 5 (perilaku stylesheet)
Anda kemudian harus memilih bagaimana stylesheet asli Anda berperilaku (CSS yang tidak digunakan). Ini biasanya digunakan sebagai fallback untuk mencegah kerusakan. Ada tiga opsi berbeda.
- Penundaan (bawaan). Semua lembar gaya CSS asli (CSS yang tidak digunakan) ditunda dan dimuat saat interaksi pengguna. Kami merekomendasikan menggunakan opsi ini.
- Asinkron. Semua lembar gaya CSS asli (CSS yang tidak digunakan) dimuat melalui async. Metode ini dapat membantu mencegah pop-in, karena stylesheet dijalankan secara asinkron saat halaman dimuat. Metode ini akan menghasilkan LCP/FCP yang sedikit lebih tinggi daripada perilaku penundaan
- Menghapus. Semua lembar gaya CSS asli (CSS yang tidak digunakan) dihapus. Ini adalah metode yang paling agresif tetapi kemungkinan besar juga akan mengharuskan Anda menambahkan pengecualian. Kami merekomendasikan ini untuk pengguna tingkat lanjut
Perilaku stylesheet asli CSS yang tidak digunakan
Langkah 6
Gulir ke bawah dan klik "Simpan Perubahan. ”
CSS yang Anda gunakan menghasilkan berbeda (ketika logout), berdasarkan jenis posting
- Halaman. Laman biasanya memiliki banyak CSS unik, dan karena itu CSS yang digunakan dihasilkan secara terpisah per laman pada kunjungan pertama.
- Pos. Posting biasanya berbagi banyak CSS yang sama, dan oleh karena itu CSS yang digunakan hanya dibuat sekali, pada kunjungan pertama. Perbedaannya dengan postingan dibandingkan dengan halaman adalah pembuatan CSS yang digunakan hanya terjadi sekali
Hapus CSS Terpakai
Jika Anda membuat perubahan desain atau kode di situs Anda, kemungkinan besar Anda perlu menghapus CSS yang digunakan, beserta semua lapisan cache, untuk memastikan semua perubahan ditampilkan dengan benar
Kami merekomendasikan untuk menghapus lapisan cache dengan urutan sebagai berikut. tema, plugin pihak ketiga, Perfmatters (Clear Used CSS), penyedia hosting, dan CDN. Untuk memverifikasi bahwa perubahan CSS Anda telah diperbarui, sebaiknya lihat situs web Anda dalam mode penyamaran atau pribadi browser Anda
CSS bekas yang dihasilkan oleh Perfmatters disimpan secara lokal di direktori berikut. .wp-block-quote blockquote_7
Untuk menghapus CSS yang digunakan, ikuti langkah-langkah di bawah ini
Langkah 1
Klik ke pengaturan plugin Perfmatters
Pengaturan plugin Perfmatters
Langkah 2
Klik pada tab "Aset".
Perfmatter aset
Langkah 3
Gulir ke bawah dan di bawah bagian "CSS", klik "Hapus CSS yang Digunakan". ”
Perfmatters jelas menggunakan CSS
Jika Anda perlu menghapus CSS bekas secara terprogram, Anda juga dapat menggunakan fungsi kelas kami. .wp-block-quote blockquote_8
Hapus CSS yang Digunakan pada halaman/posting individual
Akan ada saatnya Anda membuat perubahan pada satu halaman atau postingan dan tidak perlu menghapus CSS yang digunakan secara global. Sebagai gantinya, Anda dapat menghapus CSS yang digunakan pada satu halaman atau postingan. Di editor, di sisi kanan, klik “Hapus CSS yang Digunakan. ”
Hapus CSS yang Digunakan pada halaman/posting individual
Stylesheet yang dikecualikan
Kecualikan CSS tertentu (stylesheet) dari fitur Hapus CSS yang Tidak Digunakan dengan menambahkan URL sumber (.wp-block-quote blockquote9), atau dengan menambahkan bagian unik dari URL sumber. Format. satu per baris
Stylesheet yang dikecualikan
Pemilih yang Dikecualikan
Kecualikan CSS tertentu (pemilih) dari fitur Hapus CSS yang Tidak Digunakan dengan menambahkan id elemen, nama kelas, dll. (pre code .wp-block-preformatted .wp-block-code0, pre code .wp-block-preformatted .wp-block-code1). Format. satu per baris (lihat )
Pemilih yang dikecualikan
Cara mengecualikan halaman/postingan dari CSS yang tidak digunakan
Anda dapat mengecualikan setiap posting, halaman, atau jenis posting khusus dari menggunakan fitur Hapus CSS yang Tidak Digunakan. Di editor, di sisi kanan, hapus centang “CSS yang tidak digunakan. ” Ini akan mengecualikan seluruh halaman. Ini dapat berguna untuk, katakanlah, halaman checkout atau hubungi kami yang mungkin memiliki lebih banyak masalah daripada situs lainnya
Pengecualian CSS yang tidak digunakan pada halaman individual
Saring
Anda dapat menggunakan pre code .wp-block-preformatted .wp-block-code2 filter untuk mengubah tempat CSS yang tidak digunakan dihapus di situs Anda. Di bawah ini adalah contoh mematikan CSS yang tidak digunakan hanya pada halaman
add_filter('perfmatters_remove_unused_css', function($boolean) { if(is_page()) { return false; } return $boolean; });_Pengecualian CSS umum yang tidak digunakan
Saat menggunakan fitur Hapus CSS yang Tidak Digunakan di Perfmatters, Anda mungkin perlu menambahkan satu atau dua pengecualian. Jumlahnya biasanya didasarkan pada kompleksitas situs. Misalnya, situs yang menggunakan pembuat halaman berat seperti Elementor kemungkinan besar akan membutuhkan lebih banyak pengecualian daripada situs ringan yang menggunakan GeneratePress
Di bawah ini adalah beberapa pengecualian umum yang biasanya kami lihat. Kami akan memastikan untuk terus menambahkan ke daftar ini saat kami menyempurnakan fiturnya
Blokir kutipan
.wp-block-quote blockquoteBlok kode
pre code .wp-block-preformatted .wp-block-codeKolom
.wp-block-columns.comment .comment-contentEditor Klasik
.wp-captionAstra
/uploads/astra/astra-theme-dynamic-css /uploads/astra-addon/astra-addon-dynamic-css.ast-mobile-menu-buttonsTersedia Google Maps
.fusion-google-map.fusion-mobile-menu .fusion-is-sticky .fusion-open-submenu .fusion-mobile-nav-itemDivi
Divi membuat lembar gaya dinamis. Anda dapat dengan aman mengecualikan ini karena seharusnya hanya berisi CSS bekas
.wp-block-quote blockquote0Wadah flexbox elemen
Jika Anda menggunakan wadah flexbox eksperimental di Elementor, Anda mungkin memerlukan pengecualian ini
KB heroik
.wp-block-quote blockquote_4Penggeser Cerdas
.wp-block-quote blockquote5Plugin untuk Ulasan Google
Plugin ini menyebabkan perilaku aneh dengan kompilasi CSS yang digunakan. Jika Anda menggunakan plugin ini, stylesheet harus dikecualikan
.wp-block-quote blockquote_6Memecahkan masalah CSS yang tidak terpakai
Nonaktifkan CSS sebaris dinamis
Beberapa tema seperti GeneratePress memiliki dua opsi untuk menghasilkan CSS dinamisnya, "inline embedded" dan "external file. ” Agar Unused CSS berfungsi dengan baik di Perfmatters, Anda harus selalu menggunakan metode "file eksternal". Ini lebih baik untuk caching, dan ini akan memastikan alat kami mengambil sebanyak mungkin gaya yang tidak terpakai
Matikan gabungan/kompiler
Agar Unused CSS berfungsi dengan baik di Perfmatters, Anda perlu mematikan fitur apa pun dari plugin pihak ketiga yang menggabungkan file CSS Anda. Menggabungkan CSS adalah teknik pengoptimalan yang sudah tidak digunakan lagi sejak HTTP/2 (sekarang HTTP/3). Sekarang lebih cepat memuat file satu per satu secara paralel
- Jika Anda menggunakan Autoptimize, LiteSpeed, WP Rocket, dll. , matikan penggabungan CSS
- Jika Anda menggunakan Avada, matikan fitur CSS Compiler
404 kesalahan
Beberapa penyedia hosting, seperti Pantheon, membatasi akses tulis ke folder pre code .wp-block-preformatted .wp-block-code3 tempat CSS bekas kami disimpan. Jika Anda tidak dapat mengubah izin, Anda dapat menggunakan filter kami untuk mengubah lokasi, misalnya ke folder pre code .wp-block-preformatted .wp-block-code5.
URL CDN (saat menggunakan solusi penulisan ulang lainnya)
Jika Anda menggunakan CDN pihak ketiga dengan URL khusus (cdn. domain. com), sebaiknya gunakan fitur penulisan ulang CDN di Perfmatters. Jika Anda menggunakan solusi lain untuk menulis ulang, Anda mungkin mengalami masalah dengan urutan pemuatan saat CSS yang digunakan dikompilasi. Anda dapat memperbaikinya menggunakan fitur opsi lanjutan kami
Langkah 1
Aktifkan “Show Advanced Options” di Perfmatters
Langkah 2
Di bagian CSS Perfmatters, gulir ke bawah dan masukkan URL CDN Anda
URL CDN CSS tidak digunakan
Langkah 3
Gulir ke bawah dan klik “Simpan perubahan. ”
Cara lain untuk mengatasinya adalah dengan filter ________3______6 kami
Halaman tidak mobile-friendly
Ini jarang terjadi, tetapi seperti apa pun yang mengubah dan menghapus kode, terkadang pengoptimalan CSS dapat menyebabkan masalah dengan situs WordPress Anda yang lulus uji ramah seluler Google. Ini dapat mengakibatkan peringatan Google Search Console yang mengatakan, “Halaman tidak ramah seluler. ” Masalah umum yang dicantumkan adalah "Teks terlalu kecil untuk dibaca", dan "Elemen yang dapat diklik terlalu berdekatan. ”
Laman bukan peringatan Google ramah seluler
Berikut adalah beberapa kiat pemecahan masalah yang dapat Anda gunakan untuk melacak masalah ramah seluler.
- Kami merekomendasikan untuk menggunakan perilaku "" jika berkaitan dengan CSS yang Tidak Digunakan. Namun, untuk memecahkan masalah, Anda dapat mengubahnya untuk sementara menjadi “Hapus. ” Ini dapat membantu Anda lebih mudah menemukan apa yang mungkin melanggar halaman. Jika Anda mencoba dan memecahkan masalah dengan perilaku "Penundaan", akan lebih sulit untuk memecahkan masalah apa pun di bagian bawah halaman yang mungkin teratasi sendiri karena mendeteksi interaksi pengguna. Ingat, Google sedang memindai seluruh halaman, dan itu tidak memicu penundaan
- Anda juga dapat menggunakan alat online gratis seperti Pikwy untuk mengambil screenshot situs Anda di ponsel (naikkan tinggi hingga maksimum). Ini bisa menjadi cara yang baik untuk melihat sesuatu yang rusak secara visual. Masalah dengan tangkapan layar Google Search Console adalah Anda tidak dapat menggulir ke bawah halaman, jadi terkadang itu tidak terlalu membantu
- Biasanya Anda ingin mencari hal-hal yang keluar dari halaman atau terlalu dekat ke tepi layar. Anda dapat membandingkan ini dengan tampilan masuk di situs WordPress Anda (di mana CSS yang tidak digunakan tidak berjalan) dengan tampilan keluar
- Setelah Anda menemukan masalahnya, lacak ke div, class, atau stylesheet. Anda kemudian dapat menambahkan pengecualian untuk atau. Kami juga memiliki daftar beberapa yang selalu kami perbarui dan tingkatkan
Nonaktifkan CSS yang tidak terpakai dengan Script Manager
Cara lain untuk menghapus dan atau mengurangi CSS yang tidak terpakai adalah dengan memanfaatkan Script Manager di Perfmatters. Jika Anda menguji dengan Wawasan PageSpeed, Anda dapat membandingkan "ukuran transfer" pada sumber daya dengan "potensi penghematan. “Kalau nilainya sama persis, berarti 100% tidak terpakai dan kemungkinan besar bisa dinonaktifkan (setidaknya pada URL yang Anda uji). Ini akan membantu mengurangi waktu pembuatan saat CSS yang Anda gunakan dibuat pada kunjungan pertama
Ukuran transfer CSS tidak digunakan
Kurangi atau ganti plugin/tema
Plugin atau tema hanya boleh mengantrekan lembar gaya jika benar-benar digunakan di halaman. Namun, seringkali bukan ini masalahnya. Untuk membantu mengurangi CSS yang tidak terpakai, Anda harus selalu menggunakan dan menghapus semua plugin yang membengkak