Critical CSS Nedir?

Bir web sitesinin en önemli metriklerinden biri olan sayfa yüklenme hızı Google tarafından da hayati kabul edilir. Kritik olmayan CSS dosyaların yüklenmek istenmesi ve dolayısıyla sayfanın geç yüklenmesi, arama motoru botları tarafından olumsuz sinyaller olarak değerlendirilir. Bu yazımızda, söz konusu olan olumsuz deneyimi yaşamamak adına Critical CSS konusunu detaylandırıyor ve bir web sitesinde bu konuyu optimize edebilmenin yollarını gösteriyoruz.

Critical CSS Nedir ve Nasıl Çalışır?

Bir web sitesi açıldığında sayfaya giriş yapan kullanıcıların sayfanın içeriğini görebilmesini sağlayan CSS dosyaları, Critical CSS olarak adlandırılır. Web sayfası yüklendiği sırada HTML belgesi tarayıcı tarafından indirilir ve belgede bulunan CSS dosyalarının yüklenmesi için farklı isteklerde bulunulur. Web sayfasında bulunan tüm CSS dosyalarının yüklenmesi tamamlandığında indirme işlemi son bulur ve sayfa kullanıcı tarafından görünür hâle gelir. Bu süreç kritik olduğu kadar kritik olmayan CSS dosyalarını da içerebilir. Bu durum sayfa yüklenme hızını yavaşlatır. Kullanıcı ve arama motoru botlarının sayfa içi gezinme deneyimi de olumsuz yönde etkilenir.

Web sayfasının yüklenme anında önemli CSS dosyaları tamamen indirilmeden kullanıcılara tam olarak bir görüntü sunulmaz. Bu önemli CSS dosyaları Critical CSS’lerdir. Bu dosyalar HTML belgesi bölümünde yer alır ve kullanıcıların sayfadaki içeriği sunulmak istendiği şekilde görebilmelerini sağlar. Critical CSS dosyalarının dışındaki CSS kaynakları, kritik olmayan CSS’ler olarak kabul edilir.

Critical CSS Nasıl Belirlenir? Nasıl Tespit Edilir?

Critical CSS’in tespit edilmesi işlemi manuel ya da otomatik şekilde çalışan araçlarla gerçekleştirilebilir.

Manuel Yöntemle Critical CSS Nasıl Belirlenir?

• Tarayıcınızı açın ve işlem yapacağınız web sitesine gidin.

• Sayfada sağ tıklayın ve incele seçeneğini seçin. Bu adım Google Geliştirici Araçları’na (Chrome Devtools) giriş yapmanızı sağlayacak.

• Karşınıza çıkan menüden Elements sekmesine gidin. Bu sekme web sayfasının HTML yapısına bağlı olan CSS stillerini görebilmenizi sağlar.

• Bu noktada sayfanın görünür kısmında yer alan HTML ögelerini seçmeniz gerekir. Elements sayfasının altında HTML belgesinin bulunduğunu görebilirsiniz. Buradaki header, h1, h2, img gibi ögeleri seçebilirsiniz.

• Ögeler seçildikçe sağda yer alan Styles menüsünün değiştiğini göreceksiniz. Bu alan üzerinden seçilen HTML ögelerine uygulanan CSS kurallarını görüntüleyebilirsiniz.

• Color, background color, background image, font family, font size gibi stillerin kritik olduğunu unutmamak gerekir.

Otomatik Araçlarla Critical CSS Nasıl Tespit Edilir?

PurifyCSS veya PurgeCSS gibi araçları kullanarak web sitenizde yer alan ve kritik olmayan CSS kaynaklarını tespit edebilirsiniz. Bu sayede hem kritik olanları belirleyebilir hem önemsiz kaynaklar için aksiyon almaya başlayabilirsiniz.

• Bunun için https://purifycss.online/ adresine doğrudan giriş yapın.

• Karşınıza çıkan alana URL adresini girin ve devam et butonuna tıklayın.

• Yüklenmenin sona ermesiyle web sitenizde bulunan CSS kaynaklarının yüzde kaçının kullanılmadığını göreceksiniz.

Critical CSS’in Web Site Hızına Etkisi Nedir?

Critical CSS optimizasyonu sayfa yüklenirken çağrılan tüm CSS kaynaklarının önemli olmasını sağlayarak sayfanın yüklenme hızını iyileştirir. Bu durum kullanıcı deneyimini doğrudan olumlu etkiler. Bu durum arama motoru botları tarafından da olumlu bir sinyal olarak değerlendirilir.

Critical CSS’in sayfa yüklenme hızına olan olumlu etkileri şu şekilde sıralanabilir:

