[ad_1]
Penso muito em como podemos otimizar nossos sites para velocidade. O mundo está ficando ocupado e ninguém gosta de esperar que um site seja carregado.
Há muito poucas coisas que um usuário pode fazer para tornar um site mais rápido. Mas para desenvolvedores como nós, as possibilidades são infinitas. A otimização real começa com o código e termina no servidor, como hospedagem, CDN, cache e muito mais.
Aqui colecionei as melhores maneiras possíveis de otimizar um site que aprendi e implementei ao criar um tema para o meu blog no Ghost CMS.
Aqui está uma imagem dos resultados.
O tema é tão rápido porque não contém nenhuma funcionalidade extra além do que eu preciso em um blog muito minimalista. Pago US $ 5 / mês pela hospedagem na nuvem. Por enquanto eu ocultei o domínio porque ele está hospedado temporariamente (testando com algumas coisas novas).
Por que a velocidade é importante
As pessoas estão ocupadas e não perderão seu precioso tempo aguardando o carregamento do seu site.
A velocidade de carregamento do site tem sido um dos fatores mais importantes em SEO desde Abril de 2010. Os usuários adoram sites rápidos, onde podem obter informações úteis.
Uma coisa mais interessante sobre a velocidade de carregamento é que ela afeta a imagem da sua marca. Lembro-me facilmente de 3-4 sites super rápidos que carregam logo após o clique.
Suponha que você esteja visitando um site de produto e demore 10 segundos para carregar. Você desperdiçará mais 10 segundos na página de cobrança? Como isso afetaria sua confiança? Você confiará em um site que leva tanto tempo para carregar?
Pense como um usuário antes de agir como desenvolvedor.
Bons sites carregam mais rápido e os usuários acessam a página rapidamente.
Agora você sabe por que precisamos otimizar nossos sites para carregar mais rapidamente. Aqui está uma rápida visão geral das ferramentas que são populares no desempenho de benchmarking.
O seu próprio navegador
Sim, seu navegador possui uma ferramenta poderosa para informar a velocidade de carregamento do seu site. Geralmente, eu o uso para obter informações detalhadas sobre o número de arquivos (scripts e folhas de estilo) carregados em cada solicitação de página da web.
Abra as ferramentas do desenvolvedor do seu navegador (clique com o botão direito do mouse e inspecione) e vá para a guia redes. Recarregue a página da Web com o cache desativado e você verá as estatísticas detalhadas da velocidade de carregamento.
Mas esse método é limitado, porque testa a velocidade de carregamento apenas do seu local. E sabemos que a velocidade muda em diferentes pontos do mundo.
Ferramentas Pingdom
Aqui está a solução para o teste de velocidade global: escolha vários locais de onde testar a velocidade de carregamento do seu site.
Ele também fornece um relatório detalhado com recomendações que você pode usar para otimizar ainda mais.
Page Speed Insights (Baseado no farol)
O Page Speed Insights criou a crença de que uma pontuação de 100 é obrigatória para o SEO.
Isso não é completamente verdade, no entanto, porque alguns dos sites mais populares têm uma pontuação inferior a 70.
As informações de velocidade da página usam o Lighthouse como ferramenta de análise e não estão diretamente relacionadas ao SEO.
O Lighthouse é uma ferramenta de análise de desempenho de sites de código aberto. Ele audita o site em busca de desempenho, SEO, acessibilidade, aplicativos da web progressivos e muito mais.
O farol também está disponível como uma extensão do navegador ou Pacote NPM se você estiver desenvolvendo um site localmente.
Ele fornece alguns detalhes importantes de otimização que outras ferramentas não relatam. É muito útil reduzir o tamanho da página da web e otimizar a velocidade de carregamento do site.
GTmetrix
Acho isso muito mais preciso do que outros serviços. Ele fornece informações precisas sobre a velocidade de carregamento do seu site. Ele também fornece um relatório detalhado das melhores práticas que podem melhorar ainda mais o desempenho do seu site.
As melhores maneiras de otimizar a velocidade de carregamento de sites
Aí vem a parte em que começaremos a trabalhar na otimização. Todas essas etapas são muito úteis para melhorar o desempenho de qualquer site.
Mas lembre-se de que nem todas as etapas são necessárias para todos. Você pode pular as etapas que podem danificar seu site (isso acontece muito durante a otimização).
Evite pacotes e scripts adicionais sempre que possível
Quando iniciei o desenvolvimento web, preferi a instalação do NPM para todos os problemas. Mas eu era um noob :). Logo percebi o custo de instalar um novo pacote para cada problema que enfrentava.
O uso de pacotes npm é bom para o desenvolvimento rápido, mas cada novo pacote vem com muitas funcionalidades adicionais que você talvez nunca precise.
O verdadeiro problema está na atualização do projeto. Os pacotes são obsoletos com o tempo, portanto, gerenciar muitos pacotes é como um pesadelo.
É uma boa idéia tentar resolver problemas básicos sozinho, em vez de encontrar um pacote NPM para fazer isso por você.
Aqui está um útil Extensão VS Code que permite saber o tamanho do pacote importado.
O mesmo se aplica ao jQuery. Houve um tempo em que era uma biblioteca JavaScript obrigatória para cada aplicativo. Mas agora o Vanilla JS permanece forte.
Se você evitar o uso do jQuery, economizará cerca de 30 KB de carregamento adicional na sua página da web.
Este site é útil para encontrar alternativas para o jQuery: Incrível coleção de alternativas jQuery.
Economizei cerca de 100ms removendo o jQuery do meu tema do Ghost CMS. Foi muito trabalhoso substituir o jQuery pelo Vanilla Js, mas o resultado foi incrível.
E é bom dizer que todo script conta em desempenho.
Remover CSS não utilizado
As estruturas CSS são muito úteis no rápido desenvolvimento de aplicativos da web. No entanto, eles têm muitos componentes e estilos que nunca usamos em nossos projetos.
PurgeCSS é muito útil nesse caso, pois remove o CSS não utilizado da folha de estilo.
Não é tão fácil de usar quanto parece, mas vale a pena investir em tempo.
Apenas um alerta: às vezes, o PurgeCSS também remove o CSS, que é útil para seus projetos. Portanto, recomendo que você verifique e teste manualmente o site corretamente após usá-lo.
Como exemplo, o tema sombrio do meu site foi quebrado porque o PurgeCSS removeu as variáveis CSS porque elas não eram usadas naquele momento.
Minimize CSS e JavaScript
Você deve compactar os arquivos Javascript e CSS antes de enviá-los para o servidor de produção.
Minimizar CSS e Javascript significa remover código desnecessário, como comentários, espaço e guias do arquivo, porque na produção eles são apenas para os navegadores entenderem.
Isso reduz aproximadamente 50% do tamanho do arquivo e permite que suas páginas da Web sejam carregadas muito mais rapidamente.
Aqui estão os minificadores online de CSS e Javascript que você pode usar.
Esta é outra observação usando CSS Tailwind com CSS de minificação e eliminação:
- Tamanho original da folha de estilo: ~ 150KB
- Com o Minify + Purge CSS: 4.9KB (e tudo estava funcionando bem)
Não foi uma solução única, no entanto. Inicialmente, ele quebrou muitas coisas (como o modo noturno e muitas outras funcionalidades acionadas pelo Javascript) porque o CSS de remoção o removeu, pois não eram usados naquele momento.
Eu tive que revisar e excluir manualmente esses estilos do plug-in CSS de limpeza.
Compactar e redimensionar imagens
As imagens são fatores críticos que afetam a velocidade de carregamento de qualquer site. Muitos sites usam imagens de alta resolução, mesmo quando não precisam.
O exemplo perfeito é que você não precisa de uma imagem de 2000 x 2000 para uma imagem de autor de 250 x 250.
Sempre considere cortar e compactar suas imagens antes de enviá-las para a Web.
Você pode usar ferramentas de compactação on-line como Tiny PNG para compactar imagens antes de usá-las em seu site. Você pode reduzir até 60-70% do tamanho da imagem usando a compactação de imagem.
Preguiçoso carregando imagens
Como eu disse, as imagens são fatores críticos na velocidade de carregamento do site. Isso significa que você deve tomar as medidas certas para otimizar imagens ao carregá-las.
Primeiro, você pode adiar imagens fora da tela. Isso significa que as imagens após uma altura de janela de visualização serão carregadas assim que o usuário rolar para elas.
O carregamento lento também é recomendado e é muito eficiente para otimizar seu site para carregamento rápido.
É útil porque, às vezes, o usuário não precisa rolar até o final da página e ler todo o conteúdo do seu site. O carregamento preguiçoso apenas carrega imagens quando o usuário rola para elas.
Você deve implementar o carregamento lento com cuidado e garantir alternativas de JavaScript.
Você pode usar o exemplo dos artigos do Medium.com para carregamento lento de imagens. Eles colocam uma imagem de resolução muito baixa como espaço reservado e carregam a imagem original assim que o usuário rolar para ela.
Veja a caneta
Exemplo de carregamento lento apresentada por Jeremy Wagner (@malchata)
em CodePen.
Adiar carregamento de JavaScript
Você deve sempre colocar todos os scripts pesados no final da página antes da etiqueta de fechamento do corpo.
Isso é importante porque os usuários podem pelo menos ler o conteúdo em conexões mais lentas, enquanto scripts pesados continuam sendo carregados em segundo plano.
Esse é um dos problemas mais comuns destacados pelos insights de velocidade do Google. Você pode melhorar facilmente sua pontuação implementando esta etapa corretamente.
O atributo defer é útil nesse cenário, pois permite a execução de scripts somente após o carregamento do documento.
Selecione um bom provedor de hospedagem
Você nunca pode esperar uma boa velocidade de carregamento de sites na hospedagem compartilhada de qualquer provedor de hospedagem de baixa qualidade.
Escolha o VPS, se puder, ou hospede na nuvem (eles custam até US $ 5 por mês na Linode, Digital Ocean e Vultr, por exemplo).
Os provedores de hospedagem de baixa qualidade não afetarão muito a velocidade do seu site se você não tiver muitos visitantes. No entanto, à medida que o número de visitantes aumenta, eles não conseguem lidar com esse tráfego.
É por isso que é bom permanecer do lado seguro e manter seu site funcionando com picos de tráfego.
Use uma CDN
Se o seu site tiver visitantes de todo o mundo, as CDNs ajudarão a entregar seus ativos rapidamente.
Os usuários obtêm os ativos do nó CDN mais próximo, garantindo o menor deslocamento para os dados. Isso reduz a velocidade geral de carregamento do site e fornece uma experiência consistente para todos os seus usuários.
Armazenamento em cache
O cache é a melhor solução possível para a velocidade de carregamento mais rápida do site. Faça o cache o máximo possível, mas com cuidado.
O armazenamento em cache no lado do servidor permite a entrega mais rápida de dados e no lado do cliente permite a velocidade de carregamento extremamente rápida.
Existem vários recursos, como scripts, folhas de estilo e alguns outros arquivos comuns que são usados com cada carregamento de página. Podemos armazená-los localmente em cache para que da próxima vez que eles são buscados no cache, em vez do servidor.
O armazenamento em cache do servidor evita operações excessivas de banco de dados a cada vez e economiza tempo e dinheiro.
Lembre-se de que o cache do servidor não é adequado se você tiver muitos dados dinâmicos.
Porém, você deve ter cuidado com o cache: se não for implementado corretamente, o usuário poderá ver o mesmo conteúdo antigo sempre que visitar o site.
Compactação Gzip
A compactação Gzip é uma das recomendações mais comuns do teste de velocidade Pingdom.
Gzip é um método de compactação de arquivos para uma entrega mais rápida aos seus usuários. É ativado por padrão por muitos provedores de hospedagem.
Se você estiver usando hospedagem na nuvem, estará por sua conta. Mas ativar a compactação Gzip não apenas diminuirá a velocidade de carregamento do seu site, mas também reduzirá o uso da largura de banda dos servidores.
Aqui está o código para adicionar no arquivo de configuração para ativar a compactação Gzip no servidor Nginx.
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types application/javascript application/rss+xml application/vnd.ms-fontobject application/x-font application/x-font-opentype application/x-font-otf application/x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml application/xml font/opentype font/otf font/ttf image/svg+xml image/x-icon text/css text/javascript text/plain text/xml;Aqui está o código para adicionar .htaccess para habilitar o Gzip no servidor Apache.
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AMP para celular
Eu li um estudo de caso esse AMP pode afetar suas vendas. Mas, como eu disse anteriormente, você não precisa implementar todas as etapas deste post para tornar seu site mais rápido. Basta escolher sabiamente.
Se você estiver executando uma plataforma de publicação como um blog simples, deve procurar o AMP, pois isso apenas o beneficiará.
O AMP também oferece suporte a anúncios, portanto isso terá o menor efeito em seus ganhos, mas os benefícios são ótimos. O AMP tem a velocidade de carregamento mais rápida em telefones celulares.
Aqui está um código AMP muito básico. Você pode olhar aqui para obter um guia completo e práticas recomendadas para criar a versão AMP do seu site.