O melhor Site de Velocidade: 4, Fora-da-Caixa de Ideias

A maioria de nós fizemos a velocidade do website auditorias, ou visto de auditorias realizadas por outras pessoas. Estes podem ser realmente úteis para as empresas, mas muitas vezes eu achar que eles estão muito estreito em foco. Normalmente utilizamos ferramentas conhecidas que vomitar um monte de coisas para ver e, em seguida, mergulhar nas coisas de lá.

No entanto, se vamos cavar mais fundo, há muitas outras idéias sobre como a velocidade do website pode ser melhorado. Muitas vezes vejo muitas oportunidades que nunca são cobertas na velocidade do site auditorias. Mais velocidade do website melhorias são o resultado de uma série de pequenas mudanças, e por isso, neste post eu estou indo para cobrir algumas idéias que eu nunca vi em nenhum site de velocidade de auditoria, os quais podem fazer a diferença.

Um ângulo diferente sobre otimização de imagens

Considere otimizado SVGs sobre PNGs

Recentemente, eu estava olhando para reservar alguns ingressos para ver Congelados 2 (devido, erm, meus filhos…) e então desembarcou nesta página. Ele faz uso de três imagens SVG para o transporte de ícones:

As imagens SVG são as imagens do vetor, então eles estão bem adaptados para coisas como ícones; se você tem imagens apresentadas como PNGs você pode querer perguntar ao seu designers para o original SVGs, como pode haver uma economia considerável. Apesar de não ser sempre melhor, usando um SVG podem salvar 60% do tamanho do ficheiro.

Neste caso, estes ícones vêm em cerca de 1,2 k de cada um, de modo que eles são muito pequenos. Eles provavelmente voar sob o radar de velocidade do site auditorias (e nem a Página de Velocidade Insights ou GTMetrix mencionar essas imagens para esta página).

Assim, você pode estar pensando, “Eles estão a menos de 5k combinado — você deve olhar para os problemas maiores!”, mas vamos dar uma olhada. Em primeiro lugar, podemos executá-los todos, através de Jake Archibald SVG ferramenta de compressão; esta é uma grande ferramenta gratuita e em maior SVGs, ele pode fazer uma grande diferença.

Neste caso, os arquivos são pequenos, então você pode ainda estar pensando “Por que se preocupar?” A ferramenta compacta-los, sem qualquer perda de qualidade de ~1240 bytes para ~630 bytes — uma relação boa, mas não muito de uma poupança global.

No entanto… agora que já comprimido, podemos pensar de forma diferente sobre a entrega…

Imagens embutidas

GTMetrix faz recomendações em torno de inlining pequenos pedaços de CSS ou JS, mas não menciona inlining imagens. As imagens também podem ser lineares, e às vezes isso pode ser a abordagem certa.

Se você considerar que até mesmo um pequeno arquivo de imagem requer uma completa de ida e volta (o que pode ter um impacto muito real de velocidade), mesmo para arquivos pequenos, isso pode levar um longo tempo. No caso de o Cineworld de transporte imagens acima, eu simulado um “Fast 3G” conexão e viu:

O site não está usando HTTP2 portanto, há um longo período de espera e, em seguida, a imagem (que é de 1,2 kb) leva quase 600ms para carregar (não HTTP2 também significa que este está bloqueando outras solicitações). Existem três dessas imagens, por isso entre eles, podem estar a ter um impacto real na página de velocidade.

No entanto, temos agora comprimido-las apenas a algumas centenas de bytes cada, e as imagens SVG são, na verdade, composta de marcação semelhante a HTML:

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

Se fazemos isso com todos os três transporte de imagens, HTML comprimido para esta página que é enviado 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:

Alguns de vocês podem ter percebido que, se as imagens não foram inline eles poderiam ser armazenados separadamente, para futuras solicitações de página não seria necessário para refetch-los. Mas se considerarmos:

Takeaway: Considere onde há oportunidades para usar os SVGs, em vez de PNGs.

Takeaway: certifique-se de otimizar a imagens SVG, use a ferramenta gratuita que eu vinculada.

Takeaway: Inlining pequenas imagens que podem fazer sentido e trazer enorme ganho de desempenho.

Nota: Você também pode inline PNGs — consultar esse guia.

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

De volta para fora, JavaScript! HTML pode lidar com isto…

Por isso, muitas vezes, hoje em dia, graças a prevalência de bibliotecas JavaScript que oferecem um off-the-shelf solução, acho que o JavaScript está sendo usado para a funcionalidade que poderia ser conseguido sem ele. Mais bibliotecas JS significa mais para fazer o download, talvez o mais viagens de ida e volta para adicionais de arquivos do servidor e, em seguida, o JavaScript tempo de execução e custos.

Eu tenho um monte de simpatia de uns para como você chegar a este ponto. Os desenvolvedores são, muitas vezes, dada a má resumos/specs que não especifica nada sobre o desempenho, apenas a função. Eles são, muitas vezes, de tempo ruim e por isso é fácil para acabar apenas deixando cair algo.

