Web için video: boyut, hız ve ondan önce gelen karar

Bu sayfanın videoya ihtiyacı var mı?

Duruşumuz: çoğu iş sayfası videoyu otomatik oynatmamalı ve birçoğu hiç video taşımamalı.

Bunu söyleyen, video üreten ve satan bir ajans; güvenilir olmasının sebebi tam olarak bu. Arka planında video olan bir sayfa, ziyaretçi tek kelime okumadan önce megabaytlar çekmiş ve işlemcisini kare çözmeye koşmuştur. O video, metnin ve görselin söyleyemediği bir şeyi söylüyorsa bu bedel doğrudur. Yalnızca atmosferse değildir.

Üç soru, bu sırayla, kararı verir. Birincisi, bu video bir sabit görselin ve iki cümlenin göstermediği neyi gösteriyor; cevap bir demo ya da bir süreç gibi hareketse video doğrudur. İkincisi, bunu ziyaretçi mi istiyor yoksa biz mi; fiyat görmeye gelen biri şirket tanıtım filmini istemez. Üçüncüsü, hiç oynamazsa ne kaybedilir; cevap hiçbir şeyse video süstür.

Bu sitede o üç soru bizi, temada tek bir video etiketinin bulunmadığı ve bütün figürlerin HTML ve CSS ile çizildiği bir yere getirdi. Video satıyoruz ve kendi videomuz başka bir yerde duruyor, satış yapan sayfaların yükleme yolunda değil.

Video, sayfa hızını tam olarak nereden vurur?

İki yerden ve yalnızca biri herkesin aklına gelen yer.

Birincisi ağırlıktır ve tanıdıktır: indirilen baytlar sayfanın geri kalan kaynaklarıyla aynı bant genişliği için yarışır ve ortalama bir bağlantıda mobilde bu yarışı video kazanır, çünkü daha büyüktür. İkincisi daha az bilinir ve daha önemlidir: videonun kendisi sayfanın LCP ögesi olabilir. web.dev belgeleri video ögesini LCP adayı olarak sayar ve onun için hangisi önce gelirse o kullanılır: poster görselinin yüklenme zamanı ya da ilk karenin gösterim zamanı.

Yani sayfanın üst kısmındaki en büyük şey bir videoysa, Google'ın sayfa deneyimi olarak ölçtüğü metrik ona bağlanmıştır. web.dev'in iyi bir LCP için verdiği eşik, yüklemelerin 75. yüzdeliğinde 2,5 saniye ya da altıdır; 4 saniyenin üstü zayıf sayılır.

Pratik sonuç iki satırdır. Video otomatik oynamıyorsa ona mutlaka bir poster verin, çünkü o zaman LCP yolunda bir video indirmesi yerine optimize edilmiş bir görsel oturur. Ve o poster sayfadaki en büyük ögeyse web.dev, önceliğini fetchpriority="high" ile yükseltmeyi öneriyor.

Sürekli karşılaşılan bir tuzak: kötü bir poster ya da kendisi birkaç yüz kilobayt olan bir poster. Poster sıradan bir görseldir ve aynı optimizasyon kurallarına tabidir; sıkıştırmazsanız yaptığınız tek şey sorunu yerinden oynatmaktır.

Video etiketinin hangi ayarları gerçekten fark yaratır?

Dördü ve en büyük etki en az ayarlanana ait: preload.

web.dev'in video bölümü, kullanıcının başlattığı oynatma için açıkça preload="none" diyor. Bu tek nitelik, sayfadaki en ağır indirmeyi yükleme yolundan çıkarır.

Poster ikincisidir. MDN, poster olmadan ilk kare hazır olana kadar hiçbir şeyin görüntülenmediğini, sonra o ilk karenin poster olarak gösterildiğini söylüyor; yani postersiz ya boş bir dikdörtgeniniz olur ya da dosyayı daha erken getirmek zorunda kalırsınız.

Otomatik oynatma üçüncüsüdür ve bir ayardan çok bir karardır. web.dev, autoplay'in yalnızca gerektiğinde ve kullanıcının öngörülen bir ihtiyacının sonucu olarak kullanılması gerektiğini yazıyor. MDN ayrıca modern tarayıcıların sesi kapatılmamış video için otomatik oynatmayı engellediğini hatırlatıyor; yani sesli otomatik oynayan bir video pratikte hiç oynamaz.

