Perfmatters telah menambahkan fitur baru, dalam versi 1.8.5 tanggal 19 Januari untuk menghapus CSS yang tidak digunakan. Saya tidak akan pernah bosan merekomendasikan plugin ini, yang telah menjadi pelengkap penting jika Anda ingin meningkatkan performa blog Anda.
Untuk 25 USD Tahun pertama yang singkat (diskon 15% dari tahun kedua dan seterusnya) menawarkan alat yang ampuh, yang secara terus-menerus mereka tambahkan perbaikan. Di sini Anda memiliki panduan konfigurasi.
Saya sudah mengujinya di WordPress 5.8 dan 5.9-RC dan sejauh ini tidak ada yang rusak. Meskipun saya sudah memiliki CSS yang tidak terpakai yang sangat terkontrol melalui Script Manager dari plugin ini, hanya dengan mengaktifkan opsi ini Anda dapat menghemat setidaknya beberapa permintaan dan beberapa Kb.
Mengapa menghapus CSS yang tidak digunakan?
Peringatan yang biasa dalam PageSpeed Hapus CSS yang tidak digunakan" atau "Kurangi konten CSS yang tidak digunakan" sering ditampilkan ketika CSS yang dimuat oleh plugin atau templat tidak diperlukan atau tidak digunakan pada halaman tertentu.
Pengembang biasanya hanya meminta stylesheet jika sedang digunakan. Namun demikian, sering kali gaya tambahan juga ditambahkan yang mungkin tidak diperlukan. Hal ini menghasilkan banyak CSS yang tidak terpakai, yang memperlambat pemuatan.
Kadang-kadang, ini juga dapat memicu peringatan "Hapus sumber daya yang memblokir rendering".
Di luar plasebo untuk mendapatkan skor PageSpeed yang lebih baik, menghapus CSS yang tidak terpakai memiliki dampak besar pada penurunan waktu yang dibutuhkan dari saat halaman mulai dimuat hingga bagian mana pun dari konten halaman dirender di layar (FCP), waktu yang dibutuhkan untuk konten utama halaman web untuk mengunduh dan sepenuhnya siap untuk pengguna (LCP) dan waktu dari saat halaman mulai dimuat hingga sepenuhnya interaktif (TTI). Singkatnya, Anda tahu, bagian penting dari sejarah Core Web Vitals.
Bagaimana menemukan CSS yang tidak digunakan?
Cara termudah untuk menemukan CSS yang tidak digunakan adalah dengan menguji URL dengan PageSpeed. Jika ada CSS yang tidak terpakai, Anda akan melihat peringatan, yang hanya akan dipicu jika ambang batas yang dianggap cukup penting oleh Google untuk diperingatkan terlampaui, jadi jika kecepatan pemuatan yang dirasakan (kecepatan aktual yang Anda alami) bagus, jangan terlalu terobsesi.
Cara lain untuk menemukan CSS yang tidak digunakan adalah dengan menggunakan Chrome DevTools. Buka inspektur di Chrome (Ctrl + Shift-I), tekan Shitft + Control + P, ketik "Coverage" dan di sana Anda akan menemukan byte yang tidak terpakai untuk CSS dan JS. Warna merah adalah yang tidak digunakan dan warna biru/hijau adalah yang digunakan.
Dari sini, dan memahami bahwa Anda mengenali setiap CSS, apa yang dilakukannya dan apakah Anda dapat menghapus atau menonaktifkannya dari halaman tempat Anda mengukur, ada beberapa opsi, seperti mengganti plugin tertentu dengan yang lebih ringan lainnya, meninjau atau mempertimbangkan untuk mengubah templat, menggunakan Script Manager untuk menonaktifkan JS dan CSS secara selektif, dll.
Cara termudah untuk menghapus peringatan PageSpeed adalah dengan mengaktifkan fungsi "Hapus CSS yang tidak digunakan" di Perfmatters, yang melakukan semuanya secara otomatis. Mereka mengklaim telah mengujinya pada ratusan URL (dengan templat dan konfigurasi yang berbeda) dan melaporkan hasil ini:
Rata-rata penurunan FCP dari 15,20%.
Penurunan LCP rata-rata 19,66%.
Penurunan TTI rata-rata 14,95%.
Sebelum mengaktifkan
Perfmatters merekomendasikan bahwa, sebelum mengaktifkan opsi ini, Anda menghapus preloading CSS yang ada yang telah dikonfigurasi di Perfmatters (tidak termasuk stylesheet lokal di Sumber Google) dan TIDAK menggabungkan CSS.
Penggabungan CSS adalah teknik pengoptimalan yang sudah tidak digunakan lagi sejak HTTP/2. Dalam beberapa kasus, penggabungan CSS bahkan bisa merugikan performa. Sekali lagi, ingatlah bahwa setiap halaman akan berperilaku berbeda tergantung pada konfigurasinya dan yang terbaik adalah menguji dan mengamati sampai Anda menemukan hasil bebas kesalahan terbaik untuk kasus Anda.
Anda juga harus menyadari kemungkinan konfigurasi kinerja atau plugin caching lain yang mungkin Anda gunakan yang mungkin bertentangan atau menimpa satu sama lain dengan mengaktifkan fungsi yang sama.
Setelah diaktifkan, Anda akan menemukan tiga opsi:
1- Delay (default dan direkomendasikan).
CSS Anda biasanya sebaris dan semua stylesheet CSS (CSS yang tidak digunakan) ditunda dan dimuat dengan interaksi pengguna.
2- Async
CSS yang Anda gunakan dikonversi menjadi sebaris, dan semua stylesheet CSS (CSS yang tidak digunakan) dimuat secara asinkron. Metode ini dapat membantu menghindari pop-in, karena stylesheet dieksekusi secara asinkron saat halaman dimuat. Metode ini akan menghasilkan LCP/FCP yang sedikit lebih tinggi daripada perilaku penundaan sebelumnya.
3- Delete
CSS yang Anda gunakan menjadi sebaris, dan semua stylesheet CSS asli (CSS yang tidak digunakan) dihapus. Ini adalah metode yang paling agresif, tetapi kemungkinan juga memerlukan penambahan pengecualian. Hanya direkomendasikan untuk pengguna tingkat lanjut.
Setelah diaktifkan, halaman dan entri akan berperilaku berbeda.
Halaman cenderung memiliki banyak CSS unik, dan oleh karena itu CSS yang digunakan akan dihasilkan dan menjadi sebaris secara terpisah per halaman pada kunjungan pertama. Namun, entri, karena cenderung berbagi banyak CSS, CSS yang digunakan hanya akan dihasilkan sekali, pada kunjungan pertama, dan menjadi sebaris. Perbedaan entri dibandingkan dengan halaman adalah, bahwa pembuatan CSS yang digunakan hanya terjadi satu kali.
Semua CSS yang digunakan yang dihasilkan oleh Perfmatters akan disimpan secara lokal di jalur ini:
/wp-content/cache/perfmatters/tudominio.com/css/
Seperti inilah tampilan CSS yang dihasilkan oleh Perfmatters, untuk halaman, posting, kategori, tag, pencarian, beranda atau 404.
Dalam kotak "Excluded Stylesheets", Anda dapat mengecualikan stylesheet tertentu dari fungsi "Remove unused CSS" dengan menambahkan URL sumber lengkap (loquesea.css), atau dengan menambahkan satu bagian dari URL sumber. Format: satu per baris.
Dalam kotak "Excluded Selectors" berikut ini, Anda dapat mengecualikan CSS tertentu (penyeleksi) dari fungsi "Hapus CSS yang tidak digunakan" dengan menambahkan id elemen, nama kelas, dll. (#id, .class). Format: satu per baris.
Kemungkinan pada suatu saat Anda perlu menghapus CSS yang digunakan. Misalnya, setelah mendesain ulang halaman atau setelah menambahkan elemen baru. Untuk menghapus CSS yang dihasilkan dan membuatnya kembali setelah kunjungan berikutnya, cukup klik pada opsi di bagian bawah "Clear Used CSS".
Anda dapat mengecualikan pos individual, halaman, atau jenis pos khusus dari penggunaan fungsi Hapus CSS yang Tidak Digunakan. Di editor, di sisi kanan, hapus centang "Unused CSS".
Ini akan mengecualikan seluruh halaman dan dapat berguna untuk misalnya keranjang, checkout, atau halaman kontak yang mungkin memiliki lebih banyak masalah daripada bagian lain dari situs.
Filter juga dapat digunakan perfmatters_remove_unused_css untuk mengubah di mana CSS yang tidak digunakan dihapus di situs Anda. Contoh ini akan menonaktifkan CSS yang tidak digunakan pada halaman saja.
add_filter('perfmatters_remove_unused_css', function($boolean) {
if(is_page()) {
return false;
}
return $boolean;
});