No entanto, um grande progresso tem sido feito em termos de funcionalidade que pode ser alcançado com HTML e CSS. Vejamos alguns exemplos.

Caixa de combinação com pesquisa

Caixas suspensas que ter uma opção de pesquisa de texto são uma forma bastante comum de elemento de interface nos dias de hoje. Um recente artigo, me deparei descrito como usar o Select2 biblioteca de Javascript para fazer uma lista como esta:

É um elemento de INTERFACE do usuário, e pode ajudar o seu blog. No entanto, em Select2 library é uma biblioteca de JavaScript, que por sua vez depende de alguns de CSS e da biblioteca JQuery. Isso significa que as três viagens de ida e volta para recolher um monte de arquivos de tamanhos variados:

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

No entanto, na verdade, é possível ter esta funcionalidade fora da caixa com o HTML datalist elemento:

Isso permite que o usuário pesquisa por meio de lista ou para libertar a escreva a sua resposta, então, fornece a mesma funcionalidade. Além disso, ele tem uma interface nativa em smartphones!

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

Detalhes/Resumo

LonelyPlanet tem um belo site, e eu estava olhando para esta página sobre a Espanha, que tem um ‘Leia Mais’ link que a maioria dos usuários da web vai estar familiarizado com:

Como quase todos implementação deste que eu vejo, eles usaram uma biblioteca JavaScript para implementar isto, e mais uma vez vem com um monte de despesas.

No entanto, o HTML tem um par de alto-tags chamado de detalhes e o resumo, que são projetados para implementar esta funcionalidade exatamente. Grátis e de forma nativa em HTML. Sem despesas gerais, e mais acessível a utilizadores que necessitem de um leitor de tela, além de transmitir significado semântico para o Google.

Estas tags podem ser decorados de várias formas flexíveis com CSS e recriar a maioria das JS versões que eu tenho visto por aí.

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

…e mais

Para mais exemplos de funcionalidade que você pode conseguir com o HTML, em vez de JS, consulte estes links:

Takeaway: Examinar a funcionalidade dos sites e ver onde pode haver oportunidades para reduzir a sua dependência de grandes bibliotecas Javascript, onde não são nativas do HTML/CSS opções.

Takeaway: Lembre-se que não é só o tamanho da JS que é problemático, mas o número de viagens de ida e volta são obrigatórias.

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

Rede tune-ups

Cada vez que o navegador tem que recolher recursos de um servidor, tem de enviar uma mensagem através da internet e para trás; a velocidade é limitada pela velocidade da luz. Isto pode soar como uma coisa ridícula de nos preocuparmos com, mas isso significa que mesmo os pequenos pedidos de adicionar um tempo para o carregamento da página. Se você não pegar o link acima, o meu post explicando HTTP2 aborda esta questão em mais detalhes.

Há algumas coisas que pode fazer para ajudar a reduzir a distância de essas solicitações ou para reduzir o número de viagens de ida e volta necessários. Estas são um pouco mais técnico, mas pode conseguir algumas real wins.

TLS 1.3

(TLS ou SSL) é a tecnologia de criptografia usada para proteger conexões HTTPS. Historicamente tem levado duas viagens de ida e volta entre o navegador e o servidor de configuração de encriptação — se o usuário é 50ms de distância a partir do servidor e, em seguida, isso significa 200ms por conexão. Tenha em mente que o Google historicamente recomenda apontando para 200ms para entregar o HTML (isso parece um pouco relaxado com as atualizações mais recentes); você está perdendo um monte de que o tempo aqui.

Recentemente definido TLS 1.3 padrão reduz isso a partir de duas viagens de ida e volta para apenas um, que pode raspar algum precioso tempo fora do blog conexão inicial para o seu website.

Falar com a sua equipe técnica sobre a migração para o TLS 1.3; navegadores que não suportam retornará para o TLS 1.2 sem problema. Tudo isso está nos bastidores e não é uma migração de qualquer espécie. Não há nenhuma razão para não fazer isso.

Se você estiver usando um CDN, então ele pode ser tão simples como apenas ligá-lo.

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

PCL / HTTP 3

Nos últimos 2-3 anos, temos visto um número de sites de mover-se a partir de HTTP 1.1 do HTTP 2, que é um behind-the-scenes de atualização que pode fazer uma real melhoria de velocidade (ver o meu link acima, se você quiser ler mais).

Direito por trás do que, há o aparecimento de um par de padrões conhecidos como PCL + HTTP/3, que otimizar ainda mais a conexão entre o navegador e o servidor, reduzindo ainda mais as viagens de ida e volta obrigatória.

O suporte para estes está apenas começando a se tornar viável, mas se você é um cliente CloudFlare você pode permitir que hoje e nos próximos 6 meses, como Chrome e Firefox, rolo de suporte de fora, o seu blog vai ter 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 para o seu site, eles têm que abrir as ligações de rede a partir de onde eles são, para os seus servidores (ou o CDN). Se você imaginar a internet como uma série de vias de comunicação, então você pode imaginar que eles precisam para ‘unidade’ para o servidor de longo destas estradas. No entanto, o que significa congestionamentos e engarrafamentos.

