Web Sitenizde Görsel ve Video Kullanımı Site Hızını Nasıl Etkiler?

Özetle

• Görselin piksel ölçüsü ile dosya boyutu farklıdır; ikisini de kontrol edin.
• Fotoğraflar için WebP veya AVIF, çizim ve şeffaflık için PNG ya da SVG değerlendirin.
• İlk ekranda görünen ana görseli geç yüklemeyin; aşağıdaki görseller için gecikmeli yükleme kullanın.
• Otomatik başlayan video, özellikle mobil bağlantıda, sayfanın açılışını ve veri kullanımını olumsuz etkileyebilir.
• Değişiklikleri aynı sayfayı telefonda ve PageSpeed Insights'ta tekrar ölçerek doğrulayın.

Görseller sayfanın açılışını neden yavaşlatır?

Bir görsel, sunucudan ziyaretçinin telefonuna aktarılması gereken bir dosyadır. Dosya ağırlaştıkça indirme, tarayıcıda çözme ve ekranda gösterme işi artar; özellikle mobil bağlantıda bunun sayfanın algılanan açılışına etkisi belirginleşebilir. Hızı yalnızca görsel sayısı belirlemez: ekranda kapladığı alan, dosyanın kodlanma biçimi, sunucunun yanıtı ve ziyaretçinin bağlantısı da önemlidir.

İki kavramı ayırın. Piksel ölçüsü, görselin en ve boy bakımından çözünürlüğüdür; dosya boyutu ise indirilmesi gereken veri miktarıdır. Büyük çözünürlüklü bir fotoğraf ekranda küçük gösterilse bile dosyası büyük kalabilir. Sıkıştırma, görüntü verisini daha az yer kaplayacak biçimde saklama işlemidir; uygun ayarda yapılırsa ziyaretçi fark etmeden dosya küçülebilir.

Bu yüzden “sayfada kaç fotoğraf var?” sorusu tek başına yeterli değildir. Küçük, sıkıştırılmış ve aşağıda bulunan birkaç görsel, açılış ekranındaki tek bir büyük, gereksiz çözünürlüklü fotoğraftan daha az sorun çıkarabilir. Ama her görsel de sayfaya bir iş yükü ekler. Her birinin ziyaretçiye bilgi verip vermediğini ve ne zaman yüklenmesi gerektiğini ayrı değerlendirin.

Hangi görsel formatını ne zaman seçmeliyim?

Fotoğraf, logo, şeffaf ürün çizimi ve hareketli içerik için aynı dosya biçimini seçmek zorunda değilsiniz. Formatı görselin türüne göre belirleyin; sonra dosyanın görünümünü ve boyutunu gerçek telefonda kontrol edin. Aşağıdaki tablo, seçim için pratik bir başlangıçtır; tek başına format seçimi dosyanın hafif olacağını garanti etmez.

WebP ve AVIF, fotoğraf gibi görselleri daha az veriyle sunmak için değerlendirilebilen biçimlerdir. Aralarındaki sonuç, görselin içeriğine ve dışa aktarma ayarına göre değişir; aynı fotoğraftan iki dosya üretip boyutlarıyla birlikte görünümünü karşılaştırın. AVIF kullandığınızda sitenizin ve ziyaretçinin tarayıcısının sunum biçimini doğru işlediğini doğrulayın; bir dosyanın adında biçimin yazması, her koşulda düzgün gösterileceği anlamına gelmez.

JPEG, şeffaf arka plan gerektirmeyen fotoğraflar için yerleşik bir seçenektir; yeniden kaydetme sırasında sıkıştırma düzeyi arttıkça ayrıntılar bozulabilir. PNG, şeffaf alan veya keskin kenarlı grafik gerektiğinde anlamlı olabilir; büyük fotoğrafları PNG olarak saklamak dosyayı gereksiz yere ağırlaştırabilir. SVG ise vektör çizimin tarifidir; fotoğraf dosyasının yerine kullanılmaz. SVG dosyasını yalnızca kaynağına güvendiğiniz simge ve logolarda kullanın.

Biçimi dönüştürdükten sonra eski dosyayı silip yenisini yüklemek yetmeyebilir. Sayfada kullanılan görselin gerçekten yeni dosya olduğunu, küçük resimlerin ve sosyal paylaşım önizlemesinin de doğru kaldığını kontrol edin. Bir görsel yönetim sistemi (CMS, sayfa ve içeriklerin yönetildiği yazılım) farklı boyutlar üretebilir veya önbellekte eski sürümü gösterebilir. Bu nedenle dosyayı değiştirdikten sonra sayfayı gizli pencerede ve telefonda açın.

