Gereksiz CSS ve JavaScript Kodu Nasıl Tespit Edilir ve Temizlenir?

Gereksiz CSS ve JavaScript Kodu Nasıl Tespit Edilir ve Temizlenir?

Modern web geliştirme dünyasında, performans ve hız odaklı gelişimin önemi giderek artmaktadır. Özellikle web sayfalarının daha hızlı açılması, SEO başarısını artırmak ve daha iyi bir kullanıcı deneyimi sunmak için gereksiz CSS ve JavaScript kodlarının temizlenmesi kritik bir adımdır. Bu yazıda, PHP tabanlı sitelerden WordPress tabanlı sistemlere kadar farklı yapılarda gereksiz kaynakları nasıl tespit edip temizleyeceğini detaylı ve örnekli bir şekilde açıklayacağız.

1. Gereksiz CSS ve JS Kodları Nelerdir?

"Gereksiz" koddan kasıt, sayfa içeriğinde aktif olarak kullanılmayan fakat tarayıcı tarafından yüklenip render edilen kaynaklardır. Bu kodlar:

Tema dosyalarından gelen ancak hiçbir öğeye etkisi olmayan stil tanımları
Sayfa öğesine bağlı olmayan JS fonksiyonları
Kullanılmayan kütüphane ve çağrılan ama çalışmayan eklenti dosyaları

2. Tespit Etme Araçları

Gereksiz kodları bulmak için kullanabileceğiniz önemli aracılar:

Google Chrome DevTools (Coverage Tab)
UnCSS (CLI veya Node tabanlı)
PurgeCSS (Tailwind projeleri için çok faydalı)
PageSpeed Insights veya Lighthouse raporları

Örnek (DevTools ile Coverage):

Chrome'da sayfanızı açın.
F12 ile geliştirici aracılarını açın.
Command + Shift + P > "Coverage" yazın ve paneli açın.
"Start recording" butonu ile sayfa scroll yaparak yüklenmeyen CSS ve JS oranlarını görüntüleyin.

3. PHP Tabanlı Sitelerde Temizleme Önerileri

Özellikle kendi özel yazım projelerinde, HTML çıktısını üretmeden önce minimum JS ve CSS çağrısı yapılmalıdır. Örnek:

<?php if($sayfa == 'iletisim') { ?>
  <link rel="stylesheet" href="iletisim.css">
  <script src="harita.js"></script>
<?php } ?>

Bu sayede her sayfa yalnızca ihtiyacı olan kaynakları yükler.

Ayrıca minify ve combine işlemleri için şu araçlar kullanılabilir:

Minify HTML Output için ob_start() + regex temizleme
Gulp veya Grunt ile otomatik build scriptleri

4. WordPress Sitelerde Gereksiz CSS ve JS Kaldırma

WordPress temaları ve eklentileri genelde gereksiz çok fazla kaynak yükler. Bunları kaldırmak için şu yöntemleri kullanabilirsiniz:

A) functions.php ile Script ve Stil Kaldırma:

function wp_daha_az_yukleme() {
  if (!is_page('iletisim')) {
    wp_dequeue_style('harita-stili');
    wp_dequeue_script('harita-js');
  }
}
add_action('wp_enqueue_scripts', 'wp_daha_az_yukleme', 100);

B) Asset Cleanup veya Perfmatters gibi eklentiler: Sayfa bazlı stil ve script engelleme yapmanıza olanak tanır.

C) Autoptimize ile CSS/JS Birleştirme ve Minify: Bu eklenti ile sayfa boyutlarını %40'a kadar düşürebilirsiniz.

5. TailwindCSS Projelerinde PurgeCSS Kullanımı

Tailwind ile geliştirilen projelerde varsayılan olarak bütün utility class'lar derlenir. Ancak bunların birçoğu kullanılmaz. Bunu temizlemek için PurgeCSS veya Tailwind v3 built-in purge özelliği kullanılır:

tailwind.config.js
module.exports = {
  content: ['./*.html', './src/**/*.js'],
  theme: { extend: {} },
  plugins: [],
}

Bu ayarla sadece sayfa içeriğinde kullanılan class'lar build dosyasına dahil edilir.

6. Ön Bellekleme (Caching) ve Lazy Load Destekleri

CSS ve JS optimizasyonunu tamamladıktan sonra mutlaka cacheleme sistemleri ile sayfa hızı desteklenmelidir:

WP Super Cache / LiteSpeed Cache (WordPress)
Cloudflare CDN ve JS Delay (Tüm yapılar)
Lazy load görseller ile sayfa ılk yüklenme zamanını azaltma

7. Performans Testleri ile Sonuçları Ölçmek

Temizleme işlemleri yapıldıktan sonra sitenizi şu testlerle gözlemleyin:

Sonuç

Web projelerinde gereksiz CSS ve JavaScript kodlarını temizlemek, sadece hız kazandırmakla kalmaz, SEO puanlarını da ciddi anlamda yükseltir. PHP ile geliştirilen özel sitelerden WordPress projelerine kadar tüm yapılar için bu temizliği yapmak mümkün ve faydalıdır.

Eğer siz de mobil uyumlu, responsive grid ve flex yapılar ile geliştirilmiş, UI bileşenleri güçlü bir site sunmak istiyorsanız, mutlaka kaynak kodları temiz, performans odaklı ve optimize olmalıdır.