A maioria de nós já fez auditorias de velocidade do site ou viu auditorias feitas por outros. Isso pode ser muito útil para as empresas, mas geralmente acho que seu foco é bastante restrito. Normalmente usamos ferramentas bem conhecidas que apresentam um monte de coisas para ver e depois mergulhamos nas coisas a partir daí.
No entanto, se nos aprofundarmos, muitas vezes existem outras ideias sobre como a velocidade do site pode ser melhorada. Costumo ver muitas oportunidades que nunca são abordadas nas auditorias de velocidade do site. A maioria das melhorias na velocidade do site é o resultado de um monte de pequenas mudanças, portanto, neste post, vou cobrir algumas ideias que nunca vi em nenhuma auditoria de velocidade do site, que podem fazer a diferença.
Um ângulo diferente na otimização de imagem
Considere SVGs otimizados sobre PNGs
Recentemente, estava tentando reservar alguns ingressos para ver o Frozen 2 (por causa dos, erm, meus filhos …) e então pousei nesta página . Ele faz uso de três imagens SVG para ícones de transporte:
As imagens SVG são imagens vetoriais, portanto, são adequadas para coisas como ícones; Se você tiver imagens exibidas como PNGs, pode pedir aos designers os SVGs originais, pois pode haver uma economia considerável . Embora nem sempre seja melhor, o uso de um SVG pode economizar 60% do tamanho do arquivo.
Nesse caso, esses ícones vêm em cerca de 1,2k cada, então eles são bem pequenos. Provavelmente, eles escapariam do radar das auditorias de velocidade do site (e nem o Page Speed Insights nem o GTMetrix mencionam essas imagens para esta página).
Então você pode estar pensando, “Eles têm menos de 5k combinados – você deveria procurar por problemas maiores!”, Mas vamos dar uma olhada. Em primeiro lugar, podemos executá-los por meio da ferramenta de compactação SVG de Jake Archibald ; esta é uma ótima ferramenta gratuita e em SVGs maiores pode fazer uma grande diferença.
Nesse caso, os arquivos são pequenos, então você ainda pode estar pensando “Por que se preocupar?” A ferramenta os compacta sem qualquer perda de qualidade de ~ 1240 bytes a ~ 630 bytes – uma boa proporção, mas não muito para uma economia geral.
No entanto … agora que os comprimimos, podemos pensar de forma diferente sobre como entregá-los …
Imagens embutidas
GTMetrix faz recomendações sobre pequenos pedaços embutidos de CSS ou JS, mas não menciona imagens embutidas. As imagens também podem ser embutidas e, às vezes, essa pode ser a abordagem certa.
Se você considerar que mesmo um arquivo de imagem muito pequeno requer uma viagem completa (o que pode ter um impacto muito real na velocidade ), mesmo para arquivos pequenos, isso pode levar muito tempo. No caso das imagens de transporte do Cineworld acima, simulei uma conexão “3G rápida” e vi:
O site não está usando HTTP2, então há um longo período de espera e, em seguida, a imagem (que tem 1,2 kb) leva quase 600 ms para carregar (sem HTTP2 também significa que está bloqueando outras solicitações). Existem três dessas imagens, portanto, entre elas, elas podem ter um impacto real na velocidade da página.
No entanto, agora os compactamos para apenas algumas centenas de bytes cada, e as imagens SVG são, na verdade, feitas de marcação de maneira semelhante ao HTML:
Você pode realmente colocar a marcação SVG diretamente em um documento HTML!
Se fizermos isso com todas as três imagens de transporte, o HTML compactado para esta página que é enviada do servidor para o nosso navegador aumenta de 31.182 bytes para 31.532 bytes – um aumento de apenas 350 bytes para todas as 3 imagens!
Então, para recapitular:
- Nossa solicitação de HTML aumentou 350 bytes, o que é quase nada
- Podemos descartar três viagens de ida e volta para o servidor, que estamos levando um tempo considerável
Alguns de vocês devem ter percebido que, se as imagens não estivessem embutidas, elas poderiam ser armazenadas em cache separadamente, portanto, as solicitações de páginas futuras não precisariam buscá-las novamente. Mas se considerarmos:
- Cada imagem tinha originalmente cerca de 1,5 kb na rede (eles não estão copiando os SVGs), com cerca de 350 bytes de cabeçalhos HTTP no topo para um total de cerca de 5,5 kb transferidos. Portanto, no geral, reduzimos a quantidade de conteúdo na rede.
- Isso também significa que seriam necessárias mais de 20 exibições de página para se beneficiar do armazenamento em cache.
Conclusão: considere onde há oportunidades de usar SVGs em vez de PNGs.
Levando em consideração: certifique-se de otimizar as imagens SVG, use a ferramenta gratuita à qual criei um link.
Takeaway: pequenas imagens embutidas podem fazer sentido e trazer ganhos de desempenho descomunais.
Observação: você também pode inline PNGs – consulte este guia .
Nota: Para imagens PNG / JPG otimizadas, experimente Kraken .
Afaste-se, JavaScript! HTML pode lidar com isso …
Com tanta frequência hoje em dia, graças à prevalência de bibliotecas JavaScript que oferecem uma solução pronta para uso, acho que o JavaScript está sendo usado para funcionalidades que poderiam ser alcançadas sem ele. Mais bibliotecas JS significa mais para baixar, talvez mais viagens de ida e volta para arquivos adicionais do servidor e, em seguida, o tempo de execução e os custos de JavaScript.
Tenho muita simpatia por como você chegou a este ponto. Os desenvolvedores geralmente recebem instruções / especificações ruins que não especificam nada sobre desempenho, apenas função. Eles costumam ter pouco tempo e, por isso, é fácil acabar simplesmente deixando algo cair.
No entanto, muito progresso foi feito em termos da funcionalidade que pode ser alcançada com HTML e / ou CSS. Vejamos alguns exemplos.
Caixa de combinação com pesquisa
As caixas suspensas com opção de pesquisa de texto são um elemento de interface bastante comum hoje em dia. Um artigo recente que encontrei descreveu como usar a biblioteca Javascript Select2 para fazer essa lista:
É um elemento de IU útil e pode ajudar seus usuários. No entanto, na biblioteca Select2 existe uma biblioteca JavaScript, que por sua vez depende de algum CSS e da biblioteca JQuery. Isso significa três viagens de ida e volta para coletar um monte de arquivos de tamanhos variados:
- JQuery – 101kb
- Select2 JavaScript – 24kb
- Select2 CSS – 3kb
Isso não é ideal para a velocidade do site, mas certamente poderíamos argumentar que vale a pena ter uma interface simplificada para os usuários.
No entanto, é realmente possível ter essa funcionalidade fora da caixa com o elemento datalist HTML:
Isso permite que o usuário pesquise na lista ou digite livremente sua própria resposta, oferecendo a mesma funcionalidade. Além disso, possui interface nativa em smartphones!
Você pode ver isso em ação neste código .
Detalhes / Resumo
A LonelyPlanet tem um lindo site, e eu estava olhando esta página sobre a Espanha , que tem um link ‘Leia mais’ que a maioria dos usuários da web está familiarizado:
Como quase todas as implementações que vejo, eles usaram uma biblioteca JavaScript para implementar isso e, mais uma vez, isso vem com um monte de sobrecargas.
No entanto, o HTML tem um par de tags integradas chamadas de detalhes e resumo , que são projetadas para implementar exatamente essa funcionalidade. Grátis e nativamente em HTML. Sem sobrecargas e mais acessível para usuários que precisam de um leitor de tela, além de transmitir significado semântico para o Google.
Essas tags podem ser estilizadas de várias maneiras flexíveis com CSS e recriar a maioria das versões JS que vi por aí.
Confira uma demonstração simples aqui: https://codepen.io/TomAnthony/pen/GRRLrmm
…e mais
Para obter mais exemplos de funcionalidade que você pode obter com HTML em vez de JS, verifique estes links:
- http://youmightnotneedjs.com/
- https://dev.to/ananyaneogi/html-can-do-that-c0n
Conclusão: examine a funcionalidade de seus sites e veja onde pode haver oportunidades para reduzir sua dependência de grandes bibliotecas Javascript onde há opções nativas de HTML / CSS.
Takeaway: Lembre – se de que não é apenas o tamanho dos arquivos JS que é problemático, mas o número de viagens de ida e volta que são necessárias.
Observação: há casos em que você deve usar a solução JS, mas é importante pesar os prós e os contras.
Otimizações de rede
Sempre que o navegador precisa coletar recursos de um servidor, ele precisa enviar uma mensagem pela Internet e vice-versa; a velocidade disso é limitada pela velocidade da luz. Pode parecer uma coisa ridícula com que nos preocupar, mas significa que mesmo as pequenas solicitações aumentam o tempo de carregamento da página. Se você não pegou o link acima, meu post explicando o HTTP2 discute esse problema com mais detalhes .
Existem algumas coisas que podemos fazer para ajudar a reduzir a distância dessas solicitações ou para reduzir o número de viagens de ida e volta necessárias. Estes são um pouco mais técnicos, mas podem alcançar algumas vitórias reais.
TLS 1.3
TLS (ou SSL) é a tecnologia de criptografia usada para proteger conexões HTTPS. Historicamente, foram necessárias duas viagens de ida e volta entre o navegador e o servidor para configurar essa criptografia – se o usuário estiver a 50ms de distância do servidor, isso significa 200ms por conexão. Lembre-se de que o Google historicamente recomenda ter como objetivo 200 ms para entregar o HTML (isso parece um pouco relaxado nas atualizações mais recentes); você está perdendo muito tempo aqui.
O padrão TLS 1.3 recentemente definido reduz isso de duas viagens de ida e volta para apenas uma, o que pode economizar um tempo precioso da conexão inicial do usuário com o seu site.
Fale com sua equipe de tecnologia sobre a migração para o TLS 1.3; os navegadores que não o suportam voltarão ao TLS 1.2 sem problemas. Tudo isso está nos bastidores e não é uma migração de qualquer tipo. Não há razão para não fazer isso.
Se você estiver usando um CDN, pode ser tão simples quanto ligá-lo.
Você pode usar essa ferramenta para verificar quais versões do TLS você ativou.
QUIC / HTTP 3
Nos últimos 2-3 anos, vimos vários sites mudarem de HTTP 1.1 para HTTP 2, que é uma atualização nos bastidores que pode fazer uma melhoria real na velocidade (veja meu link acima se você quiser ler mais )
Logo atrás disso, há um par emergente de padrões conhecido como QUIC + HTTP / 3, que otimiza ainda mais a conexão entre o navegador e o servidor, reduzindo ainda mais as viagens de ida e volta necessárias.
O suporte para eles está apenas começando a se tornar viável, mas se você é um cliente CloudFlare, você pode habilitar isso hoje e nos próximos 6 meses, conforme o Chrome e o Firefox implementarem o suporte, seus usuários terão um aumento de velocidade.
Leia mais aqui: https://blog.cloudflare.com/http3-the-past-present-and-future/
Super roteamento
Quando os usuários se conectam ao seu site, eles precisam abrir conexões de rede de onde quer que estejam com seus servidores (ou CDN). Se você imaginar a Internet como uma série de estradas, poderá imaginar que eles precisam “dirigir” para o seu servidor por essas estradas. No entanto, isso significa congestionamento e engarrafamentos.
Acontece que algumas das grandes empresas de nuvem têm suas próprias estradas privadas com menos buracos, menos tráfego e limites de velocidade aprimorados. Se apenas os visitantes do seu site pudessem ter acesso a essas estradas, eles poderiam ‘dirigir’ até você mais rápido!
Bem, adivinhe? Eles podem!
Para CloudFlare, eles fornecem esse acesso por meio de seu produto Argo , enquanto se você estiver na AWS, então você pode usar seu Global Accelerator . Isso permite que as solicitações ao seu site façam uso de suas redes privadas e obtenham um potencial aumento de velocidade. Ambos são muito baratos se vocês já são clientes.
Conclusão: muitos desses tipos de benefícios são consideravelmente mais fáceis de obter se você estiver usando um CDN. Se você ainda não estiver usando um CDN, provavelmente deveria usar. O CloudFlare é uma ótima escolha, assim como o CloudFront se você estiver usando AWS. Fastly é o mais configurável deles se você for mais profissional.
Takeaway: TLS 1.3 agora é amplamente suportado e oferece uma melhoria significativa de velocidade para novas conexões.
Conclusão : o QUIC / HTTP3 está apenas começando a obter suporte, mas nos próximos meses isso será implementado de forma mais ampla. O QUIC inclui os benefícios do TLS 1.3 e muito mais. Uma conexão HTTP2 típica hoje em dia precisa de 3 viagens de ida e volta para ser aberta; O QUIC precisa de apenas um!
Levando em consideração: se você estiver no CloudFlare ou AWS, então há potencial para aumentar a velocidade simplesmente girando um botão para ativar os recursos de roteamento inteligente.
Deixe o CSS fazer mais
Acima, falei sobre como o HTML tem funcionalidades embutidas que você pode aproveitar para economizar contando com soluções que são “caseiras” e, portanto, requerem mais código (e processamento no lado do navegador) para implementar. Aqui falarei sobre alguns exemplos em que o CSS pode fazer o mesmo por você.
Reutilizar imagens
Freqüentemente, você encontra páginas que usam imagens semelhantes em toda a página em vários lugares. Por exemplo, variações de um logotipo em cores diferentes ou setas que apontam em ambas as direções. Como ativos exclusivos (por mais semelhantes que sejam), cada um deles precisa ser baixado separadamente.
Voltando à minha busca por ingressos de cinema acima, onde eu estava olhando esta página , podemos ver um carrossel que tem setas para a esquerda e para a direita:
De forma semelhante à lógica usada acima, embora esses arquivos de imagem sejam pequenos, eles ainda requerem uma viagem de ida e volta para serem buscados no servidor.
No entanto, as setas são idênticas – apenas apontando em direções opostas! É fácil para nós usar a funcionalidade de transformação do CSS para usar uma imagem para ambas as direções:
Você pode verificar este codepen para um exemplo.
Outro exemplo é quando o mesmo logotipo aparece em estilos diferentes em diferentes partes da página; frequentemente, eles carregam diversas variações, o que não é necessário. CSS pode recolorir logotipos para você de várias maneiras:
Há um código aqui que mostra essa técnica em ação. Se você deseja calcular o valor do filtro CSS necessário para atingir uma cor arbitrária, verifique esta incrível calculadora de cores .
Interações (por exemplo, menus e guias)
Freqüentemente, os elementos de navegação, como menus e guias, são implementados em JavaScript, mas também podem ser feitos em CSS puro. Confira este código para obter um exemplo:
Animações
CSS3 introduziu muitos recursos poderosos de animação em CSS. Freqüentemente, eles não são apenas mais rápidos do que as versões JavaScript, mas também podem ser mais suaves, pois podem ser executados no código nativo do sistema operacional, em vez de ter que executar um Javascript relativamente lento.
Veja Dozing Bird como um exemplo:
Você pode encontrar muito mais neste artigo . As animações CSS podem adicionar muitos caracteres às páginas a um custo de desempenho relativamente pequeno.
…e mais
Para obter mais exemplos de funcionalidade que você pode obter usando soluções CSS puras, dê uma olhada em:
- http://youmightnotneedjs.com/
- https://dev.to/ananyaneogi/css-can-do-that-18g7m
Takeaway: Use CSS para otimizar quantos arquivos você tem que carregar usando rotações ou filtros.
Conclusão: as animações CSS podem adicionar caracteres às páginas e geralmente requerem menos recursos do que o JavaScript.
Conclusão: CSS é perfeitamente capaz de implementar muitos elementos de interface do usuário interativos.
Embrulhar
Espero que você tenha achado esses exemplos úteis em si, mas o ponto mais amplo que quero enfatizar é que todos devemos tentar pensar um pouco mais fora da caixa no que diz respeito à velocidade do site. De particular importância é reduzir o número de viagens de ida e volta necessárias para o servidor; mesmo pequenos ativos demoram algum tempo para serem obtidos e podem ter um impacto considerável no desempenho (especialmente móvel).
Há muito mais ideias do que abordamos aqui, então pule para os comentários se você tiver outras coisas que encontrou.
