Bütçede Medya Performansını Nasıl Artırırsınız?

Bu makale, topluluğa herhangi bir tarayıcı, cihaz ve bant genişliğinde dijital deneyimlerini hızlı ve kolay bir şekilde oluşturma, yönetme ve sunma konusunda yardımcı olan Cloudinary'deki sevgili arkadaşlarımız tarafından desteklenmiştir. Teşekkür ederim!

Amerikalı bilim adamı Mason Cooley, hayatın zor bir gerçeğini ustaca tanımladı: "Bütçe, eğlenceyi paradan alır." Kuşkusuz, medya web sitelerini canlandırıyor, bir sayfada kalma ve sık sık tekrar ziyaret etme ayartmaları şöyle dursun, çekicilik, heyecan ve entrika ekleyerek web sitelerini canlandırıyor. Bununla birlikte, uzun vadede kontrol dışı harcamalar nasıl kötüyse, bütçesiz dijital medya da site performansını düşürür.

Konuyla ilgili bir örnek: Sayfa yüklemesinin yalnızca bir saniyelik yavaşlaması, Amazon'un yıllık satışlarında 1,6 milyar dolara mal olabilir. Sayfa yükleme hızını etkileyen birçok faktörden medya önemli bir tanesidir. Bu nedenle, medyanın optimizasyonuna öncelik verilmesi için ciddi bir ihtiyaç vardır. Paranızı doğruca bu göreve harcayarak ve medyanızı bütçeleyerek, uzun vadede önemli tasarruflar ve avantajlar elde edeceksiniz.

Performans Bütçeleri

“Performans bütçesi '... tam da kulağa nasıl geliyorsa: sayfanıza bir 'bütçe' belirlersiniz ve sayfanın bunu aşmasına izin vermezsiniz. Bu belirli bir yükleme süresi olabilir, ancak bütçeyi istek sayısına veya sayfanın boyutuna böldüğünüzde genellikle daha kolay bir görüşme olur."

— Tim Kadlec

Bir web deneyimi planlama ve performans düşüşünü önleme mekanizması olarak bir performans bütçesi aşağıdaki ölçütlerden oluşabilir:

• Genel sayfa ağırlığı,
• Toplam HTTP isteği sayısı,
• Belirli bir mobil ağda sayfa yükleme süresi,
• İlk Giriş Gecikmesi (FID)
• İlk Contentful Paint (FCP),
• Kümülatif Düzen Kaydırma (CLS),
• En Büyük İçerikli Boya (LCP).

Vitaly Friedman, web performansını etkileyen bileşenleri ve optimizasyon tekniklerine ilişkin faydalı ipuçlarını açıklayan mükemmel bir kontrol listesine sahiptir. Bu bileşenlere aşina olmak, performans hedefleri belirlemenizi sağlayacaktır.

Açıkça belgelenmiş performans hedefleriyle çeşitli ekipler, içeriğin en uygun şekilde sunulması hakkında anlamlı konuşmalar yapabilir. Örneğin, bir bütçe, bir sayfanın beş resim mi yoksa üç resim ve bir video mu içermesi gerektiğine ve yine de planlanan sınırlar içinde kalması gerektiğine karar vermelerine yardımcı olabilir.

Ancak, bağımsız bir metrik olarak bir performans bütçesine sahip olmak pek yardımcı olmayabilir. Bu yüzden performansı organizasyonel hedeflerle ilişkilendirmeliyiz.

İş performansı

Optimal olmayan video ve resimlere çok fazla bayt harcarsanız, zengin medya deneyimi artık o kadar zengin olmayacaktır. İnsanları satın almaya ikna etmek, onları eğitmek, motive etmek veya yardım ve gönüllü aramak gibi sonuçlara ulaşmak için bir kuruluş vardır. Web'de varlığı olan herkes, çeşitli performans ölçümlerinin iş metrikleri üzerindeki etkisi arasındaki ilişkiyi takdir edecektir.

WPOStats, performansta - birkaç yüz milisaniyeden saniyeye - bir düşüşün, yıllık satışlarda büyük bir düşüşe neden olabileceğini gösteren, kelimenin tam anlamıyla yüzlerce vaka çalışmasını vurgulamaktadır. Bu tür bir ilişki kurmak, performansın iş üzerindeki etkisini takip etmeye ve nihayetinde kuruluşlar için bir performans kültürü oluşturmaya büyük ölçüde yardımcı olur.

