Estou ocupado verificando o desempenho do meu servidor da web gzip. Estou confiante agora que o gzip está ativado, pois o chrome mostra o cabeçalho de codificação de conteúdo: gzip.
Existe uma maneira fácil de ver quanto um arquivo foi compactado nas ferramentas de desenvolvedor do Chrome?
Respostas:
Resposta atualizada para 2017 : Sim.
A coluna de tamanho na guia Rede do Chrome Developer Tools tem o tamanho compactado e não compactado, para gzip, brotli e o que vier no futuro. Por exemplo:
Aqui, o tamanho compactado é 242 KB, o tamanho não compactado é 1,1 MB
Para ver os dois, verifique se o Devtools mostra grandes linhas de solicitação . É o primeiro ícone nas opções "Visualizar" na barra de ferramentas específica de redes.
De longe, o método mais fácil é usar uma ferramenta online. O GIDZipTest mostra muitos detalhes: o tamanho original, tamanho compactado e porcentagem de compactação.
No entanto, é possível no Chrome com um pouco de esforço. (Atualizado para o Chrome mais recente, setembro de 2011.)
Nas Ferramentas do desenvolvedor, vá para a guia "Rede" e recarregue a página. Você verá uma lista de todos os arquivos buscados na coluna da esquerda. Clique na página / arquivo apropriado à esquerda e depois na guia "Cabeçalhos" no painel direito.
Em "Cabeçalhos de resposta", você deve ver "Codificação de conteúdo: gzip", seguida por um cabeçalho "Comprimento de conteúdo". Esse é o tamanho do conteúdo compactado.
Encontrar o tamanho não compactado é mais difícil. Se você estiver exibindo arquivos estáticos, basta verificar seu tamanho. Para conteúdo dinâmico, você precisará copiar e colar o HTML em um editor de texto e salvá-lo para verificar o tamanho exato.
Atualização para 2017
Ao usar ícones grandes, as ferramentas de desenvolvimento do Chrome mostram um tamanho de compactação antes e depois nas guias de rede.
Confirmei ativando e desativando o gzip no meu servidor da web.
Ouvi dizer que o Chrome é falho devido a um bug no webkit.
O Y Slow Plugin do firefox faz um ótimo trabalho. Ao executá-lo, vá para a guia Componentes e expanda o tipo de componente para o qual deseja os valores. Ele mostrará o tamanho original e o tamanho do gzip.
Esta não é uma ferramenta especificamente para o Chrome, mas eu uso o Fiddler ao verificar as informações de tráfego / cabeçalho HTTP. É uma ótima ferramenta, funciona em qualquer navegador e é grátis!
Para quem ainda chega aqui de uma pesquisa geral do Google (como eu fiz), nas versões modernas do Firefox é possível ver o tamanho "bruto" e compactado com gzip diretamente de seus devtools, comparando a coluna "Tamanho transferido" e a coluna "Tamanho". "Tamanho" é o tamanho bruto da resposta, o "Tamanho transferido" é o tamanho real dos dados transferidos para a resposta, que pode ser menor que o tamanho real no caso de gzip, como na imagem abaixo, ou mesmo 0 em caso a resposta tenha sido armazenada em cache no cliente.
Content-Lengthcabeçalho.