Kullanılmayan CSS Kodlarını Bulmak

• Mehmet Kaplan
• 6 yıl önce
• 6310
• 2 Dakika

Kullanılmayan CSS Kodları site performansını arttırmak isteyen web tasarımcılar için başlıca sorunlardan birisi, Hal böyle iken ve Google ‘ ın yaptığı son güncellemelerden sonra Performans hiç olmadığı kadar önemli bir hale geldi. Google’ın arama sonuç sıralamasındaki en büyük etkenlerden birinin site hızı olduğunu açıkladıktan sonra performans işleri daha çok ön plana çıktı. Durum böyle olunca sitemizin performansını ne kadar arttırabilirsek Google bize o kadar değer vermeye başlayacaktır. Bu makalemizde de kullanılmayan CSS ve JS’leri bulup sayfadan yada siteden çıkarmayı göreceğiz.

Google Chrome Developer Tool ( Control+Shift+I ) ’da sağdaki menüden Run Command (Windows, Linux) basıp açılan menüde Show Coverage yazın ve enter’a basın.

Gelen ekrandan kayıt butonuna tıklayarak ya da ‘F5’ ile sayfayı yenileyerek hesaplamayı başlatabilirsiniz. Burada dinamik olarak eklenen alanları açarak bu hesaplamanın daha iyi sonuçlar vermesini sağlayabilirsiniz. Gizle göster ile açılan alanlar vs. Kayıt butonuna tekrar basarak hesaplamayı bitirin. Sonuç listesi aşağıdaki gibi görünecektir.

Listede sayfadaki kaynaklar ve bunların kullanım oranlarını var. Her bir linkin üzerine tıklayarak detayını Source (Kaynak) sekmesinde görebilirsiniz.

Detay sayfasını incelediğimizde kod satırlarının solundaki kırmızı çizgi kullanılmayan yerleri yeşil çizgiler ise kullanılan alanları göstermektedir.

Konuyu burada sonlandırmak istiyorum. Sorun ve sorularınız için iletişime geçebilirsiniz.

Kaynaklar

• https://developers.google.com/web/updates/2017/04/devtools-release-notes
• http://vojtechruzicka.com/measuring-javascript-and-css-coverage-with-google-chrome-developer-tools/
• http://blog.cowchimp.com/monitoring-unused-css-by-unleashing-the-devtools-protocol/
• https://blog.logrocket.com/using-the-chrome-devtools-new-code-coverage-feature-ca96c3dddcaf

Google Google Optimizasyon Kullanılmayan CSS Kodlarını Bulmak seo