Merhaba arkadaşlar, bugün performans optimizasyonu konusunda kafayı çok taktığım ve sonunda bulduğum temiz bir çözümden bahsedeceğim. Özellikle Lighthouse veya PageSpeed Insights skorlarında "Eliminate render-blocking resources" uyarısını görüp de iç geçirenlerdenseniz, bu yazı tam size göre. Ben de bu uyarıyı her gördüğümde, "Tamam da, stil dosyam gerekli ki?" diye düşünüyordum. İşte beni bu dertten kurtaran, above-the-fold CSS'inizi inline yapıp, geri kalanını asenkron yükleme tekniği.
Sorun Neydi?
Geleneksel olarak, stil dosyalarımızı head içinde
şeklinde ekliyoruz. Ancak tarayıcı, bu CSS dosyasını tamamen indirip işlemeden (parse etmeden) sayfanın render işlemine başlamıyor. Bu da "First Contentful Paint" (FCP) süresini geciktiriyor, yani kullanıcı ilk anlamlı içeriği daha geç görüyor. Dosya büyükse veya ağ yavaşsa, bu süre iyice uzuyor. İşte buna "render blocking" diyoruz.
Çözüm Fikri: Kritik ve Kritik Olmayan CSS
Çözüm mantığı şu: Kullanıcının ilk açılışta, kaydırma yapmadan görüntülediği alana (above-the-fold) ait stiller "Kritik CSS"tir. Bunları doğrudan HTML'nin head kısmına inline style olarak yazarsak, tarayıcı hemen bu stilleri uygulayıp render'a başlayabilir. Sayfanın geri kalanı için gereken, "Kritik Olmayan CSS" ise asenkron bir şekilde, render'ı bloklamadan yüklenebilir.
Nasıl Uyguladım?
İlk adım, kritik CSS'inizi belirlemek. Bunun için Manuel inceleme yapabileceğiniz gibi, Critical veya Penthouse gibi araçları da kullanabilirsiniz. Ben projemdeki ana bileşenlerin (navbar, hero section, ilk kartlar) stillerini manuel olarak ayıkladım.
Ardından, bu kritik CSS'i HTML şablonumun <head> etiketinin içine, bir <style> bloğu olarak yerleştirdim.
Şimdi sihirli kısım: Geri kalan tüm CSS'imizi (fontlar, sayfanın alt kısımları, modal stilleri vb.) render'ı BLOKLAMADAN yükleyeceğiz. Bunun için birkaç yöntem var ama benim tercihim media="print" ve onload taktiği. Bu yöntemde, tarayıcı bu dosyayı render'ı bloklayan bir kaynak olarak görmez.
Burada ne oluyor? İlk başta link etiketine media="print" diyerek, "bu stil sadece yazdırma için" diyoruz. Tarayıcı bunu render'ı bloklamayan, düşük öncelikli bir kaynak olarak ele alıyor ve indirmeye başlıyor. Dosya indirilip hazır olduğunda, onload="this.media='all'" event'i tetikleniyor ve media özelliği 'all' (tüm ortamlar) olarak değiştiriliyor. Böylece stil anında sayfaya uygulanıyor. <noscript> etiketi de, JavaScript'in kapalı olduğu durumlar için bir fallback sağlıyor.
Sonuçlar ve Çıkarımlar
Bu tekniği uyguladıktan sonra, özellikle mobil ağ simülasyonlarında FCP süresinde ciddi bir iyileşme gördüm. Lighthouse "Eliminate render-blocking resources" uyarısı, CSS kaynaklı olarak tamamen kayboldu. Tabii ki, bu teknik biraz daha fazla el emeği gerektiriyor ve kritik CSS'in doğru belirlenmesi önemli. Ayrıca, inline CSS'in boyutu çok büyürse bu sefer de "First Byte" süresini olumsuz etkileyebilir, dikkatli olmak lazım.
Siz sitelerinizde render bloklamayı azaltmak için hangi yöntemleri kullanıyorsunuz? Kritik CSS çıkarma işlemini otomatize etmek için favori bir tool'unuz var mı? Ya da bu tekniğin farklı bir varyasyonunu deneyen oldu mu? Yorumlarda deneyimlerinizi paylaşın, tartışalım!
Sorun Neydi?Geleneksel olarak, stil dosyalarımızı head içinde
HTML:
<link rel="stylesheet" href="style.css">Çözüm mantığı şu: Kullanıcının ilk açılışta, kaydırma yapmadan görüntülediği alana (above-the-fold) ait stiller "Kritik CSS"tir. Bunları doğrudan HTML'nin head kısmına inline style olarak yazarsak, tarayıcı hemen bu stilleri uygulayıp render'a başlayabilir. Sayfanın geri kalanı için gereken, "Kritik Olmayan CSS" ise asenkron bir şekilde, render'ı bloklamadan yüklenebilir.
Nasıl Uyguladım?İlk adım, kritik CSS'inizi belirlemek. Bunun için Manuel inceleme yapabileceğiniz gibi, Critical veya Penthouse gibi araçları da kullanabilirsiniz. Ben projemdeki ana bileşenlerin (navbar, hero section, ilk kartlar) stillerini manuel olarak ayıkladım.
Ardından, bu kritik CSS'i HTML şablonumun <head> etiketinin içine, bir <style> bloğu olarak yerleştirdim.
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Yüksek Performanslı Site</title>
<style>
/ 🔥 KRİTİK CSS - Above-the-fold stilleri buraya /
nav { background: #333; color: white; padding: 1rem; }
.hero { background: linear-gradient(...); padding: 4rem 1rem; text-align: center; }
.hero h1 { font-size: 2.5rem; margin-bottom: 1rem; }
/ ... diğer kritik kurallar ... /
</style>
</head>Şimdi sihirli kısım: Geri kalan tüm CSS'imizi (fontlar, sayfanın alt kısımları, modal stilleri vb.) render'ı BLOKLAMADAN yükleyeceğiz. Bunun için birkaç yöntem var ama benim tercihim media="print" ve onload taktiği. Bu yöntemde, tarayıcı bu dosyayı render'ı bloklayan bir kaynak olarak görmez.
HTML:
<!-- 🚀 ASENKRON CSS - Geri kalan her şey -->
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>
</head>Burada ne oluyor? İlk başta link etiketine media="print" diyerek, "bu stil sadece yazdırma için" diyoruz. Tarayıcı bunu render'ı bloklamayan, düşük öncelikli bir kaynak olarak ele alıyor ve indirmeye başlıyor. Dosya indirilip hazır olduğunda, onload="this.media='all'" event'i tetikleniyor ve media özelliği 'all' (tüm ortamlar) olarak değiştiriliyor. Böylece stil anında sayfaya uygulanıyor. <noscript> etiketi de, JavaScript'in kapalı olduğu durumlar için bir fallback sağlıyor.
Sonuçlar ve ÇıkarımlarBu tekniği uyguladıktan sonra, özellikle mobil ağ simülasyonlarında FCP süresinde ciddi bir iyileşme gördüm. Lighthouse "Eliminate render-blocking resources" uyarısı, CSS kaynaklı olarak tamamen kayboldu. Tabii ki, bu teknik biraz daha fazla el emeği gerektiriyor ve kritik CSS'in doğru belirlenmesi önemli. Ayrıca, inline CSS'in boyutu çok büyürse bu sefer de "First Byte" süresini olumsuz etkileyebilir, dikkatli olmak lazım.
Siz sitelerinizde render bloklamayı azaltmak için hangi yöntemleri kullanıyorsunuz? Kritik CSS çıkarma işlemini otomatize etmek için favori bir tool'unuz var mı? Ya da bu tekniğin farklı bir varyasyonunu deneyen oldu mu? Yorumlarda deneyimlerinizi paylaşın, tartışalım!