Video siteyi hangi durumda yavaşlatır?

Video, fotoğraftan daha büyük bir dosya ve daha fazla oynatma işi gerektirebilir. Sayfa açılır açılmaz videonun dosyasını indirmek veya otomatik oynatmak, ziyaretçi videoyu izlemese bile mobil bağlantıda yük oluşturabilir; mümkünse önce görsel bir önizleme gösterin ve oynatmayı ziyaretçinin başlatmasına izin verin.

İşletmenizi tanıtan kısa bir video, bir hizmetin nasıl yapıldığını gösteriyorsa yararlı olabilir. Ancak sayfada yalnızca dekor olarak dönen, sesi kapalı ve bilgi taşımayan bir video, ağır yüküne karşılık ziyaretçiye az şey sunabilir. Videoyu eklemek için “hareketli dursun” yerine “müşterinin hangi sorusunu yanıtlıyor?” diye sorun. Yanıt net değilse iyi bir fotoğraf ve kısa açıklama daha uygun olabilir.

Video kullanacaksanız kapak görselini de optimize edin. Oynatıcı henüz açılmadan görünen bu görsel, ilk ekranın ana içeriği olabilir. Kapakta videonun tamamını yüklemek yerine tek bir uygun kare kullanın; oynatma düğmesinin telefonda anlaşılır ve dokunulabilir olduğunu kontrol edin. Video açılmazsa sayfanın kalan içeriği ve iletişim bilgileri yine görünür olmalıdır.

Dosya boyutunu kaliteyi bozmadan nasıl azaltırım?

Önce görseli sayfada gerçekten gösterileceği ölçüye yakın hazırlayın, sonra uygun biçime dönüştürüp sıkıştırın. Sıkıştırma ayarını artırmak dosyayı küçültebilir ama yazı, saç, kumaş dokusu veya ürün kenarlarında bozulma yaratabilir; bu yüzden dosya boyutuna bakarken görseli de büyütüp inceleyin.

İşletme sahibinin uygulayabileceği basit sıra şöyledir: orijinal dosyayı saklayın, sayfada nerede kullanılacağını belirleyin, gereksiz kırpma alanlarını kaldırın, ekranda gösterilecek ölçüye göre yeniden boyutlandırın, uygun biçimde dışa aktarın ve sayfada doğrulayın. Kaynağı saklamak önemlidir; sonradan başka bir kullanım için daha büyük veya farklı kırpılmış sürüm gerekebilir.

Telefonla çekilen fotoğraflar, sayfanın ihtiyacından çok daha büyük çözünürlükte olabilir. Bunları doğrudan yüklemek, sayfada daha kaliteli bir deneyim sağlayacağı anlamına gelmez. Görseli daraltırken yalnızca sayfada görünen alanı dikkate alın; örneğin ana sayfada yatay bir kapak olarak kullanılan fotoğraf ile ürün kartında küçük gösterilen fotoğrafın ihtiyacı aynı değildir.

Görüntü kalitesini denetlemek için sayfayı önce normal ölçekte açın, sonra görseli büyütüp kenarlara ve yazılara bakın. Renk geçişlerinde bloklaşma, küçük yazılarda bulanıklık veya saç ve kumaş gibi ayrıntılarda kayıp varsa sıkıştırma fazla olmuş olabilir. İşletme fotoğrafında müşterinin anlaması gereken şey bir ürünün rengi, bir kliniğin temizliği veya yapılan işin ayrıntısıysa, bu bilgi kaybolacak kadar sıkıştırmayın.

Görseli yükledikten sonra dosya boyutunu ve sayfada kullanılan sürümü kontrol edin. Bazı site kurulumları yüklenen büyük görseli otomatik küçültür; bazıları ise asıl dosyayı olduğu gibi sunar. Yönetim panelinizdeki ayarı bilmiyorsanız, dosyanın adını ve sayfada görüntülenen adresini bir geliştiriciye sorabilir, sonra PageSpeed Insights ile değişiklik öncesi ve sonrası ölçüm alabilirsiniz.

Telefonda gösterilecek görselin ölçüsünü nasıl seçmeliyim?

Görselin ölçüsü, ekranda kapladığı alana ve sayfa tasarımının onu nasıl kullandığına uymalıdır. Yatay kapak, kare hizmet kartı ve küçük logo için aynı kırpımı kullanmayın; telefonda yüzün, ürünün veya tabelanın kadraj dışında kalıp kalmadığını ayrıca görün.

