Kullanılmayan CSS Kodlarını Bulmak | Mehmet Kaplan

Bu Reklam Alanı Esnektir.

Bu Reklam Alanı Esnektir.

Kullanılmayan CSS Kodlarını Bulmak

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.

 Kullanılmayan CSS Kodlarını Bulmak
Coverage 

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.

 Kullanılmayan CSS Kodlarını Bulmak
Kod kullanım oranı

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.

 Kullanılmayan CSS Kodlarını Bulmak
Kod kullanım oranı detay

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

Kaynaklar

Bu Reklam Alanı Esnektir.

  • Paylaş
  • 2
gravatar

mehmetkpln18

Architect, Graphic Designer and Website Developer

Mehmet Kaplan, yeni mezun bir mimar, web ve grafik tasarımcısı, araştırmacı. Tasarım, programlama ve kodlama konusunda tutkusu olan biri.

Yorumlar 2 Yorum yapıldı

  • Avatar for Levent

    ADMİN

    Levent

    sağdaki menüden neye basıyoruz ? anlamadım.

  • Avatar for Levent

    ADMİN

    Levent

    sağdaki menüde Run Command yazıyor arkadaşlar ona tıklayınca çıkıyor arkadaşımızın anlattığı olay. Güzel paylaşım teşekkür ederim fakat lütfen en önemli noktaları eksik paylaşmayalım bilgi kirliliği olmasın. Bilgi ben paylaşıyorum ona şükret mantığıyla paylaşılmamalı. Belki sizin vasıtanızla nice nesiller yetişecek.
    Teşekkür ediyorum, saygılarımı sunuyorum.

Bu Reklam Alanı Esnektir.

Bu Reklam Alanı Esnektir.