Video performansı

Önceki modülde, yaşam döngüsü boyunca Resim reklamlar, web'de yaygın olarak kullanılan ve tüketilebilecek bant genişliğinin yüksek olması, reklamın optimize edilmesine ve kullanıcının dikkate alacağız.

Bununla birlikte, web'de yaygın olarak görülen tek medya türü resimler değildir. Videolar web sayfalarında sıklıkla kullanılan diğer bir popüler medya türüdür. Bu proje yönetimi metodolojilerinden önce <video> dönüşüm hunisinin nasıl öğesi çalışır.

Video kaynak dosyaları

Medya dosyalarıyla çalışırken, işletim sisteminizde tanıdığınız dosya (.mp4, .webm ve diğerleri) kapsayıcı olarak adlandırılır. Bir kapsayıcı, veya daha fazla akış sunar. Çoğu durumda bu video ve ses akışıdır.

Her bir akışı codec kullanarak sıkıştırabilirsiniz. Örneğin, video.webm VP9 kullanılarak sıkıştırılmış bir video akışı ve bir ses içeren WebM kapsayıcısı Vorbis kullanılarak sıkıştırılan akış.

Container'lar ve codec'ler arasındaki farkı anlamak önemlidir, çünkü medya dosyalarınızı, çok daha az bant genişliği kullanarak sıkıştırmanıza yardımcı olur. Bu da genel sayfa yüklenme sürelerinin azalmasına neden olur. Ayrıca, çalışmalarınızın sayfanın kullanıcı odaklı bir metrik olan Largest Contentful Paint (LCP) ve üç Core Web Vitals'tan biri olmalıdır.

Video dosyalarını sıkıştırmanın bir yolu FFmpeg kullanmaktır:

ffmpeg -i input.mov output.webm

Bir önceki komut (FFmpeg kullanılırken ne kadar basit olsa da) input.mov dosyası oluşturur ve varsayılan FFmpeg'i kullanarak output.webm dosyası çıkarır. seçenekleri vardır. Önceki komut, tüm video videolarında çalışan daha küçük bir video dosyası yardımcı olabilir. Video veya FFmpeg'in sunduğu ses seçenekleri üzerinde küçük değişiklikler yapmak, bir videonun dosya boyutunu daha da küçültmenize yardımcı olur. Örneğin projenin zamanlamasıyla ilgili GIF yerine <video> öğesi kullanıyorsanız ses parçasını kaldırmanız gerekir:

ffmpeg -i input.mov -an output.webm

Daha ayrıntılı ince ayar yapmak isterseniz FFmpeg, -crf kullanarak değişken bit hızı kodlaması kullanmadan videoları sıkıştırmak. -crf, anlamına gelir. Sabit Hız Faktörü. Bu ayar, etki düzeyini belirleyen ve bunu belirli bir aralıktaki bir tam sayı kabul ederek yapar.

H.264 ve VP9 gibi codec'ler -crf işaretini destekler ancak kullanımı şunlara bağlıdır: yardımcı olur. Daha fazla bilgi için videoları H.264'te kodlamayı ve videoları otomatik olarak kodlama sırasında VP9

Birden fazla biçim

Video dosyalarıyla çalışırken birden fazla biçim belirtmek yedek olarak çalışır tarayıcılarla uyumludur.

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Tüm modern tarayıcılar H.264 codec'ini desteklediğinden, MP4 yedek olarak kullanabilirsiniz. WebM sürümü daha yeni AV1 codec'ini kullanabilir. henüz yaygın olarak desteklenmeyen veya önceki VP9 codec'ini AV1'den daha iyi desteklenir ancak genellikle AV1 kadar sıkıştırmaz.

poster özelliği

Videonun poster resmi, <video> öğesindeki poster özelliği kullanılarak eklenir. öğesi oluşturun. Bu öğe, oynatmadan önce video içeriklerinin ne başlatıldı:

<video poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Otomatik Oynatma

HTTP Arşivi'ne göre web'deki videoların% 20'sinde autoplay özelliği. autoplay, bir videonun oynatılması gerektiğinde kullanılır anında (örneğin, video arka planı olarak veya video URL'si yerine animasyonlu GIF'ler seçeneğini de kullanabilirsiniz.

