Tuesday, March 01, 2016

Ringankan Loading Blog Anda Dengan Hapus CSS Yang Tidak Digunakan Lagi


Seiring waktu, file CSS dari website Anda dapat semakin membengkak karena beberapa selector yang sudah tidak digunakan lagi. Anda dapat dengan mudah menemukan dan menghapus entri ini dari CSS Anda.
File CSS dari situs Anda mungkin memiliki beberapa aturan berlebih yang tidak lagi digunakan oleh beberapa elemen dari halaman web Anda. Misalnya, Anda mungkin telah menambahkan kotak pencarian situs di website Anda dan style terkait akan masuk ke stylesheet. Kemudian, jika Anda memutuskan untuk menghapus kotak pencarian, style tersebut mungkin akan terus ada di CSS Anda meskipun tidak sedang digunakan.



Entri-entri yang tidak terpakai dalam file CSS Anda akan meningkatkan beban waktu loading halaman situs Web tersebut dan juga akan mempengaruhi kinerja situs dan browser harus melakukan pekerjaan tambahan yaitu parsing semua aturan tambahan yang tak terpakai. Jika kita merawat dan menghapus CSS yang tak terpakai lagi pada situs kita, itu akan memudahkan tugas Anda untuk merawat dan menjaga CSS pada situs Anda dan file tersebut akan tetap bersih dan terstruktur dengan baik.

Browser Opera dan Firefox memiliki populer add-on yang disebut Dust Me (http://www.brothercake.com/dustmeselectors/) yang dapat memindai halaman web Anda saat ini dan memuat semua aturan CSS yang tidak terpakai yang didefinisikan dalam stylesheet namun tidak digunakan lagi pada halaman. Namun bagi Pengguna Google Chrome tidak perlu menginstal add-ons sebagai Alat Pengembang/Developers Tools karena sudah dibangun di dalam browser itu sendiri.



Hapus CSS yang tidak digunakan dari Stylesheet

Berikut adalah cara agar Anda dapat dengan mudah menemukan semua selector yang sudah tidak terpakai lagi dalam file CSS Anda melalui Google Chrome:

Developers Tools


Buka halaman situs Web Anda melalui Google Chrome dan kemudian jalankan Developers Tools yang tersedia melalui Menu -> More Tools -> Developers Tools.
  
Audit 

Klik tab Audit dalam Developers Tools dan pilih "Web Page Performance" dan pilihan "Reload Page and Audit on Load". Kemudian klik tombol "Run" untuk memulai proses audit CSS. 

Web Page Performance


Pada halaman results page, expand pada kelompok "Remove Unused CSS Rules" dan pilih file CSS yang ter-link dari situs Anda. Anda mungkin harus mengabaikan file CSS yang ditambahkan oleh plugin sosial dan widget karena Anda tidak memiliki kontrol atas mereka.


Hasil Audit CSS
Di sini Anda akan mendapatkan daftar urutan dari semua style yang didefinisikan dalam file CSS tetapi tidak digunakan lagi pada halaman saat ini.
Anda dapat menyalin dan menyimpan hasil dalam file teks dan mengulangi langkah-langkah diatas untuk beberapa halaman lain di situs Anda. Hal ini penting karena tidak semua selector dapat digunakan pada semua halaman. Anda dapat menemukan berbagai selector pada resultset gabungan, mungkin menggunakan Google Sheet, dan selector dengan jumlah tertinggi yang mungkin bisa dikatakan "aman" untuk dihapus.

_Eof_


Emoticon Emoticon