Benzer şekilde, yavaş sitelerin dönüşüm üzerinde çarpıcı bir etkisi olabilir. Çevrimiçi işletmelerin karşılaştığı zorlu bir zorluk, performans bütçesi dahilinde kalarak izleyiciyle etkileşim kurmak arasında doğru dengeyi bulmaktır.

Bu durumda, izleyici katılımı için kritik bir bileşenin optimize edilmiş görsel medya olması şaşırtıcı değildir; örneğin, ilgili, ilginç ve çekici görsellerle birlikte ürününüz veya hizmetiniz hakkında bir hikaye oluşturan büyüleyici bir video.

MIT nörobilimcilerine göre, beynimiz görsel medyayı 13 milisaniyeden daha kısa sürede özümseyip anlayabiliyor, oysa metnin anlaması, genellikle onu yeniden okuduktan ve başka yerlere çapraz referans verdikten sonra ortalama 3,3 dakikayı bulabiliyor. O halde mikro video içeriğinin (genellikle sadece 10-20 saniye uzunluğunda) genellikle büyük etkileşimler ve dönüşüm kazanımları sağlamasına şaşmamalı.

Videoların Temyizi

Online alışveriş yaparken detaylı ürün görsellerini görmeyi bekliyoruz. Yıllardır, örneğin ürünün nasıl kullanılacağını veya belki nasıl monte edileceğini gösteren veya gerçek hayattaki kullanım örneklerini gösteren videolarla tamamlanan ürünlere göz atmayı tercih etmeye başladım.

Kişisel deneyimimin yanı sıra, birçok araştırma video içeriğinin önemini doğruluyor:

• Tüketicilerin %96'sı çevrimiçi satın alma kararları verirken videoları faydalı buluyor.
• Çevrimiçi alışveriş yapanların %79'u, bir web sayfasındaki metni okumak yerine bir ürün hakkında bilgi almak için video izlemeyi tercih ediyor.
• Doğru ürün videosu, dönüşümleri %80'in üzerinde artırabilir.

Videoların web üzerinden teslimi hakkında konuşurken,

“Ortalama video ağırlığı, her yıl masaüstünden çok mobil cihazlarda önemli ölçüde artıyor. Bazı durumlarda, mobil cihazların genellikle yüksek çözünürlüklü ekranları olduğundan bu garanti edilebilir, ancak bunun nedeni yalnızca HTML kullanarak farklı video boyutları sunma yeteneğinin olmaması da olabilir. Web'deki birçok büyük video, pazarlama sayfalarına elle yerleştirilir ve uygun boyutları sunmak için karmaşık medya sunucularına sahip değildir; bu nedenle, gelecekte, duyarlı görüntülerde gördüğümüz video dağıtımı için benzer basit HTML özelliklerini göreceğimizi umuyorum. ”

— Scott Jehl

Aynı düşünce, Conviva'nın 2020 4. Çeyrek Akış Durumu (kayıt gerekli) tarafından da aktarıldı ve cep telefonlarının diğer cihazlara göre %20 daha fazla arabelleğe alma sorunu , %19 daha yüksek video başlatma hatası ve %5 daha uzun başlatma süresi gördüğünü belirtti.

Görüntü oluşturma sorunlarının yanı sıra, özellikle tarayıcının en uygun biçimlerini sağlayamıyorsanız, video dağıtımı bant genişliği maliyetlerini de artırabilir. Ayrıca, düşük gecikme süreleri için kullanıcıları en yakın uç bölgelere eşlemek için bir içerik dağıtım ağı (CDN) veya birden fazla CDN kullanmıyorsanız (en düşük düzeyde yönlendirme adı verilen bir uygulama), videonun başlangıcını yavaşlatabilirsiniz.

Benzer şekilde, optimize edilmemiş görüntüler, sayfa şişkinliğinin önde gelen nedeniydi. Web Almanac'a göre, mobil veya masaüstü cihazlara gönderilen görüntü baytlarındaki fark çok küçüktür, bu da fazladan baytlara gerçekten ihtiyaç duymayan cihazlar için daha fazla bant genişliği kaybı anlamına gelir.

