Melhor velocidade do site: 4 idéias prontas para uso

Melhor velocidade do site: 4 idéias prontas para uso
cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br


A maioria de nós já fez auditorias de velocidade no site ou viu auditorias realizadas por outras pessoas. Isso pode ser realmente útil para as empresas, mas geralmente acho que elas são bastante restritas. Normalmente, usamos ferramentas conhecidas que lançam várias coisas para serem analisadas e, em seguida, 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 é o resultado de várias pequenas alterações. Portanto, nesta postagem, abordarei algumas idéias que nunca vi em nenhuma auditoria de velocidade do site, e tudo isso pode fazer a diferença.

Um ângulo diferente na otimização da imagem

Considere SVGs otimizados sobre PNGs

Recentemente, eu estava olhando para reservar alguns ingressos para ver Frozen 2 (por causa de, hum, meus filhos …) e cheguei a esta página. Utiliza três imagens SVG para ícones de transporte:

Melhor velocidade do site: 4 idéias prontas para uso 1

As imagens SVG são imagens vetoriais; portanto, são adequadas para itens como ícones; se você tiver imagens exibidas como PNGs, poderá solicitar aos SVGs originais para seus designers, 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 chegam a cerca de 1,2k cada, então são bem pequenos. Eles provavelmente voariam sob o 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ê deve 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 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 comprime sem perda de qualidade de ~ 1240 bytes a ~ 630 bytes – uma boa proporção, mas não uma economia geral.

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

Imagens embutidas

O GTMetrix faz recomendações sobre a inclusão de pequenos bits de CSS ou JS, mas não menciona imagens embutidas. As imagens também podem ser incorporadas e, às vezes, essa pode ser a abordagem correta.

