As requisições HTTP e o tal de cache
Em primeiro lugar vamos entender essas coisas estranhas. No post sobre as CSS Sprites, expliquei que colocando as imagens pequenas em um único arquivo você ajuda a velocidade de seu blog. No post sobre JavaScript mostrei como colocar todos os códigos também em um único arquivo.
Quando eu lancei o desafio de deixar a página com no máximo 100k, pedi pra vocês espiarem no Analyzer qual o estado de seu blog. Vocês devem ter visto que seu site tem xx objetos.
Bem, agora vamos às explicações: cada objeto desses é uma chamada HTTP. Quanto mais objetos, mais requisições e quanto mais requisições, mais o blog demora a carregar.
Imagine que você é um culinarista, planejou um jantar requintado para 1000 pessoas e fez a encomenda dos ingredientes ao supermercado A. Esse supermercado não tem uma van, só usa moto-boys. Você começa suas receitas e os ingredientes vão chegando a cada 15/30 minutos. Então, os moto-boys começam a pegar trânsito, uma moto quebra, etc, etc... E você esperando os ingredientes para preparar o jantar!!
Seu concorrente, esperto, fez a encomenda no supermercado B. É mais caro, mas tem um caminhão. Quando ele estava começando as receitas, todos os ingredientes (as chamadas HTTP) já haviam chegado e estavam na despensa (cache).
Se você junta todos os seus objetos em poucos arquivos, seu blog fará menos requisições HTTP. O Google e os outros crawlers vão adorar e seus leitores também.
Esse é o motivo de minhas recomendações nos posts anteriores:
- Reduza a quantidade de imagens através de Mapa de Imagens ou Sprites - imagens são arquivos externos - cada uma significa uma chamada HTTP;
- Otimize as imagens para reduzir o tamanho de seus arquivos e portanto a demora na requisição HTTP;
- Retire as imagens e qualquer estilo do
body- A cada mudança de página todos os estilos nobodyserão carregados novamente e cada imagem terá uma nova chamada HTTP que também será carregada novamente. Na CSS eles carregam só no primeiro acesso e ficam lá na despensa.. ops.. no cache; - Da mesma forma que as imagens, cada arquivo JavaScript hospedado em um endereço diferente (ainda que no mesmo site) é uma chamada HTTP individual. Quanto mais endereços, mais requisições. Juntar todos em um único arquivo diminui as chamadas, comprimir o arquivo reduz a demora da chamada por ser um arquivo menor.
Essas recomendações também servirão para a CSS, mas é um capítulo que veremos mais a frente.
Esse tal de cache é uma beleza, não? Carrega tudo e eu fico tranquilo!
Não é bem assim, afinal, a despensa não fica cheia o tempo todo. A primeira coisa que você deve ter em mente é que a maioria dos blogs tem maior percentual de visitantes novos do que visitantes frequentes. E você sempre busca atrair visitantes novos. Por isso, é importante que seu blog seja leve mesmo para quem está visitando aquela página pela primeira vez. Além disso, mesmo os seus leais leitores limpam o cache do computador, seja através de opções do navegador, ao reiniciar o pc, e mesmo através de limpeza manual, o que é saudável para não sobrecarregar a memória. Por essas razões, a redução da quantidade de chamadas - os tais objetos do Analyzer, e do tamanho dos arquivos externos (que interferem na demora das descargas das chamadas) são tão importantes.
E onde entra a hospedagem externa ou escrever o JS no template, nessa conversa toda?
Pois é, a dúvida continua. Se pensarmos como primeira visita, é melhor escrever o script inline já que será apenas uma requisição HTTP. Se os seus JS são distribuídos, ou seja, um deles carrega uma função na página inicial, outro carrega na página de categorias, outro carrega nas páginas individuais dos posts, é possível que escreve-los inline seja mais vantajoso, quando você os coloca em condicionais.
Mas, como regra geral, usar um arquivo externo é a melhor opção. Quando você faz a chamada do arquivo externo, ele é carregado no cache, e se a função é solicitada em todas as páginas de seu blog, será feita apenas uma requisição HTTP. E nem estou levando em consideração o quanto é ruim para os mecanismos de busca aquele montão de códigos em seu HTML.
Porém, no Blogger temos uma limitação: não temos onde hospedar arquivos externos (com exceção das imagens que são hospedadas no Picasa) de maneira confiável, adequada e gratuita.
No próximo post vamos falar um pouco sobre como escolher hospedagem externa.
Leitura recomendada: Best Practices for Speeding Up Your Web Site
Comentários: 11
Antes eu tinha meus JS hospedados no próprio blogger (com o código no template, mas notei que depois de um tempo, começou a demorar pra abrir a página...
agora eu tô hospedado no XPG (www.xpg.com.br) que pra mim é a melhor hospedagem gratuita que já vi! E o melhor que é tudo em português e ainda te dá 1GB de espaço e banda ilimitada!
Faz + ou - uma semana que mudei pro XPG e até agora não tive problemas, tenho hospedado lá o JS que faz o resumo dos posts e várias imagens do template... imagens essas que antes tinham saido do ar por causa do excesso de banda do photbucket que é só 10GB/mês...
Fica aqui a dica, se quiserem hospedar arquivos JS, usem o XPG!
HRDownloads: Você poderia postar em seu blog (ou te convido a postar aqui) um tutorial a respeito, não?
Ficaríamos todos agradecidos! :D
Espero que eu seja atendido
Vom ja que por aki lance de ser respondido é na duvida rsrs
Tem como voc epostar a maneira correta de incluir o Avatar do profile nos comentarios ??
em uns blog meus esta normal ams em outros nao , ajuda awe ! =D
desde de ja agradeço
:)
Tá engraçadinho, né, seu Gama?
Não posso te responder agora porque tô com sono.
Amanhã respondo, tá? :P
(bobo... rs)
E não reclame que a área de comentários está feia... só vou consertar quando aparecerem as fotinhos... :P
Olá Rô!
O artigo está excelente. Vou tentar me familiarizar com esses códigos, pois ainda tenho dificuldade de entender.
Fugindo do assunto do post (desculpe-me), gostaria de saber como colocar na sidebar os posts recomendados, como esses que você colocou, aí ao lado. Gostaria de colocar aqueles posts, que obtiveram mais cliques e não os que receberam mais comentários.
Obrigada.
Sumy
comendadosr como colocar na sidebar os posts r Para mim, que ainda não me familiarizei com esses códigos, um tanto quanto difícil
Rô, eu ficaria honrado em em ter um tutorial meu aqui!
Acho que não cairia muito bem eu colocar um tutorial desse tipo no meu blog, pois lá eu só posto arquivos para downloads...
Vou fazer ver se essa semana eu faço um tutorial e depois eu volto aqui para como posso te passar...
PS: Meu nome é Heverson...
Abraços!
Sumy: Esse é um gadget do Google Friend Connect. Entra com sua conta do Google no site do Friend Connect e configure seu blog lá. Depois você acha os códigos de vários gadgets que pode colocar no blog.
Prá iniciantes é um pouco chatinho, depois acho um tempo pra fazer tutoriais a respeito desses gadgets, ok?
Oi Heverson! Fico aguardando ansiosa seu retorno, então.
É um grande prazer ter um "guest post" seu aqui no BloggerSPhera :D
Abração prá vocês!
Caramba. Por mais que se estude sobre blogs e melhoramento em carregamento de imagens sempre tem algo que nos surpreende. Excelente explicação, muito didática mesmo, agora vou ao próximo passo. :)
Muitas vezes eu leio essas coisas nos bogs e fico com vontade de expor isso no meu também. São assuntos muito interessantes e que com certeza mereciam ser repassados aos meus amigos e leitores, mas sei que seria "plagiar" e eu não to afim de perder meu blog. :D
Maicom: Eu parto do princípio de que informação não tem dono.
O BloggerSPhera sofre plágios grotescos (mais de um blog simplesmente publicando os feeds de meus artigos com meus links, imagens, etc). Nunca me manifestei a respeito porque esse tipo de plágio não merece nem minha atenção.
Fico mais chateada quando gasto meus neurônios, meu tempo e algumas noites de sono desenvolvendo algum hack e depois vejo publicado pelo blogueiro como se ele tivesse desenvolvido. Por isso dou um grande valor aos desenvolvedores e sempre faço questão de colocar o nome e o link onde descobri um script ou hack interessante - porque dá trabalho e exige uma concentração danada!
Mas não é o caso deste artigo. Tudo que está escrito aqui aprendi lendo em vários locais, não desenvolvi nada. Por isso, sinta-se à vontade para repassar estas informações aos seus leitores, ok?
Abração!
Postar um comentário
Para deixar o link da sua última postagem coloque este código:
Feed dos Comentários<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu-link-do-último-post">Título do Post</a></em>
Quando você estiver testando algum hack e tiver dúvidas sobre ele, informe:
1 - O endereço do blog onde você está testando (ou instalando o hack);
2 - O navegador que você está usando (Firefox, Opera, IExplorer, etc).
Leia sobre a política de Comentários!
Eu gosto de conhecer meus leitores! Se você usar OpenId ou perfil fechado, assine o comentário com seu nome e me deixará muito contente!
Bem-vindos e obrigada pela visita!
Blog This!