Bagaimana cara menghapus css dan javascript yang tidak terpakai dari situs wordpress?

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

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

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
blockquote

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-code

pre
code
.wp-block-preformatted
.wp-block-code

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-code

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
blockquote

Blok kode

pre
code
.wp-block-preformatted
.wp-block-code

Kolom

.wp-block-columns

.comment
.comment-content

Editor Klasik

.wp-caption

Astra

/uploads/astra/astra-theme-dynamic-css
/uploads/astra-addon/astra-addon-dynamic-css

.ast-mobile-menu-buttons

Tersedia Google Maps

.fusion-google-map

.fusion-mobile-menu
.fusion-is-sticky
.fusion-open-submenu
.fusion-mobile-nav-item

Divi

Divi membuat lembar gaya dinamis. Anda dapat dengan aman mengecualikan ini karena seharusnya hanya berisi CSS bekas

.wp-block-quote
blockquote

Wadah flexbox elemen

Jika Anda menggunakan wadah flexbox eksperimental di Elementor, Anda mungkin memerlukan pengecualian ini

.wp-block-quote
blockquote

.wp-block-quote
blockquote

.wp-block-quote
blockquote

KB heroik

.wp-block-quote
blockquote

Penggeser Cerdas

.wp-block-quote
blockquote

Plugin 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

Memecahkan 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-code

pre
code
.wp-block-preformatted
.wp-block-code

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.  

1. 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
2. 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
3. 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
4. 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

Bagaimana cara menghapus JavaScript dari WordPress?

Bagaimana cara menghapus plugin CSS yang tidak digunakan?