Animasyonlu GIF'ler, özellikle de birden fazla kare içeren resimlerde çok büyük olabilir karmaşık ayrıntılara sahip. Animasyonlu GIF'lerde çok sayıda dosya yer alır. megabayt veri, yani bant genişliğinin daha uygun şekilde harcanmasına yol açabilir, gözden geçirin. Animasyonlu resim biçimlerinden genellikle Bunun nedeni, bu tür medyaların <video> eşdeğerleri için çok daha verimli olmasıdır.

Web siteniz için otomatik video oynatma gerekiyorsa autoplay özelliği doğrudan <video> öğesinde:

<!-- This will automatically play a video, but
     it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

poster özelliğini Intersection Observer API ile birleştirerek Sayfanızı yalnızca videolar görüntü alanına girildikten sonra indirilecek şekilde yapılandırın. poster resmi, ilk fotoğraftaki gibi düşük kaliteli bir resim yer tutucusu olabilir. belirir. Video görüntü alanında göründüğünde tarayıcı video indirilir. Bu, ilk görüntü alanıdır. Olumsuz açıdan, autoplay için poster resmi kullanırken, kullanıcılarınıza, video kaldırılana kadar yalnızca kısa bir süre gösterilecek bir resim yüklenir ve çalmaya başlar.

Kullanıcı tarafından başlatılan oynatma

Genelde tarayıcı, bir video dosyasını HTML kodu anında indirmeye başlar ayrıştırıcı, <video> öğesini keşfeder. <video> Kullanıcı oynatmayı başlatırsa videonun indirilmeye başlanmasını muhtemelen kullanıcı etkileşimde bulunana kadar.

<video> kullanarak video kaynakları için indirilenleri etkileyebilirsiniz. öğesinin preload özelliği:

• preload="none" politikasının ayarlanması, tarayıcıya video içeriklerinin hiçbirinin olmadığını bildirir önceden yüklenmesi gerekir.
• preload="metadata" ayarlandığında yalnızca videonun meta verileri (ör. video meta verileri) getirilir. muhtemelen başka kısa bilgiler de sunar.

Yüklüyorsanız en çok tercih edilen durum preload="none" kurulumudur Kullanıcıların oynatmaya başlaması gereken videolar.

Bu durumda poster resmi ekleyerek kullanıcı deneyimini iyileştirebilirsiniz. Bu, kullanıcıya videonun içeriği hakkında bilgi verir. Ayrıca, poster resmi LCP öğenizdir. poster resminin <link rel="preload"> ipucunu kullanarak öncelik fetchpriority="high":

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

Yerleştirmeler

Video içeriğini optimize etme ve sunmanın tüm karmaşıklığı düşünüldüğünde, sorunu, bu tür özel video hizmetlerine YouTube veya Vimeo gibi. Bu tür hizmetler, videoların yayınlanmasını sizin için optimize eder üçüncü taraf bir hizmetten video yerleştirmek çünkü yerleşik video oynatıcılar çoğu zaman çok daha fazla tercih edebilirsiniz.

Bu gerçeklik göz önüne alındığında, üçüncü taraflara ait video yerleştirmeleri sayfa içeriğini önemli ölçüde etkileyebilir. bazı yolları da görmüştük. HTTP Arşivi'ne göre YouTube yerleştirmeleri ana iş parçacığını engeller. medyan web sitesi için 1,7 saniyeden uzun bir süre boyunca. Ana ileti dizisi şunun için engelleniyor: uzun süre çalışması, bir kullanıcı deneyimini olumsuz yönde etkileyebilecek sayfasındaki Sonraki Boyamayla Etkileşim (INP) bölümüne gidin. Ama elinizden gelenin en iyisini yerleşik öğeyi ilk sayfa yükleme sırasında hemen yüklememeyi, bunun yerine yerleştirme için, yerleştirilmiş gerçek video ile değiştirilen bir yer tutucu oluşturun Kullanıcı etkileşimde bulunduğunda.

Video demoları

Bilginizi test etme

Sıradaki: Web yazı tiplerini optimize edin

Belirli kaynak türlerini optimize etme kapsamamızın bir sonraki konusu yazı tipleridir. Web sitenizin yazı tiplerini optimize etme genellikle gözden kaçan bir konudur, ancak web sitenizin genel yükleme hızı üzerinde önemli bir etkisi vardır ve LCP ve Cumulative Layout Shift (CLS) olarak değiştirin.