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ırabilirsiniz. Bu da genel sayfa yükleme sürelerinin kısalmasına ve 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 oran 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'i 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 bilgi 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'si autoplay özelliğini içeriyor. 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ı öğeler içeren çok sayıda kareye sahipse çok büyük olabilir. Hareketli GIF'lerin birkaç megabayt veri tüketmesi yaygın bir durumdur. Bu da daha kritik kaynaklar için harcanması gereken bant genişliğinde önemli bir kayba neden olabilir. Genel olarak animasyonlu resim biçimlerinden kaçınmanız gerekir. Bu tür medya için <video> eşdeğerleri çok daha verimlidir.

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 videolar görüntü alanına girdiğinde indirilecek ş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. Ancak poster için autoplay resmi kullanıldığında kullanıcılarınız, video yüklenip oynatılmaya başlayana kadar yalnızca kısa bir süre gösterilen bir resim alır.

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

Genellikle tarayıcı, HTML ayrıştırıcısı <video> öğesini keşfeder etmez 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">

Geç yükleme

Video performansına nispeten yeni eklenen bir özellik de loading=lazy özelliğidir. Tarayıcı düzeyinde resim geç yükleme ve iframe'ler için aynı işleme benzer şekilde bu özellik, videoların poster ve preload indirmeleri için aynı işlevi sunar.

poster özelliğiyle birlikte preload="none" veya preload="metadata" kullanmak, videonun varsayılan olarak indirilmesini engelleyebilir. loading=lazy özelliği ise video görüntü alanına girene veya yaklaşana kadar poster resminin ve meta verilerin indirilmesini bile erteler.

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 sizin için yayınlanmasını optimize eder. Ancak üçüncü taraf hizmetlerinden bir video yerleştirmek, performans üzerinde kendi türünde 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ın uzun süre engellenmesi, ciddi bir kullanıcı deneyimi sorunudur ve sayfanın Interaction to Next Paint (INP) değerini etkileyebilir. 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

Sonrakine geçme: Web yazı tiplerini optimize etme

Belirli kaynak türlerini optimize etme konusundaki kapsamlı içeriğimizde bir sonraki başlığımız yazı tipleri. 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.