Video performansı

Önceki modülde, resimlerle ilgili bazı performans tekniklerini öğrenmiştiniz. Resimler, web'de yaygın olarak kullanılan bir kaynak türüdür. Optimize edilmelerine ve kullanıcının görünüm alanının dikkate alınmasına özen gösterilmezse önemli ölçüde bant genişliği tüketebilirler.

Ancak web'de yaygın olarak görülen tek medya türü resimler değildir. Videolar, web sayfalarında sıklıkla kullanılan bir diğer popüler medya türüdür. Olası optimizasyonlardan bazılarına göz atmadan önce <video> öğesinin nasıl çalıştığını anlamak önemlidir.

Video kaynak dosyaları

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

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

Kapsayıcılar ve codec'ler arasındaki farkı anlamak faydalıdır. Çünkü bu sayede medya dosyalarınızı çok daha az bant genişliği kullanarak sıkıştırabilir, bu da genel sayfa yükleme sürelerinin kısalmasına ve bir sayfanın Largest Contentful Paint (LCP) değerinin iyileşmesine yol açabilir. LCP, kullanıcı odaklı bir metriktir ve üç Core Web Vitals'dan biridir.

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

ffmpeg -i input.mov output.webm

FFmpeg kullanılırken olabilecek en temel komut olan yukarıdaki komut, input.mov dosyasını alır ve varsayılan FFmpeg seçeneklerini kullanarak output.webm dosyası oluşturur. Yukarıdaki komut, tüm modern tarayıcılarda çalışan daha küçük bir video dosyası oluşturur. Video veya FFmpeg'in sunduğu ses seçeneklerinde ince ayarlar yaparak videonun dosya boyutunu daha da küçültebilirsiniz. Örneğin, bir GIF'i değiştirmek için <video> öğesini kullanıyorsanız ses parçasını kaldırmanız gerekir:

ffmpeg -i input.mov -an output.webm

İşleri biraz daha ince ayarlamak isterseniz FFmpeg, değişken bit hızlı kodlama kullanmadan videoları sıkıştırırken -crf işaretini sunar. -crf, Sabit Oran Faktörü anlamına gelir. Bu ayar, belirli bir aralıktaki bir tam sayıyı kabul ederek sıkıştırma düzeyini ayarlar.

H.264 ve VP9 gibi codec'ler -crf işaretini destekler ancak kullanımı, kullandığınız codec'e bağlıdır. Daha fazla bilgi için H.264 ile video kodlamada sabit hız faktörü ve VP9 ile video kodlamada sabit kalite hakkında bilgi edinin.

Birden fazla biçim

Video dosyalarıyla çalışırken birden fazla biçim belirtmek, tüm modern biçimleri desteklemeyen tarayıcılar için yedek olarak işe yarar.

<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, eski tarayıcılar için yedek olarak kullanılabilir. WebM sürümünde, henüz yaygın olarak desteklenmeyen yeni AV1 codec veya AV1'den daha iyi desteklenen ancak genellikle AV1 kadar iyi sıkıştırmayan eski VP9 codec'i kullanılabilir.

poster özelliği

Bir videonun poster resmi, <video> öğesindeki poster özelliği kullanılarak eklenir. Bu özellik, oynatma başlatılmadan önce kullanıcılara video içeriklerinin ne olabileceği hakkında ipucu verir:

<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 bulunuyor. autoplay, bir videonun hemen oynatılması gerektiğinde (ör. video arka planı olarak veya animasyonlu GIF'lerin yerine kullanıldığında) kullanılır.

Animasyonlu GIF'ler, özellikle ayrıntılı çok sayıda kare içeriyorsa çok büyük olabilir. Animasyonlu GIF'lerin birkaç megabayt veri tüketmesi yaygın bir durumdur. Bu da daha kritik kaynaklar için harcanabilecek bant genişliğinin önemli ölçüde azalmasına neden olabilir. <video> eşdeğerleri bu tür medya için çok daha verimli olduğundan, genellikle animasyonlu resim biçimlerinden kaçınmanız gerekir.

Web sitenizde videoların otomatik olarak oynatılması gerekiyorsa autoplay özelliğini doğrudan <video> öğesinde kullanabilirsiniz:

<!-- 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 görüntü alanına giren videoları indirecek şekilde yapılandırabilirsiniz. poster resmi, videonun ilk karesi gibi düşük kaliteli bir resim yer tutucusu olabilir. Video görünüm alanında göründüğünde tarayıcı videoyu indirmeye başlar. Bu, ilk görüntü alanındaki içeriklerin yükleme sürelerini iyileştirebilir. Diğer yandan, poster için autoplay resmi kullandığınızda kullanıcılarınız, video yüklenip oynatılmaya başlayana kadar yalnızca kısa bir süre gösterilen bir resim görür.

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

Genellikle tarayıcı, HTML ayrıştırıcısı <video> öğesini keşfeder keşfetmez video dosyasını indirmeye başlar. Kullanıcının oynatmayı başlattığı <video> öğeleriniz varsa kullanıcı etkileşimde bulunana kadar videonun indirilmeye başlamasını istemeyebilirsiniz.

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

• preload="none" ayarı, tarayıcıya videonun hiçbir içeriğinin önceden yüklenmemesi gerektiğini bildirir.
• preload="metadata" ayarı yalnızca videonun süresi gibi video meta verilerini ve muhtemelen diğer yüzeysel bilgileri getirir.

Kullanıcıların oynatmayı başlatması gereken videolar yüklüyorsanız preload="none" ayarını kullanmak muhtemelen en iyi seçenektir.

Bu durumda, poster resmi ekleyerek kullanıcı deneyimini iyileştirebilirsiniz. Bu sayede kullanıcı, videonun konusu hakkında bilgi sahibi olur. Ayrıca, poster resmi LCP öğenizse poster resminin önceliğini fetchpriority="high" ile birlikte <link rel="preload"> ipucunu kullanarak artırabilirsiniz:

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

Yerleştirmeler

Video içeriğini verimli bir şekilde optimize etme ve yayınlamanın karmaşıklığı göz önüne alındığında, bu sorunu YouTube veya Vimeo gibi özel video hizmetlerine devretmek mantıklı olabilir. Bu tür hizmetler, videoların yayınlanmasını sizin için optimize eder. Ancak üçüncü taraf hizmetlerinden bir video yerleştirmek, performans üzerinde kendine özgü bir etkiye sahip olabilir. Çünkü yerleştirilmiş video oynatıcılar genellikle JavaScript gibi birçok ek kaynak sunabilir.

Bu gerçek göz önüne alındığında, üçüncü taraf video yerleştirmeleri sayfa performansını önemli ölçüde etkileyebilir. HTTP Archive'a göre, YouTube yerleştirmeleri, ortalama bir web sitesinde ana iş parçacığını 1,7 saniyeden uzun süre engelliyor. Ana iş parçacığını uzun süre engellemek, sayfanın Interaction to Next Paint (INP) değerini etkileyebilecek ciddi bir kullanıcı deneyimi sorunudur. Ancak, ilk sayfa yüklemesi sırasında yerleştirmeyi hemen yüklemeyerek ve bunun yerine, kullanıcı etkileşimde bulunduğunda gerçek video yerleştirmesiyle değiştirilen bir yer tutucu oluşturarak bir uzlaşma sağlayabilirsiniz.

Video demoları

Bilginizi test etme

Sonraki adım: Web yazı tiplerini optimize etme

Belirli kaynak türlerini optimize etme konulu yazımızın bir sonraki bölümünde yazı tiplerini ele alacağız. Web sitenizin yazı tiplerini optimize etmek genellikle göz ardı edilen bir konudur ancak web sitenizin genel yükleme hızı ve LCP ile Cumulative Layout Shift (CLS) gibi metrikler üzerinde önemli bir etkisi olabilir.