Bir görsel her ekranda aynı biçimde kırpılıyorsa, telefon kullanıcısı önemli kısmı göremeyebilir. Örneğin bir ustanın yaptığı işi gösteren fotoğrafta aletin kendisi kesiliyorsa, fotoğrafın büyük olması değil doğru kadrajda olması gerekir. Masaüstü ve telefon için ayrı kırpım kullanmak, tek görseli zorla her alana uydurmaktan daha işlevsel olabilir.

Web sayfası farklı ekranlara uygun farklı görsel sürümleri sunabilir. Bu yaklaşımda telefon, gereksiz yere geniş masaüstü görselini indirmek zorunda kalmaz; fakat ayarın doğru kurulması gerekir. Küçük telefonda görselin bulanık görünmesi, yanlış sürümün seçildiğini; yalnızca büyük dosyanın yüklenmesi ise sayfanın farklı ekranlar için uyarlama sunmadığını gösterebilir.

Açılış ekranındaki büyük görsel neden daha kritik?

Sayfanın ilk görünen alanındaki görsel, ziyaretçi sayfayı açarken beklediği içeriklerden biridir. Bu görsel geç yüklenirse sayfanın ana içeriği de geç gelmiş gibi algılanabilir; bu nedenle önceliği yalnızca dosyanın güzelliğine değil, yüklenme sırasına da verin.

Birçok sitede ana sayfanın en büyük görseli otomatik kaydırılan bir görsel dizisi içindedir. Ziyaretçinin ilk anda göreceği tek bir fotoğraf yerine birden fazla büyük dosyayı yüklemek, daha fazla veri işi oluşturabilir. Kaydırma özelliğinin işletme açısından gerçek bir amacı yoksa tek, iyi seçilmiş görsel kullanmayı değerlendirin. Birden fazla görsel gerekiyorsa ilk görünenin hızlı ve doğru boyutta yüklendiğini kontrol edin.

İlk ekrandaki görseli “gecikmeli yükleme”ye dahil etmeyin. Gecikmeli yükleme, ekranda henüz görünmeyen görselleri ihtiyaç duyulana kadar bekletme yöntemidir; aşağıdaki içeriklerde yarar sağlayabilir. Ancak ziyaretçinin sayfayı açar açmaz görmesi gereken bir görseli de bekletirseniz, tasarruf yerine ana içeriğin görünmesini geciktirebilirsiniz.

Bir kahve dükkânı için menü veya mekânın doğru fotoğrafı, bir klinik için hizmeti açıklayan görsel, bir atölye için yapılan işi gösteren fotoğraf anlam taşıyabilir. Görsel, başlık ve iletişim çağrısıyla aynı amaca hizmet etsin. Sadece büyük olduğu için ana görsel sayılmamalıdır; ziyaretçinin ilk bakışta anlaması gereken bilgiye katkısı olmalıdır.

Sayfanın altındaki görselleri ne zaman yüklemeliyim?

İlk ekranda görünmeyen, aşağı kaydırınca karşılaşılan görseller için gecikmeli yükleme genellikle uygun bir tercihtir. Bununla ziyaretçinin henüz görmediği bölümlerin dosyaları sayfa açılırken gereksiz yere istenmez; ancak görsel ekrana yaklaşınca zamanında yüklenip yüklenmediğini telefonda sınayın.

Her görseli aynı biçimde geciktirmek doğru değildir. Ana başlık yanında görünen fotoğraf, sayfanın açılışındaki içerik olabilir; alt bölümlerdeki galeri fotoğrafları ise ziyaretçi kaydırana kadar bekleyebilir. Sayfa açılırken boş kutuların görünmesi, görsellerin geç gelmesi veya kullanıcı kaydırırken ani içerik sıçraması, ayarın incelenmesi gerektiğine işaret eder.

Görselin genişlik ve yükseklik bilgisini tanımlamak, tarayıcıya yer ayırmada yardımcı olur. Kullandığınız sistem bunu otomatik yapmıyorsa, geliştiricinizden görselin oranını ve alanını yükleme başlamadan belirlemesini isteyin. Sayfayı yalnızca hızlı bağlantıda değil, günlük kullandığınız telefonda da kaydırın. Fotoğraf geç mi beliriyor, metni itiyor mu, yoksa ziyaretçi görselin yerine boş alan mı görüyor?

Hesap: görsel boyutundaki fark sayfa yükünü nasıl değiştirir?

Aşağıdaki hesap, bir sayfadaki görsellerin toplam veri miktarını nasıl karşılaştırabileceğinizi gösteren örnek değerlerle hazırlanmıştır. Bu değerler bir site için ölçüm veya tipik sonuç iddiası değildir; kendi dosyalarınızın boyutlarını kullanarak aynı işlemi yapın.

