, , ,

10 dicas para Otimizar o Código do seu Blog

25 comentários

Comparando os Resultados: seu blog está mais rápido?Otimizando os Widgets para tornar seu blog mais RápidoComo escrever postagens mais limpas e que carregam mais rápidoOtimizando as Imagens do seu Blog10 dicas para Otimizar o Código do seu BlogO que fazer para tornar seu blog mais rápido?A Importância da Rapidez num Blog

Chegamos à um dos principais pontos do Curso: o Template. É ele que o navegador lê quando o usuário digita o endereço do seu blog, e que chama os outros elementos (postagens, imagens, widgets). Nesta etapa nós veremos 10 dicas muito importantes para alterar o código fonte do seu template e tornar seu blog mais leve, reduzindo o tempo de carregamento.

Então vamos lá, acesse o seu Painel do Blogger e selecione Layout, então clique em Editar HTML para entrar no modo de edição do código do seu Template (como na imagem abaixo).

Caso sinta muita dificuldade para fazer a edição do HTML, considere ler alguns textos sobre a linguagem e também sobre CSS, que define os estilos de objetos e textos dentro do seu template.

Não se esqueça de fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo. Além disso, antes de salvar as alterações à cada passo, visualize seu template para verificar se tudo está funcionando corretamente.

Remova Meta Tags desnecessárias
Mantenha somente as Meta Tags necessárias como a Title (nome do site), Description (descrição do site) e Keywords (palavras-chaves).

