Oluşturma engelleme istekleri uyarısı nasıl giderilir?
Bazı CSS ve JavaScript dosyaları sayfanın çizilmesini bekletiyor ve bu süre doğrudan ilk görünme ölçüsüne ekleniyor. Hangi dosyaların engellediğini bulmanın ve engeli kaldırmanın yolu.
Uyarı ne diyor?
PageSpeed raporunda bu madde "Oluşturma engelleme istekleri" başlığıyla görünüyor ve altında bir dosya listesi bulunuyor.
Anlamı şu: tarayıcı sayfayı çizmeden önce bu dosyaları indirip işlemek zorunda. O süre boyunca kullanıcı boş ekrana bakıyor.
Neden böyle? Çünkü tarayıcı, stilleri bilmeden içeriği çizerse sayfa önce biçimsiz görünür, sonra aniden düzelirdi. Bunu önlemek için bekliyor.
Bekleme mantıklı ama süresi kontrol edilebilir. Uyarının işi de bunu söylemek.
Neden önemli?
Bu bekleme, ana içeriğin ne kadar sürede göründüğünü ölçen değere doğrudan ekleniyor.
Yani stil dosyanız 1,2 saniyede iniyorsa, sayfanız en iyi ihtimalle 1,2 saniyeden sonra görünmeye başlıyor. Bunun altına inmek mümkün değil.
Bu ölçünün nasıl iyileştirildiğini web.dev'in ilgili belgesi ayrıntılı anlatıyor.
Hangi dosyalar engelliyor?
Tahmin etmeye gerek yok; rapor listeyi veriyor ve her satırda o dosyanın ne kadar beklettiği yazıyor.
Genellikle üç gruba düşüyor:
Stil dosyaları. Varsayılan olarak engelleyici. Tema, eklentiler ve varsa özel stil dosyanız.
Sayfanın başındaki betikler. Erteleme belirtilmeden yüklenen her betik, o noktada işlemeyi durduruyor.
Üçüncü taraf betikler. Sohbet widget'ı, ısı haritası, reklam ve etiket yöneticisi. Bunların bir kısmı kendi başına ek dosyalar da indiriyor.
İpucu — Listedeki dosya adlarına bakın. Adında bir eklenti ya da servis adı geçiyorsa, o eklenti gerçekten gerekli mi diye sorun. Kullanılmayan bir widget'ı kaldırmak, haftalarca sürecek optimizasyondan çok kazandırıyor.
Ölçülerin tanımı ve eşikleri web.dev üzerinde yayımlanıyor.
JavaScript tarafı — kolay olan
Bu tarafta çözüm basit ve çoğu sitede tek satırlık bir değişiklik.
Sayfanın çizilmesi için gerekli olmayan her betik ertelemeli yüklenmeli. Bu, tarayıcıya "bunu indir ama sayfa çizilmesini bekletme" demenin yolu.
Ertelenebilecekler:
- Analitik ve ölçüm betikleri
- Sohbet widget'ları
- Sosyal medya gömüleri
- Kaydırma animasyonları
- Çerez bildirimi
Ertelenmemesi gerekenler:
- Sayfa yapısını oluşturan çerçeve kodu
- İlk ekranda görsel değişiklik yapan betikler
Kendi sitemizde ölçüm betiklerini bu şekilde yüklüyoruz: onay varsayılanı sayfanın içinde satır içi duruyor, uzak betik ise sonraya bırakılıyor.
CSS tarafı — zor olan
Stil dosyasını tamamen ertelemek mümkün değil; sayfa stilsiz görünür ve bu, yavaş görünmekten daha kötü bir deneyim.
Çözüm ikiye ayırmak:
Kritik CSS. İlk ekranı çizmeye yeten en küçük stil kümesi. Doğrudan sayfanın içine gömülüyor, hiçbir dosya beklenmiyor.
Geri kalan stil. Sayfa görünür olduktan sonra arka planda yükleniyor.
Bu yöntem gerçek kazanç sağlıyor ama uygulaması otomatik değil: her sayfa tipi için kritik CSS farklı olduğundan üretimin derleme sürecine eklenmesi gerekiyor.
Ayrıntısını ve kullanılmayan stil temizliğini CSS optimizasyonu yazısında anlattık.
Dikkat — Kritik CSS yanlış üretildiğinde sayfa bir an bozuk görünüp sonra düzeliyor. Bu, kullanıcı açısından beklemekten daha rahatsız edici. Uygulandıktan sonra farklı sayfa tiplerinde gözle kontrol şart.
Sıralama — ne önce yapılmalı?
Kazanç büyüklüğüne göre.
Adım | Emek | Kazanç |
|---|---|---|
Kullanılmayan eklentileri kaldırmak | Düşük | Yüksek |
Betikleri ertelemeli yapmak | Düşük | Yüksek |
Üçüncü taraf betikleri sonraya almak | Düşük | Orta–yüksek |
Stil dosyalarını birleştirmek | Orta | Orta |
Kritik CSS uygulamak | Yüksek | Yüksek |
Yazı tipi yüklemesini düzenlemek | Düşük | Orta |
İlk iki satır bir öğleden sonrada yapılabiliyor ve çoğu sitede uyarının yarısını kapatıyor.
Son satır ayrı bir konu; yazı tipi görüntüleme uyarısında ele aldık.
Eklenti ile yapılabilir mi?
WordPress gibi sistemlerde performans eklentileri bu işi yapmayı öneriyor. İki uyarı var.
Birden çok eklenti aynı işi yapmasın. İki eklenti aynı anda dosya birleştiriyorsa çakışma çıkıyor ve site bozulabiliyor.
Her ayarı açmayın. Bu eklentilerdeki agresif ayarlar tasarımı ve işlevleri bozabiliyor. Bir ayar açıldıktan sonra farklı sayfa tiplerinde gözle kontrol gerekiyor.
Özellikle "JavaScript'i ertele" ayarı, ertelenmemesi gereken betikleri de erteleyip menü ve form gibi öğeleri çalışmaz hâle getirebiliyor.
Örnek senaryo — Bir sitede performans eklentisinde bütün betikler ertelemeye alınıyor. Skor yükseliyor ama mobil menü açılmıyor ve iletişim formu gönderilmiyor. Sorun haftalarca fark edilmiyor çünkü kimse mobilde test etmiyor. Eklentide iki betik istisnaya alındığında hem skor korunuyor hem işlevler geri geliyor.
Ölçüm ve doğrulama
Değişiklik sonrası kontrol edilecekler:
- Rapordaki engelleyici dosya listesi kısaldı mı?
- Sayfa gözle bakıldığında düzgün görünüyor mu?
- Menü, form ve düğmeler çalışıyor mu?
- Mobilde de aynısı geçerli mi?
- Dört hafta sonra saha verisinde ölçü düzeldi mi?
İkinci, üçüncü ve dördüncü maddeler atlandığında hız kazancı işlev kaybıyla ödenmiş oluyor.
Ne zaman uğraşmaya değmez?
Saha verisinde ilk görünme ölçüsü zaten eşiği geçiyorsa bu uyarıyla uğraşmak teorik kazanç peşinde koşmak oluyor.
Aynı şekilde, engelleyen dosya sayısı az ve toplam bekleme süresi küçükse — rapor bunu milisaniye cinsinden yazıyor — kazanç ölçüm dalgalanmasının altında kalıyor.
Öncelik sırasını nasıl kuracağınızı PageSpeed uyarıları yazısında tablo hâlinde verdik.
Etiket yöneticisi özel bir durum
Etiket yöneticisi kullanan sitelerde bu uyarı sık çıkıyor ve sebebi genellikle görünmüyor.
Yönetici betiğinin kendisi hafif. Ama içine eklenen her araç onun üzerinden yükleniyor ve o araçların bir kısmı engelleyici olabiliyor.
Rapordaki listede tek bir satır gibi görünen kurulum, arka planda onlarca betiği temsil ediyor olabiliyor.
Yapılacak iş yöneticiyi kaldırmak değil, içindeki etiketleri düzenli temizlemek. Konuyu üçüncü taraf betikler yazısında ayrıca ele aldık.
Satır içi mi dosya mı?
Küçük stil ve betik parçalarını ayrı dosya yerine doğrudan sayfaya gömmek bir ağ isteğini ortadan kaldırıyor.
Bu, küçük parçalar için mantıklı. Büyük parçalar için değil: satır içi gömülen kod önbelleklenmiyor, her sayfa yüklemesinde yeniden iniyor.
Pratik sınır şu: birkaç satırlık kod satır içi, geri kalanı dosyada. Önbellek tarafının gerekçesini önbellek süreleri yazısında anlattık.
Kendi sitemizde ölçüm betiğinin onay kurulumu satır içi duruyor — hem küçük hem sıralamanın garanti altına alınması gerekiyor.
Hangi dosya gerçekten gerekli?
Optimizasyondan önce sorulacak bir soru daha var ve çoğu zaman en çok kazandıranı bu.
Rapordaki engelleyici dosya listesini ekiple gözden geçirin. Her satır için tek soru: bu dosya ne işe yarıyor?
Sahada gördüğümüz tipik tablo şu: listedeki dosyaların bir kısmı yıllar önce eklenmiş ve artık kullanılmayan eklentilere ait. Bir kısmı denenip vazgeçilmiş araçların kalıntısı.
Kaldırılan bir dosya, optimize edilen dosyadan her zaman hızlı.
Sayfa tipine göre yükleme
İkinci en çok kazandıran ve en az uygulanan yöntem: her dosyayı her sayfada yüklememek.
İletişim formunun stili blog yazısında gerekmiyor. Galeri betiği iletişim sayfasında gerekmiyor. Ödeme sağlayıcısının kodu ana sayfada gerekmiyor.
Eklenti tabanlı sistemlerin çoğunda bu davranış varsayılan olarak kapalı: her eklenti kendi dosyalarını her sayfada yüklüyor.
Sayfa bazında koşullu yükleme, çoğu sitede engelleyici dosya sayısını belirgin şekilde düşürüyor ve hiçbir işlev kaybı üretmiyor.
Sonuç — Bu uyarı, sayfanın görünmesini geciktiren dosyaları gösteriyor ve çoğu sitede çözümün yarısı ücretsiz: kullanılmayan eklentileri kaldırmak ve gerekmeyen betikleri ertelemek. Zor olan kısım kritik CSS ve o da her sitede gerekmiyor.
Bu düzeltmelerin uygulamasını teknik SEO kapsamında yapıyoruz; yeni bir sitede bu yapı baştan doğru kuruluyor — web sitesi geliştirme sayfasında anlattık.
