Önceki modülde, resimlerle ilgili bazı performans tekniklerini öğrendiniz. Resimler, web'de yaygın olarak kullanılan bir kaynak türüdür. Resimleri optimize etmeye ve kullanıcının görüntü alanını dikkate almazsa bu işlem önemli ölçüde bant genişliği tüketebilir.
Ancak resimler web'de yaygın olarak görülen tek medya türü değildir. Videolar da web sayfalarında sıklıkla kullanılan bir diğer popüler medya türüdür. Olası optimizasyonlardan bazılarına bakmadan önce, <video> öğesinin nasıl çalıştığını anlamak önemlidir.
Video kaynak dosyaları
Medya dosyalarıyla çalışırken, işletim sisteminizde (.mp4, .webm ve diğerleri) tanıdığınız dosyaya kapsayıcı adı verilir. Bir container bir veya daha fazla akış içerir. Çoğu durumda bu video ve ses akışı olur.
Her bir akışı codec kullanarak sıkıştırabilirsiniz. Örneğin video.webm, VP9 kullanılarak sıkıştırılmış video akışı içeren bir WebM kapsayıcısı ve Vorbis ile sıkıştırılmış bir ses akışı olabilir.
Kapsayıcılar ve codec'ler arasındaki farkı anlamak, medya dosyalarınızı önemli ölçüde daha az bant genişliği kullanarak sıkıştırmanıza yardımcı olduğundan hem genel sayfa yüklenme sürelerinin azalmasına hem de bir sayfanın kullanıcı odaklı bir metrik ve üç Önemli Web Verileri'nden biri olan Largest Contentful Paint (LCP) özelliğinin potansiyel olarak iyileştirilmesine yardımcı olur.
Video dosyalarını sıkıştırmanın bir yolu FFmpeg kullanmayı içerir:
ffmpeg -i input.mov output.webm
Önceki komut (FFmpeg kullanılırkenki kadar temel olsa da), input.mov dosyasını alır ve varsayılan FFmpeg seçeneklerini kullanarak bir output.webm dosyası çıkarır. Yukarıdaki komut, tüm modern tarayıcılarda çalışan daha küçük bir video dosyası oluşturur. FFmpeg'in sunduğu video veya ses seçeneklerini değiştirerek videonun dosya boyutunu daha da küçültebilirsiniz. Örneğin, bir GIF'i değiştirmek için <video> öğesi kullanıyorsanız ses parçasını kaldırmanız gerekir:
ffmpeg -i input.mov -an output.webm
İşlemde biraz daha değişiklik yapmak istiyorsanız FFmpeg, değişken bit hızı kodlaması kullanmadan videoları sıkıştırırken -crf işaretini sunar. -crf, Sabit Oran Faktörü anlamına gelir. Bu, sıkıştırma seviyesini ayarlayan bir ayardır ve bunu belirli bir aralık içindeki tam sayıları kabul ederek yapar.
H.264 ve VP9 gibi codec'ler, -crf işaretini destekler ancak bu işaretin kullanımı, kullandığınız codec'e bağlıdır. Daha fazla bilgi edinmek isterseniz H.264'te videoları kodlamak için sabit hız faktörü ve VP9'da videoları kodlarken 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 işlevi görür.
<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 eski tarayıcılar için MP4 yedek olarak kullanılabilir. WebM sürümü, henüz geniş çapta desteklenmeyen yeni AV1 codec'ini veya AV1'den daha iyi desteklenen ancak genellikle AV1 kadar sıkıştırma yapmayan, eski VP9 codec'ini kullanabilir.
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çeriğinin ne olabileceği konusunda 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 genelindeki videoların% 20'si autoplay özelliğini içeriyor. autoplay, bir videonun hemen oynatılması gerektiğinde kullanılır (ör. video arka planı olarak veya animasyonlu GIF'lerin yerine).
Animasyonlu GIF'ler, özellikle de karmaşık ayrıntılara sahip birçok kare içeriyorsa çok büyük olabilir. Animasyonlu GIF'lerin birkaç megabayt veri tüketmesi yaygın bir durumdur. Bu durum, daha kritik kaynaklar için harcanan bant genişliğini önemli ölçüde tüketebilir. <video> eşdeğerleri bu medya türü için çok daha verimli olduğundan genellikle animasyonlu resim biçimlerinden kaçınmalısınız.
Otomatik oynatılan video web siteniz için gerekliyse 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ı videoları yalnızca görüntü alanına geldiklerinde indirecek şekilde yapılandırabilirsiniz.
poster resmi, videonun ilk karesi gibi düşük kaliteli bir resim yer tutucu olabilir. Video görüntü alanında göründükten sonra, tarayıcı
videoyu indirmeye başlar. Bu, ilk görüntü alanındaki içeriğin yüklenme sürelerini kısaltabilir. Kötü tarafı ise autoplay için poster resmi kullanırken kullanıcılarınız, video yüklenip oynatılmaya başlayana kadar yalnızca kısa süreliğine gösterilen bir resim alır.
Kullanıcı tarafından başlatılan oynatma
Genellikle tarayıcı, bir video dosyasını HTML ayrıştırıcısı <video> öğesini bulur bulmaz indirmeye başlar. Kullanıcının oynatmayı başlattığı <video> öğeleriniz varsa muhtemelen kullanıcı etkileşimde bulununcaya kadar videonun indirilmeye başlamasını istemezsiniz.
<video> öğesinin preload özelliğini kullanarak video kaynakları için indirilenleri etkileyebilirsiniz:
preload="none"politikasının ayarlanması, tarayıcıya hiçbir video içeriğinin önceden yüklenmemesi gerektiğini bildirir.preload="metadata"yalnızca videonun süresi ve muhtemelen diğer kısa süreli bilgiler gibi video meta verilerini getirir.
Kullanıcıların oynatmayı başlatması gereken videoları yüklüyorsanız preload="none" özelliğinin ayarlanması muhtemelen en çok tercih edilen durumdur.
Bu durumda poster resmi ekleyerek kullanıcı deneyimini iyileştirebilirsiniz.
Bu, kullanıcıya videonun konusuyla ilgili bir bağlam sağlar. Ayrıca, LCP öğeniz poster resmiyse fetchpriority="high" ile birlikte <link rel="preload"> ipucunu kullanarak poster resminin önceliğini artırabilirsiniz:
<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">
Yerleştirmeler
Video içeriğini optimize etme ve verimli bir şekilde sunmanın tüm karmaşıklığı göz önünde bulundurulduğunda, bu sorunu YouTube veya Vimeo gibi özel video hizmetlerine boşaltmak mantıklıdır. Bu tür hizmetler, videoların yayınlanmasını sizin için optimize eder ancak üçüncü taraf bir hizmetten video yerleştirmenin, performans üzerinde ayrı bir etkisi olabilir. Çünkü yerleştirilmiş video oynatıcılar genellikle JavaScript gibi birçok ek kaynak sunabilir.
Bu durum göz önünde bulundurulduğunda, üçüncü taraf video yerleştirmeleri sayfa performansını önemli ölçüde etkileyebilir. HTTP Arşivi'ne göre YouTube yerleştirmeleri, medyan web sitesi için ana iş parçacığını 1,7 saniyeden uzun süre engeller. Ana iş parçacığının uzun süre boyunca engellenmesi, sayfanın Sonraki Boyama ile Etkileşimi (INP) etkileyebilecek ciddi bir kullanıcı deneyimi sorunudur. Bununla birlikte, yerleştirmeyi ilk sayfa yüklemesinde hemen yüklemeyerek bir güvenlik ihlali oluşturabilir ve bunun yerine, kullanıcı etkileşimde bulunduğunda yerleştirilen gerçek video ile değiştirilecek bir yer tutucu oluşturabilirsiniz.
Video demoları
Bilginizi test etme
Üst <video> öğesi içindeki <source> öğelerinin sırası, nihai olarak hangi video kaynağının indirileceğini belirlemez.
<video> öğesinin poster özelliği, LCP adayı olarak kabul edilir.
Sıradaki: Web yazı tiplerini optimize etme
Belirli kaynak türlerini optimize etme kapsamına giren diğer konu ise yazı tipleri. Web sitenizin yazı tiplerini optimize etme, genellikle göz ardı edilen bir konudur ancak web sitenizin genel yükleme hızının yanı sıra LCP ve Cumulative Layout Shift (CLS) gibi metrikler üzerinde önemli bir etki yaratabilir.