Otimize o CSS do Template 
Você pode simplificar a parte CSS do código utilizando o Otimizador do site CleanCSS e inserindo na caixa de texto do site tudo que estiver entre as tags <b:skin><![CDATA[/* e ]]></b:skin> do seu Template, então clique em Process CSS. Ele vai gerar a versão compactada do CSS, então é só copiar o texto e substituir o original na edição de HTML do seu Template.

Remova os espaços e linhas em branco
Espaços e linhas em branco no código consomem espaço no arquivo. Removê-los torna o carregamento do blog mais rápido, porém pode dificultar edições posteriores. Então remova ao menos os desnecessários.

Remova as Tags </p>
Enquanto as tags <p> iniciam os parágrafos, as tags </p> os encerram. No entanto, as tags </p> não são essenciais para o funcionamento do parágrafo e podem ser removidas. Use a pesquisa do seu navegador para encontrar as tags </p> e remova-as.

Remova os comentários do código
Comentários são trechos do código que não são levados em conta pelo navegador na hora de renderizar a página e tem apenas a função de auxiliar a edição, mas mesmo assim aumentam o tamanho total do arquivo. Se você já está familiarizado com o template ou não utiliza os comentários, remova-os. Comentários utilizam uma marcação diferente, por exemplo /**** Comentário****/, <!–Comentário–!> e //Comentário. Note que alguns scripts/hacks utilizam os comentários para funcionar, então verifique antes de apagar.

Use a barra (/) no fim das URLs
Endereços com barras no fim abrem mais rapidamente. Por exemplo, http://www.meusite.com.br/ abre mais rápido que http://www.meusite.com.br . O mesmo vale para diretórios, como http://www.meusite.com.br/forum/. Portanto, utilize a barra ao criar links no template. No entanto, você não deve acrescentar a barra à endereços que terminam com extensões de arquivo (.html ou .jpg, por exemplo).

Defina altura e largura para imagens 
Quando você utilizar alguma imagem no seu template, não se esqueça de determinar altura (height) e largura (width). Quando esse atributo não é definido, o navegador é obrigado a determinar esses valores antes de continuar com o carregamento do restante do blog. O código de uma imagem com altura e largura definida fica assim:

<img  src="endereço URL da imagem" width="largura"  height="altura"/>

Para descobrir a altura e largura das imagens, vá em Propriedades clicando com o botão direito em cima da imagem. O tamanho é determinado em pixels.

Abrevie o código 
O processo realizado no item 2 já faz esse tipo de modificação na parte CSS do código. Esta dica é para quem já tem alguma noção de HTML e assim integrar esses conceitos no restante do código e nas próximas edições que você fizer. As abreviações de código ajudam a diminuir o tamanho do arquivo sem que nada se perca. Por exemplo, as abreviações de cor, que reduzem o código de 6 dígitos para 3:
  • Laranja: #ff9900 pode ser abreviado para #f90
  • Preto: #000000 pode ser abreviado para #000
  • Amarelo: #ffff00 pode ser abreviado para #ff0
  • Azul Claro: #69C7E8 não pode ser abreviado

É fácil entender a lógica da abreviação, e tendo em mente os valores abreviados é só fazer a substituição. Também é possível abreviar medidas, como no exemplo:
  • Margin: 0 0 0 0; pode ser abreviado para Margin: 0;
  • Margin: 0px; pode ser abreviado para Margin: 0; pois o zero não depende de qual sistema métrico é escolhido.
  • Margin: 0 10px 0 0; pode ser abreviado para Margin: 0 10px; pois o que não é colocado é sempre entendido como 0;
Da mesma forma, é possível abreviar várias linhas de código em uma, como no exemplo:

Original Abreviado

body {
border: 5px none #000;
font: Verdana;
font-size: 12px;
text-align: center;
margin: 0;
padding: 0; 
}

body{border:5px none #000;font:Verdana;font-size:12px;text-align:center;margin:0;padding:0;}

Avalie o desempenho dos Scripts/Hacks
Não cometa o erro de colocar scripts/hacks (resumos de postagens, contador de usuários, etc) no seu template e esquecer-se deles. Faça uma avaliação durante uma semana de como eles estão afetando o tempo de carregamento e a usabilidade do seu blog e determine se o benefício proporcionado por ele é superior ao peso a mais na página. Se você já tem vários instalados em sua página, sugiro que faça um backup do código e remova todos. Então verifique a diferença no carregamento da página e determine quais devem voltar ou não.

Remova entradas redundantes
Esta recomendação exige um conhecimento intermediário de HTML. Existem muitas formas de se cometer redundância no código, por exemplo: um estilo de Título (Header) que vá manter a mesma fonte do corpo, não precisa declarar novamente a fonte a ser usada, já que ela vai herdar a fonte do corpo. O mesmo vale para cores, alinhamento e outras configurações. Da mesma forma você deve eliminar elementos desnecessários, como classes CSS não usadas e definições vazias como background:url(), border:none e outras.

Na próxima etapa, vamos aprender a otimizar as imagens do seu blog e alguns truques para tirar o melhor delas. Ir para a Parte 4 >>

Comentários (25)

Muito bom, bacana demais, parabéns!

iceBreakerSérgio Estrella22/10/08 16:33

Mais uma vez agradeço pelo apoio! Espero que estejam aproveitando as informações. O melhor é que isso beneficia tanto os blogueiros quanto os usuários.

Thaynah 22/10/08 18:40

Poxa, muito legal sua iniciativa de ajudar as pessoas que não têm muito intimidade com as ferramentas do blog.
Meus parabéns.


Abraços.

Darcy Mendes 23/10/08 15:30

Ótimas dicas. Já estou implementando nos meus blogs.

Abraços.

amplitudesonora 01/03/09 03:35

tuas dicas é matadoras eu vou aplicar varias no meu blog. onde eu ja uso umas para otmizar. vou começar a te frequentar..rsrsrs

Administração 11/07/09 21:37

Ola, eu sou dono do DownsFree = http://www.downsfree.com.br/
Gostaria de saber se é possivel mudar as cores do comentario, http://www.downsfree.com.br/2009/04/avast-professional-edition-48133590205.html, vejá, ela está de vermeho, eu gostaria de trocar as cores, deixar mais alinhados, deixar mais o menos como esse de meu parceiro http://www.matrixdownloads.net/2009/04/sim-senhor-rmvb-dublado-dvdrip.html?showComment=1246918371879#c7908456512080959053, se é possivel, se possivel, me comunique por email, contato@downsfree.com.br ou pelo msn downsfree@msn.com..
Espero Respostas... Vlw..

Anônimo 24/05/12 14:57

Olá,

Gostei, parabéns! Muitas dicas legais!
visite meu site: www.queromaisvisitas.com.br

Anônimo 12/03/13 05:37

This is a terrible mistake to Get in home business, for the search terms for the use
of the keyword idiom, and its Portion quarrel passim the unlike parts of the source varlet text.

So thecompanies are also choosing the keywords which are more confines of their homes and
not just do they Work on, they as well Get a Succeeder of it.


my web site - work at home business opportunity

Anônimo 16/05/13 11:31

Compare and read about the different packages offered by seo Company.

There is also RSS directories and this type really works
combining with social media networking sites to interact and to add unknown friends whom they
don't know. Here is an example: Bob has a site about sports cars and in his meta description, and alt tags for images.

Look at my web page :: indianapolis search engine optimization

Anônimo 18/05/13 02:10

Here are some amazing ways to get your ex back, beginning right now!
Ninety-two percent of men said it wasn't primarily about the sex, we all have this picture of cheaters as the bad guys. The medical expensesuser fees on drugs, laboratory diagnosis, physician fees, and other health related variables.

Feel free to visit my web site: want ex boyfriend back

Anônimo 25/05/13 13:17

My spouse and I absolutely love your blog and find most of your post's to be precisely what I'm looking for.

Do you offer guest writers to write content available for you?
I wouldn't mind writing a post or elaborating on a number of the subjects you write in relation to here. Again, awesome web site!

my web blog: ski resorts

Anônimo 27/05/13 19:23

Asuka Kazama Asuka Kazama first appeared in Tekken 5 and Tekken 5:
Dark Resurrection. Notice, I didn't have any apprehensions about introducing call of duty free games at the time. Most of these players have no choice but to learn how to use them too, kids never have to stop playing.

Feel free to visit my blog: call of duty black ops wii

Anônimo 01/06/13 22:28

It has such a great impact on the nation's economy. In fact, some theorists say that people who claim to have seen the growth of the sport. You can equally go for hikes in addition to bustling cities. In Part I of the novel, skywarn training symbols are the foreshadowing the destruction of secessionist Biafra. Not only are they helpful for the other trees, but also physically.

Here is my webpage; minnesota storm chasers

Bart aleem 20/04/15 14:47

Muito bom, estou adorando esse blog, tem dicas incríveis aqui parabéns ao administrador, diminuir o tempo de carregamento de blog realmente é um ponto muito importante para manter os visitantes mais tempo no blog.

Wei Chen 26/06/15 23:16

kobe bryant jersey
north face jackets
golden state warriors jerseys
kate spade outlet
nike outlet
michael kors outlet
vikings jerseys
soccer jerseys
chiefs jersey
nike free 5.0
nike trainers uk
phil mcconkey jersey,odell beckham jr jersey,michael strahan jersey,chris snee jersey,larry donnell jersey,peyton hillis jersey,carl banks jersey,lawrence taylor jersey,phil mcconkey jersey,justin tuck jersey,michael boley jersey,chase blackburn jersey
north face outlet
ralph lauren outlet
ahmad bradshaw jersey,josh mcnary jersey,andrew luck jersey,donte moncrief jersey,delano howell jersey,robert mathis jersey,andrew luck jersey,trent richardson jersey
drew brees jersey,corey white jersey,khiry robinson jersey,archie manning jersey,mark ingram jersey
moncler outlet
stuart weitzman boots
louboutin uk
dansko shoes
chelsea football shirts
tory burch outlet
fivefingers shoes
coach outlet store
canada goose sale
arizona cardinals jerseys
dansko outlet
tommy hilfiger outlet store
koby bryant shoes
chelsea soccer jersey
wei20150627

Ww Weng 15/07/15 07:27

ralph lauren outlet

ralph lauren uk

ralph lauren polos

ralph lauren outlet online

ralph lauren outlet

ray-ban

ray ban outlet

ray ban

ray ban sunglasses outlet

ray ban sunglasses

cheap ray ban

knockoff handbags

omega watches

jordan release dates

replica watches

roshe run

roshe runs

ferragamo shoes

nike mercurial

softball bats

supra footwear

swarovski outlet

swarovski crystal

swarovski uk

north face

the north face outlet online

the north face

the north face outlet

north face jackets

thomas sabo uk

tiffany and co outlet

tiffany's jewelry

timberland boots

timberland shoes

tommy hilfiger kids

tommy hilfiger outlet

huali10 Cai 17/07/15 04:11

oakley sunglasses
minnesota vikings jerseys
hollister clothing
kate spade outlet
swarovski jewelry
ghd hair straighteners
toms shoes
new england patriots jerseys
lacoste polo shirts
instyler ionic styler
mac cosmetics
puma shoes
timberland boots
true religion sale
futbol baratas
kobe 9 shoes
adidas wings
new york knicks jersey
adidas wings
ferragamo shoes
michael kors outlet
tory burch flats
mont blanc pens for sale
herve leger sale
los angeles clippers jerseys
seattle seahawks jerseys
louis vuitton outlet stores
salomon shoes
coach outlet
kobe 9
coach factory outlet
beats headphones
instyler ionic styler pro
ray ban sunglasses
air jordan gamma blue
timberland outlet
kate spade outlet
zheng123 7.17

mao qiuyun 13/09/15 21:52

boston celtics, http://www.celticsjersey.com/
cleveland cavaliers, http://www.cavaliersjerseys.net/
ugg boots, http://www.uggsoutlet.us.org/
dansko shoes, http://www.dansko-shoes.us/
michael kors outlet online, http://www.michaelkorsoutletonlinestores.us.com/
mlb jerseys, http://www.cheapmlbjerseys.net/
air jordan 13, http://www.airjordan13s.com/
green bay packers jerseys, http://www.greenbaypackersjersey.us/
lacoste pas cher, http://www.polo-lacoste-shirts.fr/
timberland boots, http://www.timberlandboots.name/
nhl jerseys, http://www.nhljerseys.us.com/
swarovski jewelry, http://www.swarovski.in.net/
nike roshe run, http://www.nikerosherunshoes.co.uk/
lebron james shoes, http://www.lebronjames.us.com/
bears jerseys, http://www.chicagobearsjerseys.us/
coach outlet online, http://www.coachoutletonline.in.net/
air max 90, http://www.airmax90.us.com/
hollister pas cher, http://www.abercrombie-fitch-hollister.fr/
michael kors outlet, http://www.michaelkors-outlets.us.com/
mbt shoes outlet, http://www.mbtshoesoutlet.us.com/
michael kors outlet, http://www.michaelkorsoutletonlinestores.us.com/
moncler coats, http://www.moncler.us.com/
abercrombie and fitch, http://www.abercrombie-fitch.us.com/
bottega veneta outlet online, http://www.bottegaveneta-outlet.net/
calvin klein underwear, http://www.calvinklein.in.net/
kobe 9, http://www.kobe9elite.us.com/
yoga pants, http://www.yogapants.us.com/
pandora, http://www.pandora.eu.com/
mulberry outlet, http://mulberryoutlet.outlet-store.co.uk/
oakley sunglasses, http://www.oakleysunglassesonline.us.com/
0914maoqiuyun

陈晓 29/10/15 01:28

crx123
hollister canada burberry longchamp handbags adidas swarovski canada louis vuitton outlet online ralph lauren uk nike roshe easton bats longchamp outlet hollister tommy hilfiger canada burberry prada shoes gucci outlet michael kors outlet online sale polo ralph lauren outlet oakley outlet kate spade michael kors handbags clearance hogan louis vuitton outlet online vans new balance beats audio toms outlet jordan retro 11 true religion outlet nike p90x workout north face outlet beats by dr dre gucci outlet swarovski toms shoes outlet hollister timberland outlet thomas sabo hermes birkin mac cosmetics north face jackets coach factory chanel woolrich jackets outlet bcbg max azria nike store michael kors abercrombie ray bans gucci uk ray-ban sunglasses tiffany and co

Qing Cai 28/12/15 04:40

cheap jordans
michael kors clearance
michael kors handbags
beats by dr dre
michael kors handbags
omega watches
louis vuitton handbags
true religion sale
ralph lauren
rolex watches
basketball shoes
cheap mlb jerseys
michael kors outlet
true religion outlet
hermes birkin
ugg boots
pandora jewelry
michael kors factory outlet
true religion jeans
coach outlet online
chanel outlet
fitflops sale
michael kors online
cheap jordans
cheap oakley sunglasses
nike huarache
ray ban sunglasses
mulberry bags
tory burch outlet
mulberry handbags
barbour coats
kobe shoes
chanel handbags
beats by dre
ferragamo outlet
tiffany jewelry
ray ban sunglasses
coach outlet store
kobe bryant shoes
cheap ugg boots
cai20151228

Gege Dai 02/04/16 05:38

linyuan0402
cartier sunglasses
versace sunglasses
prada sunglasses
police sunglasses
chrome hearts outlet
cartier outlet
cazal sunglasses
burberry sunglasses
chrome hearts
dior sunglasses
chanel sunglasses
cartier watches
louis vuitton sunglasses
gucci sunglasses

Gege Dai 20/06/16 06:38

cartier outlet store
michael kors handbags
michael kors outlet
michael kors outlet
swarovski crystal
toms shoes
adidas outlet
burberry outlet
calvin klein underwear
polo ralph lauren
longchamp handbags
polo ralph lauren
fitflops shoes
ralph lauren uk
adidas shoes
hollister clothing
mulberry bags
swarovski crystal
michael kors outlet
polo ralph lauren
nfl jersey wholesale
coach handbags outlet
michael kors outlet uk
ralph lauren shirts
michael kors factory store
cheap nfl jerseys
calvin klein outlet
fitflops uk
prada handbags
oakley sunglasses wholesale
fitflops sale clearance
true religion outlet
coach outlet
christian louboutin shoes
ralph lauren polo
16.6.20qqqqqing

林东 06/07/16 21:57

adidas pure boost
designer handbags
nike huarache white
cheap nike shoes
kobe shoes
nike air max
ray ban outlet
sac longchamp
reebok pump
cheap jordan shoes
ray ban sunglasses
michael kors outlet online
ray ban sunglasses
birkenstock
ray ban sunglasses discount
nike tn
louis vuitton outlet
cartier love bracelet
coach factory outlet
true religion jeans
louis vuitton handbags
ralph lauren outlet
tiffany and co
ghd hair straighteners
kate spade
oakley sunglasses
cheap nhl jerseys
cheap jordans
abercrombie and fitch outlet
michael kors outlet
adidas shoes uk
ralph lauren outlet online
pandora charms
coach outlet online
versace sunglasses
discount nike shoes
0707xiong

John 12/08/16 11:40

michael kors handbags
supra shoes
omega replica watches
hermes belt
lacoste outlet
cheap ray bans
coach factory outlet online
tiffany jewelry outlet
mont blanc pens for sale
ugg sale
hollister uk
cheap jordans
ralph lauren pas cher
cheap nike shoes
cheap ray bans
kobe bryant shoes
coach outlet online
coach outlet online
ray bans
canada goose jackets
louis vuitton bags
nike air force black
nhl jerseys wholesale
adidas stan smith
fitflops sale
michael kors outlet online
burberry handbags
lacoste shoes
michael kors outlet
true religion uk
cheap jordan shoes
micahel kors
coach outlet
prada outlet
oakley sunglasses wholesale
2016812yuanyuan

Unknown 18/11/16 00:34

skechers outlet seriously
michael kors handbags your
michael kors outlet post
new balance outlet them
ralph lauren outlet online am
oakley sunglasses Every
longchamp le pliage the
michael kors handbags so
denver broncos jerseys of
cheap nhl jerseys Friday

Postar um comentário