CSS optimizasyonu SEO’yu nasıl etkiler?
Stil dosyaları sayfanın görünmesini engelleyebiliyor. Hangi CSS sorunları hızı bozuyor ve hangi düzeltmeler gerçekten fark ediyor?
CSS neden hızı etkiliyor?
Tarayıcı bir sayfayı çizerken sıralı çalışıyor. HTML'i alıyor, içinde bir stil dosyası bağlantısı görüyor ve o dosyayı indirip işlemeden sayfayı çizmiyor.
Buna render engelleme deniyor ve varsayılan davranış bu.
Sonuç şu: stil dosyanız ne kadar büyükse ve kaç tane varsa, kullanıcı boş ekrana o kadar uzun bakıyor. Bu süre doğrudan en büyük içerikli boyama ölçüsüne yansıyor.
Mantık kulağa teknik geliyor ama pratik karşılığı basit: gereksiz stil, gereksiz bekleme.
Ölçülerin tanımı ve eşikleri web.dev üzerinde; en büyük içerikli boyamanın nasıl iyileştirildiği ayrı bir belgede anlatılıyor.
En büyük kazanç — kullanılmayan CSS
Sahada gördüğümüz en yaygın durum bu ve özellikle hazır temalarda belirgin.
Bir tema, her ihtimale karşı bütün bileşenlerin stilini taşıyor: slider, galeri, form, tablo, animasyon. Sizin sayfanızda bunların çoğu yok ama stil dosyası hepsini içeriyor.
Ölçmek kolay: tarayıcının geliştirici araçlarında kapsam analizi bölümü, sayfa yüklenirken CSS'in yüzde kaçının kullanıldığını gösteriyor.
Hazır temalarda bu oranın çok düşük çıkması yaygın. Yani indirilen dosyanın büyük kısmı hiç kullanılmıyor.
İpucu — Kapsam analizini birkaç farklı sayfa tipinde çalıştırın: ana sayfa, blog yazısı, iletişim. Hepsinde kullanılmayan ortak bölümler, temizlenecek asıl yer.
Ne yapılabilir?
Kazanç sırasına göre.
1. Kullanılmayan bileşenleri kapatın. Tema ayarlarında kullanılmayan modüller kapatılabiliyorsa, ilgili stil de yüklenmiyor.
2. Eklenti stillerini gözden geçirin. Her eklenti kendi stil dosyasını yüklüyor ve bunların çoğu her sayfada gerekmiyor. Yalnızca kullanıldığı sayfada yüklenmesi sağlanabiliyor.
3. Kritik CSS uygulayın. İlk ekranı çizmeye yeten stil HTML içine gömülüyor, geri kalanı sonraya bırakılıyor.
4. Dosyaları birleştirin ve küçültün. Çok sayıda küçük dosya yerine az sayıda dosya; boşluk ve yorumların temizlenmesi.
5. Yazı tipi yüklemesini yönetin. Aşağıda ayrı başlık.
Sorun | Belirti | Çözüm |
|---|---|---|
Büyük stil dosyası | Uzun boş ekran süresi | Kullanılmayanı temizle |
Çok sayıda dosya | Çok sayıda istek | Birleştir |
İlk ekran geç çiziliyor | Yüksek boyama süresi | Kritik CSS |
Metin geç görünüyor | Yazı tipi beklemesi | font-display ayarı |
Sayfa yüklenirken zıplıyor | Düzen kayması | Boyut tanımlarını yaz |
Kritik CSS nasıl çalışıyor?
Fikir basit: kullanıcı ilk anda yalnızca ekranın üst kısmını görüyor. O kısmı çizmek için gereken stil, tüm stil dosyasının küçük bir parçası.
Kritik CSS yöntemi bu parçayı ayırıp doğrudan HTML'in içine gömüyor. Tarayıcı hiçbir dosya beklemeden çizmeye başlıyor.
Geri kalan stil dosyası, sayfa görünür olduktan sonra arka planda yükleniyor.
Kazanç gerçek ama uygulaması otomatik değil. Sayfa tipine göre kritik CSS farklı olduğu için, bunu üreten bir adımın derleme sürecine eklenmesi gerekiyor.
Küçük sitelerde manuel yapılabiliyor; çok sayfa tipi olan sitelerde otomatikleştirilmesi gerekiyor.
Dikkat — Kritik CSS yanlış üretildiğinde sayfa bir an bozuk görünüp sonra düzeliyor. Bu, kullanıcı açısından hız kazancından daha kötü bir deneyim. Uygulandıktan sonra farklı sayfa tiplerinde gözle kontrol şart.
Yazı tipleri
Yazı tipi dosyaları genellikle CSS üzerinden yükleniyor ve yanlış yapılandırıldığında metin görünmeden bekliyor.
Varsayılan davranışta tarayıcı, yazı tipi dosyası gelene kadar metni hiç göstermiyor. Yavaş bağlantılarda bu, sayfanın uzun süre boş görünmesi demek.
Çözüm iki adımda:
font-display ayarı. Yazı tipi gelene kadar yedek bir yazı tipiyle metnin gösterilmesini sağlıyor. Metin hemen görünüyor, yazı tipi gelince değişiyor.
Yerelden servis etmek. Yazı tipini kendi sunucunuzdan vermek bir ağ turu kazandırıyor ve dış servise bağımlılığı kaldırıyor. Kişisel veri açısından da temiz taraf: ziyaretçinin IP adresi üçüncü tarafa gitmiyor.
Kendi sitemizde ikinci yolu kullanıyoruz ve bunun bir yan faydası daha oldu: derleme artık dış bir servise bağlı değil.
Ne kadar kazanç?
Dürüst cevap: görsellerden sonra gelir.
Sahada gördüğümüz hız sorunlarının büyük kısmı görsel kaynaklı — büyük dosyalar, eski biçimler, yanlış yerde tembel yükleme. Bunlar düzeltilmeden CSS'e girmek, küçük kazanç için büyük emek harcamak oluyor.
Sıralama şöyle olmalı:
- Sunucu yanıt süresi
- Görseller
- JavaScript
- CSS
- Yazı tipleri
CSS dördüncü sırada ve çoğu sitede kazancı ölçülebilir ama mütevazı.
Görsel tarafındaki işleri tembel yükleme yazısında, ölçümün nasıl okunacağını PageSpeed Insights yazısında anlattık.
Eklenti ile mi elle mi?
WordPress gibi sistemlerde bu işlerin çoğu performans eklentileriyle yapılıyor. İki uyarı var.
Birden çok eklenti aynı işi yapmasın. İki farklı eklenti CSS birleştiriyorsa çakışma çıkıyor ve site bozulabiliyor.
Her ayarı açmayın. Bu eklentilerdeki agresif ayarlar tasarımı bozabiliyor. Bir ayar açıldıktan sonra farklı sayfa tiplerinde gözle kontrol gerekiyor.
Elle yapılan optimizasyon daha kontrollü ama geliştirici zamanı gerektiriyor. Özel geliştirilen sitelerde bu işler zaten baştan doğru kuruluyor.
Ölçmeden başlamayın
CSS optimizasyonuna girmeden önce sorunun gerçekten burada olduğunu doğrulamak gerekiyor.
Tarayıcının geliştirici araçlarında ağ sekmesini açıp sayfayı yükleyin ve şuna bakın: toplam indirilen verinin ne kadarı CSS?
Çoğu sitede bu oran küçük çıkıyor ve asıl yük görsellerde oluyor. O durumda CSS'e harcanacak zaman yanlış yere gidiyor demektir.
Oran belirgin şekilde yüksekse — özellikle çok özellikli temalarda görülüyor — çalışma gerekçelendirilmiş oluyor.
Yazı tipi sayısını azaltmak
Sık atlanan ama etkisi somut bir kalem.
Her yazı tipi ailesi ve her ağırlık ayrı bir dosya demek. Üç aile ve her birinin dört ağırlığı kullanılıyorsa on iki dosya indiriliyor.
Pratik sınır: iki aile ve aile başına iki üç ağırlık. Değişken yazı tipleri kullanıldığında tek dosya bütün ağırlıkları taşıyabiliyor ve dosya sayısı belirgin şekilde düşüyor.
Kendi sitemizde iki değişken yazı tipi kullanıyoruz ve toplam dört dosya indiriliyor.
Kritik olmayan stilleri erteleme
Kritik CSS uygulamak zahmetliyse daha basit bir ara adım var: yalnızca belirli sayfalarda kullanılan stilleri, yalnızca o sayfalarda yüklemek.
İletişim formunun stili blog yazısında, galeri stili iletişim sayfasında yüklenmemeli.
Bu, eklenti tarafında genellikle bir ayarla yapılabiliyor; özel geliştirilen sitelerde zaten baştan böyle kuruluyor.
Kontrol listesi
- CSS'in toplam yükteki payı ölçüldü mü?
- Kullanılmayan stil oranı ne?
- Kaç yazı tipi dosyası indiriliyor?
- Eklenti stilleri her sayfada mı yükleniyor?
- Yazı tipi bekleme davranışı ayarlandı mı?
Sonuç — CSS optimizasyonu bir SEO tekniği değil, bir hız çalışması. Sıralamaya etkisi dolaylı ve mütevazı; ama görseller düzeltildikten sonra kalan en büyük kalem genellikle burada oluyor.
Hız ve teknik düzeltmelerin uygulamasını teknik SEO kapsamında yapıyoruz; yeni bir sitede bu ayarların baştan doğru kurulması web sitesi geliştirme sayfasında anlatıldı.
Bu konuyla ilgili
- tema seçimi — Ağırlığın asıl kaynağı.
- hız test araçları — Ölçmeden başlamamak için.
