YSlow: os problemas do Yahoo não são os seus problemas

Vi pela primeira vez o 13 regras simples do Yahoo para acelerar seu site referenciado em um no blog de Rich Skrenta em maio. Parece que originalmente havia 14 regras; uma delas deve ter saído da lista em algum ponto do caminho.

Trata-se de um conselho sólido extraído do excelente blog do Yahoo
Blog de interface do usuárioque em breve será empacotado em um
livro igualmente excelente. Também é
disponível em uma apresentação em PowerPoint apresentada na conferência Web 2.0.

Também abordei um tema semelhante em minha postagem,
Reduzindo o uso da largura de banda do seu site.

Mas antes que o senhor saia correndo e implemente todos os conselhos sólidos do Yahoo, considere o público-alvo. Essas são regras do Yahoo, que de acordo com o Alexa é um dos três principais propriedades da Web no mundo. E a empresa de Rich, Topixtambém não é ruim – eles estão entre os 2.000 primeiros. É natural que Rich esteja muito interessado nos conselhos do Yahoo sobre como escalar um site para milhões de usuários únicos por dia.

Para ajudar outras pessoas a implementar as regras, o Yahoo criou um FireBug plugin, YSlow. Esse plug-in avalia a página atual usando as 13 regras e fornece orientações específicas sobre como corrigir os problemas encontrados. E o melhor de tudo é que a ferramenta classifica a página com uma pontuação – um pontuação! Não há nada que gostemos mais do que resumir páginas e páginas de conselhos complicados em uma pontuação simples e numérica. Aqui está o meu ~~boletim de notas~~ pontuação para o post de ontem.

pontuação de desempenho do yslow

Para entender a pontuação, o senhor precisa dissecar a ponderação das regras individuais, como fez Simone Chiaretta:

Minha pontuação de 73 no YSlow é respeitável, mas já fiz algumas alterações para acomodar
suas inúmeras exigências. Para o senhor ter uma ideia da pontuação de alguns sites comuns,
Simone executou o YSlow em
vários blogs e registrou os resultados:

Google: A (99)
Blog da Yahoo Developer Network : D (66)
Blog da interface do usuário do Yahoo! : D (65)
Scott Watermasysk : D (62)
Apple : D (61)
Dave Shea’s mezzoblue : D (60)
A List Apart : F (58)
Steve Harman : F (54)
Coding Horror : F (52)
Atacado por Phil : F (36)
Computador Zen de Scott Hanselman : F (29)

O YSlow é uma ferramenta conveniente, mas ou a Web está repleta de páginas terrivelmente ineficientes
páginas da Webou há algo errado com sua pontuação. Vou falar sobre isso mais tarde.
isso mais tarde.

A guia Stats contém um resumo do tamanho total
de sua página baixada, juntamente com a pegada com e sem o cache do navegador. Uma das principais descobertas do Yahoo é que
40 a 60 por cento dos visitantes diários têm um cache vazio. Portanto, cabe ao senhor
otimizar o tamanho do tudo e não depender do cache do navegador do cliente para salvar para o senhor
no caso comum.

estatísticas do yslow

O YSlow também divide as estatísticas em muito mais detalhes na guia Componentes.
Aqui o senhor pode ver alguns dos principais critérios de avaliação de cada recurso da sua página…

Esse recurso tem uma data de expiração explícita?
Esse recurso está compactado?
Esse recurso tem um ETag?

… juntamente com os tamanhos absolutos.

componentes yslow

O YSlow é uma ferramenta útil, mas pode ser perigoso nas mãos erradas.
Os desenvolvedores de software adoram a otimização. Às vezes, em excesso.

Há alguns bons conselhos aqui, mas também há muitos conselhos que só fazem sentido
sentido se o senhor administra um site que recebe milhões de usuários únicos por dia.
O senhor administra um site como esse? Se sim, o que o senhor está fazendo lendo isso em vez de
de voar em seu jato particular para passar férias nas Bermudas com sua esposa troféu? O restante dos senhores
O restante de nós deveria ser um pouco mais seletivo quanto aos conselhos que seguimos. Evite a tentação
de aplicar cegamente essas listas de “as melhores (x) maneiras de (y)” que são tão populares no Digg e em
outros sites de redes sociais. Em vez disso, leia os conselhos de forma crítica e pense nas
as consequências da implementação desse conselho.

