Automatizar a medição de desempenho na Web

Addy Osmani
Addy Osmani

O desempenho na Web pode ter um grande impacto em toda a experiência do usuário. Se você tem buscado melhorar o desempenho do seu próprio site ultimamente, provavelmente já ouviu falar do PageSpeed Insights, uma ferramenta que analisa páginas e oferece conselhos sobre como otimizá-las com base nas práticas recomendadas para desempenho na Web para dispositivos móveis e computadores.

A pontuação do PageSpeed se baseia em uma série de fatores, incluindo: a eficiência dos seus scripts em ser minimizados, imagens otimizadas, conteúdo compactado em gzip, áreas de toque com tamanho adequado e redirecionamentos da página de destino evitados.

Como 40% das pessoas podem abandonar páginas que levam mais de três segundos para carregar, cuidar da velocidade de carregamento das páginas nos dispositivos dos usuários está se tornando uma parte essencial do nosso fluxo de trabalho de desenvolvimento.

Métricas de desempenho no seu processo de compilação

Embora acessar manualmente o PageSpeed Insights para saber como suas pontuações são adequadas, vários desenvolvedores têm perguntado se é possível ter pontuações de desempenho semelhantes 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. Ele é um novo módulo que funciona muito bem com Gulp, Grunt e outros sistemas de criação. Ele também pode ser conectado ao serviço PageSpeed Insights e gerar um relatório detalhado do seu desempenho na Web. Vamos conferir uma prévia do tipo de relatório que ele permite:

Tela de relatórios de desempenho

Os resultados acima são bons para ter uma ideia do tipo de melhorias que podem ser feitas. Por exemplo, uma cor de 5,92 para dimensionar o conteúdo para a janela de visualização significa que "algum" trabalho ainda pode ser feito, enquanto um 24 para minimizar os recursos de bloqueio de renderização pode sugerir que você precisa adiar o carregamento do JS usando o atributo async.

Reduzir a barreira de entrada no PageSpeed Insights

Se você já tentou usar a PageSpeed Insights API ou alguma das ferramentas que criamos com base nela, provavelmente teve que se registrar para uma chave de API dedicada. Sabemos que, embora isso demore apenas alguns minutos, pode ser uma desativação para obter insights como parte de seu fluxo de trabalho normal.

É um prazer informar que o serviço PageSpeed Insights permite fazer solicitações sem uma chave de API para até uma solicitação a cada 5 segundos (muitos para qualquer pessoa). Para uso mais regular ou builds de produção sérios, é recomendável se registrar para uma chave.

O módulo PSI oferece suporte à opção nokey, que permite a configuração em menos de alguns minutos, e à opção key, para um pouco mais de tempo. Os detalhes sobre como se registrar para uma chave de API estão documentados.

Como começar

Você tem duas opções para integrar o PSI ao seu fluxo de trabalho. Você pode integrá-la ao processo de compilação ou executá-la como uma ferramenta instalada globalmente no sistema.

Processo de versão

O uso do PSI no processo de build de Grunt ou Gulp é bem simples. Se estiver trabalhando em um projeto do Gulp, instale e use o PSI diretamente.

Instalar

Instale o PSI usando npm e transmita --save-dev para salvá-lo no arquivo package.json.

npm install psi --save-dev

Em seguida, defina uma tarefa 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);
});

No caso acima, execute a tarefa usando:

gulp psi

Se você usa o Grunt, pode usar o grunt-pagespeed 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 ferramenta global

Você também pode instalar o PSI como uma ferramenta disponível globalmente no seu sistema. Mais uma vez, podemos usar o npm para instalar a ferramenta:

$ npm install -g psi

Em qualquer janela do terminal, solicite relatórios do PageSpeed Insights para um site (com a opção nokey ou uma API key específica, conforme mostrado a seguir):

psi http://www.html5rocks.com --nokey --strategy=mobile

ou para aqueles com uma chave de API registrada:

psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile

Pronto!

Vá em frente e torne a performance parte da sua cultura

Precisamos começar a pensar mais sobre o impacto de nossos designs e implementações na experiência do usuário.

Soluções como o PSI podem acompanhar o desempenho na Web em computadores e dispositivos móveis e são úteis quando usadas como parte do seu fluxo de trabalho normal pós-implantação.

Estamos ansiosos para ouvir seu feedback e esperamos que a PSI ajude a melhorar a cultura de desempenho da sua equipe.