Use o Google PageSpeed Insights para verificar um site
Dica publicada em PHP / Miscelânea
Use o Google PageSpeed Insights para verificar um site
O Google oferece uma excelente ferramenta online e gratuita para verificar e ajudar a entender todas as questões que, porventura, precisamos corrigir nas páginas do site: o Google PageSpeed Insights.
Mesmo que você não seja um programador, pode usar o PageSpeed Insights para verificar o desempenho dos sites: é só digitar o URI (vulgarmente conhecido como URL) de um site ou uma página específica do site e clicar em "Analisar" e a ferramenta vai mostrar uma nota entre 0% e 100% para que você saiba o que precisa melhorar em termos de usabilidade e desempenho no celular e no computador.
Além disso, o PageSpeed Insights no DIAGNÓSTICO oferece links para solucionar os prováveis diversos problemas que possam aparecer.
Por exemplo, a parte do "Desempenho" oferece soluções como melhorar o desempenho do site e eliminar recursos que impedem ou atrasam a renderização da página.
Ele ainda fornece sugestões e links para melhorar o contraste das cores, design, etc.
No desempenho ainda oferece soluções como reduzir o Javascript não usado, o CSS não usado, o tempo de resposta do servidor, disponibilizar recursos estáticos com uma política de cache eficiente, etc. As métricas utilizadas não são conclusivas (como o próprio Google diz), mas estão disponíveis para que todos possam ver e são ótimas para ter-se uma base do que precisamos melhorar.
E podemos usar o Google Chrome Devs que vem acoplado no navegador Google Chrome clicando nos três pontinhos acima à direita > Mais ferramentas > Ferramentas do desenvolvedor > clique nos 3 pontinhos ao lado de "Console" > Cobertura > clique no botão Gravar "Cobertura do instrumento" que o Chrome Devs mostrará quais scripts CSS e JS estão atrasando ou não o carregamento da página, quais scripts não são usados, etc. Exemplo:
- Verde (crítico): estilos necessários para a primeira pintura. É um código essencial para a funcionalidade principal da página.
- Vermelho (não essencial): estilos que se aplicam ao conteúdo que não é imediatamente visível. Código que não está sendo usado no recurso principal da página.
O símbolo de download "Cobertura da exportação" fornece o download de um arquivo Json com as médias obtidas da página.
O Chrome Devs oferece ainda várias outras ferramentas de diagnóstico e análise.
https://developers.google.com/speed/pagespeed/insights/
https://developer.chrome.com/docs/devtools?hl=pt-br
https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources?utm_source=lighthouse&utm_medium=lr&hl=pt-br
Mesmo que você não seja um programador, pode usar o PageSpeed Insights para verificar o desempenho dos sites: é só digitar o URI (vulgarmente conhecido como URL) de um site ou uma página específica do site e clicar em "Analisar" e a ferramenta vai mostrar uma nota entre 0% e 100% para que você saiba o que precisa melhorar em termos de usabilidade e desempenho no celular e no computador.
Além disso, o PageSpeed Insights no DIAGNÓSTICO oferece links para solucionar os prováveis diversos problemas que possam aparecer.
Por exemplo, a parte do "Desempenho" oferece soluções como melhorar o desempenho do site e eliminar recursos que impedem ou atrasam a renderização da página.
Ele ainda fornece sugestões e links para melhorar o contraste das cores, design, etc.
No desempenho ainda oferece soluções como reduzir o Javascript não usado, o CSS não usado, o tempo de resposta do servidor, disponibilizar recursos estáticos com uma política de cache eficiente, etc. As métricas utilizadas não são conclusivas (como o próprio Google diz), mas estão disponíveis para que todos possam ver e são ótimas para ter-se uma base do que precisamos melhorar.
E podemos usar o Google Chrome Devs que vem acoplado no navegador Google Chrome clicando nos três pontinhos acima à direita > Mais ferramentas > Ferramentas do desenvolvedor > clique nos 3 pontinhos ao lado de "Console" > Cobertura > clique no botão Gravar "Cobertura do instrumento" que o Chrome Devs mostrará quais scripts CSS e JS estão atrasando ou não o carregamento da página, quais scripts não são usados, etc. Exemplo:
- Verde (crítico): estilos necessários para a primeira pintura. É um código essencial para a funcionalidade principal da página.
- Vermelho (não essencial): estilos que se aplicam ao conteúdo que não é imediatamente visível. Código que não está sendo usado no recurso principal da página.
O símbolo de download "Cobertura da exportação" fornece o download de um arquivo Json com as médias obtidas da página.
O Chrome Devs oferece ainda várias outras ferramentas de diagnóstico e análise.
https://developers.google.com/speed/pagespeed/insights/
https://developer.chrome.com/docs/devtools?hl=pt-br
https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources?utm_source=lighthouse&utm_medium=lr&hl=pt-br
Por exemplo: Avaliação das Core Web Vitals: reprovado
E no quesito Desempenho dá vários ERROR.
.
_________________________________________________________
Always listen the Buck!
Enquanto o cursor estiver pulsando, há vida!