Karşıt görüşler olsa da, çoğunluk kabul edecektir ki; ‘iyi kullanıcı deneyimi hızlı servisle başlar’.
Internet tarayıcıları (Chrome, Firefox, Opera…) görsel ve metin içerikleri senkron olarak aynı anda yüklerler. Bu da sayfa açılırken güzel bir görüntü sunar. Şöyle ki:
<h2>Güzel Bir Başlık</h2>
<img src="büyük-bir-gorsel" alt="Görsel Hakkında Bilgi" />
<p>Kullanıcının almak istediği bilgiyi sunan metinler.</p>Maalesef her kullanıcı aynı yüksek hıza sahip olmadığından, kullanıcıların bu sayfayı görürken yaşayacağı deneyiler de farklı olacaktır. Yani esas bilginin olduğu paragrafı görebilmesi için, kullanıcının bu görselin yüklenmesini beklemesi gerekecek.
1 saniyenin bile önemi olan bir çağda, teferruatlı – çok sayıda görsel barındıran sayfaların yüklenmesi sırasında sayfa yüklenmesi de yavaş gerçekleşecektir. Öyleyse tasarımcılar olarak ne kadar hız kazanabilirsen o kadar kâr.
Çözüm: Görselleri Asenkron Yükleme (decoding async)
<img> etiketimize ekleyeceğimiz decoding="async" özelliği sayesinde, tarayıcıya, görüntüler tam olarak yüklenmese bile tarayıcının içeriği görüntülemeye devam edebilmesi için talimat veriyoruz. Böylece tarayıcıya “Görüntü metinden sonra da yüklenebilir” diyor ve metinsel içeriğin gecikmeden sunulmasını sağlıyoruz.
<img src="büyük-gorsel" alt="Görsel Hakkında Bilgi" decoding="async" />Modern tarayıcılarda decoding özniteliği için kabul edilen 3 değer vardır :
sync : Sayfanın oluşturması işlemi “eksiksiz deneyim” için, yalnızca resim hazır olduktan sonra devam eder.
async : En iyi “performans” için sayfa yüklemesine devam et ve görüntü(ler) kod çözme işlemi tamamlanır tamamlanmaz yüklensin.
auto : Yükleme şekline tarayıcı ayarları karar versin.
DİKKAT: Hala kullanan varsa, Internet Explorer’da çalışmaz 😄
Biraz Daha Hız Kazanalım Mı? (lazy loading)
İnternet sayfalarının görünen kısmının dışında kalan, görselleri, sayfa açıldığı sırada yüklemek zorunda değiliz. Bu görseller ancak görünen alana girdiğinde yüklenirlerse, hem kullanıcıya daha hızlı servis vermiş, hem de gereksiz bant genişliği kullanmamış oluruz.
Yapılan bir çalışmaya göre; bir haber veya makaleye “göz atan” kulanıcıların %65’i sayfayı aşağı kaydırmadan önce ayrılıyor.
<img> etiketimize bu sefer de loading="lazy" özelliğini ekleyerek, tarayıcıya, sayfa görünür alanı dışında kalan görsellerin gerekmedikçe yüklenmemesi talimatını veriyoruz.
<img src="büyük-gorsel" alt="Görsel Hakkında Bilgi" decoding="async" loading="lazy" />Unutmayalım: Hızlı ve pürüzsüz ilerleyen bir sunum; iyi kullanıcı deneyimi getirir. İyi kullanıcı deneyimi de, mutlu, sadık kullanıcılar, dolayısıyla (ticari işlerimizde) güven ve kâr getirecektir.