Kuşkusuz, ilgi çekici ancak optimize edilmemiş bir içerikle aşırıya kaçmak iş hedeflerine zarar verir ve işte bu noktada güzel dengeleme sanatı devreye girer.

Performansı Medya İçeriğiyle Dengeleme Sanatı

Zengin medya, kullanıcı katılımını artırabilse de, bunları sunmanın maliyetini web sitenizin performansı ve iş hedeflerinizle dengelememiz gerekir. Alternatiflerden biri, videoyu YouTube veya Vimeo gibi bir üçüncü taraf aracılığıyla barındırmak ve sunmaktır.

Bununla birlikte, bant genişliği tasarruflarına rağmen, bu yaklaşımın bir bedeli vardır. İçerik sahibi olarak, tamamen özelleştirilmiş bir marka deneyimi oluşturamaz veya kişiselleştirme sunamazsınız. Ve elbette, resimlerinizi barındırmanız ve teslim etmeniz gerekiyor.

İçeriğinizi boşaltmanız gerekmez. Ayrıca başka seçenekler de mevcuttur. Aşağıdakileri yaparak sisteminizi optimum medya dağıtımı için yenilemeyi düşünün:

Mevcut kullanımınızı anlayın

Web sayfalarınızın ağırlığını ve medya varlıklarının boyutunu inceleyin. Web araştırma uzmanı Tammy Everts, sayfaların mobil cihazlar için 1 MB'den ve diğer her şey için 2 MB'den küçük olduğundan emin olmanızı önerir. Ayrıca, kritik sayfalarda görüntülenen kaynakları tanımlayın.

Örneğin, bir metin paragrafını ve ilişkili resimleri kısa bir videoyla değiştirebilir misiniz? Bu karar iş hedeflerinizi nasıl etkiler? Bu aşamada, Gerçek Kullanıcı İzleme (RUM) ve Analytics'inizi gözden geçirmeniz ve daha yüksek dönüşüm ve etkileşim oranları sağlayan kritik sayfaları belirlemeniz gerekebilir.

Ayrıca, LightHouse gibi araçlarla araç setinizin bir parçası olarak Google'ın Önemli Web Verilerini (CWV'ler) sentetik olarak izlediğinizden emin olun. CWV'leri, CrUX gibi gerçek kullanıcı izleme (RUM) yoluyla da ölçebilirsiniz. CWV'ler aynı zamanda Google için tarayıcılara bir sinyal olacağından, bu metrikleri izlemek ve optimize etmek mantıklıdır: En Büyük İçerikli Boyama (LCP), İlk Giriş Gecikmesi (FID) ve Kümülatif Düzen Kayması (CLS).

Doğru formatı sunun

Görüntüleri veya videoları, görüntüleme cihazı veya tarayıcı için boyut ve çözünürlük açısından en uygun biçimde sunun. Bunun için bir görüntü CDN'sine ihtiyacınız olabilir. Alternatif olarak, WebM, AVIF, JPEG-XL, HEIC vb. gibi değişkenler oluşturun ve istekte bulunan Kullanıcı Aracısı ve Kabul Et başlıklarına göre doğru içerik türünü seçerek sunun.

Tek seferlik dönüşümler için Squoosh.app veya avif.io gibi araçları deneyebilirsiniz. İlgili bir uygulama, animasyonlu GIF'leri videolara dönüştürmektir. Daha fazla bilgi için bu Web.dev makalesine bakın. Video yayınlamayı işlemek için bir iş akışı kurmayı denemek ister misiniz? Videoyu Boyut ve Kalite İçin Optimize Etme makalesindeki harika ipuçlarına bakın.

Doğru boyutta servis yapın

Mobil cihazlardaki resimlerin %41'den fazlası yanlış boyutlandırılmış. Bu nedenle, sabit bir genişlik sunmak yerine, Lazysizes gibi araçlarla resimlerinizi ve videolarınızı kap boyutuna uyacak şekilde kırpın. Daha da iyisi, görüntüleri kırparken ilgi alanlarını algılayabilen AI araçları size zaman ve emekten tasarruf sağlayabilir. Ayrıca ekranın alt kısmındaki görüntüler için yerel tembel yüklemeden de yararlanabilirsiniz.

