lw
programação
locaweb
61
5
Padronize os nomes
dos arquivos
Surpreendentemente, apesar dos
gerenciadores de arquivos serem
“insensitive case”, os servidores
são sensíveis a letras maiúsculas e
minúsculas nos nomes de arquivos.
Assim, se utilizar duas variações
para a solicitação de uma mesma
imagem, por exemplo, uma apenas
com letras minúsculas:
<img src="icon.png" />
e outra com a primeira letra do nome
do arquivo alterada para maiúscula:
<img src="Icon.png" />
serão realizadas duas solicitações
de rede para um mesmo resultado.
6
Evite eventos
JavaScript inline
Embora seja possível colocar um código
JavaScript junto com as marcações do
HTML, como, por exemplo:
<button onclick="validate()">
Validate</button>
essa prática, além de ser mal
vista por projetistas de sites, pois
tira a clareza do código misturando
o que é apresentação e o que é
comportamento, também pode trazer
comportamentos inesperados ao site.
Isso aconteceria, por exemplo, em
páginas que o script foi colocado no
fim do arquivo. Assim que carregar
a página, o usuário já conseguiria
interagir com os elementos, mas
poderia, talvez, invocar um evento cujo
script ainda não foi carregado.
7
Faça o link com o arquivo
CSS logo no topo da página
Ao contrário do arquivo JavaScript,
que deve ser sempre indicado no
fim da página, a melhor prática para
fazer o link do arquivo de estilos
é no head da página. Com isso,
primeiramente o navegador irá carregar
o CSS, bloqueando a renderização
dos elementos até que o CSS esteja
completo. Dessa forma, imagens,
JavaScript e outros recursos que podem
demorar mais para serem carregados
poderão ser carregados mais tarde.
8
Somente inclua
estilos necessários
Muitos têm a prática de utilizar um
único arquivo CSS para todo o site.
Para sites pequenos, isso pode fazer
uma diferença pequena, mas sites
grandes, como de notícias, pode
chegar a ter mais de 4 mil regras de
estilo e apenas 5% a 10% delas são
necessárias para renderizar uma
única página. Dessa forma, o
navegador acaba carregando todos os
estilos desnecessariamente.
9
Especifique uma imagem de
preview para o HTML5 video
Ao utilizar HTML5 video, sempre
especifique uma imagem para
preview. Caso contrário, o navegador
precisará carregar todo o vídeo,
descobrir o primeiro frame e só então
mostrar ao usuário.
10
Minimize seu JavaScript
É muito mais rápido buscar
variáveis em um código direto e
com nomes de variáveis curtos. Isso
melhora tanto o tempo de download da
página quanto o tempo de execução do
script. Utilize programas como o YUI
Compressor para otimizar seus
códigos JavaScript. Além disso,
procure inicializar o JavaScript
dinamicamente, ou seja, apenas
quando necessário. Isso evita
carregamentos desnecessários.
11
Verifique o status de
visibilidade do aplicativo
A visibilidade da página, recurso
disponível na maioria dos
navegadores modernos, permite
que você determine o status de um
aplicativo. Com essa funcionalidade,
é possível projetar o aplicativo para
economizar recursos quando ele não
está visível, reduzindo tempo de CPU
e aumentando a vida da bateria.
Conclusão
Com as 11 dicas que foram
destacadas nesta reportagem, já
é possível aumentar bastante a
velocidade com que o site é carregado
e melhorar o tempo de resposta para
o usuário, porém ainda existem
diversas outras técnicas que podem
ser implementadas para obter
um desempenho ainda melhor. O
importante é observar as específicas de
seu site ou aplicativo e estudar quais
os pontos que podem estar causando
baixo desempenho.
E lembre que prática e realização de
vários testes são essenciais para um
bom desenvolvimento web.
Ao utilizar
HTML5 video,
sempre
especifique
uma imagem
para preview.
Caso contrário,
o navegador
carregará o
filme inteiro