Önce sayfadaki ilgili görsellerin dosya boyutlarını kilobayt cinsinden not edin. Sonra mevcut sürümlerin toplamını bulun; optimize edilmiş kopyaların toplamını ayrı hesaplayın. Fark, yalnızca görseller bakımından ne kadar daha az veri aktarılacağını gösterir. Bu hesap sunucu yanıtını, yazı tiplerini, reklamları, video oynatıcıyı veya bağlantı hızını ölçmez.

Tablodaki çarpma ve çıkarma işlemi, nasıl hesap yapılacağını gösterir; sonuçları sizin sitenize uyarlamayın. Örnek dosya boyutlarını kendi fotoğraflarınızla değiştirin. Eğer küçültülmüş sürümde fotoğrafın önemli ayrıntıları kayboluyorsa, yalnızca toplamı düşürmek başarı değildir. Müşteri fotoğrafı kullanarak ürünün rengini veya yapılan işin niteliğini değerlendiriyorsa, görüntü anlaşılır kalmalıdır.

Bu hesap, ziyaretçinin daha çok arama yapacağı veya daha fazla müşteri olacağı anlamına gelmez. Daha az veri indirmek, sayfanın yükü ve bekleme deneyimi bakımından iyileştirme göstergesidir; ziyaretçinin kararında fiyat, konum, güven, hizmet açıklaması ve iletişim kolaylığı gibi başka unsurlar da yer alır. Hızı tek başına satış ölçüsü saymayın.

Hangi belirti hangi görsel sorununa işaret eder?

Sayfayı kullanırken görülen sorun, çoğu zaman hangi ayarı incelemeniz gerektiğine dair ipucu verir. Önce belirtinin hangi cihazda ve sayfanın hangi bölümünde oluştuğunu not edin; sonra ilgili dosyanın ölçüsünü, biçimini, yüklenme sırasını ve sayfadaki alanını kontrol edin.

Bu tablo kesin teşhis aracı değildir. Örneğin büyük dosya, kötü bağlantıda daha görünür bir gecikme yaratabilir; fakat sunucunun yavaş yanıt vermesi veya sayfada çalışan başka kodlar da aynı hissi doğurabilir. Bir belirtiyi tek bir dosyaya bağlamadan önce aynı sayfayı farklı ağ koşullarında açın ve raporda belirtilen öğeyi kontrol edin.

Görsel optimizasyonunu hangi sırayla yapmalıyım?

Önce sayfanın gerçek ihtiyacını belirleyin, sonra dosyayı değiştirin ve aynı koşullarda tekrar ölçün. Bu sıra, gelişigüzel biçim dönüştürüp sayfanın görünümünü bozma riskini azaltır; neyi değiştirdiğinizi de takip etmenizi sağlar.

İlk adımda gereksiz görselleri de ayıklayın. Bir sayfada aynı hizmeti anlatan çok sayıda benzer fotoğraf varsa, ziyaretçiye yeni bilgi katmayanları kaldırın. Her fotoğrafın dosyasını küçültmek yerine gereksiz görseli çıkarmak daha doğrudan bir düzenlemedir. Ancak işletmenizin güvenini oluşturan gerçek mekân, ekip veya yapılan iş fotoğraflarını sırf dosya olduğu için kaldırmayın.

Değişiklikleri birer birer yapmak, sorunun hangi adımdan kaynaklandığını bulmayı kolaylaştırır. Önce görsel ölçüsünü ayarlayın; sonra sayfayı kontrol edin. Ardından biçim veya sıkıştırmayı değiştirin ve yeniden kontrol edin. Birden çok ayarı aynı anda değiştirdiğinizde görünüm bozulursa hangi işlemi geri alacağınızı kestirmek zorlaşır.

Siteyi sizin adınıza yöneten kişiye veya web geliştiricisine somut istek verin: hangi sayfada hangi görselin ağır olduğunu, telefonda ne gördüğünüzü ve neyin düzelmesini beklediğinizi söyleyin. “Siteyi hızlandırın” tek başına doğrulanabilir bir iş tanımı değildir. Değişiklik sonrası aynı sayfanın telefonda açıldığını, görselin doğru kaldığını ve raporun güncellendiğini birlikte kontrol edin.

Hız ölçümünü nasıl doğru yaparım?

Önce belirli bir sayfayı ve cihazı seçin, sonra ölçümü değişiklik öncesi ve sonrasında aynı biçimde tekrarlayın. PageSpeed Insights raporunu tek başına nihai hüküm gibi değil, hangi öğenin incelenmesi gerektiğini gösteren bir araç olarak kullanın.

