Cara Mengetahui CSS Yang Tidak Digunakan

Kita perlu mengetahui bagian dari css ( Cascading Style Sheets ) pada halaman website atau blog kita yang tidak di gunakan atau di butuhkan. Ini sangat berkaitan erat dengan performance website kita untuk menjadikannya semakin cepat dengan cara tidak menampilkan css yang tidak perlu.

CSS Yang Tidak Digunakan

Mungkin kita tidak membuat sendiri file CSS dari situs kita atau kita mungkin memiliki beberapa script yang seharusnya tidak di butuhkan oleh setiap elemen pada halaman web lalu memperlambat website kita. Misalnya saja dalam kejadian dimana kita telah menambahkan kotak pencarian di website dan ini menggunakan css. Kemudian kita memutuskan untuk menghapus kotak pencarian tersebut, style tersebut mungkin terus ada di CSS kita meskipun style tersebut tidak digunakan.

Style yang tidak terpakai pada file CSS kita akan meningkatkan beban waktu loading halaman situs Web dan juga akan mempengaruhi kinerja web pada browser dimana browser harus melakukan pekerjaan tambahan yaitu melakukan parsing pada semua aturan tambahan. Dan selain itu kita juga dapat menjaga struktur css kita agar lebih rapid an bersih untuk di edit sewaktu – waktu.

Pada browser Opera dan browser Firefox mereka memiliki add-on yang bernama Dust Me yang akan memindai halaman web kita dan akan memberikan semua daftar style CSS yang ada pada halaman tersebut namun tidak terpakai pada halaman tersebut. Bagi para pengguna Google Chrome tidak perlu menginstal add-ons apapun, ia memiliki alat pengembang tersendiri yang berada di dalam browsernya.

Mengetahui bagian CSS yang tidak terpakai

Berikut ini adalah cara yang dapat dengan mudah dilakukan untuk menemukan semua css yang tidak terpakai dalam file CSS kita pada Google Chrome:

Mengetahui css tidak terpakai

  • Membuka halaman situs Web di dalam browser Google Chrome dan kemudian pada menu bagian kanan atas pilih more tools > Developer Tools
  • Klik tab Audit dalam Developer Tools dan centang hanya pada "Web Page Performance" dan gunakan pilihan "Reload Page and Audit on Load"
  • Berikutnya klik pada tombol "Run" tombol untuk memulai proses audit CSS.

Jika hasilnya sudah keluar maka kita dapat mempertimbangkan css yang di gunakan atau tidak di gunakan pada website kita, misalnya saja CSS yang hanya di gunakan pada halaman tertentu akan di biarkan atau hanya di gunakan pada halaman tersebut.

Di sini kita hanya akan mendapatkan daftar yang telah diurutkan dari semua style yang ada dalam file CSS tetapi tidak digunakan pada halaman website kita.

Kita dapat menyalin dan menyimpan hasil dalam file teks berbeda dan dapat mengulangi langkah-langkah tadi untuk beberapa halaman lain dari situs kita sebagai pertimbangan. Hal ini sangat penting dilakukan karena tidak semua style dapat digunakan pada semua halaman.

Tools Online Untuk Mengetahui Css Tidak Digunakan

Cara lain yang adapat di gunakan adalah tools online yang bernama Unused CSS, pada tool ini penggunaannya justru lebih mudah namun anda perlu menggunakan sambungan internet. Caranya adalah sebagai berikut

  • Masuk pada halaman unused css di http://unused-css.com
  • Masukkan URL halaman website anda yang akan di cek CSS yang tidak terpakai tersebut lalu klik “Detect CSS Unused Rules”.

Berikutnya website tersebut akan memberikan hasil css yang tidak di perlukan pada halaman website anda, proses selanjutnya akan sama pada bagian di atas yaitu anda dapat mempertimbangkan untuk menghapusnya atau tidak.

Jadi kesimpulannya adalah untuk dapat “mempercepat” dan memperbaiki performance website kita maka salah satunya adalah dengan cara menghapus bagian yang tidak di perlukan pada file css untuk mengurangi beban loading pada server dan sekaligus mengurangi waktu loading halaman website kita.

Cara lain yang juga dapat kita gunakan untuk mempercepat css adalah dengan membuat file css tersendiri sehingga halaman website tidak perlu berkali – kali meloading css, browser anda hanya perlu menggunakan cache yang telah ada. Selain itu dapat juga di lakukan compress pada file css untuk memperkecil ukuran file CSS. Penggunaan CDN juga dirasa perlu bagi website anda yang memiliki skala internasional agar website anda dapat di loading dari berbagai Negara di dunia.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel