Existe uma maneira fácil de ver a quantidade de compactação no Chrome?

33

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?

Peter Smit
fonte
1
Se houver um plug-in para visualizar os cabeçalhos HTTP, você poderá comparar o tamanho do documento com o Content-Lengthcabeçalho.
Lèse majesté 29/10/10

Respostas:

32

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.

mikemaccana
fonte
7
Obrigado. É fácil perder isso. É preciso clicar em "usar linhas de solicitação grandes"
alds
Além disso, você pode clicar com o botão direito do mouse nos cabeçalhos das colunas e mostrar o cabeçalho de resposta "Codificação de Conteúdo". Depois de fazer isso, você pode classificar pela coluna para obter uma lista rápida de todas as respostas compactadas em gzip.
thirdender
18

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.

DisgruntledGoat
fonte
onde está o "ativar o rastreamento de recursos"?
Pacerier
@Pacerier: é um pouco diferente na versão mais recente do Chrome; Atualizei minha resposta com novas instruções.
DisgruntledGoat
Ferramenta pura. Não consegui descobrir por que as respostas enviadas pelo meu aplicativo Google App Engine não estavam mostrando o tamanho compactado. As respostas enviadas pelo SDK (por exemplo, host local) não são compactadas, enquanto as respostas provenientes da nuvem são. Acontece que o Chrome está funcionando perfeitamente.
Evan Solha
9

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.

Captura de tela das ferramentas de desenvolvimento do Chrome

insira a descrição da imagem aqui

CodeMonkey
fonte
5

Outra maneira de fazer isso é com o cURL:

curl -i -H "Accept-Encoding: gzip" http://someurl.com | wc -c

versus

curl -i http://someurl.com | wc -c

O número mostrado após cada comando é o número de bytes que cruzaram o fio.

Stephen
fonte
2

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.

XOPJ
fonte
2

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!

BradB
fonte
1
Agora também existe uma versão com extensão do Chrome do Fiddler !
karlbecker_com
Obrigado por sugerir isso. O Fiddler não mostra "tamanho descompactado", mas permite adicionar colunas para "CompressionSavings" e "CompressionSavings%". Adicione-os clicando com o botão direito do mouse nas colunas ==> "Personalizar colunas" ==> "Diversos" ==> O menu suspenso "Nome do campo".
jasons
0

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.

firefox devtools tamanho gzipped

LeartS
fonte