Sayfa deneyimi için Critical CSS, bir web sayfasının görünür kısmını hemen render etmek için gereken belirli stillerin tanımlanmasını ve satır içine alınmasını içerir. Bu belirli stillere öncelik vererek, tarayıcılar ilk görünümü görüntülemeden önce tam, ağır stil sayfalarının indirilmesini beklemekten kaçınırlar. Bu teknik, render-bloklayan kaynaklara harcanan süreyi azaltır, bu da yükleme performansını doğrudan iyileştirir ve sitelerin Google tarafından tercih edilen 2,5 saniyelik Largest Contentful Paint eşiğine ulaşmasına yardımcı olur.
Render-bloklayan CSS nedir ve neden önemlidir?
Standart CSS dosyaları tarayıcılar tarafından genellikle render-bloklayan kaynaklar olarak değerlendirilir. Bu, tarayıcının kullanıcıya herhangi bir içerik görüntülemeden önce tüm stil sayfasını indirmek ve ayrıştırmak için render sürecini durdurduğu anlamına gelir. Farklı ağ hızlarına sahip mobil cihazlarda, bu gecikme ekranın boş kaldığı fark edilebilir bir boşluk yaratır, bu genellikle ölümün beyaz ekranı olarak adlandırılır.
CSS dosyanız binlerce satır kod içeriyorsa ancak kullanıcı sadece bir hero bölümü ve bir navigasyon çubuğu görüyorsa, tarayıcı gereksiz veriler üzerinde çalışıyor demektir. Bu gecikmeleri en aza indirmek, tarayıcının HTML ayrıştırıldıktan hemen sonra ekranı boyamasını sağlar. Bu optimizasyon olmadan, tarayıcı tek bir düğmeyi renklendirmeyi veya yazı tipi boyutlarını ayarlamayı bilmeden önce tüm CSS kütüphanesini getirmelidir.
Tipik yüksek trafikli bir e-ticaret mağazası için ağır bir CSS dosyası birkaç yüz kilobayt veri oluşturabilir. Bu render-bloklayan olduğunda, 4G bağlantısı olan bir kullanıcı sadece üst düzey navigasyonu görmek için üç saniyeden fazla bekleyebilir. CSS’i bölerek, tarayıcının en önemli görsel öğelere öncelik vermesine izin verir ve ilk boyama süresini etkili bir şekilde azaltırsınız.
Critical CSS, Core Web Vitals’ı nasıl iyileştirir?
Google, site sağlığını ve kullanıcı deneyimini değerlendirmek için Core Web Vitals’ı kullanır. Critical CSS, tarayıcının tam stil sayfasının yüklenmesini beklemeden birincil görseli veya metin bloğunu render etmesine izin vererek LCP metriğini doğrudan etkiler. Tarayıcı temel stillere hemen sahip olduğunda, geç yüklenen CSS öğeleri son konumlarına sıçramaya zorladığında meydana gelen düzen kaymalarından kaçınır, bu da Cumulative Layout Shift (CLS) puanlarını düşük tutmaya yardımcı olur.
Site sahiplerine Arama’da başarı ve genel olarak harika bir kullanıcı deneyimi sağlamak için iyi Core Web Vitals elde etmelerini şiddetle tavsiye ediyoruz.
Google Search Central
LCP’nin ötesinde, anlık stiller sağlamak daha hızlı etkileşimi de destekler. Bir kullanıcı navigasyonu ve düğmeleri görebiliyorsa, etkileşimde kalma olasılığı daha yüksektir. Ana stil sayfası arka planda yüklendiğinde, kullanıcının ilk etkileşimini kesmeden kalan düzen kurallarını sağlar. Bu, modern yüksek kaliteli web siteleri için beklentilerle uyumlu bir hız algısı yaratır.
Bir hizmet sayfasının karmaşık bir ızgara sistemine sahip olduğu bir durumu düşünün. Tüm ızgara için CSS, ilk metin bloğu gösterilmeden önce gerekliyse, LCP yükselecektir. Hero metni ve hero bölümünün arka plan rengi için belirli kuralları satır içine alarak, tarayıcı içeriği milisaniyeler içinde görüntüler ve ızgaranın geri kalan stilleri gelene kadar kullanıcının okumaya başlamasına izin verir.
Critical CSS’i uygulamak için adımlar nelerdir?
- Görünür içeriği tanımlayın: Kullanıcı kaydırmadan önce ekranda hangi öğelerin göründüğünü belirleyin.
- Stilleri çıkarın: Bu görünür öğeleri stilize eden belirli CSS kurallarını bulmak için otomasyon araçlarını kullanın.
- CSS’i satır içine alın: Bu stilleri doğrudan HTML belgenizin head bölümüne yerleştirin.
- Geri kalanını erteleyin: İlk render’ı engellememek için kalan, kritik olmayan CSS dosyalarını asenkron olarak yükleyin.
Kritik stiller satır içine alındıktan sonra, stillerinizin geri kalanının engellemeyen bir şekilde yüklendiğinden emin olmalısınız. Yaygın bir yöntem, media özniteliği ‘print’ olarak ayarlanmış bir link etiketi kullanmak veya dosya indirildikten sonra medya türünü ‘all’ olarak değiştirmek için JavaScript kullanmaktır. Bu, kullanıcı aşağı kaydırmaya başlar başlamaz tam sayfa stilinin mevcut olmasını sağlar.
Alien Road Critical CSS’i nasıl uygular
Alien Road’da performansa teknik SEO’nun temel bir bileşeni olarak yaklaşıyoruz. Müşterilerimiz için, sitenin teslim zincirindeki render-bloklayan yolları tanımlamak için bir denetim yaparak başlıyoruz. Genel düzeltmeler uygulamıyoruz; bunun yerine, tasarımın ‘kritik’ kısmını neyin oluşturduğunu belirlemek için her ana açılış sayfasının belirli DOM yapısını analiz ediyoruz.
Tipik bir iş birliği için sürecimiz şunları içerir:
- Masaüstü ve mobil cihazlarda mevcut LCP ve CLS sürelerini ölçmek için performans profillerini çalıştırmak.
- Otomatik oluşturma araçlarını kullanarak ilk görünüm alanı için gereken temel CSS’i çıkarmak.
- Bu stilleri HTML belgesinin head bölümüne enjekte etmek için sunucu tarafı veya oluşturma zamanı araçlarını yapılandırmak.
- Core Web Vitals raporundaki iyileştirmeleri 28 günlük bir pencerede doğrulamak için siteyi Search Console’da izlemek.
Kurulum aşamamız sırasında, genellikle eski çerçevelerin ilk render için gerekli olmayan ağır küresel stilleri enjekte ettiğini görüyoruz. Satır içi CSS bloğunu 10KB’ın altında tutmak için bunları çıkarıyoruz. Bu, ilk HTML belgesini mobil kullanıcıları hedefleyen siteler için gerekli olan ağ üzerinden hızlı bir şekilde teslim edilecek kadar küçük tutar.
CSS’i optimize ederken yaygın tuzaklar
Geliştiriciler bazen satır içi bölüme çok fazla kod dahil etme hatasına düşerler. Tüm sayfa için stilleri head bölümüne dahil ederseniz, HTML dosyanızın boyutunu önemli ölçüde artırırsınız, bu da sunucudan gelen ilk yanıtı geciktirebilir. Tarayıcının hızlı kalmasını sağlamak için satır içi CSS’i kesinlikle görünüm alanı ile sınırlı tutun.
Ayrıca, ana CSS dosyasının doğru şekilde önbelleğe alındığından emin olun. Kritik stiller sayfayı render ettikten sonra, kullanıcı diğer sayfalarla etkileşime girdiğinde veya daha aşağı kaydırdığında sitenin geri kalanı için kalan stillere ihtiyaç duyacaktır. Önbelleğe alma politikanız doğru ayarlanmamışsa, kullanıcılar her sayfa yüklemesinde tam stil sayfasını yeniden indirmeye zorlanacak, bu da bant genişliğini israf eder ve tekrar eden ziyaretçi deneyimine zarar verir.
Bu hafta nereden başlamalı
Tarayıcınızın geliştirici araçlarındaki performans sekmesini açarak başlayın. Yükleme sürecini kaydedin ve şelale grafiğinde özellikle render-bloklayan isteklere bakın. İlk boyamayı engelleyen büyük CSS dosyaları görüyorsanız, metrikleriniz üzerindeki etkiyi gözlemlemek için tek bir yüksek trafikli açılış sayfasında satır içi stratejisini test edin.
Ardından, şu anda LCP veya CLS eşiğini geçemeyen sayfaları belirlemek için Google Search Console Core Web Vitals raporunuzu gözden geçirin. Çabalarınızı önce bu belirli URL’lere odaklayın. Bugün temel performansınızı belgeleyerek, Critical CSS’i uyguladıktan sonra hızdaki kazancı doğru bir şekilde ölçebilirsiniz.