Como acelerar o tempo de carregamento da página com otimizações simples de sites

A velocidade da página pode fazer ou quebrar você na internet.

Um carregamento de página mais rápido geralmente significa melhores resultados gerais para a velocidade do seu site. Todos os aspectos do sucesso de um site estão ligados à velocidade da página, do SEO às conversões, à experiência do usuário e muito mais.

Desde o provedor de hospedagem que você escolhe até o aplicativo com o qual decide trabalhar, há muitas áreas que podem ser otimizadas. Com tantas áreas a serem consideradas, melhorar a velocidade da página pode ser um processo complexo. Aprender a otimizar o tempo de carregamento da página da Web de maneira fácil de implementar é crucial para o sucesso.

Então, o que você pode fazer para ter certeza de que está otimizado? Vejamos algumas maneiras de tornar sua página da Web mais rápida, como acelerar o tempo de carregamento da página e outras práticas recomendadas para o tempo de carregamento da página e aumentar a velocidade.

Por que o tempo de carregamento da página é importante

Antes de entrar em como acelerar o tempo de carregamento da página, vamos primeiro entender por que isso é tão importante.

O Google anunciou pela primeira vez que a velocidade do site afetaria a classificação em 2010 e continuou a demonstrar sua importância. Em 2018, o Google introduziu a velocidade da página como um fator de classificação para a velocidade do site móvel.

Os especialistas em SEO rapidamente começaram a tentar otimizar os elementos da página e reduzir o mecanismo de pesquisa. Os que não ficaram para trás. E agora, com os principais web vitals anunciados recentemente, a velocidade é mais crítica do que nunca.

Quer saber mais sobre como melhorar a velocidade de carregamento da página? Aqui estão algumas áreas-chave a serem consideradas.

Importância da velocidade da página

O tempo de carregamento da página sempre foi importante por um motivo bastante óbvio: conversões. Simplificando, sites rápidos aumentam as conversões – e sites lentos as reduzem.

De fato, uma melhoria de 0,1 segundo na velocidade do site para dispositivos móveis resulta em um aumento de 8,4% nas taxas de conversão para empresas de varejo, descobriu o Google em um estudo de 2020.

A velocidade do site também afeta suas taxas de rejeição. Quando os usuários encontram um site lento, eles saem. Um atraso de dois segundos no tempo de carregamento da página pode aumentar a taxa de rejeição de um site em 103%, segundo um relatório da Akamal Technologies.

Testando o tempo de carregamento da sua página

Para obter um instantâneo do seu site e criar benchmarks antes e depois para o processo de otimização, a primeira coisa que você deve fazer é testar a velocidade da sua página atual. Algumas ferramentas com as quais você pode começar são o Page Speed ​​Insights do Google e o Webpagetest.org.

Certifique-se de executar vários testes e calcular a média de seus resultados. Teste de página da Web permite que você faça isso automaticamente no menu de configurações. É sempre aconselhável escolher um local de teste próximo ao local onde seu site está hospedado para garantir que você obtenha os resultados mais precisos.

É assim que geralmente configuramos o webpagetest.org para verificações básicas de velocidade.

Abaixo, você pode ver os resultados de um teste de velocidade de página no site de demonstração do Magento em média. Escolhemos três das estatísticas mais importantes e significativas que queremos usar para otimizar o site.

A primeira estatística é o tempo de carregamento. Isso nos mostra o tempo completo que leva para carregar nossa página. Lembre-se, se uma página demorar mais de três segundos para carregar, você pode estar perdendo metade do seu tráfego potencial. Esse número é o mais importante para nós mudarmos.

A segunda estatística é Time To First Byte (TTFB). Embora possa ajudar a fornecer orientação, o TTFB pode ser manipulado com relativa facilidade e sua importância pode variar. Se você usa o Google Lighthouse, também pode acompanhar o First Contentful Paint e o First Meaningful Paint, que informam a rapidez com que sua página “pinta” a tela com elementos do seu conteúdo.

Já carregou uma receita e metade dela não alcançou a velocidade com que você está rolando porque está tentando passar por todos os anúncios e narrativas? Isso porque o tempo FCP/FMP é muito lento.

