Onde colocar a tag script?

Uma das regras de melhores práticas para otimizar a perfomance de um site, de acordo com o Yahoo é colocar a tag script logo antes do fechamento da tag body do documento. Existe uma falha em fazer esta afirmação como regra.

Quando a página é carregada, o Browser ao carregar a tag script interrompe o processamento do restante do documento até que ele seja carregado completamente. Sendo assim, parece lógico você utilizar a tag script na parte inferior do documento ao invés do inseri-la no head (o mais utilizado). Desta forma o browser renderiza completamente, deixando para renderizar o script logo após a página ser carregada, dando uma reposta ao usuário mais rápida.

Situações como o Google Analitics, que orienta o usuário a inserir o script (captação para obter as estatísticas da página) na parte inferior, isto se aplica da forma correta, pois a página é carregada sem que o script do Google cause o decrescimento de perfomance no site. No entanto, no caso onde o script a ser carregado contém alguma interação com o usuário, este caso não deve ser aplicado pois se a página for renderizada ele está apto a interagir e clicar em links que possui eventos que não foram atribuidos a aquele elemento podem comprometer ao uso do site. Desta forma, o usuário pode interagir no momento inapropriado e não ter a experiência esperada do sistema.

A perfomance não deve afetar a integridade do sistema, então neste caso precisa ser balanceada. Mesmo sendo uma prática ditada pela Yahoo, ela possui esta grande falha e devemos saber dicernir melhores práticas para tomar decisões para melhorar perfomance.

Dependendo do tamanho dos scripts, a diferença de perfomance é considerável. Para tentar minimizar este problema, eu utilizo o carregamento de scripts sob demanda que desenvolvi para não carregar scripts desnecessários na página que muitas vezes nem use algum plugin do jQuery ou biblioteca exterior.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>