25 dicas de velocidade do HTML5

Autor: Randy Alexander

Data De Criação: 23 Abril 2021

Data De Atualização: 14 Poderia 2024

Vídeo: 25 VS Code Productivity Tips and Speed Hacks

Contente

Tempo de exibição
Tempo decorrido
Tempo de CPU
Utilização de recursos
Consumo de energia
Responda rapidamente às solicitações da rede
01. Impedir redirecionamentos 3xx
02. Use redes de distribuição de conteúdo (CDNs)
03. Maximize as conexões simultâneas
04. Compreenda o tempo da sua rede
Minimize os bytes baixados
05. Baixe menos recursos e bytes
06. Gzip: comprime o tráfego de rede
07. Capitalização de arquivo padrão
Estruture a marcação de forma eficiente
08. Evite o modo peculiares
09. Evite eventos JavaScript inline
10. Vincule folhas de estilo no topo da página
11. Inclua apenas os estilos necessários
12. Vincule seu JavaScript na parte inferior da página
13. Compreenda os limites das tags HTML5
14. Padronizar em uma única estrutura
15. Não inclua scripts para ser legal
Otimize o uso de mídia
16. Minimize o número de imagens
17. Use sprites de imagem
18. Considere quais formatos de imagem você usa
19. Evite caminhos SVG complexos
20. Especifique uma visualização de imagem para vídeo HTML5
21. Minimize o uso do plug-in de mídia
Escreva JavaScript rápido
22. Minimize o seu JavaScript
Renderizar no modo padrão
23. Use padrões da web
Monitore o que seu aplicativo está fazendo
24. Combine cronômetros de aplicação
25. Verifique o status de visibilidade do seu aplicativo
Conclusão
Gostou disso? Leia isso!

Nos últimos anos, tenho feito parte da equipe do IE na Microsoft, procurando maneiras de melhorar a experiência online. Ao longo do caminho, aprendemos muito sobre o desempenho da web e desenvolvemos uma compreensão aprofundada do que é necessário para tornar sites e aplicativos rápidos.

A criação de aplicativos da web de alto desempenho é essencial para todos os desenvolvedores da web, quer estejamos falando sobre sites que são executados em um navegador da web baseado em padrões ou aplicativos para a Windows Store. O objetivo do desenvolvedor é melhorar o desempenho da web reduzindo os seguintes fatores:

Tempo de exibição

O objetivo mais importante é o que chamamos de 'Tempo de exibição'. Isso tem muitos nomes em toda a indústria, incluindo 'tempo para o vidro' e 'pintura primária'. O Tempo de exibição mede o tempo desde o momento em que o usuário executa uma ação até que ele veja o resultado dessa ação na tela. É a duração desde o momento em que o usuário navega até o site até quando o carregamento do site é visualmente completo.

Tempo decorrido

A maioria dos sites continua a trabalhar em resposta à ação do usuário depois que o conteúdo é exibido na tela. Isso pode incluir o download de dados do usuário (como mensagens de e-mail) ou o envio de análises de volta a um provedor. Da perspectiva dos usuários, o site pode parecer carregado. No entanto, muitas vezes ocorre um trabalho significativo em segundo plano, o que afeta a capacidade de resposta.

Tempo de CPU

Os navegadores da Web são quase exclusivamente limitados pela CPU; o trabalho que um navegador executa na CPU e a eficiência com que esse trabalho ocorre terão o maior impacto no desempenho. É por isso que a transferência de trabalho para a GPU teve um impacto tão significativo no desempenho do IE9 e do IE10. A quantidade de tempo de CPU necessária para executar a ação e a eficiência da CPU são críticas.

Utilização de recursos

Construir um navegador rápido significa garantir que os recursos de todo o PC funcionem bem juntos. Isso inclui a utilização da rede, padrões de uso de memória, processamento de GPU, gráficos, memória e centenas de outras dimensões. Como os clientes executam vários aplicativos ao mesmo tempo em seus PCs, é importante que os navegadores compartilhem esses recursos de maneira responsável com outros aplicativos.

Consumo de energia

Ao utilizar hardware de PC subjacente, é importante levar em consideração o consumo de energia. Quanto mais eficientemente um navegador usar a energia, mais tempo as baterias durarão em cenários móveis, menores serão os custos de eletricidade para operar o dispositivo e menor será o impacto ambiental. Potência e desempenho são objetivos complementares.