Videolarınıza altyazı ekleyin

Videoların neredeyse %85'i ses olmadan oynatılıyor. Bunlara altyazı eklemek yalnızca erişilebilir bir deneyim sağlamakla kalmaz, aynı zamanda izleyicilerin dikkatini çeker ve katılımı artırır. Ancak, videoları metne dönüştürmek sıkıcı bir iş olabilir; Yapay zeka tabanlı bir transkripsiyon hizmetiyle çalışabilir ve iş akışını otomatikleştirmek yerine onu iyileştirebilirsiniz.

Birden fazla CDN aracılığıyla teslim edin

CDN'ler son mil gecikmesini azaltabilir, bir videonun başlangıç ​​zamanını kısaltabilir ve potansiyel olarak arabelleğe alma sorunlarını azaltabilir. Citrix tarafından yapılan bir araştırmaya göre, çoklu CDN stratejisi gecikmeyi daha da azaltabilir ve CDN'nin uç düğümlerinde yerel kesintiler olması durumunda sürekli kullanılabilirlik sunabilir.

Birden çok gizli araçtan yararlanmak yerine, medyayı etkin ve verimli bir şekilde optimize ederek, çoklu CDN uç düğümleri aracılığıyla doğru biçimi ve kaliteyi sunan Cloudinary'nin Medya İyileştiricisi gibi bir ürünü keşfedebilirsiniz. Diğer bir deyişle, Media Optimizer hem kaliteyi hem de boyutu optimize ederek küçük dosyalarda yüksek görsel aslına uygunluk sunar.

Aşamalı olarak video oluştur

YouTube'da otomatik olarak oynatılan önizleme videolarının, video izlenme süresini %90'ın üzerinde artırdığı görülmüştür. Otomatik video oynatmanın birkaç avantajı ve birçok dezavantajı vardır, bu nedenle ne zaman kullanıp ne zaman kullanmayacağınız konusunda dikkatli olmak önemlidir. Videoyu en az duraklatma seçeneğine sahip olmak önemlidir.

Sayfa boyutu bütçesini dengelemenin iyi bir yolu, önce yapay zeka tarafından oluşturulan video önizlemelerini ve yalnızca poster resimlerini sunmak, yalnızca kullanıcı videoyu tıkladığında tam videoyu yüklemek olabilir. Bu şekilde gereksiz indirmeleri ortadan kaldırabilir ve sayfa yüklemelerini hızlandırabilirsiniz.

Alternatif olarak, başlangıçta bir önizleme videosu yükleyin ve oynatıcının tam sürümü otomatik olarak oynatmasına izin verin. Önizleme tamamlandıktan sonra oynatıcı, Ağ Bağlantısı API'si ile cihazın bağlantı türünü kontrol eder ve kullanıcı iyi bir bağlantıya sahipse, kaynağı önizlemeden gerçek videoya değiştirir.

Demo için örnek sayfayı inceleyebilirsiniz. İşte size bir ipucu : CDN'ler ağ bağlantı türlerini daha güvenilir bir şekilde algılayabildiğinden, üretim kalitesi kodunuz, istemci kodunuzun uzun biçimli videoyu aşamalı olarak yükleyebildiği ağ hızını algılamak için CDN'den yararlanabilir.

Toplama

Yolun aşağısında, hikayeleri kelimelerin yapamayacağı şekilde anlatma konusundaki olağanüstü yeteneği sayesinde, görsel medya web siteleri ve mobil uygulamalar için baskın bir unsur olmaya devam edecek. Ancak, teslim edilecek doğru içeriği belirlemek hem iş stratejinize hem de site performansınıza bağlıdır.

“Performans bütçesi, hangi içeriğin görüntülenmesi gerektiğine ilişkin kararlarınıza rehberlik etmez. Bunun yerine, bu içeriği nasıl görüntülemeyi seçtiğinizle ilgilidir. Bir sayfanın ağırlığını azaltmak için önemli içeriği tamamen kaldırmak bir performans stratejisi değildir.”

— Tim Kadlec

Bu akılda tutulması gereken sağlam bir tavsiye.