Melhor velocidade do site: 4 ideias inovadoras

A maioria de nós realizou auditorias de velocidade no local ou já viu auditorias realizadas por outras pessoas. Isso pode ser realmente útil para as empresas, mas muitas vezes acho que a abordagem delas é bastante limitada. Geralmente, usamos ferramentas familiares que lançam muitas coisas para olhar e depois mergulhamos nas coisas a partir daí.

No entanto, se aprofundarmos, muitas vezes há outras idéias sobre como a velocidade do site pode ser melhorada. Muitas vezes vejo muitas oportunidades que nunca são cobertas nas auditorias de velocidade do site. A maioria das melhorias na velocidade do site é resultado de muitas pequenas alterações, portanto, neste post, abordarei algumas idéias que nunca vi em nenhuma auditoria de velocidade do site, e todas elas podem fazer a diferença .

Um ângulo diferente na otimização da imagem.

Considere SVG otimizado sobre PNG

Recentemente, eu estava olhando para reservar alguns ingressos para ver Frozen 2 (devido a, erm, meus filhos …) e então vim para esta página. Use três imagens SVG para ícones de transporte:

Imagens SVG são imagens vetoriais; portanto, são adequadas para itens como ícones; Se você tiver imagens mostradas como PNG, poderá solicitar aos seus 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 têm aproximadamente 1,2k cada, portanto, são bem pequenos. Eles provavelmente voariam abaixo do radar das auditorias de velocidade do site (e nem o Page Speed ​​Insights nem o GTMetrix mencionam essas imagens nesta página).

Portanto, você pode estar pensando: "Eles são menos de 5k combinados, devo procurar problemas maiores!", Mas vamos dar uma olhada. Primeiro, podemos executá-los através da ferramenta de compressão SVG de Jake Archibald; Essa é uma ótima ferramenta gratuita e, em SVG maior, 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 comprime sem perda de qualidade de ~ 1240 bytes a ~ 630 bytes, um bom relacionamento, mas não uma grande economia geral.

No entanto … agora que os comprimimos, podemos pensar de maneira diferente sobre entregá-los …

Imagens online

O GTMetrix faz recomendações sobre a inserção de pequenos bits de CSS ou JS, mas não menciona as imagens incluídas. As imagens também podem estar online e, às vezes, essa pode ser a abordagem correta.

Se você considerar que mesmo um arquivo de imagem muito pequeno exige uma viagem de ida e volta completa (que pode ter um impacto muito real na velocidade), mesmo para arquivos pequenos, isso pode levar um longo tempo. No caso das imagens de transporte anteriores do Cineworld, simulei uma conexão "Fast 3G" e vi:

