Bu kural, PageSpeed Insights, sayfanın ekranın üst kısmındaki içeriğinin oluşturulması için ağda ek gidiş gelişler gerektiğini belirlediğinde tetiklenir.
Genel Bakış
Gereken veri miktarı, baştaki tıkanıklık aralığından fazla olursa, sunucunuzla kullanıcının tarayıcısı arasında ek gidiş gelişler gerekecektir. Bu durum, mobil ağlar gibi yüksek gecikmeye sahip ağlardaki kullanıcılarda sayfa yüklerken önemli gecikmelere neden olabilir.
ÖnerilerSayfalarınızın daha hızlı yüklenmesini sağlamak amacıyla sayfanızın, ekranın üst kısmında görünen içeriği oluşturmak için gereken verilerinin (HTML işaretlemesi, resimler, CSS, JavaScript) boyutunu sınırlandırın. Bunu yapmanın çeşitli yolları vardır:
- HTML'nizi ekranın üst kısmındaki kritik olan içeriği en başta yüklemek üzere yapılandırın
- Kaynaklarınız tarafından kullanılan verilerin miktarını azaltın
HTML'nizi ekranın üst kısmındaki kritik içeriği en başta yüklemek üzere yapılandırın
Sayfanızın ana içeriğini en başta yükleyin. Sayfanızı, sunucunuzun ilk yanıtında sayfanın kritik bölümünün oluşturulması için gerekli yanıtın hemen gönderileceği ve kalan kısmının sonraya bırakılacağı biçimde yapılandırın. Bunun için CSS'nizi ikiye bölmeniz gerekebilir: içeriğin ATF bölümünü tasarlamaktan sorumlu bir satır içi bölüm ve sonraya bırakılabilecek bölüm.
Bir sitenin nasıl daha hızlı yüklenecek biçimde yapılandırılabileceğini gösteren şu örneklere bakın:
- HTML'niz ana içeriği yüklemeden önce üçüncü taraflara ait widget'ları yüklüyorsa, ana içerik en başta yüklenecek biçimde sıralamayı değiştirin.
- Siteniz bir gezinme kenar çubuğu ve makaleden oluşacak biçimde iki sütunlu bir tasarım kullanıyorsa ve HTML'niz, kenar çubuğunu makaleden önce yüklüyorsa, ilk önce makaleyi yüklemeyi düşünün.
Kaynaklarınız tarafından kullanılan verilerin miktarını azaltınSiteniz birden fazla cihazda iyi çalışacak ve kritik içeriği başta yükleyecek biçimde yeniden tasarlandıktan sonra, sayfanızı oluşturmak için gereken veri miktarını azaltmak üzere şu teknikleri kullanın:
- Kaynakları Küçültün: Gereksiz boşlukları ve yorumları kaldırarak HTML, CSS ve JavaScript'i küçültebilirsiniz. Kaynaklarınızdaki değişkenleri yeniden adlandıran araçlar kullanarak daha ileri optimizasyonlar yapabilirsiniz.
- Mümkün olan yerlerde resimler yerine CSS kullanmayı düşünün.
- Sıkıştırmayı Etkinleştirin