Adem Mert Kocakaya
Adem Mert Kocakaya - 12 Mart 2023
SEO Team Lead


Web site hızı, SEO çalışmalarındaki en önemli metriklerden bir tanesidir. Günümüzde hemen her arama motoru, web sayfaların hızlı açılması, sayfalardaki DOM boyutunun düşük olması ve minimum düzeyde kaynak tüketimini önemsemektedir. Bu yüzden arama motorları; yavaş açılan, gereksiz kod satırlarıyla dolu, aşırı yüksek boyutta DOM ögeleri kullanan web sayfaları, kullanıcılara başarısız bir sayfa deneyimi sundukları düşünülerek, bu sitelerin üst sıralarda gösterilmekten kaçınırlar.

Pagespeed veya GTMetrix gibi ücretsiz hız analiz araçlarıyla yapmış olduğumuz analizlerde, genellikle karşılaştığımız en önemli sorunlar "Kullanılmayan CSS'i Azaltın" ve "Kullanılmayan JavaScript'i Azaltın" uyarıları olmaktadır. 

Kullanılmayan CSS ve JS Satırları Nasıl Tespit Edilir?

Bu uyarılarla ilgili bir aksiyon almadan önce, bu hataların sebeplerini iyi analiz etmeli, web sitemizin alt yapısında barınan CSS ve JavaScript dosyalarının/kütüphanelerin neler olduğunu bilmemiz gerekmektedir.

Kullanılmayan CSS'i ve JavaScript'i Azaltın Uyarısı Neden Olur?

Genellikle e-ticaret alt yapıları, bünyelerinde hazır CSS ve JavaScript kütüphaneleri barındırmaktadırlar. Bu kütüphaneler, her tip web sitesinde kullanışlı olmak amacıyla yazıldıklarından, içlerinde kullanmadığımız pek çok CSS class'ları ve JavaScript fonksiyonları barındırırlar. 

Kullanılmayan CSS ve JS Satırları Nasıl Tespit Edilir?

Bu dosyalarda yer alan ve web sitemizde kullanmadığımız CSS satırlarını ve JavaScript fonksiyonlarını tespit edip, dosyadan temizleyebilir ve sayfalarımızın daha yüksek performansta açılmasını sağlayabiliriz. Bu satırları tespit etmek için aşağıda paylaştığımız yöntemi sizler de kendi web sitenizde uygulayabilirsiniz!

Kullanılmayan CSS ve JavaScript Satırları Nasıl Tespit Edilir?

Öncelikle web sitenize giriş yaptıktan sonra, analizini yapmak istediğiniz sayfada sağ tıklayarak "İncele/Inspect" seçeneğine tıklıyoruz.

Kullanılmayan CSS ve JS Satırları Nasıl Tespit Edilir?

Ardından açılan DevTools panelinin sağ tarafında yer alan üç nokta simgesine tıklayarak More Tools > Coverage seçeneğini aktif hale getiriyoruz.

Kullanılmayan CSS ve JS Satırları Nasıl Tespit Edilir?

Alt kısımda açılan Coverage panelindeki reload butonuna tıklayarak sayfanın yenilenmesini ve DevTools'un sayfada yer alan CSS ve JavaScript dosyalarını yüklemesini sağlıyoruz.

Kullanılmayan CSS ve JS Satırları Nasıl Tespit Edilir?

Sayfaya yüklenen CSS/JavaScript dosyalarından herhangi bir tanesine tıklayarak DevTools sekmesinde açılmasını sağlıyoruz.

Kullanılmayan CSS ve JS Satırları Nasıl Tespit Edilir?

Açılan CSS/JavaScript dosyasında yer alan ve mavi renk ile boyalı kısımlar, ilgili CSS Satırı/JavaScript fonksiyonunun sayfada aktif olarak kullanıldığını, kırmızı renk ile boyalı kısımlar ise kullanılmadığını bizlere göstermektedir.

Kullanılmayan CSS ve JS Satırları Nasıl Tespit Edilir?

Bu sayede web sitemizin alt yapısında barındırdığı tüm CSS ve JavaScript dosyalarında hangi satır ve fonksiyonların kullanılıp kullanılmadığını rahatlıkla tespit edebiliyoruz.

Kullanılmayan CSS ve JS'i Temizlemeden Önce Nelere Dikkat Edilmeli?

Her ne kadar web sitemizde barındırdığımız ve sayfaya yüklediğimiz CSS ve JavaScript kütüphanelerinde yer alan kodların bir çoğunu kullanmıyor gibi görünsek de, bu kodlar içerisinde temizlik yapmadan önce dikkat etmemiz gereken bazı noktalar mevcut. Kullanılmayan CSS ve JS temizliği yapmadan önce mutlaka aşağıdaki maddelere dikkat ediniz:

  • İlgili CSS/JS kodunun her tarayıcı, her cihaz ve her sayfada kullanılmadığından emin olun.
  • Bazı JavaScript fonksiyonları belirli event'lere bağlı olarak çalışabilmektedir. Örneğin scroll, click gibi kullanıcı taraflı event'lerle çalışan JavaScript fonksiyonları temizlemeden önce hangilerinin aktif/pasif olduğu iyi analiz edilmelidir.
  • CSS ve JS temizliği yapmadan önce mutlaka tarayıcınızın DOM boyutunu yükselten CSS ve JS dosyalarını ayrıştırın. Küçük boyutlu CSS ve JS dosyalarıyla vakit kaybetmeyin. 
  • Optimizasyonları yapmadan önce mutlaka web sitenizin yedeğini almayı unutmayın!

Sizler de bu yöntemi kullanarak, web sitenizdeki kullanılmayan CSS ve JavaScript satırlarını tespit edebilir, temizleyebilir ve web sitenizi ziyaret eden kullanıcılara daha performanslı sayfalar gösterebilirsiniz!

Arama Motoru Optimizasyonu (SEO) Kategorisindeki Benzer Bloglarımız

SEO için Kullanabileceğiniz En İyi Wordpress Eklentileri
SEO için Kullanabileceğiniz En İyi Wordpress Eklentileri

Wordpress altyapılı sitelerde SEO işlemlerinizi kolaylaştıracak, en güncel ve güzel eklentileri AnalyticaHouse blogta derledik. Hemen okumak için tıklayın!

Devamını oku
Yerel (Local) SEO: Belirli Bir Lokasyonda SEO Stratejileri
Yerel (Local) SEO: Belirli Bir Lokasyonda SEO Stratejileri

Küçük işletmeler, lokasyon bazlı odağı olanlar ve hizmet satışı yapan firmalar yerel (local) SEO'ya çok ihtiyaç duyarlar. Lokal SEO'nun tüm detayları yazımızda!

Devamını oku
Google Discover: Keşfedilmek İçin Daha Fazlası
Google Discover: Keşfedilmek İçin Daha Fazlası

Google Discover; organik trafik artışını sağlayan, kullanıcı odaklı bir uygulamadır. Google Discover'da yer almak için yapmanız gerekenler blog yazımızda!

Devamını oku
Sizi bekliyoruz! Çok boyutlu dijital pazarlama çözümlerimizle tanışmak için hemen iletişime geçin.