Se você considera que mesmo um arquivo de imagem muito pequeno requer uma ida e volta completa (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 “Fast 3G” e vi:

Melhor velocidade do site: 4 idéias prontas para uso 2

O site não está usando HTTP2, portanto, há um longo período de espera e, em seguida, a imagem (1,2kb) leva quase 600ms para carregar (nenhum HTTP2 também significa que isso 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 realmente compostas de marcação de maneira semelhante ao HTML:

Melhor velocidade do site: 4 idéias prontas para uso 3

Você pode 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 é 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!

Leia Também  Como realizar uma auditoria de SEO em 2020 (um guia passo a passo)

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 ao servidor, o que podemos ver 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, solicitações futuras de páginas não precisariam buscá-las novamente. Mas se considerarmos:

  • Cada imagem originalmente tinha cerca de 1,5 kb na rede (eles não estão compactando os SVGs), com cerca de 350 bytes de cabeçalhos HTTP no topo, totalizando 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 visualizações de página para que elas fossem armazenadas em cache.

Leve embora: Considere onde existem oportunidades para usar SVGs em vez de PNGs.

Leve embora: Otimize as imagens SVG, use a ferramenta gratuita à qual vinculei.

Leve embora: A inclusão de pequenas imagens pode fazer sentido e trazer ganhos de desempenho enormes.

Nota: Você também pode PNGs embutidos – consulte este guia.

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

Recue, JavaScript! HTML pode lidar com isso …

Hoje em dia, muitas vezes, graças à prevalência de bibliotecas JavaScript que oferecem uma solução pronta para uso, acho o JavaScript sendo usado para funcionalidades que poderiam ser alcançadas sem ela. 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 do JavaScript e os custos.

Eu tenho muita simpatia por como você chega a esse ponto. Os desenvolvedores geralmente recebem resumos / especificações ruins que não especificam nada sobre desempenho, apenas função. Muitas vezes, eles não têm muito tempo e, portanto, é fácil acabar colocando algo.

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

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

Melhor velocidade do site: 4 idéias prontas para uso 4

É 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, depende de algumas CSS e da biblioteca JQuery. Isso significa três viagens de ida e volta para coletar vários arquivos de tamanhos variados:

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

Isso não é ideal para a velocidade do site, mas certamente poderíamos argumentar que vale a pena para ter uma interface otimizada para os usuários.

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

Melhor velocidade do site: 4 idéias prontas para uso 5

Isso permite que o usuário pesquise na lista ou digite gratuitamente sua própria resposta, 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 possui um link “Leia mais” com o qual a maioria dos usuários da web conhece:

Melhor velocidade do site: 4 idéias prontas para uso 6

Como quase todas as implementações que eu vejo, elas usaram uma biblioteca JavaScript para implementá-las, e mais uma vez isso vem com um monte de despesas gerais.

No entanto, o HTML possui um par de tags internas chamadas detalhes e resumo, projetados para implementar exatamente essa funcionalidade. Gratuito e nativamente em HTML. Sem custos indiretos e mais acessível para usuários que precisam de um leitor de tela, além de transmitir significado semântico ao Google.

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

Confira uma demonstração simples aqui: https://codepen.io/TomAnthony/pen/GRRLrmm

…e mais

Para mais exemplos de funcionalidade que você pode obter com HTML em vez de JS, confira estes links:

  • http://youmightnotneedjs.com/
  • https://dev.to/ananyaneogi/html-can-do-that-c0n
Leia Também  Na batalha de recursos com o Google, o Yelp aprimora a funcionalidade da lista de espera de restaurantes

Leve embora: 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.

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br

Leve embora: 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 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 retornar; a velocidade disso é limitada pela velocidade da luz. Isso pode parecer uma coisa ridícula 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 aborda esse problema com mais detalhes.

Há algumas coisas que podemos fazer para ajudar a reduzir a distância dessas solicitações ou o número de viagens de ida e volta necessárias. Estes são um pouco mais técnicos, mas podem alcançar 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 do servidor, isso significa 200ms por conexão. Lembre-se de que o Google recomenda historicamente que aponte 200ms 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 na conexão inicial dos usuários ao seu site.

Fale com sua equipe de tecnologia sobre a migração para o TLS 1.3; navegadores que não suportam o recurso 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-3 anos, vimos vários sites passarem do HTTP 1.1 para o HTTP 2, que é uma atualização dos bastidores que pode fazer uma melhoria real na velocidade (veja meu link acima, se você quiser ler mais )

Logo depois 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 se tornar viável, mas se você for um cliente do CloudFlare, poderá habilitá-lo hoje e nos próximos 6 meses, à medida que o Chrome e o Firefox lançarem suporte, seus usuários receberã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 onde quer que estejam com seus servidores (ou sua CDN). Se você imaginar a internet como uma série de estradas, poderá imaginar que elas precisam “dirigir” para o servidor por essas estradas. No entanto, isso significa congestionamentos e engarrafamentos.

Acontece que algumas das grandes empresas de nuvem têm suas próprias estradas particulares, 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” para você mais rapidamente!

Bem, adivinhe? Eles podem!

Para o CloudFlare, eles fornecem esse acesso por meio do produto Argo, enquanto que se você estiver na AWS, poderá usar o 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 você já é cliente.

Leve embora: 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ê é mais profissional.

Leia Também  Qual o impacto da pesquisa por voz no SEO em 2020? Relógio do mecanismo de pesquisa

Leve embora: O TLS 1.3 agora é amplamente suportado e oferece uma melhoria significativa da velocidade para novas conexões.

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

Leve embora: Se você estiver no CloudFlare ou na AWS, é possível obter acelerações apenas pressionando um botão para ativar os recursos de roteamento inteligente.

Deixe o CSS fazer mais

Acima, eu falei sobre como o HTML possui uma funcionalidade incorporada que você pode aproveitar para economizar, contando com soluções “caseiras” e, portanto, exige mais código (e processamento no lado do navegador) para implementar. Aqui vou falar sobre alguns exemplos em que o CSS pode fazer o mesmo por você.

Reutilizar imagens

Muitas vezes, você encontra páginas que usam imagens semelhantes em toda a página 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 desses itens precisa ser baixado separadamente.

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

Melhor velocidade do site: 4 idéias prontas para uso 7

De maneira semelhante à lógica usada acima, embora esses arquivos de imagem sejam pequenos, eles ainda exigem uma ida e volta para buscar no servidor.

No entanto, as setas são idênticas – apenas apontando em direções opostas! É fácil para nós usar CSS transformar funcionalidade para usar uma imagem em ambas as direções:

Melhor velocidade do site: 4 idéias prontas para uso 8

Você pode conferir este código de código para um exemplo.

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

Melhor velocidade do site: 4 idéias prontas para uso 9

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

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

Geralmente, 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 de código para um exemplo:

Melhor velocidade do site: 4 idéias prontas para uso 10

Animações

O CSS3 introduziu uma grande capacidade de animação poderosa no CSS. Freqüentemente, essas são nã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 o Javascript relativamente mais lento.

Confira Dozing Bird como um exemplo:

Melhor velocidade do site: 4 idéias prontas para uso 11

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

Leve embora: Use CSS para otimizar quantos arquivos você precisa carregar usando rotações ou filtros.

Leve embora: As animações CSS podem adicionar caracteres às páginas e geralmente exigem menos recursos que o JavaScript.

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

Embrulhar

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 a respeito da velocidade do site. De particular importância é reduzir o número de viagens de ida e volta necessárias para o servidor; até pequenos ativos levam algum tempo para serem buscados e podem ter um impacto considerável no desempenho (especialmente em dispositivos móveis).

Há muito mais ideias do que abordamos aqui; portanto, entre nos comentários se tiver outras coisas que você encontrou.

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *