Bu codelab'de, animasyonlu GIF'leri videoyla değiştirerek performansı artırın.
Önce ölçüm yapın
Öncelikle web sitesinin nasıl performans gösterdiğini ölçün:
- Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a basın.
- Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Lighthouse sekmesini tıklayın.
- Kategoriler listesinde Performans onay kutusunun seçili olduğundan emin olun.
- Rapor oluştur düğmesini tıklayın.
İşiniz bittiğinde Lighthouse'un "Animasyonlu içerik için video biçimlerini kullan" denetiminde GIF'i bir sorun olarak işaretlediğini göreceksiniz.
FFmpeg indirin
GIF'leri videoya dönüştürmek için kullanabileceğiniz birkaç yöntem vardır. Bu rehberde FFmpeg kullanılmaktadır. Glitch sanal makinesinde zaten yüklüdür. Dilerseniz yerel makinenize yüklemek için bu talimatları da uygulayabilirsiniz.
Konsolu aç
FFmpeg'in yüklü olduğundan ve çalıştığından emin olun:
- Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.
- Terminal'i tıklayın (not: Terminal düğmesi görünmüyorsa Tam Ekran seçeneğini kullanmanız gerekebilir).
- Konsolda şu komutu çalıştırın:
which ffmpeg
Şu şekilde bir dosya yolu elde etmeniz gerekir:
/usr/bin/ffmpeg
GIF'i video olarak değiştir
- Konsolda
cd images
dosyasını çalıştırarak resimler dizinine girin. - İçeriği görmek için
ls
komutunu çalıştırın.
Aşağıdakine benzer bir tablo görürsünüz:
$ ls
cat-herd.gif
- Konsolda şu komutu çalıştırın:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4
Bu işlem, FFmpeg'e cat-herd.gif'in -i
işaretiyle belirtilen girişi alıp cat-herd.mp4 adlı bir videoya dönüştürmesini söyler. Bu komutun çalışması
bir saniye sürer. Komut tamamlandığında tekrar ls
yazıp iki dosya görebilmeniz gerekir:
$ ls
cat-herd.gif cat-herd.mp4
WebM videoları oluşturun
MP4 1999 yılından beri kullanılıyor olsa da WebM, 2010 yılında piyasaya yeni çıkan göreli bir yeni. WebM videoları, MP4 videolarından çok daha küçük
olabileceğinden her ikisini birden oluşturmak mantıklıdır. Neyse ki <video>
öğesi, birden fazla kaynak eklemenize olanak sağlar. Böylece, WebM'yi desteklemeyen bir tarayıcı MP4'e geçebilir.
- Konsolda şu komutu çalıştırın:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
- Çalıştırılan dosya boyutlarını kontrol etmek için:
ls -lh
Bir GIF ve iki videonuz olmalıdır:
$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm
Orijinal GIF'in 3,7 milyon olmasına, MP4 sürümünün 551K, WebM sürümünün ise yalnızca 341K olduğuna dikkat edin. Bu muazzam bir tasarruf!
GIF efektini yeniden oluşturmak için HTML'yi güncelleyin
Animasyonlu GIF'lerin, videoların taklit etmesi gereken üç temel özelliği vardır:
- Bunlar otomatik olarak oynatılır.
- Sürekli olarak döngü oluştururlar (genellikle ancak döngüyü önlemek mümkündür).
- Sessiz olurlar.
Neyse ki <video>
öğesini kullanarak bu davranışları yeniden oluşturabilirsiniz.
index.html
dosyasında, satırı<img>
ile değiştirin:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>
Bu özellikleri kullanan bir <video>
öğesi, animasyonlu GIF'lerden beklenen tüm davranışlarda otomatik olarak oynatılır, sonsuz bir döngü içinde oynatılır, ses çalmaz ve satır içinde (yani tam ekran değil) oynatılır. 🎉
Kaynaklarınızı belirtin
Tek yapmanız gereken video kaynaklarınızı belirtmek. <video>
öğesi, biçim desteğine bağlı olarak tarayıcının seçim yapabileceği farklı video dosyalarına işaret eden bir veya daha fazla <source>
alt öğesi gerektirir.
<video>
öğesini, kedi yavrusu videolarınıza bağlantı veren <source>
öğeleriyle güncelleyin:
<video autoplay loop muted playsinline>
<source src="/images/cat-herd.webm" type="video/webm">
<source src="/images/cat-herd.mp4" type="video/mp4">
</video>
Önizleme
- Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a basın.
Deneyim aynı görünmelidir. Şu ana kadar her şey yolunda.
Lighthouse ile doğrulayın
Canlı site açıkken:
- Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Lighthouse sekmesini tıklayın.
- Kategoriler listesinde Performans onay kutusunun seçili olduğundan emin olun.
- Rapor oluştur düğmesini tıklayın.
"Animasyonlu içerik için video biçimlerini kullanın" denetiminin başarıyla tamamlandığını göreceksiniz. Harika! 💪