Diminuir tags Html para o blog ou site ter mais velocidade ao carregar

Vou mostrar algumas dicas bem simples de códigos Html que podem ser otimizados, ou seja, reduzidos para que um site ou blog carregue mais rápido.

Esse artigo é para pessoas com conhecimento em informática(webdesign) médio ou avançado, ou que tenha disposição para desbravar em um novo mundo de aprendizado, mas, 'aprendendo a voar sem ainda saber caminhar, e sem ter asas...'.
Por ser um assunto complicado, leia com atenção. Se possível, use um blog ou site de testes

Nos últimos dias eu venho trabalhando muito nisso aqui mesmo no blog, reduzir os códigos dele mas tentando não perder a qualidade do design, se bem que o meu não é dos mais bonitos, mas mesmo que fosse talvez daria para reduzir os códigos, chegou o momento de repassar esse conhecimento até porque tem coisas novas e isso pode ajudar tornar a navegação mais rápida em suas páginas web(blog/site) e, com isso além de agradar seus visitantes acaba agradando os 'sites de busca', uma vez que esses mecanismos também levam a velocidade do site/blog para a posição em seus resultados, claro que não é único fator e nem o mais importante.


Alterações em Html as vezes são chatas e demoradas, por esse motivo, você deve perceber que não é uma coisa que você fará em postagens e artigos, ou seja, você vai fazer nas áreas que são comuns a todo o site, ou seja, na área de gadgets, lateral, menus, anúncios, coisas como links de lateral ou rodapé, imagens que você inserir e que irão aparecer em todas as páginas, me refiro a áreas que você possa alterar uma vez e irá alterar todas as suas páginas, por exemplo, na plataforma blogger, se eu adicionar um gadget de Html/javascript, seja o que for, esse vai estar em todas as páginas e postagens, então, se eu reduzir hoje o código dele, isso vai reduzir para todos os posts e outras páginas, e todos os dias que deixar ele, perceberam a vantagem, um trabalho feito uma vez e o blog fica menos lento centenas ou milhares de vezes, é uma boa vantagem, é quase como se eu conseguisse reduzir bytes de uma imagem de fundo ou ícone que aparece em todas as páginas do site.

Redução simples e melhorar scripts

Javascripts colocados no final do Html, antes de fechar a tag </body> ou no rodapé, de preferência em arquivo externo e sempre que puder colocar o código de script em um arquivo para evitar múltiplas solicitações, isso acelera o carregamento por diversos motivos, solicitações de arquivos tem um certo tempo e o carregamento da página fica mais lento porque o navegador começa a interpretar o script antes de terminar a 'montagem' da página.

Na questão apenas de códigos do Html, na maioria dos javascripts e suas chamadas já é possível retirar o trecho type="text/javascript" pois já é irrelevante para os navegadores atuais e até versões antigas, como exemplo veja o código que usei para gerar um anúncio do Adsense:
<script type="text/javascript"><!--
/* 728x90, criado 08/12/2010 */
google_ad_client = "pub-4636225303410655";
google_ad_slot = "3036303749";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script
src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>

Agora, um código que tem igual função ao apresentado acima, eu poderia dizer até que é o mesmo, mas não é literalmente o mesmo, pois para reduzir eu fiz alterações, retirei excessos, veja e compare:

<script><!--
google_ad_client="pub-4636225303410655";google_ad_slot="3036303749";google_ad_width=728;google_ad_height=90;
//--></script><script
src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

Se observar e comparar os códigos, retirei dois type="text/javascript" retirei quebras de linhas, retirei espaços, retirei um http: e a anotação /* 728x90, criado 08/12/2010 */ que, se eu não quisesse retirar ela eu poderia reduzir para /* em8/12/10 */ uma vez que o tamanho 728x90 já está descrito em google_ad_width=728 e... Num anúncio foi economizado mais de 100 bytes, e se um blog ou site tem 3 ou 4 anúncios... Nem todo espaço pode ser retirado de códigos javascript, mas isso é uma questão de observar os padrões que eles obedecem.

Também, é bom saber que nem todo script funciona de mesma maneira em diferentes navegadores, por isso é bom sempre que alterar algo, testar nos navegadores mais utilizados, que vária de época. Para desktop(Pc de mesa e notebook) os navegadores mais utilizados em 2013 são Google Chrome, Mozilla firefox e Internet Explorer que se destacam nessa ordem e juntos somam uns 90% dos internautas que usa um deles, sendo que o quarto mais utilizado talvez não chegue a ser 5% em preferência de internautas, 'hoje' o Chrome é mais usado, acredito que a persistente propaganda, se navegar bastante vai perceber, e, claro que pelo visual bonitinho e até sua facilidade para usuários iniciantes. Mas, na questão de navegadores muda bastante, muita coisa influencia, como o sistema operacional do seu público alvo, localização, idioma, local de acesso, aparelho usado, etc.

Novidades e dicas sobre tags Html

Independente de linguagem de programação, plataforma, a linguagem de marcação sempre será Html, coisas novas aparecem, algumas antigas ficam em desuso, alguma pode ser substituída de acordo com sua necessidade, as tags para dar ênfase, organizar ou para gerar/acrescentar elementos podem ser substituídas, excessos podem ser reduzidos, 'erros' corrigidos...

Em Html a gente pode mudar muita coisa, algumas tags podem ser substituídas, como a tag <strong> onde que a tag <b> teria o mesmo efeito que é negrito, também é bom ter um cuidado, tem programas(tipo editores wysiwyg) que, quando você vai criar um negrito ou itálico ele acrescenta algo como <span style='font-weight:bold;'> para negrito</span> e isso <strong>também é negrito</strong> e usa menos bytes para mesmo efeito ou, 'imagine' que <b>isso também é negrito</b>, não imagine o fato, imagine você usando a primeira ou segunda opção várias vezes, o quanto em bytes sua página web deixaria de economizar.

