Banyak tema dan plugin WordPress hadir dengan banyak kode CSS. Namun, banyak dari kode CSS ini sebenarnya tidak digunakan di situs Anda. CSS yang tidak digunakan ini memperlambat situs web Anda, yang mengurangi pengalaman pengguna dan merusak SEO Anda
Pada artikel ini, kami akan menunjukkan kepada Anda cara mudah menghapus CSS yang tidak digunakan di WordPress untuk mempercepat situs Anda
Orang Sering bertanya
- Bagaimana cara menghapus CSS yang tidak terpakai secara manual dari WordPress?
- Bagaimana cara menghapus CSS yang tidak terpakai?
- Bagaimana cara menghapus CSS dari WordPress?
- Bagaimana cara mengurangi CSS dan JavaScript yang tidak digunakan di WordPress?
- Bagaimana cara mengecilkan CSS dan JS di WordPress?
Jadi, jika Anda ingin menciptakan pengalaman yang lebih baik bagi pengunjung Anda, tingkatkan kecepatan wordpress, dan dapatkan lebih banyak konversi — perbaiki masalah dan hapus CSS yang tidak terpakai
Tetapi bagaimana Anda mengetahui berapa banyak CSS yang sebenarnya digunakan di situs web Anda?
Kami akan menunjukkan cara menggunakan Chrome DevTools untuk mengetahui gaya apa yang digunakan di paro atas dan bawah, dan cara menghapusnya dengan cepat. Selain itu, kami akan mencantumkan dua alat yang membantu Anda mengetahui berapa banyak ukuran file CSS yang dapat dikurangi
Menghapus CSS yang tidak terpakai dapat menjadi proses yang memakan waktu. Ini melibatkan melalui setiap baris CSS, mencari penyeleksi yang tidak ada dalam dokumen HTML dan menghapusnya
Sebelum kita mulai menghapus CSS yang tidak terpakai dari style sheet, mari kita pahami apa itu CSS yang tidak terpakai dan mengapa itu ada di tempat pertama
Baca Juga – 11 Plugin Pengoptimalan Gambar WordPress Terbaik 2023 [PANDUAN]
Apa itu CSS yang Tidak Digunakan di WordPress?
CSS yang tidak terpakai atau kode redundan terjadi saat stylesheet situs web berisi pemilih dan deklarasi yang tidak digunakan di halaman. Itu mungkin disengaja atau tidak disengaja
CSS yang tidak digunakan adalah masalah umum. Beberapa tahun yang lalu, kami menganalisis 1k situs web teratas dan menemukan bahwa ukuran rata-rata CSS yang tidak digunakan lebih dari 500 KB [atau lebih dari 80% dari semua gaya]. Laporan yang sama menunjukkan bahwa sekitar 28% situs web memiliki lebih dari 1 MB CSS yang tidak digunakan, yang memperlambat waktu pemuatannya
Jika Anda tidak menggunakan tema/templat khusus, kemungkinan Anda menggunakan tema/templat yang dirancang untuk menawarkan beberapa tata letak dan elemen HTML yang berbeda seperti
- lebar penuh
- Bilah sisi kiri
- Bilah sisi kanan
- Jenis posting khusus
- tabel
- Bilah pencarian
- Bentuk
- Menu navigasi
- Biografi penulis
- Dan apa tidak
Saat pengembang tema mendesain tema dengan mengingat sekelompok besar pengguna yang membutuhkan fungsionalitas berbeda, sebagian besar pengembang menulis semua kode gaya dalam satu file CSS yang disebut gaya. css
Baca Juga – 12 Plugin Staging WordPress Terbaik Untuk Membuat Situs Uji Coba [2023]
Masalahnya di sini adalah bahwa apa pun fitur/elemen yang Anda gunakan di situs Anda, kode CSS yang ditulis untuk semua fitur/elemen disajikan kepada pengunjung Anda
Ini adalah CSS yang tidak digunakan
CSS yang tidak digunakan adalah kode yang ditulis dalam lembar gaya situs web tetapi tidak digunakan/digunakan untuk menata elemen atau bagian HTML apa pun dari situs web.
Anda dapat meningkatkan kinerja kecepatan halaman situs web Anda dengan menghapus CSS yang tidak terpakai ini
Bagaimana cara mengidentifikasi CSS dan JavaScript yang tidak digunakan?
Anda perlu mencari tahu apa yang menyebabkan situs Anda memuat sumber daya yang tidak perlu. Beberapa asumsi sederhana, seperti formulir kontak, toko online, atau plugin ulasan, tidak diperlukan di semua situs. Namun, tugasnya lebih sulit dari yang Anda bayangkan
Pertama, hapus caching dan nonaktifkan plugin caching di situs Anda. Sekarang buka alat Google PageSpeed Insights dan periksa speedometer
Untuk meluaskan postingan, klik Hapus JavaScript yang Tidak Digunakan dan Hapus CSS yang Tidak Digunakan. Semua URL yang dapat dihapus dari halaman akan ditampilkan oleh Google
Plugin untuk iklan, analitik, penyematan video YouTube, dan media sosial digunakan untuk menambahkan skrip ini ke situs Anda. Oleh karena itu, Anda harus menyadari bahwa sumber daya eksternal ini akan memengaruhi kecepatan halaman Anda, dan Anda tidak akan dapat mengontrolnya sampai Anda ingin menghapusnya.
CSS dan skrip tersemat – ini tidak ditampilkan di alat PageSpeed . Anda harus menemukan dan menghapusnya secara manual dari situs web Anda.
Nonaktifkan file plugin jika plugin menambahkan CSS atau skrip sebaris. Ingat bahwa tema berat dengan ratusan gaya. baris css memiliki banyak masalah.
Untuk mengurangi ukuran file, hapus kode dari style secara manual. file css
Oleh karena itu, jika dimuat sebagai file terpisah, CSS dan JavaScript yang tidak digunakan dapat dihapus dengan mudah. Memuat gaya besar. file css atau CSS sebaris hanya dapat dihapus jika Anda meninjaunya secara manual dan menghapus kode yang tidak digunakan. Alternatifnya, Anda mungkin perlu mencari tema atau plugin yang ringan untuk memperbaiki masalah tersebut
Anda dapat mengaktifkan kembali plugin cache di situs Anda setelah Anda mengidentifikasi sumber masalahnya
Baca Juga – Alat Pemindai Keamanan WordPress Terbaik Untuk Memindai Kerentanan
Menggunakan plugin Pembersihan Aset
Jika Anda telah mengunggah banyak file plugin dan tema, hapus dari situs yang tidak Anda perlukan dengan mengikuti petunjuk di bawah ini
Masuk ke panel admin WordPress Anda dan navigasikan ke “Plugins – Add New”
Ketik “Pembersihan Aset” di kolom penelusuran dan temukan “ Pembersihan Aset. Percepat pemuatan halaman ” plug-in
Instal dan aktifkan plugin
Kami menyarankan Anda membaca dokumentasi terlampir setelah mengaktifkan plugin. Ini diperlukan agar plugin berfungsi dengan baik
Pengaturan Pengaya
Kami tidak akan membahas semua opsi plugin di artikel ini. Jika Anda menggunakan plugin caching di situs Anda, seperti WP Rocket, pastikan Anda tidak menggunakan fungsi lain selain menghapus skrip dan CSS yang tidak perlu.
Buka Pembersihan Aset > Preferensi > Pengaturan Penggunaan Plugin. Anda dapat memilih cara menampilkan dan menonaktifkan CSS dan skrip yang tidak diperlukan di halaman Anda dari menu ini
Kelola di Dasbor – aktifkan opsi ini. Ini akan membantu Anda menganalisis halaman dari editor posting panel admin
Pemeriksaan ujung depan – aktifkan opsi ini jika Anda ingin mengurai halaman dari browser eksternal. Anda dapat mematikannya jika Anda tidak ingin menggunakannya. Ingatlah bahwa hanya pengguna terdaftar dengan akses administrator yang dapat melakukan analisis eksternal. Selama proses pembayaran, pengunjung situs Anda tidak akan dirugikan
Tata Letak Daftar Aset – Pilih Semua Gaya & Skrip > Dikelompokkan berdasarkan Lokasi dari menu tarik-turun [Tema, Plugin, Inti & Eksternal]. Ini akan memungkinkan Anda untuk menelusuri file sumber daya yang diatur berdasarkan kategori
Sembunyikan file daftar sumber daya WordPress utama?
Sekarang buka tab Test Mode dan pilih Enable Test Mode dari menu drop-down. Ini akan memungkinkan Anda untuk memeriksa ulang apakah situs tersebut mati setelah menonaktifkan skrip dan CSS sebelum dipublikasikan
Klik "Perbarui semua pengaturan" di bagian bawah untuk menerapkan perubahan
Baca Juga – Plugin Keamanan WordPress Terbaik Untuk Mengamankan Situs Anda di Tahun 2023
Mengapa CSS yang Tidak Digunakan Buruk untuk Situs Web Anda?
Setiap situs web memiliki sejumlah CSS yang tidak terpakai. Itu ditambahkan oleh tema atau plugin WordPress Anda yang sebenarnya tidak Anda butuhkan
CSS yang tidak digunakan buruk untuk situs web Anda karena membuat situs WordPress Anda lambat dan berdampak negatif pada pengalaman pengguna
Situs web yang memuat lambat dapat menghabiskan uang, lalu lintas, dan peringkat mesin pencari. Ini juga akan membuat pengunjung Anda tidak senang
Di situlah alat penghapus kode CSS yang tidak terpakai berguna. Ini membantu Anda menghapus semua kelebihan dari situs web Anda yang meningkatkan kinerja dan meningkatkan pengalaman pengguna
CSS yang tidak digunakan menggunakan sumber daya [bandwidth, server, dll. ] tanpa tujuan
Ini juga berkontribusi pada waktu muat [kecepatan situs] situs Anda. Ini berarti CSS yang tidak digunakan mengurangi kecepatan situs Anda
Pentingnya kecepatan situs tidak bisa cukup ditekankan. Kecepatan situs dapat membuat atau menghancurkan situs Anda. Karena itu, Anda harus menghapus elemen yang tidak diinginkan untuk membuat situs Anda lebih ringan
CSS yang tidak digunakan memengaruhi waktu pemuatan dan metrik tertentu seperti Largest Contentful Paint [LCP] dan Total Blocking Time [TBT]
LCP dan TBT memainkan peran penting dalam skor Wawasan PageSpeed. masing-masing memegang 25% dari skor akhir PSI
Baca Juga – 40 Kesalahan dan Masalah WordPress Paling Umum – 2023 [DIPERBARUI]
Masalah Saat Menghapus CSS yang tidak digunakan
Menghapus CSS yang tidak terpakai tidaklah mudah, inilah alasannya
File CSS tunggal
Di sebagian besar tema/template hanya ada satu file CSS utama. File CSS tunggal ini berisi kode CSS untuk semua jenis halaman, elemen, dan tata letak
Ini menyebabkan masalah saat mencoba mengidentifikasi CSS yang tidak digunakan di situs web
Sebagai contoh
- Saat Anda menguji beranda Anda melalui Alat Deteksi CSS yang Tidak Digunakan yang diberikan di bawah ini, semua CSS yang berkaitan dengan halaman dalam, tata letak, dan elemen akan terdeteksi sebagai "tidak digunakan" oleh alat tersebut. Ini agak benar untuk beranda – karena pemilih / kelas CSS tersebut tidak digunakan di beranda situs Anda
Tetapi CSS semacam itu tidak sepenuhnya tidak digunakan di situs Anda
Ini berarti Anda harus menguji situs Anda untuk setiap kemungkinan halaman, tata letak, elemen yang menggunakan CSS unik untuk mendeteksi semua CSS yang tidak digunakan
Kedengarannya membosankan, bukan
Baca Juga – WordPress Diretas – Cara Mengamankan Situs Web Anda dari Peretas
Elemen dinamis [JS menyisipkan CSS]
Pertimbangkan skenario di mana JavaScript digunakan untuk memicu/meluncurkan elemen laman dinamis seperti kotak telusur, pemberitahuan overlay, dll. Dalam hal ini, JS dapat berisi kelas CSS dan tag HTML lain yang digunakan untuk elemen dinamis
Kelas-kelas ini [di dalam JS] tidak mudah dideteksi dan karenanya menyulitkan untuk mengekstrak CSS yang tidak digunakan dengan benar
CSS disisipkan oleh plugin
Plugin, add-on dan ekstensi, dll. dapat memasukkan CSS ke dalam CMS seperti WordPress dan lainnya
Idealnya, CSS dan JS hanya memuat pada halaman yang digunakan
Beberapa plugin WordPress memasukkan CSS [dan JS] ke semua halaman situs web terlepas dari penggunaannya pada halaman tertentu
Plugin WordPress ini berkontribusi "CSS yang tidak digunakan". Anda dapat membongkar CSS dan JS yang tidak diinginkan pada halaman tertentu menggunakan plugin sederhana
Baca Juga – Langkah-langkah Untuk Menghapus Malware Dari Situs WordPress Anda
Bagaimana cara menghapus CSS yang tidak terpakai dari file CSS?
Metode ini berguna untuk situs HTML dan situs web tanpa elemen dinamis
Sebelum membuat perubahan apa pun pada kode situs Anda, pelajari cara membuat cadangan lengkap Database WordPress Secara Manual & Dengan Plugin. Sehingga Anda dapat memulihkan situs Anda, jika perlu.
Proses langkah demi langkah untuk menghapus CSS yang tidak digunakan
- Pilih salah satu alat yang disebutkan di bawah ini
- Hasilkan CSS yang digunakan/tidak digunakan untuk situs Anda
- Hapus CSS yang tidak terpakai secara manual dari file stylesheet
- Simpan perubahan
- Uji situs Anda lagi untuk melihat perubahannya
Anda dapat menggunakan salah satu alat berikut untuk menemukan CSS yang tidak terpakai/terpakai di situs web Anda
Hapus [Kurangi] CSS yang Tidak Digunakan – Alat / Plugin WordPress
Gunakan Alat Pengembang Chrome. untuk menemukan CSS yang tidak terpakai
Berikut adalah langkah-langkah untuk menemukan CSS yang tidak terpakai menggunakan PageSpeed Insights dan tab Cakupan di Chrome DevTools
- Buka situs web Anda di tab penjelajahan pribadi Google Chrome
- Akses Alat Pengembang Chrome dengan mengikuti menu Chrome > Alat Pengembang. Atau tekan Ctrl + Shift + Windows [ Command + Shift + Di Mac]
- Tekan Ctrl+Shift+P untuk menjalankan perintah. Lalu ketik Cover dan klik Show Cover
- Tab cakupan akan terbuka di DevTools yang menampilkan semua file CSS dengan statistik yang digunakan/tidak digunakan
- Klik pada file CSS untuk memeriksa secara visual kode CSS yang digunakan dan tidak digunakan. Di mana ” merah ” menunjukkan tidak digunakan dan “biru” [hijau laut] menunjukkan CSS yang digunakan
- Anda perlu memeriksa berbagai templat halaman situs Anda untuk sepenuhnya mendeteksi CSS yang tidak digunakan [atau katakanlah hingga maksimum]. Templat halaman ini dapat berupa – halaman beranda, halaman/posting tunggal, halaman arsip, halaman pencarian, halaman 404 dan daftar pantauan tergantung pada desain situs Anda
Anda dapat dengan mudah menemukan CSS yang tidak digunakan menggunakan Alat Pengembang Google Chrome seperti yang dijelaskan di atas
Baca Juga – Bagaimana Memperbaiki Kesalahan Membangun Koneksi Database di WordPress?
UnCSS online
Unused CSS Online adalah alat online gratis yang menghasilkan versi minified dari CSS bekas. di github
Anda harus memasukkan HTML dan CSS Anda di kotak teks yang disediakan untuk menghasilkan versi CSS yang digunakan
CSS yang tidak digunakan
CSS yang tidak digunakan adalah alat SAAS [Software as a Service]. Ini mengidentifikasi CSS yang tidak digunakan di situs web dengan menganalisisnya. Alat ini juga memberi tahu Anda berapa banyak yang dapat Anda hemat dengan menghapus CSS yang tidak digunakan dari situs Anda
Anda perlu menambahkan situs web Anda ke platform mereka untuk mulai menemukan CSS yang tidak terpakai. Setelah situs web ditambahkan CSS yang tidak digunakan, itu akan memindai situs web untuk menemukan CSS
CSS yang tidak digunakan gratis untuk dicoba, tetapi Anda harus membayar biaya bulanan untuk menggunakan fitur premiumnya seperti pemindaian tanpa batas, pengoptimalan terjadwal, dan lainnya
Bersihkan CSS
Ini adalah alat gratis yang tersedia di GitHub. Alat ini sangat berguna bagi pengembang yang ingin menghapus CSS yang tidak terpakai dari proyek mereka selama tahap pengembangan dan pengujian
Dengan menggunakan purify CSS Anda dapat menghapus CSS yang tidak terpakai dari HTML PHP JavaScript dan file CSS. Itu tidak membuat perubahan pada file CSS asli sendiri. Sebagai gantinya, Anda perlu membuat file CSS baru
Dalam kasus framework seperti bootstrap, Anda dapat mengurangi ukuran CSS hingga 75% menggunakan purify CSS
Purgecss
Pembersihan CSS juga merupakan alat yang baik bagi pengembang untuk mengidentifikasi CSS yang tidak digunakan dalam proyek/situs web mereka selama fase pengembangan itu sendiri
PurgeCSS memindai dan menganalisis konten dan file CSS Anda untuk menemukan CSS yang tidak terpakai. Setelah menemukan CSS yang tidak terpakai, itu menghapusnya dari file CSS untuk membuatnya lebih ringan
UnCSS
UnCSS adalah cara lain untuk menghapus CSS yang tidak digunakan dari stylesheet. Itu juga dapat mendeteksi CSS yang disuntikkan ke dalam JavaScript
Sisi negatifnya adalah tidak berfungsi dengan halaman non-HTML seperti file PHP
Baca Juga – Cara Menghapus Malware Redirect Hack di WordPress
Hapus CSS yang Tidak Digunakan di WordPress menggunakan WP Rocket
Cara ini lebih mudah dan direkomendasikan untuk pemula. Ini sangat meningkatkan pengiriman file CSS secara keseluruhan di situs web WordPress Anda, termasuk menghapus sebagian besar CSS yang tidak digunakan
Menurut kami ini adalah solusi terbaik untuk pemula karena lebih mudah dan mencapai tujuan utama untuk memberikan pengalaman yang lebih baik bagi pengguna Anda. Ini berarti situs web Anda memuat dengan cepat pada alat pengujian kecepatan dan juga terasa cepat bagi pengguna Anda
Pertama, Anda perlu menginstal dan mengaktifkan plugin WP Rocket
Setelah aktivasi, Anda perlu mengunjungi halaman Pengaturan »WP Rocket dan beralih ke tab 'Pengoptimalan File'. Selanjutnya, Anda perlu menggulir ke bawah ke bagian File CSS dan kemudian mencentang kotak di sebelah opsi 'Hapus CSS yang Tidak Digunakan [Beta]'. Setelah opsi 'Hapus CSS yang Tidak Digunakan' aktif, Anda kemudian dapat menentukan nama file CSS, ID, atau kelas yang tidak boleh dihapus di bawah kotak 'daftar aman CSS'
Plugin memerlukan waktu beberapa menit untuk memproses dan menghapus file CSS yang tidak terpakai dari situs web Anda
Anda akan melihat 'Hapus CSS yang Tidak Digunakan selesai. ' pesan ketika plugin telah menyelesaikan proses
Bagaimana cara mengurangi CSS yang tidak terpakai di WordPress?
Ada berbagai cara untuk mengurangi CSS yang tidak terpakai di website WordPress Anda. Namun, akan sangat sulit untuk menghapus semua CSS yang tidak digunakan di WordPress.
Karena cara kerja WordPress di balik layar, beberapa CSS yang tidak terpakai mungkin sulit ditemukan dan dihapus
Pilih Desain Situs WordPress Lean
Pertama, instal tema WordPress yang ringan
Tema yang bagus tidak hanya membantu Anda menghindari masalah CSS yang tidak terpakai tetapi juga menawarkan banyak keuntungan dibandingkan tema berat lainnya
Ada ribuan tema WordPress yang tersedia untuk berbagai jenis desain situs web [tampilan dan fungsionalitas]
Tetapi tidak semua tema memberikan kecepatan dan keamanan situs yang lebih baik. Pastikan Anda memilih tema wordpress yang aman juga
Jadi jika Anda peduli dengan kecepatan situs, kami ingin Anda memilih tema
- dioptimalkan untuk kinerja
- dirancang dengan hati-hati
- jangan membebani situs web Anda dengan kode yang tidak diinginkan
Ada beberapa tema WordPress bagus yang ditawarkan oleh pengembang profesional
Beberapa temanya adalah Astra, GeneratePress, dan Genesis, dll
Kami dapat dengan mudah merekomendasikan salah satu dari ketiganya untuk kecepatan situs
Baca Juga – Cara Memindai & Mendeteksi Malware di Tema WordPress [Diperbarui 2023]
Offload CSS dari halaman tertentu
Anda dapat membongkar aset yang tidak digunakan [CSS dan JS] dari halaman tertentu menggunakan plugin yang disebut Pembersihan Aset. Plugin ini tersedia secara gratis di repositori plugin WordPress. Dan Anda dapat menggunakan Pembersihan Aset untuk menghapus file CSS yang tidak terpakai dari WordPress
Panduan untuk membongkar CSS [dan JS] yang tidak digunakan di WordPress
Instal dan aktifkan plugin
Buka pengaturan plugin> Manajer CSS & JS
Di bawah CSS & JS Manager, Anda dapat mengaktifkan "Kelola di front-end" untuk mengelola file front-end untuk pengguna yang masuk [admin]
Jika Anda telah mengaktifkan opsi "Kelola di front-end", Anda akan melihat semua aset di front-end halaman saat Anda login ke WordPress Anda. Jika tidak, Anda perlu mengedit postingan/halaman untuk melihat aset dimuat di halaman tertentu
- Sekarang buka halaman tempat Anda ingin membongkar css dan/atau JS
- Di bagian bawah halaman, Anda akan melihat semua aset [file css, JS] dimuat di halaman ini
- Dari sini Anda dapat membongkar file CSS [atau elemen lainnya] dari halaman tertentu
- Dan terakhir, klik tombol "Perbarui" untuk menyimpan perubahan
- Sekarang uji kembali situs Anda dengan alat uji kecepatan untuk melihat perubahannya
Baca Juga – Bagaimana Cara Memperbaiki Peretasan Kata Kunci Jepang di Situs WordPress?
Membersihkan gaya. file css
Seperti yang kami sebutkan di atas, Anda dapat membersihkan gaya tema Anda. css agar tetap ringan dan kecil
Ini adalah tugas manual. Pertama, Anda perlu mengidentifikasi CSS yang tidak digunakan, lalu Anda dapat menghapusnya dari gaya Anda. file css
Untuk tujuan ini, Anda dapat menggunakan metode Alat Pengembang Chrome yang kami jelaskan di atas
Jika Anda berencana melakukan hal yang sama, kami sarankan Anda membuat cadangan file/situs Anda terlebih dahulu. Dalam kasus WordPress, berikut adalah plugin cadangan WordPress terbaik yang dapat Anda gunakan untuk membuat cadangan situs Anda. PERIKSA JUGA – Cara Mengembalikan Situs WordPress Dari Cadangan – PANDUAN
Gunakan CSS Jalur Kritis
'Gunakan CSS kritis dan tunda sisa CSS. ’
CSS kritis adalah CSS yang diperlukan untuk merender konten di atas garis lipatan halaman web. Menghasilkan CSS kritis dan menangguhkan CSS non-kritis dapat membantu meningkatkan Cat Pertama yang Bermakna dan Cat Konten Pertama situs web
Di WordPress, CSS kritis dapat digunakan sejalan dengan plugin WordPress. Ada beberapa plugin yang tersedia yang menyediakan fungsi ini. Tetapi hanya sedikit dari mereka yang benar-benar menonjol
Dan Autoptimize dan WP Rocket adalah dua plugin tersebut
Anda menggunakan CSS penting dan menangguhkan semua CSS yang tidak penting untuk meningkatkan pengiriman konten di paro atas
Baca Juga – Tips & Trik Keamanan WordPress Terbaik 2023
Gunakan Jaringan Pengiriman Konten [CDN]
Anda dapat menggunakan CDN untuk mengirim file CSS. CDN mempercepat pengiriman konten dengan tidak hanya mengirimkan file CSS, tetapi juga file statis situs web lainnya
Menggunakan CDN meningkatkan latensi jaringan dan juga mengurangi beban server dan waktu pengunduhan
Anda dapat menggunakan CDN seperti StackPath CDN, BunnyCDN, etc.
Hapus CSS dan JavaScript yang tidak digunakan
Anda dapat menganalisis halaman dari editor atau front-end, tergantung pada pengaturannya
Nonaktifkan Scripting dan CSS di Editor – Akses editor postingan dengan mengedit postingan yang ada. Gulir ke bawah untuk melihat kolom meta plugin Pembersihan Aset. Tinjau semua CSS dan JavaScript yang dimuat di halaman ini dan nonaktifkan yang tidak Anda perlukan.
Nonaktifkan skrip front-end dan CSS – Jika opsi "Kontrol di frontend" diaktifkan, buka pos apa pun di antarmuka browser. Ingatlah untuk menggunakan tab browser lain untuk mengakses panel admin WordPress Anda. Nilai meta serupa dapat ditemukan di bagian bawah halaman, yang menonaktifkan sumber daya yang dimuat di halaman
Semua file CSS dan JavaScript yang dimuat di halaman diatur sesuai dengan pengaturan Anda dalam kedua kasus tersebut
Lihat secara spesifik file yang dimuat oleh plugin dan tema Anda dengan membuka setiap grup. Anda memiliki banyak alternatif untuk setiap file CSS dan JS seperti yang ditunjukkan pada gambar di bawah ini
- Muat sumber daya di halaman
- Nonaktifkan file di seluruh situs
- Nonaktifkan untuk semua posting [itu akan terus memuat halaman dan jenis posting khusus]
- Fitur lain, seperti dukungan RegEx, hanya dapat diakses di plugin edisi pro.
- Setelah menonaktifkan file, Anda perlu memperbarui pesan Anda di situs agar perubahan diterapkan
- Lihat dan hapus file yang terputus dalam mode uji
- Buka Pembersihan Aset > Perubahan Massal
- Klik tab Posts, Pages, and Custom Post Types dan pilih Posting dari daftar drop-down
- Anda dapat melihat semua file situs Anda yang dinonaktifkan di sini
- Untuk mengaktifkan kembali pengunggahan file, pilih kotak centang Hapus Aturan Massal, lalu klik tombol Terapkan Perubahan di bagian bawah
- Anda juga dapat menyesuaikan jenis unggahan file dan mengedit pesan di editor pesan
- Periksa situs web Anda dan jika semuanya terlihat baik, kembali ke halaman pengaturan dan matikan mode uji. Semua pengguna yang mengunjungi situs Anda akan dapat melihat perubahan tersebut. Demikian pula, Anda dapat mengedit jenis posting, halaman, dan halaman produk khusus untuk menonaktifkan file CSS dan JS. Untuk melihat apakah kesalahan telah dihapus, gunakan alat Wawasan Google PageSpeed
Tip Bonus
Karena Anda sedang berupaya membuat situs Anda memuat lebih cepat, inilah tip bonus untuk Anda
Jika Anda ingin berusaha lebih keras untuk mengoptimalkan situs Anda, kami juga merekomendasikan untuk menghapus elemen CSS yang tidak diinginkan/kurang digunakan
Sebagai permulaan, Anda dapat menghapus font mewah ini dari situs Anda
Ya, mereka meningkatkan ukuran halaman situs Anda
Dan Anda harus menggunakan font web-safe sebagai gantinya
Baca Juga – Cara Menambahkan Header Keamanan di WordPress [Plugin]
Apa yang harus dilakukan jika menggunakan tema WordPress premium?
Apakah Anda menggunakan tema WordPress premium di situs Anda? . Alasannya sederhana, tema premium dirancang untuk memenuhi semua kebutuhan, dan karena itu memuat banyak fitur.
Fungsionalitas ini membutuhkan baris kode CSS, yang tidak mudah diidentifikasi dan sering dipanggil di semua halaman.
Jadi, situs Anda, oleh karena itu, berisi CSS yang tidak berguna dan memperlambat waktu pemuatan situs WordPress Anda
Blokir sumber daya CSS yang tidak digunakan
Seperti yang Anda lihat, menanggapi permintaan Google PageSpeed dengan menghapus sumber daya CSS yang tidak terpakai tidaklah mudah. Keuntungannya bisa signifikan dan layak untuk menginvestasikan waktu dalam rekomendasi ini
Baca Juga – Perlindungan CSRF WordPress – Mencegah Eksploitasi CSRF
Kesimpulan
Seperti disebutkan sebelumnya, plugin hanya akan membantu Anda mencegah plugin dan tema memuat file CSS dan JS. Kode pihak ketiga harus dihindari dan kode yang tidak perlu harus dihapus dari gaya utama. file css
Agar perubahan Anda tidak hilang saat memperbarui tema, kami menyarankan Anda untuk membuat template untuk memperbarui style sheet Anda
Kami telah menjelaskan bahwa menghapus CSS yang tidak terpakai bukanlah tugas yang mudah
Di WordPress, semakin sulit untuk sepenuhnya menghapus CSS yang tidak digunakan. Tetapi Anda selalu dapat mengusahakannya untuk meminimalkan margin
Oleh karena itu, Anda harus fokus untuk menghapus CSS yang tidak terpakai sebanyak mungkin dengan sumber daya yang tersedia. Seperti biasa, bahkan setelah mengikuti saran di blog kami, Anda masih belum dapat menerapkan solusi yang disajikan, atau hanya ingin memastikan bahwa pekerjaan dilakukan dengan benar, jangan ragu untuk menghubungi