Ve GIF yerine kullanım dördüncüsüdür; otomatik oynatmanın neredeyse her zaman doğru olduğu tek yer. Kısa, döngülü bir animasyon istiyorsanız GIF yerine autoplay, muted ve loop ile sessiz bir video kullanın. Tam bu durum için web.dev, ffmpeg'in -an bayrağıyla ses akışını tamamen çıkarmayı öneriyor, çünkü ses akışını kaldırmak dosya boyutunu küçültür.

Kontrol listelerine girmeyen bir nokta: bu dört ayar, kötü kodlanmış bir dosya için hiçbir şey yapmaz. Çözünürlüğü gerçekten gösterilene indirin; telefonda 360 piksel genişliğindeki bir kareye 1080 piksellik bir dosya göndermeyi bu niteliklerin hiçbiri telafi etmez.

Dosya nerede dursun: kendi sunucunuz mu, bir platform mu?

İki seçim de geçerlidir ve iki farklı durum içindir; onları ayıran şey denetim ile yüktür.

Dosyayı kendiniz sunduğunuzda her şey sizindir: başkasının oynatıcısı yok, fazladan betik yok, logo ve sonraki video önerisi yok, ziyaretçi verisi başka bir yere gitmiyor. Bedeli de aynı ölçüde açık: bant genişliği ve trafik, HTML'inizi sunan sunucudan çıkar ve paylaşımlı barındırmadaki uzun bir video, bu kararın kırıldığı yerdir.

Bir platform kullandığınızda yükü onlar taşır ve uyarlanabilir akışı ile çoklu kalite sürümlerini bedavaya alırsınız. Karşılığında sayfaya kendi betiğiyle üçüncü bir köken katılır, oynatıcının görünümü size ait değildir ve o oynatıcının içinde olan her şey o hizmetin kurallarına uyar.

Kullandığımız kural basit: yaklaşık on saniyeden kısa, dekoratif ya da gösterim amaçlı her şey sessiz otomatik oynatmayla kendi dosyamız olarak gider; birinin oturup izlediği uzun her şey, bir poster görselinin ve tembel yüklemenin arkasında bir platforma gider, böylece oynatıcı betiği ancak tıklamadan sonra gelir.

Ve ikisini de vuran teknik bir tuzak: videoyu kendisi sayfa önbelleğinde olan bir sayfanın içine koymak. Video dosyası HTML önbelleğinden gelmez ve kendi yolu vardır; dolayısıyla bir aracın verdiği hız puanı videoyu hiç yansıtmıyor olabilir. Bu yüzden her değişiklikten sonra sayfayı tarayıcınızın geliştirici araçlarında kısıtlı ağla bir kez açın ve gerçekte neyin indiğine bakın.

90 puan ne demek ve neyi söylemez?

Lighthouse performans puanı 0 ile 100 arasındadır ve Chrome'un kendi belgeleri bantları şöyle koyuyor: 0 ile 49 zayıf, 50 ile 89 iyileştirme gerektiriyor, 90 ile 100 iyi. Hedeflediğimiz sayı yeşil bandın alt kenarı, yani 90.

Şimdi puanın söylemediği şey, ki puanın kendisinden daha önemlidir. Lighthouse bir laboratuvar testidir: tek bir koşu, benzetilmiş bir cihazda, benzetilmiş bir ağ üzerinden. Gerçek kullanıcılarınız farklı telefonlarda ve farklı ağlardadır ve bu, bu sayıda değil saha verisinde görünür.

Videoda bu boşluk her zamankinden geniştir, çünkü kullanıcı davranışı denklemin parçasıdır. Videosu preload="none" olan bir sayfa laboratuvarda mükemmel puan alır, çünkü kimse tıklamaz. Tıklayan kişinin gerçek deneyimi o puanın içinde hiç yoktur.

Bu yüzden puanı hedef değil, alarm olarak okuyun. 90'ın altındaysa yükleme yolunda bakılması gereken bir şey var demektir. 90'ın üstü yalnızca yükleme yolunun temiz olduğu anlamına gelir; videonun tıklamadan sonra başlaması ne kadar sürüyor, onu ayrıca ölçersiniz. Bütün bunların bir hız projesinin neresine oturduğunu görmek isterseniz site hızlandırma sayfası süreci anlatıyor.