Se você usa o Blogger/Blogspot para hospedar seu blog, tenho uma má notícia para você: há algo no seu template que aumenta o tempo de carregamento de suas páginas. É a folha de estilos (CSS), cujo grande código ocupa várias linhas, que são adicionadas em todas as páginas do seu blog. Não se preocupe, neste post explicarei como resolver a situação.
Arrume a bagunça e deixe seu blog mais rápido.
Por padrão, os templates do Blogger adicionam o CSS, código responsável pela formatação e apresentação visual de seu blog, dentro dos posts. O correto seria guardar esse arquivo separadamente. Assim, em vez de carregar o mesmo código a cada página que visitar de seu site, os navegadores dos leitores carregarão seu estilo apenas uma vez e abrirão as páginas mais rápido.
Tentei descrever todos os passos necessários para realizar esta tarefa. Mesmo assim, usuários novatos podem encontrar dificuldades que os impeçam de fazer tudo. Depois de completados os passos, a página "Fontes e cores" do Blogger será desabilitada e você não poderá mais utilizá-la para editar seu template. Por isso, faça todas alterações necessárias antes de mexer no código ou simplesmente ignore este passo-a-passo se não souber nada sobre CSS.
- Você precisa de um servidor de hospedagem para seu arquivo CSS. Eu recomendo o FileDen.com, que disponibiliza 1GB de espaço e 5GB de transferência mensal. Crie uma conta lá gratuitamente.
- Após resolvida a questão da hospedagem, é hora de tirar o código de seu template. Entre em qualquer página de seu blog e use a opção "Visualizar - código-fonte" de seu navegador (Ctrl+F3 no Opera e Ctrl+U no Firefox).
- Copie tudo que estiver entre:
<style id='page-skin-1' type='text/css'>e</style> - Entre em Online CSS Optimiser / Optimizer e cole seu código. Clique em "Optimize!". Copie o resultado no Bloco de Notas e escolha a opção "Arquivo - Salvar como". Indique o "salvar como tipo 'todos os arquivos'". No campo "nome do arquivo", digite css.css.
- Envie o arquivo para o FileDen pelo formulário de upload. Depois de enviado, em sua lista de arquivos clique com o botão direito sobre css.css e copie o link.
- Abra a página inicial do Blogger e clique no link em administrar "Layout" abaixo do nome de seu blog.
- Abra a página Editar HTML e use o link Baixar modelo completo para ter um backup (cópia de segurança) se algo der errado.
- Procure em seu código a tag <b:skin> e apague tudo que estiver entre ela e </b:skin> e, acima de <b:skin>, coloque o código:
<link rel="stylesheet" href="LINK" type="text/css" media="screen,projection" />Onde LINK é o link do seu css.css no FileDen. - Salve seu template. Finalmente, terminou! Agora a folha de estilos em cascata está num arquivo CSS externo.
indica páginas externas.
Seção de comentários
Nice CSS tutorials.
I myself use this way to reduce the load time for my blogspot blog.
And I also use this methode to store any javascript. I don't embeded them in the page element...
Anyway...
Keep up the good work...
It's always nice to meet someone who cares about stuff. ;)
Cara. consegui diminuir o carregamento do meu blog em 2s depois de fazer isso! valeu pela dica
verdade da pra diminuir um bom tanto no load da pagina, só demorei um pouco pra achar o codigo mas agora ja consegui, facim, também com as dicas na não!
Obrigado pelos comentários. :)
Voltem sempre, porque voltarei a publicar dicas como essa.
Amigo está dando erro na pagina que vc indicou
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 35 bytes) in /var/www/cssoptimiser/optimize.php on line 231
Anônimo: o erro que você viu foi um erro do servidor. O site já está funcionando.
Ocorreu o mesmo erro comigo.
não sei o que ta acontecendo =/
Tentem este outro otimizador.
O blogger fica me dando essa mensagem: "A skin não pode conter o elemento: link. Somente seções de texto e CDATA são válidas."
Alguma dica?
David, coloque o código acima, e não dentro, de <b:skin>.
Desisti velhinho, hehehehe, o blog tava precisando mesmo de uma repaginada, mudei o layout para outro com menos imagens e ainda por cima com duas colunas para posts, esses templates magazines vão ser a nova sensação do Blogger.
Ah, ia me esquecendo, estou pensando em personalizar o rodapé de postagens colocando matérias relacionadas, busca e mail feed form, fiz isso em um dos meus blogs usando o tuto do Compulsivo, mas ficou muito deselegante.
Diante disso resolvi sugerir uma pauta aqui pro seu blog (que conveniente! \o/), fazer um post ensinando a customizar o rodapé de postagens para ficar semelhante ao seu.
Saudações aqui do Ceará!
Outro otimizador é o http://www.styleneat.com
E pra hospedar o css tem o pages.google.com, porém a pessoa tem que ter gmail
Amigo velho, obrigado pelas dicas que são muito úteis.
Bom, tenho um pequeno problema no meu blog pois ele demora muito para abrir. Tentei essa dica e funcionou em partes, pois com o problema que ele apresenta no css ele demora muito, quando fiz o passo-a-passo (que deu tudo certinho) ele zona todo o template. Me ajude por favor. Abraço e obrigado.
Big JAPPA: entre na página de edição de perfil do Blogger e clique em Compartilhar meu perfil, para eu possa vê-lo e acessar seu blog.
Olá andré, infelizmente não está dando... copiei todo o CSS que estava dentro das tags <b:skin>... e tals... otimizei, criei o arquivo em sites.goole, visto que não existe mais o google pages e terminei o processo como vc mencionou mas a página carrega como se não tivesse CSS algum.
Não tenho meu CSS dentro de tags <style>... como informa o tuto e sim estava todo dentro de tags <b:skin entre subtags XML <![CDATA[...> no otimizador colei só o css e não as tags xml e no html do blog deleteio as tags <![cdata[...> deixando entre as tags <b:skin ...> vazio. Porém o CSS não é carregado e quando vou editar o html novamente, lá está entre as tags <:skin...> as <![CDATA...> incluídas automaticamente denovo.
Se eu deixar assim <b:skin...> apenas com as tags <![DATA[...> e nada entre essas, o CSS tbm não é carregado.
Será que mudou algo nesse sentido no blogger desde o tuto até hoje.
Abraço
Especialista, só tenho condições de oferecer ajuda para quem segue os passos que descrevo. Falei para copiar o CSS do código-fonte de uma página e salvar no FileDen; você copiou o código diretamente do template e salvou em outro site.
Essa foi boa.. Ja vi essa dica antes mas eles pediram para colocar dentro de . Dava só errado e agora um post decente! (:
Deu tudo certo, só tive um probleminha, em que todo o template ficou no canto, e não centralizado como antes. O unico jeito que encontrei de consertar isso foi deixando dentro de <![CDATA[ a propriedade body { }.
Caso alguém tenha o mesmo problema é só fazer isso que funciona.
me diga uma coisa que não percebi
eu estava rocurando como fazer uma lighbox para bloger e reparei que precisava de um arquivo .css e ums .js hospedados e procurei no google onde poderia hospedar um arquico .css de maneira a depois o poder chamar o arquivo .css em minha template encontrei seu site falando sobre isso mas não percebi uma coisa
ese site que referiu ai em sima voce dis que ele disponibliza 1 giga de espaço e 5 de transferencia mensal
como assim??
o arquivo só poderá ser requerido ao servidor até aos 5 gigas??
ou quando os utilizadores caregam a pagina ese trafego não é contado nos 5 gigas??? por favor tenho urgencia em ter uma resposta
casso o arquivo só possa ser caregado pela pagina até aos 5 gigas me avise e se poseivel me indique um servidor que eu posa por arquivos .css e .js e que possam ser lidos por um site muitas vezes ao mês...
é que tenhu muias visitas não sria lindo só as primeiras do mês poderem ver uma lightbox
Excelente dica, usei e aprovei, minhas páginas estavam muito pesadas depois que exportei o CSS não só ficaram mais rápidas como ganhei espaço no meu template hehe.
Realmente é uma dica inteligente, parabéns pelo blog.
D'J DIDIÇ, 5GB de tráfico por mês são o suficiente para transferir folhas de estilo e javascripts para mais visitantes do que a esmagadora maioria dos blogs .blogspot.com têm.