Outro exemplo de códigos html, para inserir imagens, muitas vezes a gente ou programas cria o trecho html assim:
 <img src='http://foitestado.com/images/foitestado.png' />

Na redução, funcionaria bem dessa maneira:
<img src='//foitestado.com/images/foitestado.png'/>

Perceba que no código acima eu retirei um espaço vazio e e removi também o http: já que hoje sabe-se que ele é desnecessário para quase tudo, criar links já funcionam sem ele, linkar scripts e folhas de estilo externos, iframes, no css, etc.
Outro exemplo, observe esse trecho de código que é parte de um formulário:
<form action="http://foitestado.com/Sea">
<input value=" Pesquisar " name="sa" type="submit" />

Agora observe-o de maneira reduzida:

<form action="//foitestado.com/Sea"><input value="Pesquisar" name="sa" type="submit"/>

No exemplo acima não sei se passou de 10 bytes, mas existem formulários com várias linhas de input, um em cada linha, e mesmo que fosse apenas 10 bytes, se esses 10 bytes num template(tipo de theme, modelo ou layout geral) pode estar em todo o blog/site.

Se adicionar um flash em que pegou código de outro site, como exemplo esse vídeo:

<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/fiwj22tIq1w"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/fiwj22tIq1w" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
</object>

Perceba uma boa reduzida:

<object width="425" height="355"><param name="movie" value="//www.youtube.com/v/fiwj22tIq1w"/>
<param name="wmode" value="transparent"/><embed src="//www.youtube.com/v/fiwj22tIq1w" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"/></object>

Para as novas versões de Html pode-se retirar o </param> e </embed> desde que você feche a tag corretamente acrescentando a barra / no local correto como eu fiz. Tirei também as quebras de linha desnecessárias para o navegador exibir a página, pois elas apenas facilitam para o webmaster entender o código, mas, se não me engano cada uma quebra é 2 bytes e cada espaço 'em branco' é 1 byte, retirei também os http: e com isso no ultimo código foi reduzido 50 bytes, sei que é pouco , mas somado a outros...

Conclusão e dicas extras

Para quem trabalha com sites e pode ou costuma salvar páginas web no Pc, aí, no seu Pc os navegadores talvez não consigam interpretar uma Url sem o http: mas, quando essa Url estiver num blog ou site da web ela funciona normalmente.

Se você é um usuários mais avançados(webmaster, webdesigner) ou já fez algum curso Html, também, uma Url pode ser reduzida ainda mais, quem entende de Html e tem uma boa noção do que é um diretório pode usar Url sem o nome do site se for para um arquivo ou endereço interno, por exemplo, eu posso criar um link para esse mesmo site que você está lendo assim:

<a href='/2013/07/Sites-para-Verificar-Online-o-tempo-de-Carregamento-de-meu-Blog.html'>Verificar velocidade do blog</a>

Esse tipo de corte da Url é válido para criar links nas laterais e áreas de navegação do blog ou site, inserir imagens, backgrounds, mas, para meta tags é aconselhado usar a Url completa e inclusive com o http: pelo menos até 2014 será assim, já para a chamada de arquivos externos como javascript e folhas de estilo Css você pode escolher uma das maneiras, com Url inteira, com Url cortada, mas, aconselho que use a Url inteira, porém sem o http: para economizar uns bytes, como exemplo eu vou mostrar como eu faço a chamada do único  javascript meu aqui no blog:

<script src="//foitestado.com/zoom.js"></script>

Esse script é responsável por elementos 'secundários' ou que dependem de javascript para funcionar, chamada de script eu uso a Url completa sem o http: já para links de navegação é o exemplo que mostrei acima, e, links no artigo(texto) eu uso a Url completa, se eu acrescentar muitos links alguns eu retiro o http: principalmente na parte mais baixa do artigo, no artigo eu recomendo que use a Url completa para que, quando alguns 'mecanismos' copiam trechos do artigo eles levem o Url certo e assim os sites que usam esses mecanismos retornem-me o link correto, essa é uma dica extra que também vale para imagens no artigo, esses mecanismos geralmente pegam as primeiras linhas do artigo, as vezes eles retornam visitantes para o blog, por isso é importante uma boa introdução.

Ultima dica, você acessou um site rápido, viu um ou mais sites ou blogs bons que aparecem bem no Google(2013 já não é mais o caso deste blog), verifique o código-fonte deles, observe, veja o que esse sites tem em comum, pense e se pergunte porque a criatura criou um código assim, tem alguma vantagem que se aplique a seu site? Nem sempre você vai entender o código ou porque a pessoa fez aquilo, nem tudo que tem em outro site será vantagem para o seu, nem estou incitando a sair copiando pedaços de códigos a esmo porque talvez assim só consiga formar uma bagunça, mas você pode aprender com os acertos de outros.

Ainda nessa mesma dica, use o Mozilla Firefox para ver o código-fonte, inclusive para inspecionar o seu próprio, ele usa cores para facilitar, e, alguns erros críticos ou nem tanto ele vai deixar parte do código em cor vermelha forte, se ao exibir o código-fonte com o Mozilla você ver tags na cor vermelha é porque algum erro tem, qual, você terá que descobrir.

Sei que é assunto um pouco complexo, se ficou dúvida em relação ao post, pergunte nos comentários, nem tudo eu posso responder, mas, na medida do possível...

Sites para Verificar velocidade do blog