Ana sayfadaki tek görsel siteyi neden yavaşlatır?

Ana sayfanıza büyük, etkileyici bir görsel koymak masum bir karar gibi görünür. "Sonuçta tek bir resim" dersiniz. Oysa o tek görsel, ziyaretçinin sayfayla kurduğu ilk saniyeyi belirleyen şeydir ve çoğu zaman sitenin en ağır parçasıdır.

Yavaşlık her zaman onlarca dosyadan gelmez. Pek çok kurumsal sitede asıl fren, ana sayfanın en üstüne yerleştirilen o tek "kahraman görsel"dir. Sorun resmin var olması değil; nasıl hazırlandığı, ne zaman yüklendiği ve tarayıcıyı ne kadar beklettiğidir.

Tek görsel neden sitenin en ağır parçası olur?

Tasarım aşamasında görseller genellikle olabilecek en yüksek kalitede teslim edilir. Tasarımcının ekranında mükemmel görünen o fotoğraf, çoğu zaman gerçek boyutundan kat kat büyük bir dosyadır. Birisi "güzel olsun" diye 4000 piksel genişliğinde bir görseli olduğu gibi sayfaya koyduğunda, ziyaretçi ekranda onun sadece küçük bir kısmını görse bile dosyanın tamamını indirmek zorunda kalır.

Üstelik bu görsel genellikle ekranın en üstünde, yani sayfa açılır açılmaz görünmesi gereken bölgededir. Yani tarayıcı onu ertelenebilir bir ayrıntı olarak değil, "önce bunu göstermeliyim" diye ele alır. İşte sitenizin açılış hızını belirleyen kritik an tam da burasıdır.

Tarayıcı o görseli beklerken ne olur?

Bir sayfa açıldığında tarayıcı, ekranda ilk görünen büyük öğeyi ne kadar hızlı çizebildiğine bakar. Ana sayfadaki dev görsel bu "ilk büyük öğe" olduğunda, siz ne kadar yazı ve buton yüklerseniz yükleyin, sayfa görsel inene kadar yarım kalmış gibi durur.

Mobil tarafta durum daha da ağırdır

Masaüstünde hızlı bağlantıyla fark edilmeyen bu yük, mobil veride çok daha belirgindir. Küçük bir ekrana gereğinden büyük bir dosya indirmek hem zamanı hem veriyi boşa harcar. Ziyaretçi henüz tek bir satır okuyamadan sabırsızlanır ve ayrılır.

Hız bir özellik değil, ilk izlenimin kendisidir.

Yaygın yanılgı ve doğrusu

Fark, görseli kaldırmakta değil; onu doğru hazırlamakta. İyi optimize edilmiş bir kahraman görsel, hem etkileyici görünür hem de sayfayı yavaşlatmaz.

Doğru görseli hazırlamanın adımları

1. Gerçek boyutu belirleyinGörselin ekranda kapladığı en geniş alanı ölçün ve dosyayı o boyuta göre hazırlayın; gereğinden büyük indirme yapmayın.
2. Modern formata geçinAynı kaliteyi çok daha küçük dosyayla veren güncel görsel formatlarını kullanın.
3. Önceliği doğru verinİlk ekranda görünen görseli öncelikli yükleyin, ekranın altındaki görselleri ise ihtiyaç anına erteleyin.
4. Farklı ekranlara farklı boyut sununTelefona küçük, masaüstüne büyük sürüm gidecek şekilde kurgulayın.

Ölçmeden iyileştirme yapmayın

Bir sayfanın gerçekten neyi beklettiğini tahminle değil, ölçerek görürsünüz. Çoğu zaman suçlanan "sunucu yavaş" cümlesinin arkasında aslında tek bir ağır görsel çıkar. Sitenizin bu açıdan nerede durduğunu merak ediyorsanız, sitenizin hızını ve sağlığını dakikalar içinde kontrol ederek işe başlayabilirsiniz.

Görsel optimizasyonu çoğu zaman tek başına bir iş değildir; sitenin kurulduğu altyapıyla, tema yapısıyla ve kod kalitesiyle iç içedir. Bu yüzden kalıcı hız, dağınık yamalarla değil, sağlam kurulmuş bir kurumsal web altyapısıyla gelir.

Hızı baştan doğru kurmak

Ana sayfadaki o tek görsel, aslında sitenizin tamamına dair bir ipucudur: Hız, sonradan eklenen bir süs değil, baştan verilen bir karardır. Doğru hazırlanmış bir görsel, ziyaretçiyi karşılayan ilk saniyeyi hızlandırır; yanlış hazırlanmış bir görsel ise en iyi içeriği bile görünmez kılar.

Sitenizin açılış hızını ciddiye almak istiyorsanız, önce bu küçük ama belirleyici ayrıntıdan başlamak en sağlıklısı. Sitenizin neyi beklettiğini birlikte bakıp net bir yol haritası çıkarmak için bize ulaşın.