Performa situs web Anda harus dalam kondisi terbaik — apa pun perangkat atau koneksi yang digunakan pengunjung. Sayangnya, akan selalu ada kasus di mana kinerja situs di bawah standar. Salah satu alasan utamanya adalah CSS yang tidak digunakan. Anda dapat mempelajari lebih lanjut tentang ini dengan menonton video tentang cara memuat laman web lebih cepat dari tim Pengembang Google Chrome
Jika Anda kesulitan melihat CSS yang tidak terpakai di halaman mana pun, Anda dapat mengikuti petunjuk berikut dari developer
Selain itu, halaman harus cepat untuk menampilkan performa halaman yang sangat baik bagi setiap pengguna web online. Karena CSS yang tidak digunakan memperlambat waktu pemuatan halaman mana pun, Anda harus menghapusnya terlebih dahulu
Apa Artinya "CSS yang Tidak Digunakan"?
Cascading Style Sheets (CSS) adalah bahasa yang digunakan pengembang untuk menjelaskan cara merender informasi dan elemen di layar dengan benar. Aturan gaya CSS apa pun dalam lembar gaya yang tidak digunakan pada halaman dianggap sebagai CSS yang Tidak Digunakan. Misalnya, CSS yang tidak digunakan di WordPress tidak memiliki kegunaan atau dampak yang berarti pada elemen halaman
CSS yang tidak digunakan umumnya merupakan hasil dari penambahan fitur selama pengembangan dan kemudian menghapusnya nanti. Aturan yang terkait dengan fitur tersebut dapat ditinggalkan dan tertinggal di style sheet Anda
Apa yang Memicu Masalah Ini?
Peringatan "hapus CSS yang tidak digunakan" dapat dipicu dengan menggunakan satu file CSS untuk mengelola semua elemen lembar gaya Anda. Akibatnya, ada kemungkinan lebih tinggi untuk memiliki CSS yang tidak terpakai dalam file kode, yang mungkin lebih sulit untuk ditentukan di antara yang lainnya. Secara kebetulan, peringatan ini juga bisa jadi akibat menyisipkan CSS ke situs web Anda dengan menggunakan plugin atau tema pihak ketiga
Cara Memeriksa Masalah
Ada alat atau pelacak yang dapat Anda gunakan untuk menemukan CSS yang tidak terpakai. Namun, lebih baik jika Anda tahu cara melakukannya secara manual. Untuk memeriksa masalahnya, Anda dapat mengikuti langkah-langkah ini menggunakan Alat Pengembang Chrome gratis
- Buka halaman yang ingin Anda periksa
- Buka alat dengan menekan Ctrl + Shift + I atau dengan menekan F12
- Buka tab Sumber dan jalankan perintah dengan menekan Ctrl + Shift + P
- Masukkan "Cakupan" di bilah pencarian dan pilih "Tampilkan Cakupan. ”
- Klik tombol muat ulang untuk menampilkan semua skrip di jendela atau halaman baru
- Periksa persentase skrip yang tidak digunakan
- Klik salah satu skrip, dan halaman lain akan dimuat. Jendela baru ini secara khusus akan menampilkan semua baris halaman yang tidak digunakan
Mendeteksi tidak hanya apakah Menghapus CSS yang tidak digunakan tetapi juga masalah teknis lainnya di situs Anda
Jelajahi situs Anda dan temukan semua jenis masalah yang dapat merugikan pengguna Anda atau SEO situs web Anda
Ada yang salah. Silakan, coba lagi nanti
Luncurkan auditMengapa ini penting?
Browser mendownload semua stylesheet secara default sebelum merender konten ke layar. Dengan style sheet yang tidak terpakai, browser perlu mengunduh CSS yang tidak relevan dan tidak berguna. Ini akan menunda dan memperlambat perenderan halaman secara online sebagai hasilnya
Cara Memperbaiki Masalah
Menghapus yang tidak terpakai pada akhirnya akan memperbaiki masalah halaman yang lambat. Untuk menghapus, Anda dapat menggunakan berbagai penghapus atau alat otomatis. Anda juga dapat melakukannya secara manual menggunakan Alat Pengembang Chrome untuk meninjau dan menghapus aturan CSS apa pun yang tidak diperlukan. Selain itu, Anda dapat mencoba salah satu dari yang berikut ini
- Memisahkan file CSS besar menjadi lebih kecil
- Menggunakan plug-in pembersih CSS otomatis
- Menggunakan tema yang ringan dan dioptimalkan untuk kinerja
Pakar pemasaran
Ivan bekerja sebagai spesialis pemasaran produk di Sitechecker. Terobsesi dengan analitik dan membuat strategi bisnis untuk produk SaaS
CSS yang tidak digunakan adalah kode CSS apa pun yang ditambahkan oleh tema atau plugin WordPress Anda yang sebenarnya tidak Anda perlukan. Menghapus kode CSS ini meningkatkan kinerja WordPress dan pengalaman pengguna
Pada artikel ini, kami akan menunjukkan kepada Anda cara menghapus CSS yang tidak digunakan dengan mudah di WordPress tanpa merusak situs web Anda
Apa itu CSS yang Tidak Digunakan di WordPress?
CSS yang tidak digunakan di WordPress adalah kode CSS yang dimuat di situs web Anda, tetapi sebenarnya tidak diperlukan untuk menampilkan halaman
Kode tambahan dapat membuat browser pengunjung membutuhkan waktu lebih lama untuk merender halaman, yang menciptakan pengalaman pengguna yang buruk. Waktu pemuatan yang lebih lambat bahkan dapat memengaruhi peringkat pencarian Anda, sehingga mengurangi lalu lintas ke situs Anda
Anda dapat melihat bagaimana kode CSS yang tidak terpakai memengaruhi situs web Anda dengan menggunakan Google Pagespeed Insights. Ini akan menunjukkan kepada Anda bagian berjudul 'Hapus CSS yang tidak digunakan' dengan detail file CSS mana yang memengaruhi waktu pemuatan Anda
Mengapa CSS yang Tidak Digunakan Ditambahkan di WordPress?
CSS digunakan untuk menata tampilan situs web WordPress Anda. Tema WordPress Anda menyertakan CSS, dengan sebagian besar disertakan dalam satu gaya. file css
Selain CSS tema Anda, plugin WordPress Anda juga akan memuat CSS mereka sendiri. Misalnya, WooCommerce akan memuat CSS untuk menampilkan produk, plugin pembuat halaman akan menambahkan CSS-nya sendiri untuk menampilkan halaman khusus Anda, dan plugin pembuat formulir akan menyertakan CSS untuk menata formulir Anda
Kemudian, Anda memiliki font web, font ikon, dan elemen lain yang perlu menambahkan file CSS mereka sendiri juga
Biasanya, file-file ini berukuran sangat kecil dan memuat dengan cepat. Namun, jika situs WordPress Anda memiliki banyak sekali, maka efeknya dapat bertambah dan berdampak nyata pada kecepatan situs Anda
Cara Menghapus CSS yang Tidak Digunakan di WordPress
Ada beberapa cara berbeda untuk mengurangi CSS yang tidak digunakan di situs WordPress Anda
Namun, itu akan menjadi tugas yang cukup sulit untuk sepenuhnya menghapus semua CSS yang tidak digunakan di WordPress. Karena cara WordPress bekerja di balik layar, beberapa CSS yang tidak digunakan mungkin sulit ditemukan dan dihapus
Karena itu, kami akan menunjukkan kepada Anda dua metode untuk menghapus CSS yang tidak digunakan, dan Anda dapat memilih salah satu yang paling sesuai untuk Anda
Metode 1. 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. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress
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)'
Karena fitur WP Rocket ini dalam versi beta, ia akan menanyakan lagi apakah Anda ingin mengaktifkan pengaturan. Anda dapat melanjutkan dan mengklik tombol 'Aktifkan Hapus CSS yang Tidak Digunakan'
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'
Selanjutnya, Anda harus menyimpan perubahan Anda dengan menggulir ke bawah dan mengklik tombol Simpan Perubahan. Saat Anda melakukannya, WP Rocket akan mulai memproses file CSS Anda dan menampilkan bilah kemajuan
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
Sekarang, kunjungi alat Google Pagespeed Insights dan uji kinerja situs Anda
Hapus Render-Blocking CSS untuk WordPress
WP Rocket memungkinkan Anda mengoptimalkan file CSS dan menghapus CSS yang memblokir render dari situs web Anda
Untuk memulai, Anda dapat menavigasi ke tab 'Pengoptimalan File' di WP Rocket. Dari sini, gulir ke bawah ke bagian File CSS lalu centang kotak di sebelah opsi 'Optimalkan pengiriman CSS'
Opsi ini menghasilkan file CSS yang hanya berisi kode CSS yang diperlukan untuk menampilkan bagian yang terlihat dari situs web Anda. Itu memuat file itu terlebih dahulu, menampilkan halaman ke pengunjung Anda, dan kemudian memuat file CSS lainnya menggunakan teknologi yang disebut pemuatan yang ditangguhkan
Dengan menghapus CSS yang memblokir perenderan ini, situs web Anda menjadi dapat dilihat oleh pengguna jauh lebih cepat daripada jika Anda harus memuat semua file CSS sebelum halaman ditampilkan
Setelah mengaktifkan opsi 'Optimalkan pengiriman CSS', klik tombol 'Simpan Perubahan' dan tunggu WP Rocket menghasilkan file CSS yang diperlukan untuk semua posting dan halaman Anda. Ini juga akan secara otomatis menghapus cache untuk situs web Anda
Setelah selesai, Anda dapat melanjutkan dan menguji kembali performa situs web Anda menggunakan Google Pagespeed Insights
Tweak Pengiriman File Tambahan untuk Meningkatkan Kinerja
WP Rocket juga memungkinkan Anda menghapus string kueri dari file statis, menggabungkan file Google Fonts, dan memperkecil HTML. Semua penyesuaian ini menambah sedikit peningkatan pada kecepatan Anda secara keseluruhan, yang menambah pengalaman memuat lebih cepat bagi pengunjung Anda
Anda juga akan melihat opsi untuk mengecilkan dan menggabungkan file CSS. Opsi ini akan mengurangi permintaan HTTP dan memberi Anda peningkatan kecepatan tambahan
Namun, Anda harus hati-hati memeriksa situs web Anda untuk memastikan tidak ada yang rusak setelah mengaktifkan pengaturan ini
Selain itu, Anda dapat menerapkan pengoptimalan yang sama untuk file JavaScript di situs web Anda. Anda dapat mengecilkan dan menggabungkannya untuk berfungsi sebagai satu file dan menunda pemuatan file JavaScript untuk meningkatkan kinerja
Untuk detail lebih lanjut, lihat tutorial langkah demi langkah kami tentang cara mengatur WP Rocket dengan benar di WordPress
Metode 2. Hapus CSS yang Tidak Digunakan di WordPress menggunakan Pembersihan Aset
Metode ini sedikit lebih maju tetapi sangat kuat dan memungkinkan Anda menghapus CSS yang tidak terpakai dengan mudah dari halaman mana pun di situs web WordPress Anda
Namun, ini agak rumit dan Anda perlu menguji fungsionalitas dan tampilan situs web Anda secara menyeluruh untuk memastikan tidak ada yang rusak
Pertama, Anda perlu menginstal dan mengaktifkan plugin Pembersihan Aset. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress
Setelah aktivasi, Anda perlu mengunjungi halaman Pembersihan Aset »Pengaturan dan beralih ke tab Mode Tes. Dari sini, Anda perlu mengaktifkan opsi 'Enable Test Mode'
Ini memungkinkan Anda untuk mencoba berbagai pengaturan dan mengujinya sebagai administrator tanpa memengaruhi pengunjung situs web
Setelah itu, Anda perlu mengunjungi halaman Asset CleanUp »CSS/JS Manager. Dari sini, Anda dapat membongkar file CSS dan JavaScript yang tidak diinginkan berdasarkan halaman demi halaman
Ini pertama-tama akan mengambil beranda Anda dan akan menampilkan semua file CSS dan JavaScript yang dimuat di halaman itu
Anda perlu menggulir ke bawah dan meninjau file yang dimuat. Jika Anda melihat file yang tidak Anda perlukan, Anda dapat membongkarnya untuk halaman, jenis posting, atau seluruh situs tertentu
Plugin ini juga memungkinkan Anda untuk memilih posting atau halaman tertentu dari sini, atau Anda dapat mengakses opsi yang sama dengan mengedit posting atau halaman seperti biasanya.
Pada layar edit postingan, Anda akan menemukan kotak Pembersihan Aset tepat di bawah editor postingan
Plugin akan secara otomatis mengambil dan mencantumkan semua file dan aset yang dimuat saat pengunjung melihat halaman ini di situs web Anda. Anda kemudian dapat membongkar file CSS atau JavaScript yang tidak terpakai yang tidak Anda perlukan di halaman itu
Penting. Jangan lupa untuk menguji situs web Anda setelah menghapus CSS atau JavaScript yang tidak terpakai untuk memastikan semuanya bekerja dengan baik
Setelah selesai membongkar dan menghapus file CSS dan JavaScript yang tidak terpakai, Anda dapat kembali ke halaman pengaturan plugin dan mematikan 'Test Mode'
Jangan lupa klik tombol Perbarui Semua Pengaturan untuk menyimpan perubahan Anda
Anda sekarang dapat menguji situs web Anda menggunakan Google Pagespeed Insights untuk melihat perubahan pemberitahuan CSS yang tidak digunakan
Kami harap artikel ini membantu Anda mempelajari cara menghapus CSS yang tidak digunakan dengan mudah di WordPress. Anda mungkin juga ingin mengikuti panduan lengkap kami tentang berapa biaya untuk membangun situs web, dan lihat daftar hosting WordPress terkelola terbaik kami
Jika Anda menyukai artikel ini, silakan berlangganan ke Channel YouTube untuk tutorial video WordPress. Anda juga dapat menemukan kami di Twitter dan Facebook