Como se vê, alguns de grande nuvem as empresas têm as suas próprias estradas que têm menos buracos, menos tráfego, e melhorou os limites de velocidade. Se apenas os visitantes de seu website poderia ter acesso a essas estradas, eles podem ‘unidade’ para você mais rápido!

Bem, adivinhem? Eles podem!

Para CloudFlare, eles fornecem este acesso através do seu Argo produto, enquanto que se você está na AWS em tudo, então você pode usar sua Aceleradora Global. Isso permite que solicitações para o seu site para fazer uso das suas redes privadas e conseguir que um potencial aumento de velocidade. Ambos são muito baratos se você já são clientes.

Vantagem: Um monte de que esses tipos de benefícios são consideravelmente mais fácil de começar se você estiver usando um CDN. Se você não estiver usando um CDN, então você provavelmente deve ser. O CloudFlare é uma ótima escolha, como é CloudFront se você estiver usando o AWS. Fastly é o mais configurável deles, se você é mais um pro.

Takeaway: TLS 1.3 já está amplamente apoiada e oferece melhorias significativas de velocidade para novas conexões.

Takeaway: PCL / HTTP3 estão apenas começando a obter apoio, mas nos próximos meses, vai rolar mais amplamente. PCL inclui os benefícios de TLS 1.3, bem como mais. Um típico HTTP2 conexão de hoje em dia precisa de 3 viagens de ida e volta para abrir; PCL precisa de apenas uma!

Vantagem: Se você está no CloudFlare ou AWS, em seguida, há potencial para obter velocidade ups só de folhear um interruptor para ligar smart recursos de roteamento.

Deixe CSS fazer mais

Acima eu falei sobre como o HTML tem funcionalidades internas que você pode aproveitar para salvar depender de soluções que são ‘casa laminados’ e, assim, exigem mais de código (e de processamento nos navegadores lado) para implementar. Aqui eu vou falar sobre alguns exemplos onde a CSS pode fazer o mesmo por você.

A reutilização de imagens

Muitas vezes você encontra páginas que estão usando imagens semelhantes em toda a página em vários lugares. Por exemplo, variações sobre o logotipo em cores diferentes, ou setas que apontam em ambas as direções. Como única ativos (no entanto semelhantes, eles podem ser), cada um deles precisa ser baixado separadamente.

Retornando à minha busca por ingressos de cinema acima, onde eu estava a ver esta página, podemos ver um carrossel que tem as setas esquerda e direita:

Da mesma forma, para a lógica usada acima, enquanto estes ficheiros de imagem são pequenos, eles ainda requerem uma viagem para buscar a partir do servidor.

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

Você pode verificar esta codepen para um exemplo.

Outro exemplo é quando o mesmo aparece logo em estilos diferentes em diferentes partes da página; muitas vezes eles vão carregar múltiplas variações, que não é necessário. CSS pode re-cor logotipos para você em uma variedade de maneiras:

Há um codepen mostrando aqui esta técnica em ação. Se você deseja calcular o filtro de CSS valor necessário para atingir uma determinada cor, então confira este incrível cor calculadora.

Interações (por exemplo, os menus e separadores)

Muitas vezes, elementos de navegação, tais como menus e separadores são implementados em JavaScript, mas estas também podem ser feito em puro CSS. Confira este codepen para um exemplo:

Animações

CSS3 introduziu uma série de animação poderosos capacidade em CSS. Muitas vezes, estes não são apenas mais rápido do que o JavaScript versões, mas também pode ser suave demais, como eles podem executar em código nativo do sistema operacional, ao invés de ter que executar relativamente mais lento do Javascript.

Confira Cochilando Pássaro como um exemplo:

Você pode encontrar muito mais neste artigo. Animações CSS pode adicionar um monte de personagem para páginas em um número relativamente pequeno de desempenho de custo.

…e mais3>

Para mais exemplos de funcionalidade que você pode realizar usando o pure CSS soluções, dê uma olhada em:

  • http://youmightnotneedjs.com/
  • https://dev.to/ananyaneogi/css-can-do-that-18g7m

Takeaway: Utilizar CSS para otimizar a quantidade de arquivos que você tiver que carregar usando rotações ou filtros.

Takeaway: animações CSS pode adicionar caracteres para páginas, e muitas vezes necessitam de menos recursos de JavaScript.

Takeaway: CSS é perfeitamente capaz de implementação de muitos elementos da INTERFACE do usuário.

Wrap up

Espero que você encontrou estes exemplos úteis em si mesmas, mas o mais amplo ponto que eu quero fazer é a de que todos nós devemos tentar pensar um pouco mais fora da caixa com relação à velocidade do site. De particular importância é a redução do número de viagens de ida e volta necessários para o servidor; até mesmo pequenos levar algum tempo para buscar e pode ter um impacto significativo sobre o desempenho (principalmente celular).

Há muitas mais ideias do que já abordamos aqui, então, fazer saltar os comentários, se você tiver outras coisas que você tem de se deparar.

Deixe um comentário

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