PageSpeed Kırmızı Ekranı (Render-Blocking) Ne Demektir?
Google PageSpeed sonucunuzu açtınız ve sayfada şöyle kırmızı bir ünlem çıktı: "Oluşturmayı Önleyen Kaynakları Kaldırın (Eliminate render-blocking resources)". Bu sorun, genellikle kodlama tarafındaki CSS (Tasarım kodları) ve JS (İşlevsellik kodları) yığınından kaynaklanır.
1. DOM Ağacının (Tarayıcının) Çalışma Mantığı
Bir kullanıcı sitenize girdiği an, telefonun tarayıcısı (Chrome/Safari) HTML dosyanızı yukarıdan aşağıya okumaya başlar. Okurken karşısına devasa bir Javascript (Diyelim ki bir Canlı Destek Widget'ı) çıktığında durur.
Tarayıcı: "Önce bu Javascript bitene kadar inat ettim bekleyeceğim, hiçbir şey yüklemiyorum" der. Kullanıcı o esnada bomboş, beyaz bir ekrana bakar. Bu süre uzarsa kullanıcı sıkılıp kaçar.
2. Wix Otomatik Minify (Küçültme) Altyapısı
Eğer WordPress kullanıyor olsaydınız, bu sorunu çözmek için Autooptimize, WP Rocket gibi ekstra hız eklentileri (Cache/Minifier) satın almanız gerekirdi. Wix'in en büyük teknik avantajı ise CSS ve JS Minify (Küçültme/Sıkıştırma) işlemlerini "Core Server" (Ara Sunucu) tabanında otomatik yapmasıdır.
Wix, yazdığınız kodlardaki boşlukları, yorum satırlarını ve fazlalıkları (Gzip/Brotli sıkıştırmasıyla) uçurur. Kodunuz %70 oranında ufalır.
3. Render-Blocking Hatasını O Zaman Neden Alıyoruz?
Hatayı veren Wix'in çekirdek motoru değil, Sizin Elle Yüklediğiniz 3. Parti Araçlardır.
- Google Tag Manager / Analytics: Eğer bu scriptleri Velo "Custom Code" (Özel Kod) bölümünden Header (Başlık) içine ve ASYNC (Eşzamansız) olmadan eklerseniz, siteniz kilitlenir.
- Çözüm: Javascript (JS) kodlarını eklerken mutlaka yüklenme emrini "Load Before Body Ends (Gövde Kapanmadan Önce)" olarak seçmeli veya "Defer (Ertele)" metodunu kullanmalısınız. Böylece tarayıcı önce görseli ve metni (LCP) gösterir, arka planda usulca canlı destek scriptini yüklemeye başlar.
VixSEO Raporlaması
Siz de manuel bir koda (Custom Snippet) girmek üzere olduğunuzda, eklediğiniz kod site hızınızı kaç saniye etkileyecek merak ediyor musunuz? VixSEO'nun Page Performance modülü her yeni entegrasyonda Total Blocking Time (TBT) verisini anında grafikler üzerinden size göstererek felaketleri önler.