Quero compartilhar com vocês algumas das coisas que aprendi sobre o desenvolvimento de sites e aplicativos mais rápidos e as mudanças que você pode fazer hoje para melhorar o desempenho.

Existem sete princípios-chave que os desenvolvedores podem levar em consideração:

Responda rapidamente às solicitações da rede
Minimize bytes para download
Estruture a marcação de forma eficiente
Otimize o uso de mídia
Escreva JavaScript rápido
Renderizar no modo padrão
Monitore o que seu aplicativo está fazendo

Dentro desses sete princípios, incluí uma série de dicas úteis de desempenho abaixo que farão seus sites e aplicativos HTML5 rodarem mais rápido (assista ao vídeo de uma apresentação que fiz para obter ainda mais dicas de HTML5).

Responda rapidamente às solicitações da rede

01. Impedir redirecionamentos 3xx

Quando um usuário clica em um link, ele espera receber o conteúdo o mais rápido possível. Os redirecionamentos 3xx podem criar um atraso de 250 milissegundos em um aplicativo. Pode parecer um pequeno atraso, mas é cerca de 10 por cento do tempo de carregamento da página. Cerca de 63 por cento dos principais sites do mundo contêm redirecionamentos 3xx.

02. Use redes de distribuição de conteúdo (CDNs)

Com os CDNs, você pode localizar geograficamente facilmente seus dados mais perto de seu usuário. Serviços como o Azure ajudam nisso e podem ajudar a reduzir a quantidade de tempo que o conteúdo gasta viajando entre os locais. Nas redes de hoje, isso pode economizar até 300 milissegundos.

03. Maximize as conexões simultâneas

Quando as pessoas pensam em uma rede, muitas vezes pensam em um único pipeline conduzindo conteúdo de um lado para outro. Na verdade, o navegador pode fazer seis conexões simultâneas por vez, permitindo que ele baixe seis recursos de uma vez. Isso é possível em vários domínios: ao distribuir seu conteúdo, você pode aumentar ainda mais o número de recursos que pode baixar simultaneamente. Se o seu site contém imagens em seis ou sete domínios, você pode reduzir significativamente o tempo que a página leva para carregar.

04. Compreenda o tempo da sua rede

Entenda o detalhamento do tempo de sua rede - tempo de navegação, tempo de recurso e tempo do usuário - e use APIs baseadas em padrões disponíveis em navegadores modernos como o IE10 e em aplicativos da Windows Store. Você pode obter informações de tempo de resolução mais alta na navegação do seu documento. O tempo de navegação permite que você entenda a quantidade de tempo que seu aplicativo gasta em várias fases.

Minimize os bytes baixados

05. Baixe menos recursos e bytes

Quanto menos recursos você puder baixar, melhor. Observe os recursos que você está baixando e descubra onde pode reduzi-los. O site médio de hoje baixa 777 KB de dados. A grande maioria desses bytes é ocupada por imagens, seguidas por JavaScript e conteúdo em Flash.

06. Gzip: comprime o tráfego de rede

A melhor maneira de baixar menos bytes é fazer o Gzip do seu conteúdo. A maioria das pessoas obterá este serviço gratuitamente por causa dos servidores que estão usando, mas muitos desligam involuntariamente essa técnica de decodificação.

07. Capitalização de arquivo padrão

Isso geralmente pega as pessoas de surpresa, mas o servidor pegará as variações em maiúsculas / minúsculas. As seguintes solicitações de download são duas variações da mesma solicitação:

Minúsculas

img src = "icon.png" />

Caixa do título

img src = "Icon.png" />

Da perspectiva da plataforma da web, esses são dois arquivos diferentes. Portanto, duas solicitações de rede diferentes serão processadas como resultado.

Estruture a marcação de forma eficiente

08. Evite o modo peculiares

Sempre use um doctype baseado em padrões para evitar o modo peculiares. Comece com! DOCTYPE html>. A web moderna não tem lugar para o modo peculiar, que foi projetado para que as páginas da web de meados dos anos 90 pudessem ser usadas em navegadores "modernos" da virada do século, como o IE6 e o Firefox 2.

A maioria das páginas da web hoje termina no modo quirks acidentalmente, como consequência de um doctype inválido ou texto estranho antes do doctype. Isso pode causar problemas de layout estranhos que são difíceis de depurar.

