Saat Anda mencari cara untuk menghapus kode CSS dan JavaScript yang tidak terpakai dari situs web WordPress Anda, kemungkinan besar Anda menyelam lebih dalam untuk meningkatkan kinerja situs. Lagi pula, kode apa pun yang tidak perlu dimuat oleh browser adalah kode yang tidak memperlambatnya
Namun, secara umum juga merupakan ide bagus untuk memeriksa situs WordPress Anda secara teratur jika Anda dapat menghapus CSS atau JavaScript yang tetap tidak terpakai. Ini terutama berlaku saat mengubah tema Anda atau memasang plugin baru. Dalam posting ini, Anda akan belajar bagaimana melakukannya secara manual dan melalui plugin
Apa itu CSS dan JavaScript yang Tidak Digunakan?
Kode yang tidak digunakan persis seperti apa itu. Markup CSS dan JavaScript yang dimuat saat seseorang melihat situs Anda tetapi sebenarnya tidak melakukan apa pun untuk tampilannya
Seperti yang ditunjukkan, ini buruk karena dapat mengurangi kecepatan memuat halaman Anda. Ini pada gilirannya dapat memengaruhi pengalaman pengguna, pendapatan, dan bahkan peringkat pencarian Anda. Sedemikian rupa sehingga ketika Anda menguji kecepatan situs web Anda, terkadang Anda dapat menemukan peringatan seperti ini di hasilnya
Dari Mana Ini Berasal?
Pertanyaan pertama yang mungkin Anda miliki adalah mengapa ada kode yang tidak digunakan di situs web Anda. Jika Anda menjalankan situs WordPress, ada banyak komponen yang dapat menambahkan kode ke halaman Anda
Pertama-tama, ada tema yang bertanggung jawab atas desain. Itu membawa lembar gaya CSS dan file JavaScript sendiri. Di sini, pengembang tema paling sering memasukkan semua kode CSS ke dalam satu file bernama style.css yang mencakup markup untuk semua jenis elemen (tombol, tabel, formulir, galeri, widget, dll. ). Sebagian besar waktu, ini memuat terlepas dari apakah elemen yang dipermasalahkan bahkan ada di halaman
Jadi, di luar gerbang, kemungkinan besar setidaknya ada beberapa CSS di halaman Anda yang tidak Anda gunakan. Selain itu, banyak tema dilengkapi dengan skripnya sendiri untuk fungsionalitas khusus. Pengiriman mereka mungkin tidak selalu dioptimalkan
Kemudian, jika Anda memasang plugin, plugin tersebut dapat menyertakan sumber dayanya sendiri. Misalnya, jika Anda menambahkan formulir kontak ke situs Anda, plugin yang Anda gunakan untuk itu kemungkinan akan memanggil beberapa CSS saat dimuat untuk gaya. Sama untuk plugin pembuat halaman, yang hadir dengan banyak pilihan desain
Selain itu, mungkin ada semua jenis skrip lain yang memuat halaman Anda seperti font web atau perangkat lunak analitik. Meskipun banyak di antaranya berukuran kecil dan biasanya dimuat dengan cepat, jumlahnya dapat bertambah dengan mudah
Selain itu, beberapa sumber daya dimuat di tempat yang tidak diperlukan. Misalnya, plugin formulir kontak mungkin memuat file bahkan di halaman yang tidak memiliki formulir kontak
Jika mulai menghambat kinerja Anda, saatnya untuk mempelajari cara menghapus aset CSS dan JavaScript yang tidak terpakai ini sehingga WordPress tidak memuatnya secara tidak perlu
Cara Menemukan Kode yang Tidak Digunakan di Situs WordPress Anda
Jadi, bagaimana Anda mengidentifikasi apakah ada kode di halaman Anda yang seharusnya tidak ada?
1. Alat Uji Kecepatan
Salah satu caranya adalah dengan menggunakan plugin pengujian kecepatan yang disebutkan di atas. Saat Anda menjalankan halaman Anda melalui Google PageSpeed Insights, Anda mungkin melihat peringatan yang ditampilkan di atas pada Peluang. Ketika Anda mengkliknya, layanan bahkan akan menampilkan file yang menyebabkan peringatan tersebut
GTmetrix juga akan mencantumkan ini sebagai masalah di bawah Struktur termasuk file yang menyebabkannya
2. Alat Pengembang Peramban
Pilihan lainnya adalah menggunakan alat pengembang browser. Di Chrome, buka alat (melalui menu, lalu Alat Lainnya > Alat Pengembang atau Cmd/Ctrl+Shift+I), tekan Esc untuk membuka laci, lalu gunakan ikon tiga titik di pojok kiri atas untuk membuka Cakupan
Alternatifnya, bisa juga dengan menekan Cmd/Ctrl+Shift+P untuk membuka baris perintah. Ketik "cakupan" dan pilih Tampilkan Cakupan dari daftar yang muncul
Setelah siap, klik tombol muat ulang untuk mulai merekam. Ini akan memberi Anda daftar file yang dimuat browser untuk halaman dan informasi seperti jenis, ukuran, dan yang paling penting, persentase dan byte yang tidak digunakan halaman
Klik dua kali salah satu file untuk melihat perincian baris demi baris tentang kode mana yang benar-benar berkontribusi pada halaman dan mana yang tidak
Ini bisa sangat menenangkan tetapi merupakan tempat yang bagus untuk mulai mencari tahu kode apa di situs Anda yang benar-benar diperlukan dan mana yang tetap tidak terpakai
Meninggalkan pertanyaan, apakah Anda harus menguji setiap halaman seperti itu?
Jika situs Anda kecil, ini mungkin. Namun, jika tidak, mulailah dengan halaman terpenting Anda seperti beranda, artikel landasan Anda, tentang halaman, toko, dll. Alternatifnya, targetkan halaman Anda yang paling lambat terlebih dahulu, di mana kemungkinan besar Anda akan menemukan masalah seperti ini. Periksa artikel pengujian kecepatan situs web untuk lebih jelasnya
Menghapus CSS dan JavaScript yang Tidak Digunakan Dengan Plugin WordPress
Baiklah, sekarang kita tahu cara menemukan kode yang tidak terpakai di situs Anda, saatnya berbicara tentang cara menghilangkannya. Hal pertama yang ingin kita lihat adalah bagaimana melakukannya dengan plugin WordPress
Ada beberapa opsi yang membuat ini relatif mudah. Untuk contoh ini, kami akan menggunakan plugin Pembersihan Aset. Anda akan menemukan beberapa opsi lagi di bawah ini
1. Instal Plugin
Hal pertama yang perlu Anda lakukan adalah menginstal plugin. Untuk itu, buka Plugins > Add New dan cari berdasarkan nama. Temukan Pembersihan Aset di hasil pencarian dan klik tombol Instal Sekarang, lalu klik Aktifkan setelah selesai menginstal
2. Aktifkan Mode Tes
Sebelum mulai menghapus kode CSS dan Javascript yang tidak digunakan, Anda perlu mengalihkan situs WordPress Anda ke mode pengujian. Dengan begitu, Anda dapat mencoba hal-hal tanpa langsung memengaruhi situs web Anda dan berpotensi merusak sesuatu. Semua perubahan yang Anda buat hanya dapat dilihat oleh Anda sebagai administrator. Atau, gunakan situs pengembangan atau pementasan
Anda menemukan opsi untuk mode uji di bawah Pengaturan > Mode Uji
Di sini, klik penggeser di sebelah Aktifkan Mode Tes? . Ketika Anda telah melakukan semuanya dengan benar, seharusnya ada indikator hijau di sebelah Test Mode di sidebar dan seharusnya mengatakan TEST MODE is ON di bilah admin WordPress
3. Mulai Bongkar CSS dan JavaScript
Setelah itu, Anda ingin pergi ke CSS/JS Manager
Di sini, di halaman pertama, Anda melihat daftar file CSS dan JavaScript yang dimuat di beranda Anda. Untuk mencegah mereka melakukannya, cukup gunakan penggeser yang bertuliskan Bongkar di halaman ini. Alternatifnya, gunakan kotak centang Bongkar seluruh situs untuk menonaktifkan file tertentu untuk seluruh situs web Anda
Klik Perbarui di bagian bawah untuk menyimpan perubahan Anda
Di bagian atas, Anda dapat menggunakan tab untuk melakukan hal yang sama untuk posting, halaman, jenis posting khusus, dan halaman media. Cukup cari bagian konten berdasarkan judul atau id dan Anda mendapatkan opsi yang sama dengan beranda
Selain itu, plugin Pembersihan Aset juga menambahkan fungsi yang sama di bagian bawah editor WordPress tempat Anda dapat melakukan perubahan saat menulis
4. Uji dan Komitmen
Sebelum menerima perubahan Anda, saatnya untuk menguji apakah semuanya bekerja dengan baik. Dalam mode uji coba, Anda hanya dapat melakukannya secara manual dengan memuat dan melihat halaman. Seperti yang disebutkan, perubahan hanya berlaku untuk Anda, oleh karena itu, Anda tidak dapat mengambilnya dengan alat pengujian kecepatan. Untuk alasan yang tepat, melakukan ini di situs pengembangan mungkin merupakan ide yang lebih baik
Setelah puas, kembali ke pengaturan dan nonaktifkan mode uji. Sekali lagi, Perbarui Semua Pengaturan untuk menyimpan. Saat Anda sekarang menjalankan kembali pengujian di alat pengujian kecepatan Anda, perubahannya akan terlihat
Pilihan lain
Selain plugin di atas, ada beberapa solusi lain yang dapat membantu Anda menghapus aset CSS dan JavaScript yang tidak terpakai dari situs WordPress Anda
- CSS JS Manager — Plugin lain yang memungkinkan Anda untuk menghapus file CSS dan JavaScript individual dari halaman WordPress Anda jika Anda menganggapnya tidak terpakai. Ini sedikit lebih rumit untuk ditangani tetapi tetap kuat
- WP Rocket — Plugin caching berbayar ini memiliki opsi untuk menghilangkan CSS yang tidak terpakai dan menunda eksekusi JavaScript di situs Anda. Keduanya adalah metode untuk menghilangkan peringatan dari Google, lebih lanjut di bawah ini
- Perfmatters — Plugin berbayar lainnya untuk meningkatkan kecepatan halaman dengan berbagai cara. Muncul dengan pengelola skrip yang memungkinkan Anda untuk menentukan halaman apa yang harus dan tidak boleh dimuat oleh file JavaScript Anda
Cara Menghapus CSS dan JS yang Tidak Digunakan Secara Manual di WordPress
Baiklah, setelah kita mengetahui rute plugin, saatnya untuk melihat bagaimana kita dapat melakukan hal yang sama secara manual. Kami akan membahas dua metode yang mungkin paling praktis
Hal pertama yang ingin Anda lakukan adalah membuat tema anak sehingga setiap perubahan yang Anda buat tidak akan ditimpa saat Anda memperbarui tema utama Anda
1. Pisahkan Lembar Gaya
Salah satu masalah utama saat mencoba menghapus CSS yang tidak digunakan dari situs WordPress Anda adalah bahwa dalam sebagian besar kasus, hampir semuanya ada dalam satu file style.css. Dalam contoh cakupan Chrome di atas, kami telah melihat bahwa hanya sebagian kecil dari file tersebut yang benar-benar digunakan pada halaman tertentu. Untuk alasan itu, masuk akal untuk membagi style sheet utama menjadi beberapa yang lebih kecil yang hanya memuat di tempat yang dibutuhkan
Ini mungkin terlihat seperti ini
- basis. css
- formulir. css
- halaman Depan. css
- meja. css
- komentar. css
Anda dapat menggunakan alat seperti UnCSS untuk menghasilkan hanya CSS yang benar-benar digunakan halaman Anda. Masukkan HTML dan CSS dari halaman yang ingin Anda optimalkan dan itu akan mengeluarkan markup yang dipersingkat
Anda dapat menyalinnya ke lembar gaya baru dan mengunggahnya ke tema anak Anda. Setelah itu, ini semua tentang menghapus antrean file CSS dan kode sebaris yang ada dan mengantrekan lembar gaya baru yang dioptimalkan
Anda bahkan dapat melakukan ini secara kondisional dan menggunakan file yang berbeda untuk halaman yang berbeda. Namun, ini sedikit di luar cakupan yang dapat kami bahas di sini, namun, Anda dapat menemukan contoh yang bagus termasuk cuplikan kode di WebPerfTools
2. Tunda File JavaScript atau Muat Secara Bersyarat
Untuk menghilangkan peringatan JavaScript yang tidak digunakan, Anda memiliki dua opsi. tunda skrip Anda dimuat atau nonaktifkan dari halaman yang tidak diperlukan
Cara paling umum untuk menunda JavaScript adalah dengan memindahkan skrip ke footer. Ini paling mudah jika Anda langsung mengedit tema (anak) yang mengantrekan skrip yang dimaksud. Dalam hal ini, Anda hanya perlu mengatur parameter terakhirnya ke true dan itu akan dimuat secara otomatis di footer. Inilah tampilannya
function ns_load_scripts_in_footer() { wp_enqueue_script('script-name', get_template_directory_uri() . '/scripts/myscript.js', '', '', true ); } add_action( 'wp_enqueue_scripts', 'ns_load_scripts_in_footer' );Demikian pula, Anda juga dapat mendaftarkannya untuk kondisi tertentu, seperti saat browser memuat halaman di tempat yang Anda inginkan. Berikut cara memuat skrip yang sama hanya di beranda Anda
function ns_load_scripts_in_footer() { if (is_home()) { wp_enqueue_script('script-name', get_template_directory_uri() . '/scripts/myscript.js', '', '', true ); } } add_action( 'wp_enqueue_scripts', 'ns_load_scripts_in_footer' );_Akhirnya, jika masalah Anda adalah dengan skrip yang tidak ada dalam file terpisah tetapi langsung ditampilkan di halaman, Anda perlu menemukan dari mana asalnya dan kemudian menyalinnya ke file sendiri dan mengunggahnya ke tema anak Anda. Dari sana, Anda kemudian dapat mendaftarkannya untuk dimuat di footer seperti yang ditunjukkan di atas
Kesimpulan
Menghapus CSS dan JavaScript yang tidak digunakan dari situs WordPress Anda adalah cara yang bagus untuk mempercepatnya. Ini mengurangi ukuran halaman, mengurangi permintaan HTTP, dan membuat situs web Anda lebih ramping. Akibatnya, itu akan lebih menyenangkan untuk digunakan bagi pengunjung Anda dan terlihat lebih baik di mesin telusur - apa yang tidak disukai?
Di atas, Anda telah mempelajari dari mana asal kode yang tidak digunakan, cara menemukannya, dan cara membuangnya. Anda sekarang diperlengkapi dengan baik untuk menerapkan perubahan ini
Bagaimana Anda menangani file CSS dan JavaScript yang tidak terpakai di situs Anda?