Blog

Sete dicas para acelerar sites em HTML5

dicas html5 ft img

Confira alguns conselhos básicos para manter sua página na web com tudo funcionando

Sites em HTML5 já estão no caminho certo para oferecer recursos modernos ao usuário. Mas existem algumas dicas que podem ser seguidas para garantir uma boa performances para sites que utilizam a tecnologia. Confira 7 delas e aproveite para deixar sua página ainda mais moderna:

01- Evite redirecionamento 3XX

Quando um usuário clica em um link, ele espera receber conteúdo o mais rápido possível. Redirecionamentos 3xx podem criar uma demora de 250 milissegundos em uma aplicação. Isso pode parecer pouco, mas é mais ou menos 10% do tempo de carregamento de uma página. Por volta de 63% dos sites mais importantes do mundo contém esse tipo de redirecionamento.

02- Baixe menos recursos e bytes

Quanto menos recursos você tiver de baixar, melhor. Veja aqueles que está baixando e o que pode ser cortado. Um site médio hoje em dia baixa 777kb de dados. A maior parte desses dados é formada por imagens, seguido de Javscript e conteúdo em Flash.

03- Evite o quirks mode

Sempre use um doctype baseado nos padrões web para evitar o quirks mode. Comece com <!DOCTYPE html>. Na web moderna, não há lugar para o quirks mode, que fi criado para que páginas da metade dos anos 90 pudessem ser vistas nos navegadores da virada do século, como o IE 6 e o Friefox 2. A maioria das páginas web de hoje ficam em quirks mode acidentalmente, como resultado de um doctype inválido ou de algum texto antes da declaração. Isso pode causar problemas estranhos de layout que podem ser difíceis de solucionar.

04- Use sprites de imagens

Sprites de imagens podem reduzir a quantidade de dados a serem baixados. Se possível, crie sprites manualmente.

function Sum(number1+number2)  {

Return (number1 + number2);}

• Caracteres removidos (54 caracteres)

function Sum(number1,number2){return

number1+number2;}

• Compactado (30 caracteres)

function Sum(a,b){return a+b;}

No final, há menos JS para baixar, e ainda um benefício oculto: performance de runtime. Com código mais conciso e varáveis menores, o runtime as encontra mais rápido, melhorando o download e performance. Também inicialize o Javscript por demanda. Não carregue toda a sua biblioteca JS durante o carregamento da página. Faça isso dinamicamente quando for preciso.

05- Use padrões web

A adoção de padrões web leva benefícios de performance. Em IE 10 e 9, os tempos de carregamento são 30% melhores em standards mode. O standards mode é o modo padrão de renderização de todos os navegadores e oferece a melhor implementação de padrões web. Além do standards mode, o IE oferece modos de compatibilidade para manter em funcionamento sites desenhados para versões antigas do IE. Isso foi de grande ajuda no passado, quando era comum detectar o navegador para servir código específico para ele. Mas isso não é mais necessário, porque o código dentro dos padrões web é mostrado de modo muito parecido nos navegadores modernos. Essa nova prática é conhecida como detecção de recurso e foi popularizada pelo Modernizr.

06- Combine os timers da aplicação

A maioria das aplicações web hoje têm entre 5 e 10 temporizadores executando o tempo todo. Metade desses timers está inativa.Confira se não há timers ou sequências sendo executadas desnecessariamente. Sempre que possível, combine os timers da sua aplicação.

07- Cheque o status de visibilidade

Sem saber o status de visibilidade de sua aplicação, você é forçado a considerá-la sempre visível. A visibilidade da página é uma nova API suportada pela maioria dos navegadores. A visibilidade da página permite que você reduza a atividade onde a aplicação não for visível. Fazendo isso, você economiza tempo de CPU e aumenta a vida da bateria.

 Veja mais dicas no Creativebloq

Comente