09. Evite eventos JavaScript inline

Tome cuidado para não usar eventos JavaScript embutidos dentro de sua marcação HTML. Um exemplo disso seria o botão onclick = "validate ()"> Validar / botão>. Esta é uma prática que quebra a separação clara que deveria existir entre a marcação, a apresentação e o comportamento.

Além disso, se seus scripts estão sendo carregados na parte inferior do arquivo, é possível que um usuário interaja com a página, acione um evento e tente chamar um script que ainda não foi carregado, o que causará um erro.

10. Vincule folhas de estilo no topo da página

Ao colocar o CSS na parte superior da página, o navegador emitirá essa solicitação primeiro e bloqueará a pintura simultaneamente até que o CSS seja concluído. Colocando CSS na cabeça, imagens, JavaScript e outros recursos que consomem muito tempo podem ser baixados posteriormente. Para esse fim, também desaconselhamos vincular seu CSS na parte inferior da página.

11. Inclua apenas os estilos necessários

Pode parecer uma boa ideia manter um arquivo CSS muito grande que é compartilhado por todo o seu site. Alguns dos principais sites de notícias do mundo usam essa abordagem hoje. Um site de notícias, por exemplo, tem uma folha de estilo com 4.000 regras, das quais apenas 5 a 10 por cento são usadas em uma única página. O navegador tem que baixar todos esses estilos, passá-los e criar estruturas de dados internas, a maioria das quais nunca será usada.

12. Vincule seu JavaScript na parte inferior da página

Esta é a melhor prática comum. Você deve sempre certificar-se de que os estilos e os recursos visuais sejam baixados primeiro. Dessa forma, o JavaScript pode seguir depois e manipular a página como quiser. No entanto, se for absolutamente necessário vincular o JavaScript no cabeçalho, conforme determinado pelo sistema CRM ou serviço de hospedagem que você está usando, certifique-se de usar a tag defer.

13. Compreenda os limites das tags HTML5

Novas tags HTML5 como seção>, cabeçalho> e rodapé> melhoram a semântica da marcação, mas exigem um script shiv especial para serem executados no Internet Explorer 6, 7 e 8, ou não serão reconhecidas. As páginas que precisam funcionar com esses navegadores legados, mesmo quando os scripts estão desabilitados, não podem usar as novas tags HTML5. Usar classes e elementos div> simples costuma ser um curso de ação mais seguro para esses casos.

14. Padronizar em uma única estrutura

Existem muitos frameworks JavaScript por aí e muitos deles fazem as mesmas coisas em termos de funcionalidade. O navegador tem que baixar o JavaScript, passá-lo e criar estruturas de dados internas sem saber se você vai executá-las ou não. Ao aderir a uma única estrutura, você melhorará significativamente o seu desempenho.

15. Não inclua scripts para ser legal

Existem muitos scripts "legais" por aí. É realmente fácil incluir um arquivo de script que faz algo 'legal' em segundo plano, mas esse arquivo de script está competindo com recursos no carregamento de sua página. Tem certeza que é necessário?

Otimize o uso de mídia

16. Minimize o número de imagens

A maioria dos bytes baixados são para imagens. O número médio de imagens nos 100.000 principais sites é 58. Ao examinar mais de 20 a 30 imagens, você começará a ver um impacto no desempenho. Dê uma olhada em todos os seus recursos e pergunte-se se precisa deles ou não.

17. Use sprites de imagem

Os sprites de imagem podem reduzir significativamente a quantidade de dados que precisam ser baixados. Sempre que possível, crie sprites de imagem manualmente.

18. Considere quais formatos de imagem você usa

PNG oferece o equilíbrio mais eficiente entre compatibilidade, tamanho de codificação, tempo de decodificação da CPU e os bytes necessários para a decodificação da CPU. Ele também tem uma das melhores taxas de compressão. No entanto, para fotografias, JPEG tende a ser o melhor formato.

19. Evite caminhos SVG complexos

Caminhos SVG complexos levam muito tempo para o navegador baixar, passar e construir estruturas de dados internas. Sempre que possível, tente gerar o caminho SVG mais conciso possível. Pode demorar um pouco, mas gerar o caminho SVG manualmente realmente pode ajudar.

20. Especifique uma visualização de imagem para vídeo HTML5

