Embora se saiba que ter conhecimento de como acelerar o seu site deve ser uma habilidade fundamental para qualquer webmaster com intenções sérias, o próximo desafio é saber como evitar que um site seja mal executado depois de ter adicionado widgets, add-ons e plugins. Aliás, como já foi abordado na Parte 1 deste guia, o Google já começou a utilizar o desempenho da velocidade do seu site para determinar o ranking nas SERPs. O que você pode fazer para acelerar o seu site, para que essas tecnologias, embora úteis para ampliar a participação, interação e envolvimento do usuário, não interfiram no tempo de carregamento do seu site?
Crédito da foto: Stanely Hong
Na segunda parte deste guia você vai aprender como implementar as soluções que, depois de longos ensaios, testes e experimentações, parecem funcionar melhor para este tipo de situação. Aliás, as soluções descritas em pormenor no interior deste artigo, que desenvolvemo para acelerar seu site adiando a carga de JavaScripts e widgets, são as mesmas que temos adotado e implementado na MasterNewMedia.org.
Este guia, embora orientado para webmasters e técnicos, é escrito em uma linguagem simples e não técnica e pode ser facilmente compreendido tanto por aqueles que precisam coordenar essas tarefas de otimização do desempenho do site, como por aqueles que realmente precisam executá-las.
Aqui está toda a informação que você precisa sobre como acelerar o tempo carregamento do seu site, atrasando o carregamento de widgets e elementos em JavaScript - Parte 2 (Parte 1):
O motivo pelo qual a velocidade do seu site deve ser levada em consideração é torná-lo mais útil aos visitantes.
Em vista disso, quem disse que todos os elementos do seu site tem que ser carregados de uma vez?
Os usuários, bem como as aranhas do Google querem ver o carregamento da página o mais rapidamente possível. Isso é bom para a experiência do usuário.
Você clica em um link, a página carrega rápido, tudo parece bem. O material adicional que aparece no site é - exatamente isso - adicional.
É sabido em quais site você passou o mouse sobre as imagens quando você as vê a partir do texto do artigo. Você aciona os vídeos do YouTube assim que você os vê, seguindo o texto o texto do artigo.
É possível carregar o conteúdo principal do artigo, que é o que o usuário está procurando em primeiro lugar e mais tarde carregar outros itens que "colocar a cereja em cima do bolo" e melhoram a usabilidade e a experiência do usuário.
Não há necessidade de carregar o widget dos comentários desde o início da página, quando o usuário vai levar algum tempo para ler o artigo e, em seguida, comentá-lo.
O mesmo vale para os botões. Eles podem ser carregados quando o usuário chegar a eles, não necessariamente imediatamente quando a página é carregada. Alguns deles podem ser carregados apenas quando o usuário os acionar através de um link ou um botão.
A teoria por trás disso é simples.
Widgets em JavaScript executam funções JavasScript. Estas funções podem ser acionadas de uma série de maneiras, incluindo a ação do usuário, como um clique ou um mouseover, mas representa também um tempo de atraso simples.
Esse truque para atrasar o carregamento é geralmente referido como "carregamento adiado de JavaScript".
Isto nos leva para a próxima edição importante - como o Google vê essa abordagem para o carregamento adiada de widgets.
Será visto como um problema? De jeito nenhum..
Aqui está Matt Cutts do Google, falando sobre esse tema:
Duração: 3' 12''
Em resumo, o Google já estava pensando nesta solução e implementando-a.
A parte chave deste vídeo está em torno de 1:25:
"...Por isso, eu não recomendo que você tire os seus widgets, seja do Facebook ou de anúncios ou qualquer coisa assim só porque o servidor remoto fica um pouco pouco mais lento.Existem muitas maneiras de fazer coisas de modo assíncrono.
Assim, por exemplo, podemos verificar o tempo que leva até o carregamento, mas isso não significa que o JavaScript não possa continuar a acontecer após o onload.
Por isso, o Google Analytics, por exemplo, oferece agora um novo trecho de código JavaScript que não afetará o tempo de carregamento de forma significativa e que também é bom para a experiência do usuário.
"
Agora que sabemos que o Google aprova esta solução, vamos para a próxima fase - a implementação.
O problema é que nenhum dos widgets que existem - pelo menos neste momento - são feitos para adiar o carregamento.
Eles são feitos para funcionar imediatamente conforme a página é carregada.
Isso significa que teremos que fazer alguns ajustes personalizados para o código dos widgets.
Para entender plenamente as soluções de carga diferidas versus as soluções assíncronas, é importante entender onde o problema começou, antes de mais nada.
Acho que todo mundo já passou pela experiência, em um momento ou outro, de ter uma imagem ser carregada apenas parcialmente. Você vê apenas uma parte da imagem e o resto simplesmente não aparece (a menos que você clique em "recarregar imagem").
O JavaScript não entende porque está configurado para obter uma confirmação do servidor que informa que o script foi totalmente carregado antes de o navegador continuar o carregamento da página.
Isso é o que transforma o JavaScript em um problema. É como se fosse o protagonista do site. Não deixa que outros elementos carreguem até que ele esteja completamente.
O JavaScript assíncrono não espera por uma resposta do servidor antes de permitir que a página continue a carregar.
O carregamento adiado espera a página terminar de carregar e depois de X segundos (conforme o número de segundos que você especificar) executa o JavaScript, para que não interfira com o carregamento da página.
Transformar qualquer widget ou script em Java em assíncrono é fácil. Você só precisa colocar:
async="true"
na tag do script.
Assim, o script começa com:
<script type="text/javascript" async="true" ...
No entanto, o suporte do navegador para o valor assíncrono do JavaScript ainda não terá sido totalmente informado.
Outro jeito mais seguro ainda de fazer isso é mudar o código assim:
<script id="somescript" type="text/javascript">
(function() {
var somescript = document.createElement('script');
somescript.type = 'text/javascript';
somescript.src = ('http://mysite.com/myscript.js');
var s = document.getElementById('somescript');
s.parentNode.insertBefore(somescript, s);
})();
</script>
Por outro lado, o JavaScript adiado tem uma razão de ser: ele tira o JavaScript completamente do caminho enquanto a página é carregada.
Para efeitos tais como widgets de comentários, botões, etc, pode ser uma boa solução, pois permite o carregamento da página como se não houvesse arquivos JavaScript externos a serem carregados.
Portanto, enquanto o visitante lê a página, os comentários e os botões são carregados silenciosamente no final do artigo.
Falando da experiência da MasterNewMedia, realizamos alguns testes para ver em quais widgets podemos ajustar a velocidade e o quanto podemos ganhar com isso.
Os resultados foram inquestionáveis.
Pegamos uma página e fizemos três versões da mesma. A única diferença foi a forma como o widget de comentários é carregado.
Usando o GTmetrix para a medição da velocidade, após várias atualizações da página, estes foram os resultados em média:
Aplicando o mesmo conjunto de soluções a todos os JavaScript da página, em alguns casos, fomos capazes de tirar até sete segundos do tempo de carregamento da página, embora, em média, este número foi menor, especialmente durante os horários de pico de tráfego.
Como mencionado anteriormente, quando a rede está mais congestionada com um número elevado de visitantes, os servidores ficam mais ocupados e demora mais tempo para carregar tudo em oposição aos períodos de tempo em que há menos pessoas na rede.
Ainda assim, os resultados foram muito encorajadores e a página realmente ficou muito melhor.
Você clica em um link, a página carrega tão rápido que, enquanto você lê o artigo, nem percebe esses 10 segundos durante a leitura, a barra do Apture é ativada, a seção de comentários também, juntamente com os botões.
Isso definitivamente melhora a experiência do usuário.
Tudo que fizemos foi aplicar o carregamento adiado em cinco scripts e widgets e os analisadores de velocidade da página mostraram que passou de 131 solicitações externas para 81 com três a sete segundos de melhoria na velocidade por página.
Já imagino você dizendo: "Espera aí, 50 solicitações externas a menos? Adiando apenas cinco scripts e widgets?"
Sim.
Quando você carregar os scripts e os widgets, nunca obtém apenas um. Todos eles incluem ou chamam outros scripts e, depois os "includes" frequentes trazem mais "includes".
Baseado no que vimos em nossos experimentos, os scripts dos comentários são alguns dos fardos pesados no carregamento das páginas. Alguns deles tem 20 ou mais chamadas externas.
Para o usuário, isto significa que a página vai demorar um pouco para carregar, embora o conteúdo dos widgets seja mostrado na parte inferior do artigo.
Por outro lado, com a carga adiada, você pode conseguir o efeito de quando chega à página e parece ser uma carga instantânea, e enquanto você estiver lendo o conteúdo, o JavasScript estará trabalhando em segundo plano na preparação do conteúdo adicional.
Executado corretamente, seus usuários não irão notar nada, exceto a experiência agradável de ter as páginas sendo carregadas rapidamente.
Como o Matt disse no vídeo acima, o Google Analytics já usa o carregamento assíncrono e esta é uma boa solução para satisfazer a maioria dos webmasters. Muitos outros serviços não tem esta característica em seus widgets.
Esses scripts e widgets precisam de código personalizado. A maioria deles requer muito pouco dele, enquanto outros precisam de um pouco mais de trabalho.
Barra do Apture
A barra do Apture é um dos elementos fáceis de ajustar no carregamento adiado.
Antes:
<script id='aptureScript' type="text/javascript" src="http://www.apture.com/js/apture.js?siteToken=[your site token]" charset='utf-8'></script>
Depois (com 10 segundos de demora no carregamento):
<script type="text/javascript">
var delay='10'; // Quantos segundos antes de abrir a janela
setTimeout('get_js()',delay*1000);
function get_js() {
NewScript.src="http://www.apture.com/js/apture.js?siteToken=[your site token]"
document.body.appendChild(NewScript);
}
</script>
Botão AddThis
Antes:
<!-- AddThis Button BEGIN -->
<script type="text/javascript">addthis_pub = '[your publisher ID]';</script>
<a target="_blank" href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s9.addthis.com/button1-share.gif" width="125" height="16" border="0" alt="" /></a><script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script>
<!-- AddThis Button END -->
Depois:
<!-- AddThis Button BEGIN -->
<script type="text/javascript">addthis_pub = '[your publisher ID]';</script>
<a target="_blank" href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s9.addthis.com/button1-share.gif" width="125" height="16" border="0" alt="" /></a>
<!-- AddThis Button END --><script type="text/javascript">
var delay='10'; // Cuántos segundos antes de abrir la ventana
setTimeout('get_js()',delay*1000);
function get_js() {
var NewScriptAT=document.createElement('script')
NewScriptAT.src=\"http://s7.addthis.com/js/[number specific to widget]/addthis_widget.js\"
document.body.appendChild(NewScriptAT);
}
</script>
Disqus
Quando se trata do widget para comentários do Disqus, a coisa fica um pouco mais complexa.
Enquanto escrevo este artigo, o Disqus desenvolve uma nova versão do plugin para o Movable Type, assim, em devido tempo, o novo plugin estará disponível para carregar o Disqus de forma assíncrona.
No entanto, queremos saber o que podemos fazer enquanto isso, que seja ainda melhor do que esperar pelo novo plugin.
Disqus (pelo menos para o Movable Type) não é um pedaço de código que você cola na página, é um plugin de tipo CGI no Movable Type, que gerará o JavaScript em todas as páginas que estão sendo construídas.
Temos duas opções para acelerá-lo.
1) Recorte o Plugin do Disqus Plugin Para o Movable Type
No arquivo disqus.pl, basta deletar esta linha:
<script type="text/javascript" src="@{[DISQUS_URL]}/forums/$forum_url/embed.js"></script>e aí, exatamente antes da tag
</body>use um dos métodos acima descritos para o carregamento assíncrono ou adiado do arquivo embed.js.
2) Use o Código Universal do Disqus Em Vez do Plugin do Movable Type
É preciso saber uma coisa sobre limpeza, instalações sem hack e plugins. Eles são muito mais fáceis de manter e atualizar e muitas pessoas preferem assim.
Neste caso, a opção no-hacking é melhor por várias razões.
O plugin do Disqus inclui introdução do post do post em seu código. Isso significa que todo o texto da introdução do post será contido duas vezes na sua página web.
A primeira vez no código HTML para seus visitantes, e a segunda vez, na DIV oculto gerado pelo Disqus, para que o código JavaScript possa ler o conteúdo da DIV como uma variável.
Se você usar o código universal do Disqus em vez do plugin, poderá eliminar essa etapa e encurtar as suas páginas web e aí aumentar a velocidade, carregando o widget de modo assíncrono ou adiado.
O código universal para comentários do Disqus é mais ou menos assim:
<div id="disqus_thread"></div>
<script type="text/javascript">
/**
* var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread]*/
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://[your_website_name].disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Favor habilitar o JavaScript para visualizar os <a target="_blank" href="http://disqus.com/?ref_noscript=tx1">comments powered by Disqus.</a></noscript>
<a target="_blank" href="http://disqus.com" class="dsq-brlink">comentários no <span class="logo-disqus">Disqus</span></a>
Em nossas experiências, substituimos com o código de carregamento adiado para ficar assim:
<div id="disqus_thread"></div>
<script type="text/javascript">var disqus_url = '<$mt:EntryPermalink$>';
var disqus_title = '<$mt:EntryTitle$>';
</script>
<noscript>Favor habilitar o JavaScript para visualizar os <a target="_blank" href="http://disqus.com/?ref_noscript=tx1">comments powered by Disqus.</a></noscript>
<a target="_blank" href="http://disqus.com" class="dsq-brlink">comentários no <span class="logo-disqus">Disqus</span></a>
<script type="text/javascript">
var delay='10';
setTimeout('get_js()',delay*1000);
function get_js() {
var NewScript=document.createElement('script')
NewScript.src="http://[seu_site].disqus.com/embed.js"
document.body.appendChild(NewScript);
</script>
Em suma, sob a perspectiva da velocidade de carregamento, o código universal é melhor do que o plugin do Movable Type, pois permite eliminar a duplicação do texto oculto na DIV do Disqus.Isso, por sua vez, significa que mesmo que você preferir ficar com o código padrão (carregamento assíncrono), em vez do adiado, ainda terá o benefício de um menor e, portanto, mais rápido carregamento.
Se será mais rápido realmente vai depender do comprimento de seu post que foi duplicado.
Widgets do Facebook
As aplicações do Facebook (como os comentários) já suportam o carregamento assíncrono.
Se você registrar um aplicativo em http://developers.facebook.com/setup/, na mesma página onde você consegue o ID do aplicativo, etc. você verá que a amostra do código JavaScript já contém o carregamento assíncrono.
Mais detalhes estão disponíveis em : http://developers.facebook.com/docs/reference/javascript/FB.init
O fato de o Facebook, Disqus e muitos outros já terem atualizado os seus códigos com o carregamento assíncrono é uma indicação clara da direção que em breve todos os sites importantes (ou que já estão no processo do mesmo) terão que tomar.
O carregamento assíncrono JavaScript está rapidamente se tornando uma regra, em vez de exceção, e em breve será incluído no código copiar / colar, por padrão, sem a necessidade das modificações de costume.
Entretanto, você pode usar os códigos exemplo acima para ajustar seus widgets e scripts ao seu gosto.
Se quiser extrapolar, pode usar o carregamento adiado, já que traz uma economia de tempo adicional em comparação ao carregamento assíncrono.
Quando aplicado a vários scripts e widgets, ajuda a tirar um segundo ou dois do código da página e tornar suas páginas mais rápidas e sentir, assim, como melhora a experiência do usuário.
Fim da Parte 2
Como Otimizar O Tempo De Carregamento Do Seu Site Atrasando JavaScript E Widgets - Parte 1
Créditos das fotos:
Como Otimizar O Tempo De Carregamento Do Seu Site Atrasando JavaScript E Widgets - Parte 2 - Chris Lamphear
Carregamento Adiado Vs. Carregamento Assíncrono - Aleksandr Ugorenkov
Que Tipo de Melhoria Você Pode Esperar? - Anton Balazh
Exemplos de Aumento na Velocidade dos Widgets - Nagravision
Recorte o Plugin do Disqus Plugin Para o Movable Type - winterling
Use o Código Universal do Disqus Em Vez do Plugin do Movable Type - Rudat
Feed RSS de Notícias Diárias