O site não está usando HTTP2, portanto, há um longo período de espera e a imagem (que é de 1,2kb) leva quase 600 ms para carregar (não o 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 algumas centenas de bytes cada, e as imagens SVG são realmente compostas por marcas semelhantes ao HTML:

Você pode realmente colocar a marcação SVG diretamente em um documento HTML!

Se fizermos isso com as três imagens de transporte, o HTML compactado para esta página enviado do servidor para o navegador aumentará de 31.182 bytes para 31.532 bytes, um aumento de apenas 350 bytes para as 3 imagens!

Então, para recapitular:

• Nossa solicitação de HTML aumentou 350 bytes, o que é apenas algo
• Podemos descartar três viagens de ida e volta ao servidor, o que podemos ver que levou um tempo considerável

É possível que alguns de vocês tenham percebido que, se as imagens não estivessem online, elas poderiam ser armazenadas em cache separadamente, para que futuras solicitações de página não precisassem procurar novamente. Mas se considerarmos:

• Cada imagem originalmente tinha aproximadamente 1,5 kb na rede (os SVGs não estão sendo compactados), com aproximadamente 350 bytes de cabeçalhos HTTP na parte superior, totalizando aproximadamente 5,5 kb transferidos. Portanto, em geral, reduzimos a quantidade de conteúdo na rede.
• Isso também significa que seriam necessárias mais de 20 visualizações de página para se beneficiar de tê-las em cache.

Para levar: Considere onde existem oportunidades para usar SVG em vez de PNG.

Para levar: Otimize as imagens SVG, use a ferramenta gratuita à qual vinculei.

Para levar: A inclusão de pequenas imagens pode fazer sentido e gerar enormes ganhos de desempenho.

Nota: Você também pode inserir PNG online: consulte este guia.

Nota: Para imagens PNG / JPG otimizadas, tente o Kraken.

Voltar, JavaScript! HTML pode lidar com isso …

Hoje, muitas vezes, graças à prevalência de bibliotecas JavaScript que oferecem uma solução padrão, acho que o JavaScript é usado para funcionalidades que poderiam ser alcançadas sem ela. Mais bibliotecas JS significa mais para download, talvez mais viagens de ida e volta para arquivos adicionais do servidor e, em seguida, tempo de execução e custos JavaScript.

Eu tenho muita simpatia por como você chega a esse ponto. Os desenvolvedores geralmente recebem breves relatórios / especificações que não podem especificar nada sobre desempenho, apenas a função. Eles geralmente exigem pouco tempo e, portanto, é fácil acabar simplesmente jogando algo fora.

No entanto, muito progresso foi feito em termos da funcionalidade que pode ser alcançada com HTML e / ou CSS. Vamos ver alguns exemplos.

Caixa de combinação com pesquisa

As caixas suspensas que têm uma opção de pesquisa de texto são hoje um elemento de interface bastante comum. Um artigo recente que encontrei descreveu como usar a biblioteca Javascript Select2 para fazer essa lista:

É um elemento útil da interface do usuário e pode ajudar seus usuários. No entanto, na biblioteca Select2, há uma biblioteca JavaScript, que por sua vez é baseada em algumas CSS e na biblioteca JQuery. Isso significa três viagens de ida e volta para coletar vários arquivos de tamanhos diferentes:

• JQuery – 101kb
• Select2 JavaScript – 24kb
• Selecionar2 CSS – 3kb

Isso não é ideal para a velocidade do site, mas poderíamos dizer que vale a pena ter uma interface de usuário otimizada.

No entanto, é realmente possível ter essa funcionalidade pronta para uso com o elemento datalist HTML:

Isso permite que o usuário pesquise na lista ou escreva sua própria resposta livremente, fornecendo a mesma funcionalidade. Além disso, ele possui uma interface nativa em smartphones!

Você pode ver isso em ação neste codepen.

Detalhes / Resumo

O LonelyPlanet tem um site bonito, e eu estava olhando esta página sobre a Espanha, que tem um link "Leia mais" com o qual a maioria dos usuários está familiarizada:

Como quase todas as implementações disso que eu vejo, eles usaram uma biblioteca JavaScript para implementar isso e, mais uma vez, isso vem com muita sobrecarga.

No entanto, o HTML possui algumas tags integradas chamadas detalhes e resumo, projetados para implementar exatamente essa funcionalidade. Grátis e nativo em HTML. Sem custos indiretos e mais acessível aos usuários que precisam de um leitor de tela, enquanto transmitem um significado semântico ao Google.

Essas tags podem ser projetadas de várias maneiras flexíveis com CSS e recriam a maioria das versões JS que eu já vi por aí.

Assista a 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, consulte estes links:

• http://youmightnotneedjs.com/
• https://dev.to/ananyaneogi/html-can-do-that-c0n

Para levar: Examine a funcionalidade de seus sites e veja onde pode haver oportunidades para reduzir sua dependência de grandes bibliotecas Javascript, onde existem opções nativas de HTML / CSS.

Para levar: Lembre-se de que o problema não é apenas o tamanho dos arquivos JS, mas a quantidade de viagens de ida e volta necessárias.

Nota: Há casos em que você deve usar a solução JS, mas é importante avaliar os prós e os contras.

Ajustes de rede

Toda vez que o navegador precisa coletar recursos de um servidor, ele deve enviar uma mensagem pela Internet e vice-versa; A velocidade disso é limitada pela velocidade da luz. Isso pode parecer algo ridículo para se preocupar, mas significa que mesmo pequenas solicitações adicionam tempo ao carregamento da página. Se você não capturou o link acima, minha postagem explicando o HTTP2 discute esse problema com mais detalhes.

Há algumas coisas que podemos fazer para ajudar a reduzir a distância dessas solicitações ou a quantidade 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 50 ms do servidor, isso significa 200 ms por conexão. Lembre-se de que o Google recomenda historicamente a segmentação de 200 ms para a entrega de HTML (isso parece um pouco relaxado nas últimas atualizações); 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 dos usuários ao site.

Converse com sua equipe técnica sobre a migração para o TLS 1.3; navegadores que não o suportam recorrerã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 uma CDN, pode ser tão simples quanto ativá-la.

Você pode usar esta ferramenta para verificar quais versões do TLS você ativou.

QUIC / HTTP 3

Nos últimos 2 ou 3 anos, vimos vários sites passarem do HTTP 1.1 para o HTTP 2, que é uma atualização dos bastidores que pode realmente melhorar a 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 a esses está apenas começando a ser viável, mas se você for um cliente do CloudFlare, poderá ativá-lo hoje e nos próximos 6 meses à medida que o Chrome e o Firefox forem implementados, 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 estão com seus servidores (ou suas CDN). Se você imaginar a Internet como uma série de caminhos, poderá imaginar que precisa "conduzir" seu servidor por esses caminhos. No entanto, isso significa congestionamentos e engarrafamentos.

Como resultado, algumas das grandes empresas de nuvem têm suas próprias estradas privadas que têm menos buracos, menos tráfego e limites de velocidade aprimorados. Se apenas os visitantes do seu site pudessem acessar essas estradas, eles poderiam "dirigir" para você mais rápido!

Bem, adivinhem? Eles podem!

Para o CloudFlare, eles fornecem esse acesso através do produto Argo; enquanto você estiver na AWS, pode usar o seu Global Accelerator. Isso permite que 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 já são clientes.

Para levar: Muitos desses tipos de benefícios são consideravelmente mais fáceis de obter se você estiver usando uma CDN. Se você ainda não estiver usando uma CDN, provavelmente deveria estar. O CloudFlare é uma ótima opção, assim como o CloudFront, se você estiver usando a AWS. É rapidamente o mais configurável deles, se você for mais profissional.

Para levar: O TLS 1.3 agora é amplamente compatível e oferece uma melhoria significativa da velocidade para novas conexões.

Para levar: O QUIC / HTTP3 está apenas começando a receber suporte, mas nos próximos meses isso se espalhará mais amplamente. O QUIC inclui os benefícios do TLS 1.3 e mais. Hoje, uma conexão HTTP2 típica precisa de três viagens de ida e volta para abrir; QUIC precisa apenas de um!

Para levar: Se estiver no CloudFlare ou na AWS, existe a possibilidade de aumentar a velocidade simplesmente pressionando um botão para ativar as funções de roteamento inteligente.

Deixe o CSS fazer mais

Anteriormente, eu falei sobre como o HTML possui uma funcionalidade incorporada que você pode aproveitar para salvar, confiando em soluções "desenvolvidas em casa" e, portanto, exige mais código (e processamento no navegador) para implementar. Aqui vou falar sobre alguns exemplos em que CSS pode fazer o mesmo por você.

Reutilizar imagens

Muitas vezes, você encontra páginas que usam imagens semelhantes em vários lugares. Por exemplo, variações em um logotipo em cores diferentes ou setas que apontam nas duas direções. Como ativos exclusivos (por mais semelhantes que sejam), cada um deles deve ser baixado separadamente.

Voltando à minha pesquisa de ingressos de cinema acima, onde eu estava olhando esta página, podemos ver um carrossel com as setas esquerda e direita:

Semelhante à lógica usada anteriormente, embora esses arquivos de imagem sejam pequenos, eles ainda exigem uma ida e volta para obtê-los do servidor.

No entanto, as flechas são idênticas, apenas apontam para direções opostas! É fácil para nós usar CSS transformar funcionalidade para usar uma imagem nas duas direções:

Você pode verificar este código aberto para ver um exemplo.

Outro exemplo é quando o mesmo logotipo aparece em estilos diferentes em diferentes partes da página; Eles geralmente carregam várias variações, o que não é necessário. O CSS pode alterar a cor dos logotipos para você de várias maneiras:

Aqui está um código de código que mostra essa técnica em ação. Se você deseja calcular o valor do filtro CSS necessário para obter uma cor arbitrária, consulte esta incrível calculadora de cores.

Interações (por exemplo, menus e guias)

Geralmente, itens de navegação, como menus e guias, são implementados em JavaScript, mas também podem ser feitos em CSS puro. Veja este código de código para ver um exemplo:

Animações

O CSS3 introduziu uma poderosa e poderosa capacidade de animação no CSS. Freqüentemente, elas não são apenas mais rápidas que as versões JavaScript, mas também podem ser mais suaves, pois podem ser executadas no código nativo do sistema operacional, em vez de ter que executar um JavaScript relativamente lento.

Veja o Dozing Bird como um exemplo:

Você pode encontrar muito mais neste artigo. As animações CSS podem adicionar muitos caracteres às páginas com um custo de desempenho relativamente pequeno.

…e mais

Para mais exemplos de funcionalidades 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

Para levar: Use CSS para otimizar a quantidade de arquivos que você precisa carregar usando rotações ou filtros.

Para levar: As animações CSS podem adicionar caracteres às páginas e geralmente requerem menos recursos que o JavaScript.

Para levar: O CSS é perfeitamente capaz de implementar muitos elementos interativos da interface do usuário.

Wrap

Espero que você tenha achado esses exemplos úteis por si só, mas o ponto mais amplo que quero enfatizar é que todos devemos tentar pensar um pouco mais sobre a velocidade do site. De particular importância é reduzir a quantidade de viagens de ida e volta necessárias para o servidor; Até pequenos ativos demoram um pouco para se recuperar e podem ter um impacto considerável no desempenho (especialmente em dispositivos móveis).

Há muito mais idéias do que abordamos aqui; portanto, pule para os comentários se tiver outras coisas que encontrou.