Você tem uma necessidade de velocidade? Não, não estou falando sobre fazer um teste para um papel no próximo filme Velozes e Furiosos – estou falando sobre estar sempre procurando maneiras de acelerar seu site.
Se você tem um site, não importa do que se trata, a rapidez com que ele carrega vai desempenhar um grande papel no sucesso dele. Um site de carregamento lento levará a visitantes insatisfeitos, reduzirá suas taxas de conversão e o colocará na casa do cachorro com o Google.
Talvez esses fatos tenham levado você à nossa análise do NitroPack – o NitroPack é uma ferramenta completa de desempenho de sites que, nas palavras de sua página de destino, é “o único serviço que você precisa para um site rápido”.
Se você deseja uma maneira simples de acelerar seu site, não tenho certeza se encontrará uma maneira mais conveniente de fazer uma grande melhoria nos tempos de carregamento.
Claro, como é frequentemente o caso, você vai pagar por essa conveniência. Mas dependendo da sua situação, o dinheiro pode valer a pena.
Nesta revisão, vou testar o NitroPack…
- Executando alguns testes de desempenho antes/depois para ver o quanto o NitroPack pode acelerar meu site.
- Explorando os vários recursos que o NitroPack oferece.
- Mostrando como configurar e configurar o NitroPack com um site WordPress ( embora o NitroPack também funcione com sites não WordPress ).
No final, você deve saber se é ou não a ferramenta certa para suas necessidades.
Dados de teste de desempenho do NitroPack
Obviamente, o maior fator para determinar se deve ou não usar o NitroPack é se ele pode fazer uma diferença notável no desempenho do seu site. Por esse motivo, acho melhor começar nossa análise do NitroPack com alguns testes reais de desempenho, antes mesmo de falar sobre qualquer um de seus recursos.
Basicamente, os recursos soam bem na cópia de marketing, mas os tempos de carregamento da página são o que importa.
Para testar o desempenho do NitroPack, peguei meu confiável site de demonstração do WordPress e o usei para executar alguns testes antes/depois de diferentes locais.
Meu site de teste está hospedado no droplet mais barato da DigitalOcean e usa o tema Astra ( nossa análise ). Para adicionar um pouco de “peso” e tornar o teste mais realista, também importei a versão completa do Elementor do modelo Organic Store, que inclui o plug-in WooCommerce (junto com o conteúdo de demonstração criado com o Elementor , um popular plug-in construtor de páginas do WordPress ).
Para coletar os dados de teste, usei WebPageTest , que é a melhor ferramenta de teste de desempenho na minha opinião. Além de fornecer diferentes métricas de “tempo de carregamento”, também inclui dados para a nova iniciativa Core Web Vitals do Google , que se tornará um fator de classificação em 2021.
As métricas Core Web Vitals medem os tempos de carregamento conforme se aplicam à experiência do usuário, não apenas uma única métrica de “tempo de carregamento”. Como muitas das otimizações do NitroPack se concentram em melhorar essas métricas (por exemplo, inlinendo CSS crítico), acho que elas são outra peça importante para prestar atenção.
Para minha configuração de teste, usei o seguinte:
- Local de teste . Chicago, Illinois E Mumbai, Índia ( para ver o desempenho da CDN )
- Navegador : Chrome.
- Conexão : FIOS (20/5 Mbps). Isso obterá um resultado mais lento do que uma ferramenta como o Pingdom, mas é mais preciso em como os visitantes humanos reais irão experimentar seu site porque está próximo da velocidade média da Internet para os EUA como um todo.
- Número de testes a serem executados: “9”. O WebPageTest executará nove testes separados e obterá o valor mediano, o que elimina a variabilidade de teste único.
Também executarei meu site de teste por meio do PageSpeed Insights porque sei que muitas pessoas se preocupam com as pontuações do PageSpeed Insights. Não fique obcecado com as pontuações por si só, no entanto. O que realmente importa é como seus visitantes humanos experimentam seu site.
Veja como foi o desempenho – vou começar com os dados brutos e resumir tudo no final desta seção:
Chicago, EUA:
Sem otimização de desempenho (controle)
Com NitroPack
Mumbai, índia
Sem otimização de desempenho (controle)
Com NitroPack
Informações do PageSpeed
Antes do NitroPack:
Móvel:
Área de Trabalho:
Após NitroPack:
Móvel:
Área de Trabalho:
Conclusões
Ok, eu sei que cuspi muitas informações técnicas e tabelas para você nas seções anteriores. Se você não é um viciado em desempenho de sites, isso pode parecer um pouco esmagador. Então aqui estão as conclusões amigáveis para humanos de todos esses dados de teste:
O NitroPack fez uma grande melhoria nos tempos de carregamento da página do meu site em todas as áreas :
- Os tempos gerais de carregamento da página diminuíram, que é o que mais importa para a maioria das pessoas.
- A maior pintura de conteúdo (LCP) do Core Web Vitals foi aprimorada, o que significa que seus visitantes poderão ver o conteúdo mais importante do seu site mais rapidamente (o que deve levar a uma experiência melhor).
- O tempo até o primeiro byte (TTFB) diminuiu, o que significa que o servidor respondeu mais rápido.
- As pontuações do PageSpeed Insights melhoraram bastante.
Para ajudá-lo a visualizar a comparação, veja como as coisas se comparam para o teste de Chicago, Illinois:
| Tempo de carregamento (documento concluído) | Maior pintura de conteúdo | TTFB | |
| Sem | 2.370 segundos | 2.319 s | 0,352 s |
| Com NitroPack | 0,905 s | 0,958 s | 0,175 s |
Aqui está o teste de Mumbai:
| Tempo de carregamento (documento concluído) | Maior pintura de conteúdo | TTFB | |
| Sem | 4.123 segundos | 2,832 segundos | 1.149 s |
| Com NitroPack | 1,357 s | 1,479 s | 0,836 s |
Observe a grande melhoria aqui. O site de teste é quase 3x mais rápido com o NitroPack.
Por fim, aqui estão as pontuações do PageSpeed Insights:
| Área de Trabalho | Móvel | |
| Sem | 58 | 35 |
| Com NitroPack | 98 | 54 |
Em suma, o NitroPack passou nos testes de velocidade com louvor.
Nota de Adam: Lembre-se, estes são resultados de testes usando o Elementor e a configuração “forte” no NitroPack. Se você usar o modo “ridículo”, terá tempos de carregamento mais rápidos, mas poderá encontrar problemas. Em um dos meus sites menores, consegui obter tempos de carregamento de páginas móveis nos anos 90 usando um tema leve do GeneratePress e nenhum construtor de páginas.
Como o NitroPack acelera seu site?
Ok, agora você sabe que o NitroPack pode fazer uma grande melhoria nos tempos de carregamento da página do seu site. Então… como ele faz isso?
Novamente, a coisa mais original do NitroPack é que ele oferece uma abordagem completa para acelerar seu site. Em vez de hackear uma coleção de vários plugins de desempenho do WordPress , você pode simplesmente configurar o NitroPack e encerrar o dia.
Aqui estão algumas das maiores técnicas que ele implementa para acelerar seu site.
Cache
NitroPack tem uma variedade de sistemas de cache para melhorar o desempenho e diminuir a carga em seu servidor. Os dois maiores são o cache de página e o cache do navegador:
- Cache de página – salva a versão HTML estática de uma página para que seu servidor não precise executar PHP para cada visita.
- Cache do navegador – salva certos recursos estáticos no computador local de um visitante para que eles não precisem baixar esses recursos em cada carregamento de página.
O NitroPack também inclui recursos inteligentes, como invalidação de cache e pré-carregamento, o que ajuda a garantir que o maior número possível de visitantes esteja recebendo versões em cache do seu conteúdo.
Se necessário, você também pode excluir determinados conteúdos/recursos do cache. Por exemplo, se você estiver executando uma loja de comércio eletrônico, precisará excluir suas páginas de carrinho e checkout.
Rede de entrega de conteúdo (CDN)
Uma CDN acelera os tempos de carregamento global do seu site armazenando em cache recursos estáticos em uma rede de servidores em todo o mundo (chamados de pontos de presença). Então, quando alguém visita seu site, ele pode baixar esses recursos do ponto de presença mais próximo, em vez de precisar ir até o servidor físico do seu site.
Esta CDN é uma grande parte do que explica como meu site de teste foi 3X mais rápido com o NitroPack no teste de Mumbai, Índia.
O CDN do NitroPack é desenvolvido pelo Amazon CloudFront e integrado automaticamente ao serviço.
Otimização de imagem
As imagens compreendem cerca de metade do tamanho do arquivo de uma página da Web média, portanto, encontrar maneiras de reduzi-las é uma ótima maneira de acelerar as coisas. O NitroPack otimiza automaticamente suas imagens, inclusive convertendo-as para o formato WebP rápido e carregando-as lentamente.
Otimização de código
NitroPack inclui muitos recursos diferentes para otimizar o código do seu site. Isso inclui não apenas o tamanho do código do seu site por meio da minificação, mas também como o código é carregado.
Em primeiro lugar, o NitroPack pode gerar automaticamente CSS crítico para cada layout exclusivo e, em seguida, adiar o carregamento de CSS não crítico, o que acelerará a rapidez com que o conteúdo se torna visível (e também aumentará suas pontuações no PageSpeed Insights).
Ele também pode adiar JavaScript de bloqueio de renderização, que alcança os mesmos efeitos positivos que adiar CSS (e é algo que o PageSpeed Insights sempre grita com você).
Finalmente, existem algumas outras melhorias diversas, como pré-busca de DNS e otimização de renderização de fonte.
Preços do NitroPack
Agora, para a próxima pergunta importante – quanto todos esses recursos vão custar para você?
O NitroPack tem um plano gratuito limitado que funciona para sites pequenos, embora inclua um emblema do NitroPack no rodapé do seu site.
Depois disso, os planos pagos começam em $ 17,50 por mês com cobrança anual ou $ 21 por mês com cobrança mensal.
Esses preços são por site, mas você também pode entrar em contato com a equipe de vendas para planos multisite ou de agência .
Como configurar o NitroPack no WordPress
Como mencionei algumas vezes, uma das vantagens do NitroPack é a facilidade com que é iniciado. Na verdade, para todos os recursos que ele implementa, é provavelmente a ferramenta de otimização mais simples que já usei.
Vou focar no WordPress para este tutorial. No entanto, lembre-se de que o NitroPack não se limita a sites WordPress. Se você estiver usando o WordPress, no entanto, o plug-in dedicado do WordPress o colocará em funcionamento em apenas alguns minutos.
Para começar, você precisará:
- Registre-se para uma conta NitroPack . Há uma avaliação gratuita de 14 dias para os planos premium, bem como o plano gratuito que mencionei anteriormente. Certifique-se de inserir o URL do seu site WordPress ao se inscrever.
- Instale o plugin NitroPack do WordPress.org.
Em seguida, vá para Configurações → NitroPack no painel do WordPress e clique no botão Conectar ao NitroPack :
Se você já estiver conectado à sua conta do NitroPack, o NitroPack detectará isso. Caso contrário, você verá um prompt para fazer login.
Em seguida, você precisa escolher qual site deseja otimizar, que deve ter inserido ao criar sua conta NitroPack:
E é isso! Você está conectado – eu disse que era fácil.
Embora o NitroPack forneça um painel básico dentro do seu site WordPress, juntamente com algumas configurações, você gerenciará a maioria das coisas no painel da nuvem do NitroPack, não no seu site WordPress. Vamos lá a seguir.
Como configurar o NitroPack
O legal do NitroPack é que você nem precisa “configurar”. Ele praticamente funciona fora da caixa. Na verdade, quando executei os testes acima, estava usando a configuração padrão – literalmente não fiz uma única alteração.
Se você quiser se aprofundar, vá para a guia Configurações no painel do NitroPack. Em seguida, você pode escolher o nível de otimização desejado no controle deslizante Configuração . Com base no nível de otimização que você escolher, o NitroPack configurará automaticamente alguns/todos os recursos que mencionei acima.
Por exemplo, se você escolher Forte (o padrão), ele incluirá recursos como carregamento lento e otimização de fonte. Para referência, os testes que executei acima também estavam usando o nível Strong .
Se você é um usuário casual, está feito! Apenas pare – você realmente não precisa ir além de escolher o nível de otimização que deseja.
Se você rolar para baixo, obterá algumas opções adicionais, a maioria das quais lida com a inclusão/exclusão de conteúdo específico da otimização.
Por exemplo, você pode excluir determinadas imagens ou recursos, cookies, URLs etc. Isso pode ser útil se você for, digamos, um fotógrafo e quiser impedir que suas imagens de portfólio de alta resolução sejam compactadas ou se você tiver uma assinatura site e você não quer que membros logados recebam conteúdo em cache:
A guia Integrações também ajuda na integração com algumas outras ferramentas:
- Proxy reverso – muitos hosts WordPress gerenciados usam Varnish ou Nginx como um proxy reverso para armazenamento em cache no nível do servidor, portanto, esse recurso permite que você continue se beneficiando dessas otimizações.
- Cloudflare
- Sucuri
O NitroPack oferece algumas outras áreas do painel para monitorar o uso e ver quais páginas foram otimizadas, mas isso é praticamente tudo para configuração.
Fácil, certo?
Experimente o NitroPack Grátis
Considerações finais: Você deve usar o NitroPack?
Neste ponto da nossa análise do NitroPack, sinto-me bastante confiante em dizer que o NitroPack pode realmente acelerar o seu site – os números falam por si.
Além disso, é super fácil de usar – o processo de configuração do WordPress é muito simples e é totalmente prático quando você supera essa dificuldade inicial.
O único fator de confusão é o preço.
Veja, a questão não é apenas “O NitroPack acelera seu site?”. Essa resposta é um retumbante sim.
Em vez disso, a pergunta é “O NitroPack acelera seu site o suficiente para justificar o pagamento de pelo menos $ X todo mês?”
Aqui, a resposta é sim… às vezes e não… às vezes.
Quando o NitroPack pode não ser adequado
Se você estiver usando o WordPress e estiver com orçamento limitado, poderá encontrar outras ferramentas que podem fazer uma grande melhoria nos tempos de carregamento do seu site por muito menos dinheiro. A melhor opção aqui é provavelmente o WP Rocket que, em nossa análise prática do WP Rocket , diminuiu significativamente os tempos de carregamento do meu site de teste.
Agora, este site de teste estava em um ambiente de hospedagem diferente, portanto, não é justo comparar esse número com o NitroPack (meu site de teste do NitroPack está começando com uma hospedagem de linha de base muito mais rápida). No entanto, o ponto é que, por uma taxa de US$ 49/ano, o WP Rocket pode melhorar drasticamente os tempos de carregamento do seu site.
Para muitos sites, isso é “bom o suficiente” e economizará muito dinheiro. No entanto, não inclui uma CDN ou otimização de imagem.
Lembre-se: o NitroPack oferece um plano gratuito para até 5.000 visitantes mensais se você não se importar em exibir um crachá no rodapé. A conclusão é que esse plano ainda inclui um CDN e muitas melhorias de desempenho.
Quando você deve usar NitroPack
Se você está disposto a pagar por um desempenho de alto nível, o NitroPack tem muito a oferecer:
Em primeiro lugar, as melhorias de desempenho em meus testes foram… bem, bastante impressionantes. Na verdade, funcionou muito melhor do que eu esperava. Meu site de teste já é bastante rápido com seu droplet DigitalOcean, mas o NitroPack ainda reduziu o tempo de carregamento da página do meu site em mais de 50% para os testes de Chicago e Mumbai.
Em segundo lugar, além de melhorar o número do tempo de carregamento da página de primeira linha, o NitroPack também fez grandes melhorias nas métricas de desempenho de “experiência do usuário” no Core Web Vitals do Google. Por exemplo, no teste de Chicago, caiu meu tempo de maior conteúdo de pintura (LCP) de 2,319 s para 0,958 s.
Como o Google começará a usar o Core Web Vitals como um fator de classificação de SEO em 2021, essa é outra maneira de o NitroPack ganhar seu sustento.
Lembre-se, há muitos dados que vinculam os tempos de carregamento a métricas importantes, como taxa de conversão e taxa de rejeição. Portanto, se você tem um site “sério”, como um site de associação ou uma loja de comércio eletrônico, o NitroPack pode se pagar ajudando você a vender mais produtos e criar clientes mais felizes.
Veredicto final? Se você está disposto a investir no desempenho do seu site, você definitivamente deve considerar o NitroPack . Se você estiver com um orçamento apertado, eles têm um plano gratuito limitado que é suficiente para sites pequenos.
