Há sempre, em qualquer modalidade de trabalho, algumas ferramentas que são importantes para se chegar a um bom resultado no serviço. Outras, porém, são essenciais para se alcançar o mesmo fim; e sem elas, as primeiras pouco fazem. No mercado digital, para aquelas empresas que trabalham com um site, podemos dizer que o Pagespeed Insights do Google se encaixa na categoria das ferramentas essenciais.
Sendo, então, essa ferramenta determinante para se conseguir resultados positivos, bater as metas estabelecidas e, assim, levar adiante seu trabalho de otimização de site. Com ele pretendemos lhe apresentar o Pagespeed Insights ajudá-lo a compreender suas métricas de avaliação e como agir a partir do resultados que ele lhe mostrar. Siga em frente nesse texto para se aprofundar no assunto.
O que é Pagespeed Insights?
Iniciamos este post falando que o Pagespeed Insights é um recurso chave para que você consiga sucesso no mundo digital. E isso ocorre porque a função dessa ferramenta é testar a velocidade de carregamento das páginas de um site.
O primeiro objetivo é garantir que a página carregue suficientemente rápido para assegurar uma boa experiência ao usuário. Isso porque um site cujas páginas demoram muito para apresentar o conteúdo às pessoas tende a afastá-las. E isto pode significar a perda de alunos, clientes, pacientes; em resumo, a perda de dinheiro.
Em um segundo plano, mas nem por isso menos relevante, está o fato de que a velocidade de carregamento faz parte das estratégias de SEO. Inclusive existe uma tecnologia do Google conhecida como AMP que ajuda as páginas de internet a carregarem mais rápido. E esse aumento de velocidade, sobretudo para acessos mobile, melhora o rankeamento dos sites durante as pesquisas no motor de busca.
Continue lendo
O que você vai ler
- O que é Pagespeed Insights?
- Como fazer um teste no Pagespeed Insights?
- Quais as métricas avaliadas pelo Pagespeed Insights?
- Primeira renderização do conteúdo
- Atraso na primeira entrada
- Maior renderização de conteúdo
- Mudança cumulativa de layout
- Principais problemas encontrados no teste do PageSpeed Insights
- Otimizar o tamanho e formato das imagens
- Reduzir o CSS não utilizado
- Eliminar recursos que impedem a renderização
- Reduza o JavaScript não utilizado
- Tempo de resposta do servidor
- Como melhorar a velocidade do site com o Pagespeed?
- Soluções para velocidade do site
Como fazer um teste no Pagespeed Insights?
Até aqui vimos do que se trata o Pagespeed Insight. E, uma vez que você já compreendeu a sua importância, também é bom que falemos sobre como realizar o teste da velocidade do site. O processo é bastante simples e rapidamente você tem o resultado.Além disso, algo que já pode ser adiantado é que o teste avalia o desempenho do carregamento dos sites não só quando acessados através de desktop, mas também quando o processo é feito por dispositivos móveis. E, como foi dito a pouco, uma boa performance neste último caso, significa melhor classificação no rankeamento do motor de buscas do Google. Vejamos, então, como realizar o teste.Pagespeed Insights test
O primeiro passo, já no site do Google Pagespeed Insights, é inserir ou colar a URL da página Web no campo principal, próprio para isso, e clicar no botão “Analisar”. Feito isso, basta aguardar alguns segundos enquanto o sistema realiza a análise de desempenho.
Essa análise traz consigo gráficos e muitos dados a respeito da performance do site. Mais adiante falaremos sobre algumas dessas informações com mais detalhes. Por enquanto, vamos destacar que o teste de velocidade produz duas notas: uma com base no desempenho em computadores, outra baseada no acesso através de dispositivos móveis.
Na verdade, o teste apresenta duas seções de resultado: se você clicar na figura do computador aparecerão a nota e os dados referentes ao desempenho do site em acessos feitos por esses aparelhos; caso você clique em “Mobile”, as informações mudam. Pois aí o resultado trata da velocidade de carregamento do site em smartphones, tablets, etc.
Nota no teste de velocidade
E essa nota, logo depois de obtida, é encaixada no índice de desempenho. Este estabelece que quando a pontuação se localiza no intervalo de 0 a 49, a página web está lenta; já uma nota que fica entre 50 e 89, significa que não há uma lentidão extrema, mas há, sim, muita margem para melhora; por fim se a pontuação estiver entre 90 e 100, a página está rodando muito bem. Na representação gráfica, há uma cor que simboliza cada uma das situações: a vermelha para o primeiro caso, a laranja para o segundo e a verde para o último.
O teste disponibiliza mais abaixo duas listas. A primeira trata de algumas sugestões para que a página tenha melhor desenvoltura, inclusive estimando quanto de tempo se ganharia com modificações. Já a segunda lista mostra os empecilhos à boa performance da página, dando o diagnóstico sobre o que afeta a velocidade do carregamento.
Quais as métricas avaliadas pelo Pagespeed Insights?
Além da pontuação, da qual tratamos na seção anterior, o resultado do teste também fornece uma avaliação sobre alguns pontos importantes da performance da página. Na verdade, esses aspectos sobre os quais estamos falando também colaboram com a nota final recebida.
As métricas ou web vitals – também recebem esse nome – concentram-se sempre na experiência do usuário. Elas servem como índices para garantir que pontos específicos do funcionamento de uma página web sejam executados a fim de que o conteúdo chegue de forma clara e com a maior velocidade possível ao navegador do usuário. Por causa desse objetivo, o centro da avaliação de cada uma delas está relacionado ao tempo de execução: a rapidez com que as coisas acontecem. Vejamos agora quais são essas métricas e como funcionam.
Primeira renderização do conteúdo
Em inglês First Contentful Paint (FCP), essa métrica tem por finalidade calcular o tempo total que o conteúdo completo da página leva para ser carregado pela primeira vez. Dito de outro modo, trata-se aqui do período entre o click para acessar a página até o momento em que o carregamento termina e todo o conteúdo pode ser visualizado.Vale ressaltar que por conteúdo, entende-se textos, imagens, vídeos e áudios. E a FCP de um site é considerada boa quando mede até 1,8 segundos; isto é, quando o primeiro carregamento do conteúdo da página tem como limite essa fração de segundos.
Atraso na primeira entrada
Nem sempre o site responderá de imediato a uma interação do usuário. É comum clicarmos em um botão ou tentarmos acessar um link e o efeito dessa ação demorar um pouco a acontecer. Calcular este tempo de atraso é a função desta Web Vitals.Para ficar mais claro, mede-se aqui o tempo entre a ação do usuário (seja um click, um rolar de scroll ou passar o mouse por um menu interativo) e a resposta do navegador a essa mesma interação. O tempo considerado limite para que o usuário tenha uma boa experiência é de até 100 milissegundos.Maior renderização de conteúdo
Usa-se esta métrica para mensurar a velocidade de apresentação do conteúdo na janela de visualização do usuário. Note bem, há aqui uma diferença em relação ao FCP; pois este trabalha com o conteúdo inteiro da página. A LCP, por outro lado, limita-se à parte alcançada pelo campo de visão que a pessoa acessa a página e o conteúdo que primeiro preenche a janela de visualização quando a página começa a carregar.Considera-se que o usuário tem uma boa experiência quando o tempo de LCP do site é de, no máximo, 2,5 segundos
Mudança cumulativa de layout
Traduzida do inglês Cumulative Layout Shift (CLS), essa métrica calcula a quantidade de explosões de mudanças de layout, enquanto a página carrega o conteúdo, ocorridas em um intervalo de até 5 segundos. Uma mudança de layout ocorre quando uma parte já visível do conteúdo se move no momento do carregamento.Ao ocorrerem sucessivas mudanças quase que simultaneamente, diz que houve uma explosão de mudanças de layout. Um site que proporciona ao usuário uma boa experiência deve garantir que esse fenômeno aconteça em até 0,1 segundo.Principais problemas encontrados no teste do PageSpeed Insights
Já vimos até agora que o teste do Pagespeed Insights atribui uma nota ao seu site. Sabemos também que essa pontuação tem por base uma série de dados e informações, entre as quais se destacam algumas métricas bem importantes, das quais também já falamos.Por outro lado, não tratamos ainda de alguns problemas, que o teste costuma apresentar, e que também exercem forte influência na pontuação que o site recebe.Por isso, veremos agora algumas sugestões de solução aos pontos negativos que os teste em geral apontam.Otimizar o tamanho e formato das imagens
As imagens podem ser um fator de lentidão em um site. Se este problema foi apontado no seu caso, você inevitavelmente terá que resolvê-lo procurando otimizar o tamanho das imagens utilizadas.A maneira ideal de fazer isso é através do atributo srcset. De maneira resumida, este atributo permite colocar no código, várias vezes, a mesma imagem com diferentes tamanhos. Desse modo, dependendo do tamanho e formato da tela de exibição, os navegadores podem escolher qual a melhor imagem para apresentar ao usuário.
Reduzir o CSS não utilizado
No processo de desenvolvimento é bastante comum que os arquivos CSS das páginas saiam em um tamanho bem maior do que o necessário. Isso acontece porque espaços, caracteres e outros elementos desse tipo (não necessários para que os browsers leiam e interpretem o conteúdo) vão sendo naturalmente acrescentados durante a dinâmica do trabalho dos desenvolvedores. No entanto, esse conteúdo excessivo deixa mais lento o carregamento das páginas.Por esse motivo, otimizar o arquivo CSS, retirando tudo aquilo que é desnecessário à exibição perfeita da página web, é uma das boas práticas que devem ser seguidas. Pois, como recomenda a ferramenta Pagespeed Insight da Google, esse simples cuidado contribui para melhorar a velocidade de carregamento das páginas do seu site.Eliminar recursos que impedem a renderização
A ferramenta Pagespeed Insights da Google tem como uma de suas mais importantes recomendações a eliminação de tudo aquilo que impede ou dificulta a renderização; no inglês, render-blocking. Normalmente os agentes desse tipo de bloqueio são arquivos CSS e JavaScript. E nos dois casos, eliminar os elementos de bloqueio:No caso dos elementos de bloqueio do JavaScript, é possível realizar tal tarefa por dois principais métodos:- Async: que permite ao navegador baixar o JavaScript ao mesmo tempo que interpreta o HTML. Depois do download, interrompe a interpretação do HTML e passa a executar o Script.
- Defer: Também permite ao navegador baixar o JavaScript enquanto ocorre a interpretação do HTML, mas apenas inicia a análise do JavaScript após finalizado o processo com o HTML.
- Autoptimize juntamente com o Async JavaScript. (gratuito)
- WP Rocket (pago)
Esses plugins também servem para eliminar os recursos de bloqueio em JavaScript.
Reduza o JavaScript não utilizado
Tal como na situação dos arquivos CSS, os arquivos de JavaScript também podem comprometer a velocidade de carregamento do site. Isso pode acontecer nos casos em que os arquivos possuem excesso de caracteres e, sobretudo, quando estes são desnecessários ao funcionamento da página.Uma boa maneira de resolver esse problema é otimizar o código em JavaScript, assim como no CSS. Para isso você também pode se valer de plugins como Autoptimize e WP Rocket. Essa prática certamente trará bons resultados relacionados à performance.Tempo de resposta do servidor
Há uma unidade de medida que serve para calcular o tempo de resposta do servidor ao seu site, chama-se Time to First Byte (TTFB). Em outras palavras, o TTFB mede o tempo que leva o primeiro byte para chegar ao site, após uma solicitação ao servidor.A Google Pagespeed Insights recomenda que os sites tenham um baixo TTFB, pois isso mostra que o site está com um bom desempenho.
Como melhorar a velocidade do site com o Pagespeed?
Até aqui você já leu sobre vários fatores que possuem suas parcelas de responsabilidade na velocidade de carregamento de um site. Falamos sobre as métricas, sobre o cuidado com o tamanho das imagens, sobre o excesso de código CSS e JavaScript, etc. A devida preocupação com cada um desses pontos, tratados ao longo do texto, inevitavelmente resulta na melhora da performance do site.Entretanto, há ainda mais alguns ajustes recomendados pelo Pagespeed Insight, sobre os quais não tivemos tempo de falar. Esses, tal como os já abordados, também ajudam a aumentar o desempenho do site e a pontuação adquirida no teste. Eles serão lembrados a partir de agora; não vamos nos aprofundar neles, mas apenas mencioná-los para que você os conheça e esteja ciente da importância que possuem. Vejamos:- Usar formatos de vídeo para conteúdo animado;
- Certifique-se de que o texto permanece visível durante o carregamento da fonte da Web;
- Realizar pedidos de chaves de pré-carga;
- Evitar redirecionar para múltiplas páginas;
- Reduzir o impacto do código de terceiros;
- Evitar enormes cargas úteis na rede;
- Habilitar compressão de texto.
Soluções para velocidade do site
Atender a todos esses requisitos, ou pelo menos à maioria deles, a fim de garantir que um site consiga rodar de maneira eficiente não é tarefa fácil. Se este é seu problema, ou seja, se você precisa criar um site com uma boa velocidade de carregamento, fale com a Link Nacional; empresa que mais entende de construção, manutenção e hospedagem de sites no mercado digital. Já são mais de 15 anos de experiência no ramo de tecnologia e internet, com centenas de clientes satisfeitos. Por isso, entre em contato conosco e converse com um de nossos consultores para que o quanto antes você esteja com seu site funcionando perfeitamente.
