Cara yang Benar untuk Menghapus CSS yang Tidak Digunakan di WordPress

Memiliki banyak kode yang tidak digunakan dapat sangat memperlambat situs web Anda. Dan salah satu tersangka yang biasa di WordPress adalah kode CSS yang tidak perlu. Untungnya, ada beberapa cara untuk mencegah kinerja buruk situs web Anda dan berhenti merusak pengalaman pengguna. Sementara salah satu cara untuk melakukannya adalah metode manual, itu membutuhkan pengalaman berkembang yang signifikan. Opsi lainnya, yang lebih ramah bagi pemula, adalah fokus pada alat yang ada dan menghapus CSS yang tidak digunakan di WordPress, yang ditambahkan oleh tema dan plugin, hanya dengan beberapa klik.

Cara berhasil menghapus CSS yang tidak digunakan di WordPress

Seperti yang mungkin Anda ketahui, WordPress menggunakan banyak plugin, tema, dan perpustakaan pihak ketiga lainnya. Mereka semua membawa banyak fitur untuk meningkatkan fungsionalitas situs web Anda. Tapi, lebih sering daripada tidak, mayoritas datang dengan banyak fungsi yang sebenarnya tidak Anda gunakan. Namun demikian, jika Anda tidak secara khusus menggunakan profesional WordPress untuk memelihara dan mengoptimalkan situs web Anda, itu akan memuat segalanya untuk setiap pengunjung. Hal ini mengakibatkan mentransfer sejumlah besar CSS yang tidak digunakan dan memperlambat situs web itu sendiri. Akibatnya, kinerja yang buruk akan mengurangi lalu lintas situs web Anda dan menurunkan peringkat pencarian Anda.

Dalam banyak kasus, menghapus 100% kode yang tidak digunakan cukup sulit, hampir tidak mungkin. Tetapi bahkan menghapus jumlah sekecil apa pun atau skrip yang bertentangan, akan meningkatkan kinerja situs web Anda. Selain “meminimalkan” kode yang umum, ada beberapa cara untuk mengurangi dampak kode CSS yang tidak digunakan tanpa merusak situs web Anda.

Mengapa CSS yang tidak digunakan bahkan ada di sana?

Karena CSS bertanggung jawab untuk menata tampilan situs web WordPress Anda, setiap tema yang Anda temukan menyertakannya. Dan tidak hanya tema tetapi banyak plugin hadir dengan opsi gaya dan penyesuaian mereka sendiri. Belum lagi semua jenis pembuat situs web, perpustakaan, dan bahkan elemen individual, di mana Anda hanya menggunakan sebagian kecil darinya. Secara umum, beberapa plugin tidak akan terlalu memengaruhi situs web. Tapi, jika sudah banyak, efek kumulatifnya bisa sangat memperlambat website Anda.

Alat untuk menghapus CSS yang tidak digunakan

Meskipun ada banyak alat yang dapat membantu Anda menghapus CSS yang tidak digunakan, sebagian besar tidak dapat diterapkan untuk setiap situasi. Tentu saja, untuk situs web statis, sebagian besar akan sangat membantu. Namun, situs web dinamis sering memuat dan menata elemen dengan menyuntikkan kelas CSS dengan JavaScript. Dan ini adalah bagian yang lebih sulit karena sulit untuk mendeteksi kelas-kelas ini. Misalnya, situs web eCommerce yang secara dinamis menata produk dan halaman keranjang.

Pikirkan tentang hal itu selama pengembangan

Salah satu solusi untuk menyingkirkan CSS yang tidak digunakan sejak awal adalah dengan memikirkannya selama pengembangan situs web. Anda pada dasarnya dapat membagi kode CSS Anda menjadi file yang berbeda, masing-masing melayani tujuan tertentu. Namun, kebanyakan orang lebih suka menggunakan tema WordPress untuk menghindari membangun situs web dari awal. Dan di sinilah Anda harus sangat terampil atau menemukan pakar WordPress untuk melakukannya untuk Anda.

Menggunakan solusi online UnusedCSS

Cara lain adalah dengan menggunakan solusi premium seperti UnusedCSS untuk menemukan dan membersihkan masalah CSS Anda dengan mudah. Keuntungan dari alat ini adalah dapat memindai file JavaScript Anda dan mencari suntikan. Beberapa fitur yang paling menonjol adalah:

• Menemukan aturan CSS yang tidak digunakan secara otomatis
• Memberi Anda CSS bersih untuk diunduh
• Menjelajahi desain responsif dan aturan kueri media
• Memeriksa situs web untuk perubahan
• Pratinjau perubahan
• dan banyak lagi

PurgeCSS untuk menghapus CSS tambahan