A terceira estatística é o tamanho das informações que estão sendo baixadas para a página. Se esse número for muito grande, pode ser útil examinar mais de perto quanto tempo os diferentes elementos da página levam.

Cascata de velocidade da página

Se você quiser aprender como acelerar o tempo de carregamento da página, isole quais elementos estão diminuindo a velocidade da página e dê uma olhada na cascata. Um exemplo de como é a cachoeira pode ser visto abaixo.

Depois de olhar para a cachoeira, você deve ter uma ideia melhor do que pode ser melhorado. Acima, podemos ver que alguns dos arquivos .js de front-end provavelmente podem ser ligeiramente acelerados.

Abaixo da cascata (fora da página), também existem alguns arquivos de imagem que demoram mais para carregar e devem ser otimizados. Entender quais elementos causam atraso nas páginas é fundamental quando seu foco é o tempo de carregamento da página mais rápido.

Como acelerar o tempo de carregamento da página por meio do conteúdo da Web

Compactar e otimizar imagens

Ao analisar como acelerar o tempo de carregamento da página, a compactação de imagem é um ótimo ponto de partida. Muitas vezes os web designers fazem imagens que adotam resoluções inutilmente altas. Imagens de alta resolução ocupam mais espaço de armazenamento em um servidor e podem aumentar significativamente os tempos de carregamento.

É altamente recomendável dimensionar as imagens adequadamente. Se uma imagem só vai ocupar um espaço de 100 x 100 pixels em seu site, não há necessidade de torná-la 1000 x 1000. Recomendamos um plugin como Smush ou EWWW Image Optimizer se você estiver executando um site WordPress.

Como converter para imagens WebP no WordPress >>

Extensões de tipo de imagem

Ao salvar imagens, é importante saber qual extensão usar. Deve ser .jpg ou .png? Alguém lhe enviou um logotipo em .svg? Há muitas informações conflitantes por aí sobre o que é melhor.

Muitos dizem que .png (Portable Network Graphics) é a melhor opção porque foi projetado para compactar imagens o máximo possível sem perder qualidade. Isso é parcialmente verdade. Dito isto, há exceções à regra. Por exemplo, os arquivos .JPEG funcionam muito melhor ao usar fotografias.

Nossa sugestão é verificar como salvar seu arquivo de algumas maneiras diferentes afeta o tamanho e a qualidade quando exibido em uma visualização de sua página. Se você notar uma diferença clara, opte pela melhor extensão.

Compactar o conteúdo do site

As imagens não são os únicos elementos da página que precisam de um aperto. Você também deve compactar elementos CSS, HTML e JavaScript em seu site. O GZip é uma ferramenta de compactação altamente recomendada que o Google sugere testar antes de implementar em um ambiente de produção. Recomendamos o uso de um ambiente Dev Site que imite seu próprio ambiente de produção se você estiver planejando fazer isso.

O problema de compactar o conteúdo do seu site é que há algumas evidências de que ele pode aumentar marginalmente as durações do tempo até o primeiro byte. No entanto, também aumenta drasticamente o tempo de carregamento geral da velocidade da página, que alguns especialistas em SEO sugerem que o Google pode realmente priorizar. Recomendamos testar a compactação em páginas individuais em vez de fazer uma mudança em todo o site.

Simplifique o Web Design

Se você deseja um tempo de carregamento de página mais rápido, menos é quase sempre mais. Em vez de adicionar funcionalidades adicionais às páginas principais, que tal optar por algo mais simples e rápido? Quanto menos solicitações HTTP uma página tiver, mais rápido ela carregará normalmente.

Além de melhorar a velocidade da página, o design simples da web também demonstrou melhorar a experiência do usuário em muitos casos. Em um estudo de UX realizado pelo Google, descobriu-se que os usuários tendem a julgar a estética de um site em 1/50 a 1/20 de segundo, e que sites visualmente complexos quase sempre são julgados como menos bonitos do que seus equivalentes mais simples.

Quanto mais bonito um site for percebido, melhor será o UX e SEO, e mais conversões aumentarão. Um design de site mais simples é um dos métodos mais rápidos para melhorar a velocidade da página em um curto período de tempo. No entanto, recomendamos executar testes A/B para ver como as alterações realmente funcionam, em vez de fazer uma alteração de 100% imediatamente.

