A performance da Web pode ter um impacto enorme na toda a experiência do usuário. Se você tem tentado melhorar o desempenho do seu site, provavelmente já ouviu falar do PageSpeed Insights, uma ferramenta que analisa páginas e oferece conselhos sobre como torná-las mais rápidas com base nas práticas recomendadas para desempenho da Web em dispositivos móveis e computadores.
As pontuações do PageSpeed são baseadas em vários fatores, incluindo a minimização dos scripts, a otimização de imagens, a compactação do conteúdo, o tamanho adequado dos alvos de toque e a evitação de redirecionamentos da página de destino.
Com 40% de pessoas potencialmente abandonando páginas que levam mais de três segundos para carregar, é cada vez mais importante se preocupar com a velocidade de carregamento das páginas nos dispositivos dos usuários.
Métricas de performance no processo de build
Embora seja possível acessar manualmente os PageSpeed Insights para saber como suas pontuações estão, vários desenvolvedores têm perguntado se é possível ter uma pontuação de desempenho semelhante no processo de criação.
A resposta é: com certeza.
Introdução ao PSI para Node
Hoje, temos o prazer de apresentar o PSI para Node, um novo módulo que funciona muito bem com Gulp, Grunt e outros sistemas de build. Ele pode se conectar ao serviço do PageSpeed Insights e retornar um relatório detalhado da sua performance na Web. Confira uma prévia do tipo de relatório que ele ativa:
Os resultados acima são bons para ter uma ideia do tipo de melhorias que podem ser feitas. Por exemplo, um valor de 5,92 para dimensionar o conteúdo para a viewport significa que ainda é possível fazer algum trabalho, enquanto um valor de 24 para minimizar os recursos de bloqueio de renderização pode sugerir que você precisa adiar o carregamento do JS usando o atributo async.
Redução da barreira de entrada para o PageSpeed Insights
Se você já tentou usar a API PageSpeed Insights ou qualquer uma das ferramentas que criamos com base nela, provavelmente precisou se registrar para ter uma chave de API dedicada. Sabemos que, embora isso leve apenas alguns minutos, pode ser um problema para quem quer receber insights como parte do fluxo de trabalho normal.
O serviço do PageSpeed Insights aceita solicitações sem uma chave de API para até uma solicitação a cada cinco segundos (o suficiente para qualquer pessoa). Para uso mais regular ou builds de produção sérios, é recomendável registrar uma chave.
O módulo PSI oferece suporte a uma opção nokey para configuração em menos de alguns minutos e a opção key por um pouco mais de tempo. Os detalhes sobre como se registrar para uma chave de API estão documentados.
Primeiros passos
Você tem duas opções para integrar o PSI ao seu fluxo de trabalho. Você pode integrá-la ao seu processo de build ou executá-la como uma ferramenta instalada globalmente no sistema.
Processo de versão
Usar o PSI no seu processo de build do Grunt ou do Gulp é bastante simples. Se você estiver trabalhando em um projeto do Gulp, poderá instalar e usar o PSI diretamente.
Instalar
Instale o PSI usando o npm e transmita --save-dev para salvar no arquivo package.json.
npm install psi --save-dev
Em seguida, defina uma tarefa do Gulp para ela no gulpfile da seguinte maneira (também abordada no nosso projeto de exemplo do Gulp):
var psi = require('psi');
gulp.task('psi', function (cb) {
psi({
nokey: 'true', // or use key: ‘YOUR_API_KEY’
url: site,
strategy: 'mobile',
}, cb);
});
Para o exemplo acima, é possível executar a tarefa usando:
gulp psi
Se você usa o Grunt, pode usar o grunt-pagespeed (link em inglês) de James Cryer, que agora usa o PSI para gerar relatórios.
Instalar
npm install grunt-pagespeed --save-dev
Em seguida, carregue a tarefa no Gruntfile:
grunt.loadNpmTasks('grunt-pagespeed');
e configurá-lo para uso:
pagespeed: {
options: {
nokey: true,
url: "https://www.html5rocks.com",
strategy: "mobile"
}
}
Em seguida, execute a tarefa usando:
grunt pagespeed
Como instalar como uma ferramenta global
Também é possível instalar o PSI como uma ferramenta disponível globalmente no seu sistema. Novamente, podemos usar o npm para instalar a ferramenta:
$ npm install -g psi
Em qualquer janela de terminal, solicite relatórios do PageSpeed Insights para um site (com a opção nokey ou um key específico da API, conforme abaixo):
psi http://www.html5rocks.com --nokey --strategy=mobile
ou para quem tem uma chave de API registrada:
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
Pronto.
Faça da performance parte da sua cultura
Precisamos começar a pensar mais sobre o impacto dos nossos designs e implementações na experiência do usuário.
Soluções como o PSI podem monitorar a performance da Web em computadores e dispositivos móveis e são úteis quando usadas como parte do fluxo de trabalho regular pós-implantação.
Queremos saber sua opinião e esperamos que o PSI ajude a melhorar a cultura de performance da sua equipe.