Ini adalah alat lain yang cukup membantu selama pengembangan. Mereka yang bekerja dengan Bootstrap, Foundation, dan kerangka kerja CSS serupa merasa sangat berguna. Karena Anda mungkin hanya menggunakan sebagian kecil dari aturan CSS, alat ini dapat membantu Anda memfilter semua gaya yang tidak digunakan. Pada dasarnya, ini adalah cara yang bagus untuk membuat file CSS Anda jauh lebih kecil.

Plugin optimasi otomatis

Baris berikutnya adalah plugin WordPress yang sangat populer. Dengannya, Anda dapat dengan mudah mengecilkan, menggabungkan, dan menyimpan gaya. Itu menyuntikkan aturan yang diperlukan di kepala halaman, CSS kritis sebaris, mengecilkan HTML dan memindahkan skrip ke footer. Intinya, ini dapat digunakan untuk mengimplementasikan "pemuatan malas" untuk gambar, mengoptimalkan font, dan JavaScript non-gabungan asinkron. Setiap situs web dapat mengambil manfaat dari plugin ekstensif ini.

WP Roket

Salah satu opsi paling ramah pemula yang dapat Anda temukan. WP Rocked menawarkan solusi efektif untuk halaman Anda dan pengoptimalan kecepatan. Tidak hanya itu akan memberi Anda hasil yang memuaskan pada tes kecepatan, itu akan secara nyata meningkatkan pengalaman pengguna kepada pengunjung. Saat Anda ingin menghapus CSS yang tidak digunakan, cukup aktifkan, aktifkan "Pengoptimalan File" dan lanjutkan ke opsi "Optimalkan pengiriman CSS". Ini akan memberi Anda file CSS hanya dengan aturan CSS yang diperlukan, yang akan dimuat sebelum yang lain. Selain itu, WP Rocket akan secara otomatis menghapus cache dan memungkinkan Anda untuk mengecilkan dan menggabungkan file CSS.

Hapus CSS yang tidak digunakan dengan Pembersihan Aset

Anda dapat menggunakan Asset CleanUp untuk membongkar file yang tidak digunakan dari tema dan plugin. Ini memungkinkan Anda untuk menyelesaikan tugas ini untuk setiap halaman secara terpisah. Meskipun cara ini agak rumit dan memakan waktu, ini adalah metode yang sangat efektif untuk digunakan. Sama seperti beberapa plugin lainnya, plugin ini memiliki opsi “Test Mode” untuk mencegah efek yang tidak diinginkan pada situs web langsung Anda. Namun, Asset CleanUp juga dapat membantu Anda menghapus file JavaScript yang tidak digunakan. Terakhir, ketika Anda menguji apa yang dilihat pengunjung Anda, Anda cukup memilih untuk membongkar semua yang tidak perlu.

Optimalkan CSS Anda dengan Perfmatters

Yang terakhir, namun tidak kalah pentingnya dalam daftar ini adalah salah satu plugin kinerja premium. Perfmatters akan membantu Anda menghapus CSS dan JavaScript yang tidak digunakan. Setelah registrasi, instalasi, dan aktivasi, Anda akan dapat mengakses pengelola skripnya. Ini, di antara opsi lainnya, dapat membantu Anda memodifikasi setiap halaman atau posting Anda dengan mudah. Intinya, ini memberi Anda menu dasbor sederhana yang dapat Anda gunakan untuk menghapus CSS dan JavaScript yang tidak digunakan pada halaman terpisah atau untuk seluruh situs web. Sama seperti untuk CSS, Anda dapat menggunakannya untuk menggabungkan atau memperkecil file JavaScript untuk kinerja yang lebih baik.

Pertimbangan tambahan untuk meningkatkan kecepatan situs web

Pertimbangkan untuk menggunakan CDN untuk mengirimkan file CSS – untuk mengurangi kecepatan pemuatan CSS Anda atau file lainnya secara signifikan.

Perkecil dan gabungkan sebagian besar file CSS Anda secara teratur – untuk menghapus aturan, kelas, dan karakter tambahan yang tidak perlu dari CSS Anda di WordPress. Namun, dapat diperdebatkan jika ini berguna untuk semua situs web besar karena kerumitan kode, ukuran file tersebut, dan pengoptimalan tambahan di kemudian hari.

Menghapus sepenuhnya setiap bagian CSS yang tidak digunakan di WordPress hampir tidak mungkin. Namun, Anda dapat menggunakan metode di atas untuk mempercepat situs web Anda dengan cukup adil. Ini akan tergantung pada jumlah kasus, tetapi jika situs web WordPress Anda benar-benar memiliki banyak kode yang tidak digunakan, perbedaannya akan cukup terlihat. Di sisi lain, terkadang bahkan perubahan kecil bisa berarti segalanya. Meskipun tujuannya bukan untuk memiliki situs web tercepat di dunia, sedikit perubahan penting. Namun, upaya lain harus difokuskan pada konten dan kegunaan bagi pengguna, daripada memenangkan posisi kecepatan tertinggi dalam pengujian mesin telusur.