Se você não especificar uma visualização da imagem, o navegador terá que baixar o vídeo, descobrir qual é o primeiro quadro e, em seguida, exibi-lo ao usuário. Ao especificar uma visualização da imagem, o navegador não precisa baixar o vídeo, apenas a imagem. Ele só começa a baixar o vídeo quando o usuário solicita.

21. Minimize o uso do plug-in de mídia

Apesar das percepções, a maioria dos plug-ins de mídia não são tão rápidos quanto HTML5 na execução de vídeo. Além disso, eles vão competir com o pedido de recursos.

Escreva JavaScript rápido

22. Minimize o seu JavaScript

Muitas pessoas estarão familiarizadas com esta técnica. Essencialmente, você pega seu JavaScript, remove alguns caracteres e, em seguida, simplifica as variáveis. Conforme demonstrado abaixo:

Inicial (66 caracteres)

função Soma (número1, número2) {retorno (número1 + número 2); }

Personagens removidos (54 caracteres)

função Soma (número1, número2) {retorno número1 + número2;}

Compactado (30 caracteres)

função Sum (a, b) {return a + b;}

Você fica com menos JS para baixar e há um benefício oculto: desempenho de tempo de execução. Com código mais restrito e nomes de variáveis menores, o tempo de execução pode pesquisar variáveis com mais rapidez, melhorando o download e o desempenho do tempo de execução.

Além disso, inicialize o JavaScript sob demanda. Não carregue toda a sua biblioteca JavaScript durante o carregamento da página - você pode fazer isso dinamicamente quando precisar.

Renderizar no modo padrão

23. Use padrões da web

O uso de padrões da web não apenas ajuda a reduzir o custo de desenvolvimento e a complexidade de testes em navegadores e dispositivos, mas também pode obter alguns benefícios de desempenho perceptíveis. Na verdade, descobrimos que os sites no IE10 obtiveram em média 30 por cento melhor tempo de carregamento da página quando mudaram para o modo padrão. O benefício é semelhante no IE9 também.

O modo de padrões é o modo de renderização padrão de todos os navegadores e oferece a melhor implementação de padrões da web que funcionam da mesma forma em todos os navegadores. Além do modo padrão, o IE oferece modos de compatibilidade para manter os sites projetados para versões antigas do IE funcionando. Isso foi particularmente útil no passado, quando era uma prática comum primeiro detectar um navegador e, em seguida, exibir o código destinado apenas a ele. Mas isso não é mais necessário em muitos casos porque o código dos padrões da web é exibido de forma semelhante em navegadores modernos, incluindo o IE10 e 9, por meio do modo de padrões. Essa nova prática é comumente conhecida como detecção de recursos e foi popularizada pela Modernizr).

Monitore o que seu aplicativo está fazendo

24. Combine cronômetros de aplicação

A maioria dos aplicativos na web hoje tem de 5 a 10 temporizadores em execução o tempo todo. Cerca de metade desses temporizadores estão inativos. Certifique-se de que os temporizadores ou sequências não estejam funcionando desnecessariamente. Quando possível, combine seus cronômetros de aplicativo e, se possível, crie um cronômetro que gerencie todas as suas sequências.

25. Verifique o status de visibilidade do seu aplicativo

Sem saber o status de visibilidade de seu aplicativo, você é forçado a projetá-lo como sempre visível. A visibilidade da página é uma nova API baseada em padrões com suporte nos aplicativos do IE10 e da Windows Store, bem como na maioria dos navegadores modernos.

A visibilidade da página permite que você determine o status de visibilidade do aplicativo, para que você possa reduzir a atividade quando souber que o aplicativo não está visível e, ao fazer isso, economizar tempo de CPU e aumentar a vida útil da bateria.

Conclusão

O melhor desempenho do site pode ter um grande impacto sobre os usuários. O carregamento lento da página da web é um fator importante para os usuários abandonarem um site, pode reduzir a credibilidade percebida do site e afetar as vendas de produtos. A economia de tempo de algumas das dicas acima pode parecer relativamente pequena, mas, quando implementadas em conjunto, podem gerar uma economia de tempo considerável. Além do mais, eles o encorajarão a pensar primeiro na eficiência e a criar aplicativos e sites com a experiência do usuário em primeiro lugar.

Palavras: Jatinder Mann

Este artigo apareceu originalmente na edição 244 da net magazine.