• Critical CSS yalnızca başlangıç için gerekli olan CSS kurallarının yüklenmesini sağlar. Böylece önemsiz CSS dosyalarının yüklenmesi için ekstra zamana ihtiyaç duyulmaz. Bu sayede hem tarayıcı fazladan efor harcamamış olur hem sayfa daha hızlı yüklenir.

• Critical CSS optimizasyonu First Contentful Paint (FCP) metriğini iyileştirir. Bu optimizasyon aynı zamanda Largest Contentful Paint (LCP) ve Cumulative Layout Shift (CLS) metriklerinin de iyileştirilebilmesine olanak tanır.

• Critical CSS aksiyonu Render Blocking CSS sorunlarını da direkt olarak azaltır. Gereksiz CSS kaynakları tarayıcının HTML’i render etmesine engel olabilir. Bu sorunun optimize edilmesi render blocking adı verilen işlemin sorunsuz şekilde çalışmasını sağlar.

• Critical CSS optimizasyonunun web site hızına olan etkileri arasında sunucu ve tarayıcı kaynaklarının verimli kullanılmasını sağlamak da vardır. Kritik olmayan CSS dosyalarının temizlenmesi sunucu ve tarayıcı kaynaklarının yalnızca kritik olanlar için kullanılmasına yardımcı olur. Bu durum doğrudan web sayfasının daha hızlı bir şekilde yüklenmesini sağlayarak kullanıcıya olumlu bir deneyim sunar.

Critical CSS İçin Alternatif Teknikler Nelerdir?

Critical CSS teknik SEO aksiyonunu hayata geçirmenin birçok yolu vardır. Bu aksiyondan önce atılması gereken ilk adım Critical CSS kaynaklarının belirlenmesidir. Kritik olmayan kaynaklar yerine kritik kaynaklara müdahale edilmesi web sitesinin yüklenme hızını direkt olarak olumsuz yönde etkiler. Bu durum kullanıcıların ve arama motoru botlarının gezinme deneyiminin kalitesini de düşürebilir. Özetle konu Critical CSS olduğunda mutlaka profesyonel bir SEO uzmanından destek almak gerekir.

Critical CSS optimizasyonu konusunda şu yöntemler uygulanabilir:

• Lazy Loading (Geç Yükleme): Lazy loading yöntemi web sayfasının içerisinde yer alan içerik, görsel ya da farklı kaynakların geç yüklenmesini sağlar. Böylece önemsiz kaynaklar yüklenmeye başlamadan önce önemli kaynakların yüklenmesi tamamlanmış olur. Bu durum direkt olarak sayfa yüklenme ve ilk açılış hızını artırır.

• CSS Küçültme: Bu yöntem CSS kodlarının ve dosya boyutlarının küçültülmesini amaçlar. Böylece sayfa yükü azalır ve tarayıcı sayfayı çok daha hızlı bir şekilde yükleyebilir.

• CSS Content Delivery Network (CDN): CSS CDN olarak adlandırılan bu yöntem farklı sunucular üzerinden kullanıcılara ulaşan ve bu sayede sayfa yüklenmesinde oluşan gecikmeyi ortadan kaldıran bir sistemi ifade eder.

Critical CSS Neden Önemlidir?

Web sayfası yüklenme hızını artırarak kullanıcı deneyimi ve SEO performansını iyileştirmeyi amaçlayan yöntemlerden biri olan Critical CSS bir web sitesi için son derece faydalı bir aksiyondur. Critical CSS görevleri tamamlanan web siteleri kullanıcı karşısına daha hızlı yüklenerek çıkar. Bu durum kullanıcıların web sitesi içerisinde daha fazla zaman geçirmelerini sağlar. Kullanıcıların web sayfalarında daha fazla zaman geçirmeleriyse arama motoru botları tarafından olumlu sinyaller olarak yorumlanır. Bu sayede web sayfasının sıralama skorları iyileşir.

Critical CSS özellikle web sayfaları içerisinde animasyon ve benzeri içerikleri sıkça kullanan web siteleri söz konusu olduğunda son derece kritik hâle gelir. Bu tür web siteleri kendi bünyeleri içerisinde kritik olmayan birçok CSS kodu bulundurduğundan söz konusu aksiyonun alınması organik performans açısından oldukça faydalı olacaktır.

Critical CSS’in ne olduğunu, nasıl çalıştığını ve nasıl tespit edilebileceğini bilmek birçok web sayfası için kritik öneme sahiptir. Siz de bu bilgiler ışığında web sitenizde yer alan kritik olan ve olmayan tüm CSS kaynaklarını keşfedebilir, müdahale edilmesi gerekenleri belirledikten sonra aksiyon almaya başlayabilirsiniz. Bunun için SEOPix ile iletişime geçerek web sitenizi iyileştirmek ve kullanıcılara daha iyi bir deneyim sunmak için sağlam bir adım atabilirsiniz.