Makale

Web sitesi medyasını hız ve Core Web Vitals için optimize edin

Görseller ve videolar tipik olarak bir web sayfasının toplam ağırlığının yüzde 60 ila 80'ini oluşturur. Bunları doğru ayarlamak, yükleme hızı, Core Web Vitals puanları ve arama sıralaması için yapabileceğiniz en yüksek getirili tek şeydir. İyi haber: bunların hiçbiri özel yazılım ya da sunucu gerektirmez ve dosyalarınızın cihazınızdan ayrılması hiç gerekmez.

Her şeyden önce doğru formatı seçin

Format seçimi, herhangi bir kalite kaydırıcısından daha önemlidir. Bir web sayfasındaki fotoğraflar için doğru varsayılan WebP'dir: aynı görsel kalitede JPEG'den yüzde 25 ila 35 daha küçüktür ve her modern tarayıcı destekler. AVIF, daha yavaş kodlama pahasına, JPEG'den yüzde 50'ye kadar daha iyi sıkıştırarak daha da ileri gider. Bir kez sıkıştırdığınız ana görseller ve ürün fotoğrafları için AVIF'i; toplu işlediğiniz veya hızlı ihtiyaç duyduğunuz her şey için WebP'yi kullanın. PNG yalnızca kayıpsız doğruluğa ya da şeffaf arka plana ihtiyacınız olan yere aittir. SVG ise logolar, simgeler ve illüstrasyonlar için mantıklı tek seçimdir: her boyuta ölçeklenir ve genellikle rasterleştirilmiş bir eşdeğerin yüzlerce kilobaytına karşılık birkaç kilobayt ağırlığındadır.

Görselleri görünür kalite kaybı olmadan sıkıştırın

Gerçek görüntüleme boyutlarına yeniden boyutlandırarak başlayın: 1280 piksel genişlikte gösterilen bir ana görselin 4000 piksellik veriye ihtiyacı yoktur. Önce yeniden boyutlandırın, sonra sıkıştırın. Fotoğraflar için WebP veya JPEG'de kalite 80, sıradan izleyicilerin farkı algılamaya başladığı pratik alt sınırdır; bu yüzden 75 ila 85'i hedefleyin ve yayınlamadan önce çıktıya tam yakınlaştırmada bakın. Metin ve düz alanlar içeren grafikler için kayıpsız PNG ya da SVG, kayıplı formatların bulanıklaştırdığı keskinliği korur. Bu sitedeki görsel sıkıştırıcı tüm bu formatları işler, tamamen tarayıcınızda çalışır ve özel masaüstü araçlarıyla aynı algoritmaları uygular.

Videoyu yüklemeden web için dönüştürün

Arka plan döngüleri ve gömülü video, web medyası optimizasyonunun çoğu zaman yetersiz kaldığı yerlerdir. H.264 ile MP4 her yerde oynar, ama VP9 ile WebM aynı kalitede yüzde 20 ila 40 daha küçüktür ki bu, kısıtlı bağlantılardaki mobil kullanıcılar için önemlidir. Pratik yaklaşım, bir kez WebM'e dönüştürmek, onu bir video öğesinde tercih edilen kaynak olarak sunmak ve MP4'ü geri dönüş olarak tutmaktır. Buradaki video dönüştürücü, WebAssembly'ye derlenmiş FFmpeg kullanır: dönüştürme tarayıcınızın içinde çalışır, hiçbir şey yüklenmez ve cihazınızın yeterli belleği olduğu sürece her boyutta dosya çalışır. Satır içi arka plan videosu için, kodlamadan önce ölü saniyeleri kesmek üzere video kırpıcıyı da düşünün: süre, dosya boyutunun en büyük belirleyicisidir.

Satır içi varlıklar: base64 ve SVG

HTML veya CSS'e base64 dizeleri olarak doğrudan gömülen çok küçük görseller, simgeler ve favicon'lar, varlık başına bir ağ gidiş-dönüşünü ortadan kaldırır. Bu, bir logo sprite'ı ya da yükleme göstergesi gibi her sayfada görünen ve yaklaşık 2 KB altındaki varlıklar için mantıklıdır. Daha büyük varlıklar ayrı dosyalar olarak kalmalıdır, çünkü base64 ikiliden yüzde 33 daha büyük kodlar ve tarayıcılar dosya referanslarını önbelleğe alır ama satır içi verileri bağımsız olarak almaz. SVG optimize edici, görsel çıktıya dokunmadan dışa aktarılan SVG'lerden editör artıklarını kaldırır. Görsel-base64 dönüştürücü, yapıştırmaya hazır veri URI'sini tarayıcınızda üretir.

Bu makaledeki araçlar

Sıkça sorulan sorular

Görsel sıkıştırma arama sıralamamı etkiler mi?

Google, Core Web Vitals'ı bir sıralama sinyali olarak kullanır ve Largest Contentful Paint neredeyse her zaman bir görsel ya da bir video posteridir. Ana görseli bir saniyenin altında yüklenen bir sayfa, bunun üç saniye sürdüğü bir sayfadan daha iyi puan alır. Sıkıştırma ve doğru format bu metriği doğrudan etkiler, dolayısıyla evet, görsel optimizasyonunun ölçülebilir bir SEO etkisi vardır. Etki, bağlantıların daha yavaş olduğu ve ağır görsellerin cezasının daha büyük olduğu mobilde en güçlüdür.

Medyayı bir web hizmeti yerine neden yerel olarak işlemeli?

Çoğu çevrimiçi medya aracı, dosyalarınızı uzak bir sunucuya yüklemenizi gerektirir; bu, zaman alır, bant genişliği tüketir ve dosyanızın bir kopyasının kontrol etmediğiniz bir altyapıda bulunması anlamına gelir. Bu sitedeki araçlar tamamen tarayıcınızda çalışır: görselleriniz ve videolarınız cihazınızda işlenir ve çıktı doğrudan indirilir. Hesap yoktur, yükleme beklemesi yoktur ve dosyalarınıza dair hiçbir şey asla bir sunucuya gönderilmez.