WebP: o formato de compressão para páginas web

 (purplesyringa.moe)
1 pontos por GN⁺ 2024-09-08 | 1 comentários | Compartilhar no WhatsApp

WebP: o formato de compressão para páginas web

Obstáculos

  • Minimizar o HTML para aumentar a acessibilidade do site e reduzir o tempo de carregamento da página
  • O GitHub Pages não oferece suporte à compressão Brotli
  • O gzip é usado por padrão, mas o Brotli oferece uma taxa de compressão melhor

Uma ideia simples

  • Como o GitHub Pages não oferece suporte a Brotli, foi considerada uma forma de descompactar no lado do cliente com JavaScript
  • É possível descompactar Brotli usando brotli-dec-wasm e tiny-brotli-dec-wasm

Segunda tentativa

  • A Compression Streams API oferece suporte aos formatos gzip e DEFLATE, mas não ao Brotli
  • A biblioteca Zopfli pode comprimir gzip de forma mais eficiente, mas ainda tem desempenho inferior ao Brotli

Quebrando as regras

  • Foi considerada uma forma de comprimir dados usando compressão de imagem
  • PNG e GIF usam o algoritmo DEFLATE, mas o WebP oferece desempenho melhor

Vantagens do WebP

  • O WebP usa uma transformação preditiva semelhante à do PNG, mas utiliza um método desenvolvido pelo Google em vez de DEFLATE
  • Usa várias árvores de Huffman para fornecer uma compressão mais eficiente
  • Usa cache de cores para armazenar cores repetidas com eficiência

Experimento

  • Foi testada a compressão de arquivos HTML usando o crate webp
  • Os resultados iniciais mostraram um tamanho 2 vezes menor que o gzip

Otimização adicional

  • Redimensionar a imagem para obter melhor desempenho de compressão
  • Foram testados vários métodos de compressão para encontrar o resultado ideal

Benchmark

  • Comparação entre gzip, bzip2, Brotli e WebP em vários formatos de arquivo
  • Na maioria dos casos, o WebP mostrou desempenho melhor que o gzip
  • O desempenho é inferior ao do Brotli, mas ainda oferece uma melhoria significativa

Decodificação com JavaScript

  • Explica como decodificar WebP usando a Canvas API
  • Contorna técnicas anti-fingerprinting usando WebGL

Ajustes finais

  • Para reduzir o efeito de piscada no carregamento da página, o estilo e a parte superior foram mantidos em gzip
  • É proposta uma solução temporária para preservar a posição de rolagem

Incorporação

  • O WebP é incorporado diretamente no JavaScript para reduzir a latência
  • URLs de dados em base64 são usadas para minimizar o tamanho

Exemplo

  • É fornecido um exemplo real de uma página web comprimida com WebP
  • É possível confirmar que o tamanho da página diminui após a compressão

Resumo do GN⁺

  • Este texto explora vários métodos para melhorar o desempenho de compressão de páginas web
  • O formato WebP oferece desempenho melhor que o gzip, mas inferior ao Brotli
  • Explica como decodificar WebP no lado do cliente usando JavaScript e WebGL
  • Propõe várias técnicas de otimização para reduzir o tempo de carregamento da página
  • Outros projetos com funcionalidade semelhante incluem Brotli e Zopfli

Leituras relacionadas

1 comentários

 
GN⁺ 2024-09-08
Comentários no Hacker News

  • Apesar de o tamanho de uma postagem longa ter sido reduzido de 92 KiB para 37 KiB, o aumento real no tempo de carregamento foi de apenas 0,001%

    • O tempo de descompressão pode piorar a experiência do usuário

  • Não dá para entender por que readPixels não recebe proteção contra fingerprinting

    • Existe uma técnica que mantém a estilização no topo da página e comprime em WebP apenas o conteúdo abaixo da viewport
    • No LibreWolf, se o WebGL for desativado, a página não fica cortada

  • O zstd foi introduzido no Chrome e também deveria ser adotado no Safari

  • Remover o Google Fonts pode melhorar o tempo de carregamento da página

    • Como ele é carregado de um servidor remoto, exige um handshake adicional

  • Ao verificar o código-fonte, foi visto que falta um espaço na declaração do doctype

    • Atualmente está como <!doctypehtml>, mas deve ser corrigido para <!doctype html>

  • É possível empacotar uma página HTML como um arquivo ZIP autoextraível

    • Também é possível criar um arquivo compatível com HTML, ZIP e PNG, incluindo uma imagem PNG
    • Por exemplo, é possível exibir uma imagem PNG em uma página HTML

  • A página quebra no navegador do Sailfish OS

    • Há um longo espaço em branco depois dos parágrafos
    • O overhead da compressão HTML com gzip e brotli é insignificante em comparação com a quantidade de JS/imagens/vídeos usada pelos sites atuais

  • Apesar de o Brotli ter um dicionário grande, ele apresenta desempenho semelhante ao gzip

    • Fica a dúvida se o algoritmo de compressão é pior ou se a importância do dicionário é menor do que se imaginava

  • O motivo de o Brotli não ser usado na API CompressionStream é que isso aumentaria bastante o tamanho do navegador

    • O dicionário de compressão pode ser maior porque inclui representações pré-calculadas mais eficientes