Como acelerar o tempo de carregamento da página através do seu host

Seu host também desempenha um papel importante no tempo de carregamento da página. Aqui estão algumas maneiras de tornar o tempo de carregamento da página mais rápido com seu host.

Ativar cache

O cache é onde os visitantes repetidos podem carregar seu site muito mais rápido, graças aos elementos da página armazenados em seu disco rígido em um cache ou armazenamento temporário. Para sites WordPress e WooCommerce, usamos o Redis Object Cache para gerenciar as funções de cache. Isso virá pré-instalado e pré-configurado quando você comprar um plano de hospedagem otimizado para WordPress através do Nexcess.

Para otimizar ainda mais a velocidade da página, o Nexcess Cloud permite o uso do Cloud Accelerator. Isso pode ser facilmente ativado e desativado com o clique de um botão na seção de desempenho do Portal do Cliente.

Não tem certeza se deve ativar o Varnish ou o NGINX? Saiba mais sobre a diferença entre o Varnish e o NGINX em nosso Guia definitivo para otimizar o Magento 2.

Cache e CDN

O armazenamento em cache com uma CDN (Content Delivery Network) é um processo mais complicado e pode exigir configuração avançada. No entanto, uma configuração de cache adequada com uma CDN pode ajudá-lo a alcançar esse público global como se estivesse com um host local.

Por que você precisa de um CDN do WordPress >>

Para WordPress e WooCommerce, consulte nosso guia sobre como configurar o Nexcess CDN com WordPress e CDN Enabler.

Outras áreas a considerar

Qual página você está otimizando?

A estrutura do seu site faz muita diferença quando se trata de otimização. É importante pensar em qual página você está otimizando e como ela é relevante para a estrutura total do site. Se você atualizar uma página, as páginas com as quais ela interage também devem ser consideradas.

Por exemplo, não é útil para nós simplesmente otimizar Nexcess.net, também precisamos otimizar Nexcess.net/magento/hosting e Nexcess.net/cloud/hosting.

Antes de começar esse processo, monte um plano para quais páginas-chave estão atraindo mais conversões e atraindo mais ROI. Comece aqui para obter o maior impacto.

Velocidade da página e SEO

Embora a velocidade da página e o SEO estejam intrinsecamente ligados, não se engane que não é o fator definitivo na determinação do page rank. O próprio Google disse que, se o conteúdo for mais relevante e as pessoas estiverem dispostas a esperar que ele carregue, eles não penalizarão esse site.

Em última análise, a velocidade da página é uma parte importante da otimização, mas o conteúdo, a qualidade e a experiência do usuário devem sempre ser o foco principal.

Acelere o tempo de carregamento com o host certo

Percorremos um longo caminho desde a espera de imagens para carregar linha por linha. A velocidade da página não é apenas algo que os consumidores reclamam – ela também pode fazer ou quebrar conversões, classificações e muito mais. Fazer todo o possível para aumentar a velocidade da página é SEMPRE uma boa ideia.

Se você está investindo tempo e esforço para melhorar o tempo de carregamento da página, está protegendo seu negócio digital. Combine seu capital de suor com investimentos inteligentes. Dê o próximo passo escolhendo um host que tenha escalabilidade, segurança, velocidade e suporte comprovados — como o Nexcess.

A Nexcess fornece hospedagem WordPress totalmente gerenciada que inclui:

• Atualizações automáticas.
• SSL para segurança.
• CDN integrado.
• Compressão de imagem.
• Cache.
• E mais!

Veja você mesmo com uma avaliação gratuita de duas semanas.

Conteúdo Relacionado

• Como a velocidade da página afeta o SEO
• 5 técnicas avançadas para acelerar seu site WordPress
• Como aumentar a velocidade do site WooCommerce e evitar consultas lentas
• Principais hacks de tamanho de imagem WooCommerce para manter seu site rápido
• O que é uma Rede de Entrega de Conteúdo (CDN)?
• Os 7 temas WordPress mais rápidos
• Por que você precisa de um CDN? | Next Tech Talk

Este blog foi publicado originalmente em julho de 2018. Desde então, ele foi atualizado para maior precisão e abrangência.