Já faz um tempo desde Steve Souders publicou seu livro High Performance Web Sites e iniciou o movimento de otimização de desempenho da web.
O livro apresentou 14 práticas principais que os desenvolvedores da web devem implementar para atingir o desempenho ideal. Sua equipe no Yahoo criou o plug-in FireBug, agora obsoleto, YSlow, para medir como nossos sites implementam esses princípios.
Este livro mudou a maneira como desenvolvi sites durante um fim de semana. Se você ainda não leu, compre-o e leve cerca de uma hora para lê-lo. Ainda lembro com carinho aquela tarde em meu deck lendo o livro, aproveitando o sol.
Depois de ler o livro, você deve se inspirar para implementar alguns dos princípios em seus aplicativos. No entanto, vou avisá-lo que algumas das recomendações não são válidas ou importantes hoje. Por exemplo, com HTTP/2 você não deve dividir ativos entre domínios ou fragmentos de domínio. Você pode também repensar o agrupamento de ativos externos porque o HTTP/2 também torna essa prática um pouco questionável. Mas, em geral, as 14 regras ainda se aplicam:
- Faça menos solicitações HTTP
- Use uma rede de distribuição de conteúdo
- Adicione um cabeçalho de expiração
- componentes Gzip
- Coloque folhas de estilo no topo
- Coloque scripts na parte inferior
- Evite expressões CSS (nem mesmo se os navegadores suportam isso hoje)
- Torne o JavaScript e CSS externos (argumentarei contra CSS externo hoje)
- Reduza as pesquisas DNS (evite vários domínios)
- Minifique o JavaScript
- Evite redirecionamentos
- Remova scripts duplicados
- Configure ETags
- Torne Ajax armazenável em cache (Service Workers & IndexedDB FTW!)
As 14 regras originais se expandiram com o tempo e mudaram. Hoje posso pensar em centenas de práticas recomendadas de otimização de desempenho da web!
Infelizmente, como auditorias independentes são realizadas em propriedades públicas da web, os princípios de bom desempenho não são implementados pela maioria. De acordo com o Google, uma página da web leva em média 22 segundos para ser renderizada😭😢. O motivo número 1 para a proliferação de frameworks JavaScript de fast food como Angular, React e Vue.
Me surpreende como os fãs de frameworks juram que suas páginas são renderizadas rapidamente. dados de arquivo HTTP , que audita os 500.000 principais sites duas vezes por mês mostram que todas essas estruturas levam mais de 20 segundos para renderizar as páginas iniciais.
E isso inclui muitos behin d um formulário de login, como o Facebook! Portanto, eles nem mesmo estão auditando páginas com conteúdo real e cargas úteis mais pesadas. Garanto que, se o HTTP Archive auditasse as páginas atrás do login, o tempo médio de renderização seria maior.
As propriedades online que executam as melhores práticas de desempenho na web estão colhendo os benefícios e vencendo a concorrência. Por quê?
Duh, pessoas reais esperam que as páginas carreguem rápido, como 1 segundo rápido.
Como todo mundo gosta de um site rápido, o Google recompensa os sites rápidos com melhores classificações em mecanismos de pesquisa. Essas classificações levam a mais tráfego. Mais tráfego dá a você mais oportunidade de fazer vendas e, portanto, dinheiro!
Não me importa qual é a sua motivação por trás do seu site, é preciso dinheiro para ele funcionar. entramos na grande temporada de compras de Natal esta semana, quero desafiá-lo a pensar sobre seus aplicativos da web em termos de desempenho, como isso afeta seus negócios e as áreas que você pode fazer para melhorar rapidamente as métricas de desempenho de seus aplicativos.
A navegação e o layout do site são parte das responsabilidades do desenvolvedor, mas devem ser combinados com a pesquisa da experiência do usuário e a criatividade do design. No entanto, o desempenho depende totalmente do desenvolvedor e do arquiteto. Colocar o desempenho como um requisito de primeira classe promove a cultura necessária para criar não apenas um código melhor, mas também experiências mais rápidas. Essa é uma vantagem competitiva que pode ser comprovada pela ciência.
Como o cérebro percebe um site
Ao projetar um ótimo aplicativo, especialmente o front-end, você precisa entender como funciona a mente humana. Existem vários pontos críticos em que nossa mente muda sua impressão de um aplicativo.
Até 1000 ms a mente percebe e ação como um instante. Portanto, eu e muitos outros profissionais de desempenho na web nos esforçamos para atingir um tempo de carregamento de página/aplicativo de 1 segundo.
Quando o tempo de carregamento atinge 3.000 ms, 53% dos visitantes decidem ir para outro lugar. Esse é um número devastador, porque você trabalhou tanto para fazer com que aquele cliente visitasse em primeiro lugar.
Você tem 3 segundos para causar uma impressão positiva, depois disso, eles vão embora em massa.
Aos 10 segundos, o aplicativo é completamente abandonado e considerado quebrado.
Espere, a página da web leva em média 22 segundos para carregar, temos um problema!
Não é de admirar a maioria percebe que a web é lenta, os desenvolvedores optaram por tornar a web lenta .
Outros estudos foram feitos correlacionando o desempenho percebido à qualidade da marca. Não importa qual seja o seu negócio em cada aplicativo, seja no setor de atendimento ao cliente, você precisa manter os clientes satisfeitos com o seu aplicativo.
Isso se aplica tanto aos aplicativos de linha de negócios quanto a um e-aplicativo de comércio. Seus colegas de trabalho são pessoas e não querem ficar sentados o dia todo esperando que seu aplicativo da web mal desenvolvido responda ou permita que eles insiram dados.
Desempenho como estratégia de SEO
Google, Bing e outros mecanismos de pesquisa divulgaram o desempenho é um fator chave para a classificação do mecanismo de pesquisa . Com todas as coisas sendo iguais, o site mais rápido tem uma vantagem nos resultados de pesquisa . Cada mecanismo de pesquisa deseja listar a’melhor correspondência’primeiro para sua consulta de pesquisa.
Os mecanismos de pesquisa sabem que sites mais rápidos são percebidos como sites melhores. Tornar o desempenho uma prioridade dá a você uma vantagem sobre seus concorrentes.
Quais são algumas alterações fáceis que você pode fazer para ir mais rápido?
A arquitetura de front-end reproduz o maiores fatores para a otimização do desempenho da web. Isso significa evitar o Fast Food! Aqui estão algumas coisas rápidas que eu digo aos clientes para implementar:
- Minify Scripts e arquivos CSS
- Inline o CSS de uma página no HEAD (basta ver o código-fonte desta página para ver como está feito)
- Coloque as referências de JavaScript na parte inferior do DOM, logo antes da tag BODY de fechamento
- Mantenha JavaScript em arquivos externos
- Use um CDN
- Implemente cabeçalhos de cache adequados
- Otimize imagens
- Elimine qualquer CSS e JavaScript não utilizado
- Dimensione as imagens adequadamente para o tamanho em que estão sendo renderizadas
- Use a compactação Gzip em todos os recursos que não sejam de imagem
- Evite redirecionamentos HTTP
- Inclua um FavIcon
- Elimine quaisquer solicitações 404
- Use o cache do Service Worker
- Use HTTPS sobre HTTP/2
Essas são ações que você deve ser capaz de implementar rapidamente em um ou dois dias em praticamente qualquer site ou aplicativo da web sem alterar o código principal. OK, talvez a migração para HTTPS leve 3 dias 😊.
Em outras palavras, essas ações podem ter um alto impacto sem alterar a integridade do site. A primeira etapa é medir seu site.
Para isso, recomendo abrir a guia de rede e desempenho das ferramentas de desenvolvimento do navegador (F12). Também recomendo usar Lighthouse e WebHint . A guia de rede de ferramentas de desenvolvimento produz uma boa cascata para encontrar muitos itens na lista. Se seu site for público, use WebPageTest.org para obter mais detalhes sobre as características de desempenho de seu aplicativo. Se você não tem todas as notas verdes no canto superior direito, você tem trabalho a fazer!
Resumo
Este Natal promete ser outro período ativo para o comércio online. Os sites serão levados ao limite e muitos falharão de uma forma ou de outra.
Muitos falharão por causa do desempenho. Não deixe que o desempenho seja um motivo para o fracasso de sua empresa nesta temporada ou no futuro.
O desempenho é uma vantagem porque os clientes querem sites mais rápidos. Os mecanismos de pesquisa recompensam os sites mais rápidos com classificações melhores.
Os sites mais rápidos também se beneficiam do reconhecimento positivo da marca. Dê à sua empresa uma vantagem competitiva sobre a concorrência que terá retorno agora e no futuro.
