Kullanılmayan Css ve Js Tespiti Nasıl Buluruz ?

Her sayfaya ayrı CSS ve JS önbellek sisteminin çalışma mantığına aykırıdır. Bu yüzden yapılan optimizasyon size yavaşlık olarak geri dönecektir. Site geneli yapılacak bir optimizasyon daha doğrudur.

Metodu basit @Foxi; Modüler kodlama yapacaksın. Her sayfaya özel kendi css lerini basacaksın. Şahsen ben çalıştığım kurumda da kendi freelance işlerimde de hep böyle şekilde çalışıyorum.

Örnek veriyorum sana bir iletişim sayfamız var. Bu iletişim sayfasında kullanacağım css dosyaları şöyle oluyor.

<link rel="stylesheet" type="text/css" href="c/c/header.css">
<link rel="stylesheet" type="text/css" href="c/c/base.css"> /* genel css satırları*/
<link rel="stylesheet" type="text/css" href="c/c/footer.css">
<link rel="stylesheet" type="text/css" href="c/c/iletisim.css">

Bu şekilde kullanılırsa veya siten bu şekilde kodlanırsa hiç kullanılan kullanılmayan css leri ayırayım diye bi derdin kalmaz

Hocam sonuçta yazılım kodlandı, bir dahaki projede dikkat ederim fakat mevcuttaki sorunun bir çözümü vardır diye düşünüyorum.

@Foxi; sana bütün çözümleri gösterdim. sayfanda bu şekilde fazladan sorgu olan css ve js dosyaları için işin en başında bu şekilde yapılması tabiki de doğru , ama senin sitende tek bir style.css den çekiyorsa yapacak birşeyin yok. Sıfırdan bu alanları modüler kodlamalılar.
İyi günler dilerim

Soru çok güzel bir soru. Bu soruyu dünyada bizden önce çok fazla sitede ve çok yıllar önce sormuşlar. (stackoverflow ve quora)
Tam anlamı ile %100 otomasyon ile bunu yapan yazılım üretilmedi. Belki de bilerek tam anlamı ile üretilmiyor.
Çünkü bu dediğiniz otomasyon yapılır ise, Web site yapma işleri hepten ele ayağa düşer ve siteler artık çok daha kolay bir şekilde klonlanabilir. Üstelik klonlarken de performanslı haliyle klonlanmış olur.
Her ne kadar eklentiler ve harici yazılımlar ile zaten klonlanabiliyor ama ayıklama işlemini yapan ve çok doğru çalışan bir script yok.
Grunt-JS biliyorsanız, incelemeniz adına grunt-uncss bakabilirsiniz. Ama bu bile %100 istenileni vermiyor, yine manuel ayıklamak gerekiyor. Fazladan kodları bırakıyor. (Her ne kadar kullanılmadığına emin olduğunuz kodlar olmasına rağmen, kullanılıyormuş gibi bırakıyor kodları.)
Bir ara çok kafa patlatıp, çok zaman harcamıştım bu konuya. Hatta özellikle section section ayıklayıp, kendi framework'ümü oluşturmuştum. Her section 5-6 kb css. (base-css hariç.)
Yani anlayacağınız sayfa bazında, section bazında bile tam anlamı ile istenilen %100 performanslı çalışan yok iken, siz bir de tüm sitenin isketlerlerini taramasını istiyorsunuz. Bulursanız, ilk satın alacaklardan birisi benim. Ben de konuyu takip edeyim.
Yukarıdaki arkadaşların cevapları malesef çöp. Tam anlamı ile konunun içine girmeyip, google'dan arama sonuçlarını size listelemişler. İşin içersine girselerdi, o linkleri gereksiz yere bırakmazlardı.

@mustafasatirogl; hocam merhaba, konu hortlatıyorum.
Binlerce satır CSS ve JS dosyam var. Bunların kullanılmayan kısımalrını ayıklayacağım da mavi olan rengi sıralama veya sadece mavi olan rengi listeleme seçeneği var mı? Yani kullanılanları copy paste yapmak için soruyorum.

@PATRON54; merhaba, bildiğim kadarıyla öyle bir seçenek yok maalesef

Peki hocam header ve footeri coverage ile nasıl ayırabiliriz?
Dediğiniz gibi modüler yapmaya çalışacağım, 1 ana sayfa 4 alt sayfam var zaten kurumsal site.
Admin panel de kurulu üzerinde yoksa daha rahat ayırabilirdik de.

O mavi ve Kırmızı gösteren kısım ile ayıklamak da imkansıza yakın zorlukta. Çünkü o kırmızı gösterdiği yeri aslında kullanıyor ama ilk başta göstermiyor.
Test için şunu yapın göreceksiniz. Mesela bir hover'a gelin. Ya da chrome'dan tarayıcıyı küçültüp farklı media sorgularına denk getirin. Yani ilk başta kullanılmıyor dediği şey, aslında sitenizin genel kullanımında kullanılan şeyler, uyguladıkça (bir linke ya da bir objeye hover olduğunda) maviye döndüğünü göreceksiniz. Bu yüzden de chrome covarage'de işi tam anlamı ile çözmüyor.

Daha iyi anlayabilmeniz için bir örnek vereyim. Diyelimki Menünüz var. Menü altında da aşağıya doğru açılan li yapınız var. Hatta li 'nin altında da i ikonları olsun.
Önce bunları kırmızı gösteriyor. Ama menünün üstüne gelip, menüde gezdikçe maviye dönüşüyor.

Diğer bir örnek : media 567 max css'leri kırmızı görünüyor. Tarayıcıyı küçülttüğünüzde maviye dönüyor. İmkansıza yakın dememdeki sebep bu. Çünkü adam gibi ayıklayabilmem için, siteyi full her yeriyle gezmem lazım, tüm her yerin üzerine gelmek, tüm tarayıcı boyutları ile oynamak vs. Bunu tespit ettiğimde, "yok artık daha neler, nasıl her yeri gezeyim de mavi olsun" demiştim.

Yani bu covarage sizi çok yanıltır. Saatlerce uğraşıp o kırmızı mavileri ayıkladıktan sonra, göreceksiniz ki ; "aaa hâla site istediğim gibi çalışmıyor, boşuna ayıklamışım burayı" olacaktır.