WebP: web sayfası sıkıştırma biçimi

 (purplesyringa.moe)
1 puan yazan GN⁺ 2024-09-08 | 1 yorum | WhatsApp'ta paylaş

WebP: web sayfası sıkıştırma biçimi

Engeller

  • Web sitesinin erişilebilirliğini artırmak ve sayfa yükleme süresini azaltmak için HTML küçültülüyor
  • GitHub Pages Brotli sıkıştırmasını desteklemiyor
  • gzip varsayılan olarak kullanılıyor, ancak Brotli daha iyi sıkıştırma oranı sunuyor

Basit fikir

  • GitHub Pages Brotli’yi desteklemediği için, istemci tarafında JavaScript ile açma yöntemi değerlendiriliyor
  • brotli-dec-wasm ve tiny-brotli-dec-wasm kullanılarak Brotli açılabiliyor

İkinci deneme

  • Compression Streams API, gzip ve DEFLATE biçimlerini destekliyor ancak Brotli’yi desteklemiyor
  • Zopfli kütüphanesiyle gzip daha verimli sıkıştırılabiliyor, ancak yine de Brotli’den geride kalıyor

Kural bozmak

  • Veriyi sıkıştırmak için görüntü sıkıştırmasından yararlanma yöntemi değerlendiriliyor
  • PNG ve GIF, DEFLATE algoritmasını kullanıyor ancak WebP daha iyi performans sunuyor

WebP’nin avantajları

  • WebP, PNG’ye benzer öngörülü dönüşümler kullanıyor ancak DEFLATE yerine Google’ın geliştirdiği bir yöntemi kullanıyor
  • Farklı Huffman ağaçları kullanarak daha verimli sıkıştırma sağlıyor
  • Renk önbelleği kullanarak tekrar eden renkleri verimli biçimde saklıyor

Deney

  • HTML dosyasını sıkıştırmak için webp crate’i kullanılıyor
  • İlk sonuçlar, gzipten 2 kat daha küçük boyut gösteriyor

Ek optimizasyonlar

  • Daha iyi sıkıştırma performansı elde etmek için görüntü boyutu ayarlanıyor
  • En iyi sonucu bulmak için çeşitli sıkıştırma yöntemleri deneniyor

Karşılaştırma testleri

  • Çeşitli dosya biçimleri için gzip, bzip2, Brotli ve WebP karşılaştırılıyor
  • WebP çoğu durumda gzipten daha iyi performans gösteriyor
  • Brotli’den geride kalsa da yine de anlamlı bir iyileşme sağlıyor

JavaScript ile kod çözme

  • Canvas API kullanarak WebP’nin nasıl çözüleceği açıklanıyor
  • WebGL kullanılarak anti-fingerprinting tekniklerinin nasıl aşılacağı anlatılıyor

Son ayarlar

  • Sayfa yüklenirken oluşan titremeyi azaltmak için stiller ve üst bölüm gzip ile tutuluyor
  • Kaydırma konumunu korumak için geçici bir çözüm öneriliyor

Gömme

  • Gecikmeyi azaltmak için WebP doğrudan JavaScript içine gömülüyor
  • Boyutu en aza indirmek için base64 veri URL’si kullanılıyor

Örnek

  • Gerçek bir web sayfasında WebP ile sıkıştırılmış bir örnek sunuluyor
  • Sıkıştırma sonrası sayfa boyutunun küçüldüğü görülüyor

GN⁺ Özeti

  • Bu yazı, web sayfalarının sıkıştırma performansını iyileştirmek için çeşitli yöntemleri inceliyor
  • WebP biçimi gzipten daha iyi performans sunuyor, ancak Brotli’den geride kalıyor
  • JavaScript ve WebGL kullanarak istemci tarafında WebP’nin nasıl çözüleceği açıklanıyor
  • Sayfa yükleme süresini azaltmak için çeşitli optimizasyon teknikleri öneriliyor
  • Benzer işlev sunan diğer projeler arasında Brotli ve Zopfli bulunuyor

İlgili okumalar

1 yorum

 
GN⁺ 2024-09-08
Hacker News görüşleri

  • Uzun bir gönderinin boyutu 92 KiB'den 37 KiB'ye düşürülmesine rağmen, gerçek yükleme süresi artış oranı yalnızca %0,001

    • Açma süresi nedeniyle kullanıcı deneyimi daha kötü olabilir

  • readPixels'in parmak izi karşıtı korumalara neden tabi olmadığını anlamıyorum

    • Sayfanın üst kısmındaki stil korunurken, yalnızca görünüm alanının altındaki içeriği WebP olarak sıkıştıran bir teknik var
    • LibreWolf'ta WebGL devre dışı bırakılırsa sayfa kırpılmıyor

  • zstd Chrome'a eklendi; Safari'ye de gelmeli

  • Google Fonts kaldırılırsa sayfa yükleme süresi iyileşebilir

    • Uzak sunucudan yüklendiği için ek handshake gerekiyor

  • Kaynak koduna bakınca doctype bildiriminde boşluk olmadığını gördüm

    • Şu anda <!doctypehtml> şeklinde, ama <!doctype html> olarak düzeltilmeli

  • HTML sayfaları kendinden çıkartmalı ZIP dosyaları olarak paketlenebilir

    • HTML, ZIP ve PNG ile uyumlu, PNG görselleri de içeren dosyalar üretmek mümkün
    • Örneğin bir HTML sayfasında PNG görsel gösterilebilir

  • Sayfa Sailfish OS tarayıcısında bozuluyor

    • Paragraflardan sonra uzun boş alanlar var
    • gzip ve brotli HTML sıkıştırmasının ek yükü, günümüz sitelerindeki JS/görsel/video miktarıyla kıyaslandığında ihmal edilebilir düzeyde

  • Brotli, büyük bir sözlüğe (dictionary) sahip olmasına rağmen gzip'e benzer performans gösteriyor

    • Sıkıştırma algoritması mı daha kötü, yoksa sözlüğün önemi düşündüğümden daha mı az, merak ediyorum

  • Brotli'nin CompressionStream API'de kullanılmama nedeni, tarayıcı boyutunu ciddi ölçüde artırması

    • Sıkıştırma sözlüğünün daha büyük olmasının nedeni, sözlüğün önceden hesaplanmış en verimli gösterimleri içeriyor olması olabilir