Se o senhor não ler as recomendações do Yahoo de forma crítica, poderá fazer com que seu site mais lento,
como
como Phil Haack infelizmente descobriu. Embora muitas dessas regras sejam cenários de otimização
e básicos de otimização de HTTP, é lamentável que algumas das regras com maior peso
na lista do Yahoo são totalmente perigosas, se não forem mesmo erradas para sites menores
sites. E quando o senhor define “menor” como “menor que o Yahoo”, isso é… bem, quase
quase todo mundo. Portanto, vamos dar uma olhada crítica no conselho mais problemático e com maior peso
na lista do Yahoo.

Use uma rede de distribuição de conteúdo
Delivery Network (Peso: 10)

Se o senhor tiver que perguntar quanto custa
uma rede formal de fornecimento de conteúdo vai custar, o senhor não pode pagar. É mais
mais eficaz pensar nisso como a terceirização do “trabalho pesado” em seu site – por exemplo, qualquer grande volume de mídia ou imagens que o senhor veicula – para sites externos que são
por exemplo, qualquer grande volume de mídia ou imagens que o senhor forneça, para sites externos que estão
muito mais bem equipados para lidar com isso. Esse é um dos conselhos mais importantes que
conselho que dei em
Reduzindo o uso da largura de banda de seu site. E o uso de uma CDN, abaixo de um volume de tráfego razoavelmente parecido com o do Yahoo, pode até
tornar seu site mais lento.

Configurar
ETags (Peso: 11)

ETags são um campo de soma de verificação fornecido com cada arquivo do servidor para que o cliente possa saber se o recurso do servidor é diferente
da versão em cache que o cliente mantém localmente. O Yahoo recomenda desativar as ETags
porque elas causam problemas em farms de servidores devido à maneira como são geradas
com marcadores específicos da máquina. Portanto, a menos que o senhor administre um farm de servidores, deve ignorar
essa orientação. Isso só fará com que seu site tenha um desempenho pior, pois o cliente terá
mais difícil determinar se o cache está desatualizado ou atualizado. É possível que o cliente
que o cliente use os campos existentes de data de última modificação para determinar se o cache está obsoleto ou fresco.
o cache está desatualizado, mas o
last-modified é um validador fraco, enquanto
Entity Tag (ETag) é um validador forte. Por que trocar força por fraqueza?

Adicionar um cabeçalho Expires
Cabeçalho (Peso: 11)

Esse não é um conselho ruim, por si só, mas pode causar grandes problemas se o senhor o entender errado.
No IIS da Microsoft, por exemplo, o cabeçalho Expires é sempre desativado por padrão,
provavelmente por esse mesmo motivo. Ao definir um cabeçalho Expires nos recursos HTTP, o senhor está
o senhor está dizendo ao cliente para nunca verificar se há novas versões desse recurso— , pelo menos
pelo menos não até a data de expiração no cabeçalho Expires. Quando digo nunca, estou falando sério.
o navegador não vai nem mesmo perguntar para uma nova versão; ele apenas assumirá que sua
versão em cache está pronta para uso até que o cliente limpe o cache ou que o cache atinja a
a data de expiração. O Yahoo observa que eles alteram o nome do arquivo desses recursos
quando precisam que eles sejam atualizados.

Tudo o que o senhor está realmente economizando aqui é o custo do
cliente enviar um ping para o servidor em busca de uma nova versão e receber um cabeçalho 304 não modificado
no caso comum de o recurso não ter sido alterado. Isso não é
muito custo adicional… a menos que o senhor seja o Yahoo. Claro, se o senhor tiver um conjunto de imagens ou scripts
que quase nunca
mudar, definitivamente explore o cache do cliente e ative o cabeçalho Cache-Control. O armazenamento em cache é essencial para o desempenho do navegador; todo desenvolvedor da Web deve ter um profundo conhecimento de como funciona o cache HTTP. Mas use-o apenas de forma cirúrgica e limitada para aquelas pastas ou arquivos
pastas ou arquivos específicos que possam se beneficiar. Para qualquer outra coisa, o risco supera o benefício. Certamente não é algo que o senhor queira ativar como padrão geral para todo o seu site, a menos que goste de alterar os nomes dos arquivos sempre que o conteúdo for alterado.

Não quero tirar nada da excelente orientação do Yahoo.
13 regras simples do Yahoo para acelerar seu site e o companheiro
FireBug plugin, YSlowsão excelentes
para toda a Internet. Por favor, leia. Tire proveito disso. Implemente-o. Eu tenho
falando sobre os
benefícios da compactação GZip durante anos.

Mas também perceba que os problemas do Yahoo não são necessariamente seus problemas. Não existe orientação única para todos os casos. Esforce-se para entender primeiro o conselho e, em seguida, implemente o conselho que faz sentido para sua situação específica.