Admin
Varmısın ki yok olmaktan korkuyorsun?
Yönetici
Kurucu
Booster Üye
Starter Üye
Subscriber Üye
Kayıtlı Üye
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 (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.
Google Chrome Developer Tool ( Control+Shift+I ) ’da sağdaki menüden (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.