Web Sitesi Sayfa Yükleme Sırası: Önce Ne Görünmeli?
Bir sayfanın toplam yüklenme süresi kadar, neyin önce göründüğü de önemlidir. Ziyaretçi ilk ekranı hızlıca gördüğünde sayfayı hızlı sayar; arka planda devam eden yüklemeleri fark etmez bile.
Bu rehberde yükleme sırasının nasıl kurgulanacağını, hangi kaynakların erteleneceğini, görsel kayma sorununu ve ölçümü ele alıyoruz. Yapının sitenize uyarlanması için Weblike web sitesi tasarımı ekibimizden destek alabilirsiniz.
Web Sitesi Sayfa Yükleme Sırası Nedir?
web sitesi sayfa yükleme sırası, bir sayfanın kaynaklarının hangi öncelikle indirildiği ve ekrana getirildiği düzendir. Sıra, algılanan hızı doğrudan belirler.
Toplam süreyi kısaltmak her zaman mümkün olmayabilir. Ancak sırayı düzeltmek çoğu sitede hızlı kazanç üretir.
Algılanan Hız
Kullanıcı sayfanın tamamını değil gördüğü kısmı değerlendirir. Bu nedenle ilk ekran önceliklidir.
Arka planda yüklenen kaynaklar fark edilmez. Hız algısı teknik süreden farklı çalışır.
Öncelik Sırası
Kaynaklar birkaç öncelik grubuna ayrılır. Bu gruplar yükleme sırasını belirler.
- Kritik: İlk ekran için zorunlu.
- Önemli: Kısa süre sonra gerekli.
- Ertelenebilir: Aşağıda kalan içerik.
- İsteğe bağlı: Etkileşimle yüklenen.
Kritik Stil
İlk ekranın görünmesi için gereken stiller sayfa içinde verilebilir. Böylece ek bir istek beklenmez.
Kalan stiller sonradan yüklenebilir. Stil optimizasyonunu CSS optimizasyonu yazısında ele aldık.
Engelleyici Kaynaklar
Bazı dosyalar yüklenene kadar sayfa çizilmez. Bu kaynaklar en çok gecikme üretir.
Engelleyici betikler ertelenmelidir. Her betiğin gerçekten gerekli olup olmadığı sorgulanmalıdır.
Betik Erteleme
Sayfa çiziminden sonra çalışabilecek betikler ertelenmelidir. Bu düzenleme ilk görünümü hızlandırır.
Betik optimizasyonunu JavaScript optimizasyonu yazısında anlattık. Sıralama bağımlılıkları kontrol edilmelidir.
Üçüncü Taraf Betikler
Analitik, sohbet ve reklam betikleri genelde en ağır kaynaklardır. Bunlar en sona bırakılmalıdır.
Gerekmeyen betikler kaldırılmalıdır. Her eklenen servis bir maliyet üretir.
Yazı Tipleri
Özel yazı tipleri yüklenene kadar metin görünmeyebilir. Bu durum boş bir ekran üretir.
Yazı tipi dosyaları ön yüklemeye işaretlenebilir. Yedek yazı tipi tanımlanmalıdır.
Görsel Önceliği
İlk ekrandaki görsel öncelikli yüklenmelidir. Kapak görseli genelde bu kapsamdadır.
Aşağıdaki görseller ertelenebilir. Bu ayrım elle işaretlenmelidir.
Kademeli Yükleme
Ekranda görünmeyen görseller kaydırıldıkça yüklenebilir. Bu yöntem ilk yükü belirgin biçimde azaltır.
Kademeli yüklemeyi lazy load yazısında anlattık. İlk ekran görselleri bu kapsama alınmamalıdır.
Görsel Boyutu
Büyük görseller sırayı bozar. Boyutlandırma ve sıkıştırma yapılmalıdır.
Her görsel kullanıldığı ölçüde üretilmelidir. Modern biçimler tercih edilmelidir.
Görsel Kayma
Geç yüklenen ögeler sayfa içeriğini kaydırır. Bu kayma okuma sırasında rahatsız edicidir.
Görsel ve reklam alanları için yer önceden ayrılmalıdır. Boyut bilgisi etikette verilmelidir.
Yer Tutucular
Yüklenmeyi bekleyen alanlar için yer tutucu gösterilebilir. Bu yöntem boşluk hissini azaltır.
Yer tutucu gerçek içerikle aynı boyutta olmalıdır. Aksi halde kayma yine oluşur.
Yükleme Göstergesi
Uzun süren işlemlerde gösterge kullanılabilir. Ancak her yükleme için gösterge gerekmez.
Kısa işlemlerde gösterge ters etki yapar. Gösterge kendisi ağır olmamalıdır.
Sunucu Yanıt Süresi
Yükleme sırası ne kadar iyi kurulursa kurulsun sunucu yavaşsa fark edilmez. İlk yanıt süresi kritiktir.
Yanıt süresini sunucu yanıt süresi yazısında ele aldık. Bu süre tüm zinciri etkiler.
Önbellekleme
Tekrar eden ziyaretlerde kaynaklar yeniden indirilmemelidir. Tarayıcı önbelleği doğru ayarlanmalıdır.
Önbellekleme tarafını önbellekleme yazısında anlattık. Süreler kaynak türüne göre belirlenmelidir.
İçerik Dağıtım Ağı
Kaynakların kullanıcıya yakın sunuculardan verilmesi gecikmeyi azaltır. Bu özellikle uzak ziyaretçilerde fark üretir.
Statik dosyalar bu yapıdan en çok fayda görür. Görseller için özellikle değerlidir.
Ön Bağlantı
Dış kaynaklara önceden bağlantı kurulabilir. Bu hazırlık bekleme süresini kısaltır.
Yalnızca gerçekten kullanılan alan adları için yapılmalıdır. Gereksiz bağlantılar kaynak tüketir.
Ön Yükleme
Kritik kaynaklar önceden yüklenmeye işaretlenebilir. Yazı tipleri ve kapak görseli bu kapsamdadır.
Aşırı kullanım ters etki yapar. Yalnızca birkaç kaynak işaretlenmelidir.
Sayfa Türüne Göre Sıra
Her sayfa türünün ilk ekranı farklıdır. Ürün sayfası ile blog yazısının öncelikleri aynı değildir.
Sıralama sayfa bazlı ayarlanabilir. Tek bir kural her sayfaya uymaz.
Mobil Öncelik
Mobil cihazlarda bağlantı daha yavaş olabilir. Sıralama mobil için ayrı değerlendirilmelidir.
Mobil ilkelerini mobil öncelikli tasarım yazısında anlattık. Mobilde daha az kaynak yüklenebilir.
Gereksiz Kaynaklar
Kullanılmayan stil ve betikler yüklenmemelidir. Her sayfaya tüm kaynakları yüklemek yaygın bir hatadır.
Sayfa bazlı kaynak ayrımı yapılmalıdır. Bu düzenleme belirgin kazanç sağlar.
Eklenti Yükü
Her eklenti kendi kaynaklarını ekler. Kullanılmayan eklentiler kaldırılmalıdır.
Eklenti sayısı düzenli gözden geçirilmelidir. Bazı eklentiler her sayfaya kaynak yükler.
Ölçüm Araçları
Yükleme sırası ölçülmeden iyileştirilemez. Tarayıcı araçları bu analizi sunar.
Ölçüm için Google PageSpeed Insights kullanılabilir. Rapor ilk ekran süresini de gösterir.
Hangi Göstergeler?
Birkaç gösterge yükleme sırasının kalitesini anlatır. Bunlar birlikte okunmalıdır.
- İlk içerik: İlk ögenin çizilme süresi.
- En büyük öge: Ana görselin çizilme süresi.
- Kayma: Görsel kayma miktarı.
- Etkileşim: Tıklanabilir hale gelme süresi.
Gerçek Kullanıcı Verisi
Laboratuvar ölçümü ile gerçek kullanıcı verisi farklı olabilir. İkisi birlikte değerlendirilmelidir.
Gerçek kullanıcı verisi daha geniş bir resim sunar. Tek bir ölçüm yanıltıcıdır.
Öncelik Yanlışları
Yaygın bir hata, ilk ekranda görünmeyen bir görseli öncelikli işaretlemektir. Bu işaret ters etki yapar.
İşaretlemeler ölçümle doğrulanmalıdır. Varsayıma dayalı ayarlar sorun üretir.
Değişiklik Sonrası Kontrol
Her düzenleme sonrası ölçüm tekrarlanmalıdır. Bazı iyileştirmeler başka bir göstergeyi bozabilir.
Karşılaştırmalı kayıt tutulmalıdır. Hangi değişikliğin ne kazandırdığı bilinmelidir.
Sıranın Değeri
web sitesi sayfa yükleme sırası, toplam süreyi değiştirmeden bile algılanan hızı belirgin biçimde iyileştirebilir. İlk ekranın erken görünmesi çoğu zaman yeterlidir.
Bu nedenle optimizasyon çalışmalarına sıralamadan başlamak en hızlı sonucu verir. Dosya küçültme ikinci adımdır.
Kaynakların hangi öncelikle indirildiği ve ekrana getirildiği düzendir; algılanan hızı doğrudan belirler.
Kullanıcının gördüğü kısma göre oluşan hız izlenimidir; arka plandaki yüklemeler fark edilmez.
Sayfa çiziminden sonra çalışabilen betikler ile analitik, sohbet ve reklam gibi üçüncü taraf kaynaklar.
İlk ekranın görünmesi için gereken ve ek bir istek beklemeden sayfa içinde verilebilen stillerdir.
Uygulanmaz; ilk ekran görselleri kapsam dışında bırakılmalıdır.
Görsel ve reklam alanları için yer önceden ayrılmalı ve boyut bilgisi etikette verilmelidir.
Yalnızca birkaç kritik kaynak için; aşırı kullanım ters etki yapar.
Hayır; sayfa türüne göre ilk ekran farklıdır ve sıralama sayfa bazlı ayarlanmalıdır.
İlk içeriğin çizilme süresi, en büyük ögenin süresi, görsel kayma ve etkileşime hazır olma süresi.
Önce doğru şeyi göstermek, her şeyi hızlı yüklemekten kolaydır. web sitesi sayfa yükleme sırası kurulurken kritik stili ayırmak, betikleri ertelemek, ilk ekran görselini öncelemek, yer tutucu kullanmak ve her değişikliği ölçmek gerekir. Hız tarafını açılış hızı nasıl artırılır yazımızda ele aldık.
BİZE ULAŞIN
Bizimle iletişime geçerek projeniz için hemen ücretsiz teklif alabilirsiniz.