Ölçüm yaparken ana sayfa ile hizmet sayfasını birbirine karıştırmayın. Her birinin farklı görselleri, yazı tipleri, harita veya video öğeleri olabilir. Aynı URL'yi kullanmak ve ölçüm tarihini not etmek, iki raporu anlamlı biçimde karşılaştırmaya yardım eder. Ayrıca gerçek telefonda siteyi açın; laboratuvar ölçümü, sizin müşterinizin kullandığı cihaz ve bağlantının aynısı değildir.

PageSpeed raporunda LCP, düzen kayması ve etkileşim gibi başlıklar görebilirsiniz. INP (etkileşimden sonraki boyamaya kadar geçen süreyi değerlendiren gösterge), ziyaretçinin dokunma veya tıklama sonrası gördüğü yanıtla ilgilidir; görsel dosyası tek başına bu göstergenin sonucu değildir. Büyük bir görsel sayfayı etkileyebilir, ancak ağır betikler veya başka kaynaklar da etkileşimi yavaşlatabilir. Raporun uyarısını ilgili sayfa bölümüyle eşleştirin.

Rapor puanı değiştiğinde her zaman görsel değişikliği sebep olmayabilir. Önbellek, ağ koşulları, sunucu yanıtı veya sayfaya sonradan eklenen bir bileşen ölçümü etkileyebilir. Önbellek, daha önce alınmış sayfa dosyalarının geçici olarak saklanmasıdır; güncel olmayan kopyayı göstermesi değişikliklerin hemen görünmemesine yol açabilir. Gerekirse sayfayı farklı tarayıcıda açın ve ölçümü tekrar edin.

Görseller arama ve erişilebilirlik açısından nasıl hazırlanmalı?

Görseli hız için küçültürken, ne anlattığını da koruyun. Dosya adı, görsel açıklaması ve sayfadaki yakın metin, hem ziyaretçinin hem de arama sistemlerinin içeriği anlamasına yardımcı olabilir; bunlar görselin boyutunu küçültmenin yerine geçmez.

Alternatif metin, görseli göremeyen ziyaretçiye içeriğini anlatan metindir. Fotoğraf anlam taşıyorsa kısa ve doğru bir açıklama yazın; görsel yalnızca süs amaçlıysa gereksiz açıklama eklemeyin. Örneğin işletmenizin hizmetini gösteren fotoğrafta ne yapıldığını belirtmek, “fotoğraf” gibi boş bir açıklamadan daha yararlıdır. Gerçekte olmayan özellikleri veya arama kelimelerini sırf görünürlük için metne doldurmayın.

Görsellerin çevresindeki başlık ve açıklamalar da önemlidir. Bir yemek fotoğrafı, menü ve içerik açıklamasıyla birlikte olduğunda müşteriye daha fazla bilgi verir; yalnızca süs olarak eklenirse ne sunduğunuzu anlatmaz. Benzer biçimde, yapılan işin fotoğrafına hizmet adı ve iletişim yolu eşlik etsin. Görsel, sayfadaki metnin yerini almamalıdır; telefon numarası veya önemli çalışma bilgilerini yalnızca görselin içine yazmayın.

Eski sitede görselleri değiştirirken neye dikkat etmeliyim?

Eski bir sitede görselleri optimize etmek, dosya değiştirmenin ötesinde düzen ve bağlantı kontrolü gerektirir. Önce yedek alın, önemli sayfaları ve görselleri listeleyin, sonra küçük bir grup üzerinde değişiklik yapıp görünümü doğrulayın. Yedek, sorun çıkarsa önceki site dosyalarına geri dönmeyi sağlayan saklanmış kopyadır.

Dosya adını değiştirirken sayfanın ona doğru bağlandığını kontrol edin. Eski adres başka yerde bağlantı olarak kullanılıyorsa, değişiklik bozuk görsel veya boş alan oluşturabilir. Yönetim panelindeki kütüphane, görselin hangi sayfalarda kullanıldığını göstermeyebilir; bu nedenle ana sayfa, hizmet sayfaları, galeri ve paylaşım önizlemelerini gözden geçirin.

Bir içerik yönetim sistemi, aynı görselin farklı boyutlarını otomatik üretebilir. Eski bir sürümü silerken sayfanın hâlâ o sürüme bağlı olmadığından emin olun. Dosya güncel görünse bile tarayıcı veya site önbelleği eski kopyayı gösterebilir. Önbelleği temizlemek, güncellenen dosyanın ziyaretçiye ulaşmasını sağlayabilir; bunu yapmadan önce kullanılan sistemin yönergelerini izleyin.

Kaynaklar

Sık sorulan sorular