Apakah Anda ingin menghapus CSS yang tidak digunakan di WordPress sehingga situs Anda akan dimuat lebih cepat?
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 cara mudah menghapus CSS yang tidak digunakan di WordPress tanpa merusak situs web Anda.
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, menghasilkan lebih sedikit lalu lintas ke situs Anda.
Anda dapat melihat bagaimana kode CSS yang tidak digunakan memengaruhi situs web Anda dengan menggunakan Wawasan Kecepatan Halaman Google Google. 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 Anda Situs web WordPress. Tema WordPress Anda menyertakan CSS, dengan sebagian besar disertakan dalam satu file style.css.
Selain CSS tema Anda, plugin WordPress Anda juga akan memuat CSS-nya sendiri. Contohnya, WooCommerce akan memuat CSS untuk menampilkan produk, a plugin pembuat halaman akan menambahkan CSS sendiri untuk menampilkan halaman kustom Anda, dan a plugin pembuat formulir akan menyertakan CSS untuk menata formulir Anda.
Kemudian, Anda memiliki font web, font ikon, dan elemen lain yang juga perlu menambahkan file CSS mereka sendiri.
Biasanya, file-file ini sangat kecil dan dimuat dengan cepat. Namun, jika situs WordPress Anda memiliki banyak, maka efeknya dapat bertambah dan berdampak nyata pada kecepatan situs Anda.
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 jalannya WordPress bekerja di belakang 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.
Cara ini lebih mudah dan direkomendasikan untuk pemula. Ini sangat meningkatkan pengiriman keseluruhan file CSS di situs WordPress Anda, termasuk menghapus sebagian besar CSS yang tidak digunakan.
Kami pikir ini adalah solusi terbaik untuk pemula karena lebih mudah dan mencapai tujuan utama memberikan pengalaman yang lebih baik bagi pengguna Anda. Ini berarti situs web Anda dimuat dengan cepat pada alat pengujian kecepatan dan juga terasa cepat bagi pengguna Anda.
Pertama, Anda perlu menginstal dan mengaktifkan WP Roket pengaya. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami di cara menginstal plugin WordPress.
Setelah aktivasi, Anda perlu mengunjungi Pengaturan » WP Rocket halaman dan beralih ke tab ‘Optimasi File’.
Selanjutnya, Anda perlu menggulir ke bawah ke bagian file CSS. Dari sini, Anda perlu mencentang kotak di sebelah opsi ‘Optimalkan pengiriman CSS’.
Opsi ini menghasilkan file CSS yang hanya berisi kode CSS yang diperlukan untuk menampilkan bagian situs web Anda yang terlihat. Ini memuat file itu terlebih dahulu, menampilkan halaman kepada pengunjung Anda, dan kemudian memuat file CSS lainnya menggunakan teknologi yang disebut pemuatan yang ditangguhkan.
Dengan menghapus ini CSS pemblokiran render, situs web Anda dapat dilihat oleh pengguna jauh lebih cepat daripada jika Anda harus memuat semua file CSS sebelum laman ditampilkan.
Setelah mengaktifkan opsi ‘Optimalkan pengiriman CSS’, klik tombol Simpan Perubahan dan tunggu WP Rocket untuk menghasilkan file CSS yang diperlukan untuk semua posting dan halaman Anda. Itu juga akan secara otomatis bersihkan cache untuk situs web Anda.
Setelah selesai, Anda dapat melanjutkan dan menguji kembali kinerja situs web Anda menggunakan Google Pagespeed Insights.
Tweak Pengiriman File Tambahan untuk Meningkatkan Kinerja
WP Rocket juga memungkinkan Anda untuk menghapus string kueri dari file statis, menggabungkan file Google Font, dan mengecilkan HTML. Semua tweak ini menambahkan sedikit peningkatan pada kecepatan Anda secara keseluruhan, yang menambah pengalaman pemuatan yang 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 JavaScript file di situs web Anda. Anda dapat memperkecil dan menggabungkannya untuk dijadikan sebagai satu file dan menunda pemuatan file JavaScript untuk meningkatkan kinerja.
Untuk lebih jelasnya, lihat tutorial langkah demi langkah kami di cara mengatur WP Rocket dengan benar di WordPress.
Metode ini sedikit maju tetapi sangat kuat dan akan memungkinkan Anda dengan mudah menghapus CSS yang tidak digunakan dari halaman mana pun di situs 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 Pembersihan Aset pengaya. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami di cara menginstal plugin WordPress.
Setelah aktivasi, Anda perlu mengunjungi Pembersihan Aset » Pengaturan halaman dan beralih ke tab Test Mode. Dari sini, Anda perlu mengaktifkan opsi ‘Aktifkan Mode Uji’.
Ini memungkinkan Anda untuk mencoba berbagai pengaturan dan mengujinya sebagai administrator tanpa memengaruhi pengunjung situs web.
Setelah itu, Anda perlu mengunjungi Pembersihan Aset » Manajer CSS/JS halaman. Dari sini, Anda dapat membongkar file CSS dan JavaScript yang tidak diinginkan pada halaman demi halaman.
Ini pertama-tama akan mengambil beranda Anda dan akan menunjukkan kepada Anda 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 tertentu, jenis posting, atau seluruh situs.
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 biasa.
Pada layar edit posting, Anda akan menemukan kotak Asset CleanUp tepat di bawah editor posting.
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 dengan mudah membongkar file CSS atau JavaScript yang tidak digunakan yang tidak Anda perlukan di halaman itu.
Penting: Jangan lupa untuk menguji situs web Anda setelah menghapus CSS atau JavaScript yang tidak digunakan untuk memastikan semuanya berfungsi dengan baik.
Setelah Anda selesai membongkar dan menghapus file CSS dan JavaScript yang tidak digunakan, Anda dapat kembali ke halaman pengaturan plugin dan mematikan ‘Test Mode’.
Jangan lupa untuk mengklik tombol Perbarui Semua Pengaturan untuk menyimpan perubahan Anda.
Anda sekarang dapat menguji situs web Anda menggunakan Google Pagespeed Insights untuk melihat perubahan pada pemberitahuan CSS yang tidak digunakan.
Kami harap artikel ini membantu Anda mempelajari cara mudah menghapus CSS yang tidak digunakan di WordPress. Anda mungkin juga ingin mengikuti panduan lengkap kami di berapa biaya untuk membuat situs web?, dan lihat daftar kami hosting WordPress terkelola terbaik.
Jika Anda menyukai artikel ini, silakan berlangganan kami Saluran Youtube untuk tutorial video WordPress. Anda juga dapat menemukan kami di Indonesia dan Facebook.
.
Tanda tangan email berfungsi sebagai cara ampuh bagi individu dan bisnis untuk meninggalkan kesan abadi…
Apakah kesalahan 'ERR_SSL_VERSION_OR_CIPHER_MISMATCH' menghentikan Anda mengakses situs web WordPress? Kesalahan ini hanya terlihat saat mengunjungi…
Jika Anda adalah individu yang banyak akal dan berpikiran maju yang bekerja di bidang pemasaran,…
Siap menguasai Google Analytics 4 dengan sedikit bantuan dari MonsterInsights? GA4 adalah alat analitik yang…
Apakah Anda mencari cara untuk menerjemahkan plugin WordPress ke dalam bahasa Anda? Dengan menerjemahkan plugin…
Mencari solusi untuk hack redirect WordPress? ???????? Peretasan pengalihan WordPress sayangnya merupakan kejadian umum dan…