Esta página foi traduzida pela API Cloud Translation.

Escrever o primeiro aplicativo cliente

Introdução

Este documento é destinado a desenvolvedores que querem criar apps que interagem com a API PageSpeed Insights.

O PageSpeed Insights é uma ferramenta que gera relatórios sobre o desempenho real de uma página para computadores e dispositivos móveis. Além disso, ela oferece sugestões de melhorias para ajudar o desenvolvedor a otimizar as páginas da Web. É possível usar a PageSpeed Insights API para gerar de maneira programática a pontuação de velocidade, a pontuação de otimização e as sugestões do PageSpeed.

Antes de começar

Criar uma Conta do Google

Você precisa ter uma Conta do Google para receber uma chave de API que identifique seu aplicativo para o Google. Veja abaixo.

Conheça o PageSpeed

Caso não conheça o PageSpeed, consulte as Práticas recomendadas de desempenho na Web dele.

Saiba como identificar seu aplicativo para o Google

Seu aplicativo precisa se identificar toda vez que envia uma solicitação para a API PageSpeed Insights, incluindo uma chave de API em cada solicitação.

Como receber e usar uma chave de API

Ou crie uma na página Credenciais.

Depois que você tiver uma chave de API, seu aplicativo poderá anexar o parâmetro de consulta key=yourAPIKey a todos os URLs de solicitação.

É seguro incorporar a chave de API a URLs. Não é necessário codificá-la.

Experiência na API PageSpeed Insights

Os resultados retornados pela API PageSpeed Insights incluem os seguintes tipos de informação:

Experiência de carregamento: A seção "Experiência de carregamento" inclui uma categoria de velocidade geral (RÁPIDA, MÉDIA ou LENTA) e distribuições de categoria.
Estatísticas da página: A seção "Estatísticas da página" contém alguns resultados estatísticos úteis, como as idas e voltas necessárias e o total de bytes usados. Ela indica se uma alteração na aparência e na funcionalidade pode melhorar a velocidade da página.
Pontuação de otimização: A pontuação de otimização do PageSpeed (0 a 100) indica o nível de otimização de uma página. Uma pontuação alta indica pouco espaço para melhorias, enquanto uma pontuação baixa indica mais espaço para melhorias.
Regra: O PageSpeed analisa páginas da Web usando regras. Cada regra do PageSpeed é baseada em princípios gerais de desempenho de páginas da Web, como armazenamento em cache de recursos, tamanho do upload e download de dados e tempos de ida e volta do cliente-servidor. As regras do PageSpeed geram resultados e impactos, descritos abaixo.
Resultado da regra: O resultado de uma regra é uma sugestão gerada por uma regra que, se implementada, tornaria a página mais rápida e aumentaria a pontuação do PageSpeed para a página. Por exemplo, se um recurso compactável for veiculado sem compactação, a regra Ativar compactação do PageSpeed vai gerar um resultado recomendando que o desenvolvedor ative a compactação desse recurso.
Impacto da regra: Cada regra do PageSpeed gera um número de impacto (um valor de ponto flutuante ilimitado) que indica a importância ou prioridade de implementar as sugestões de resultado da regra em relação a outras regras. Por exemplo, se ativar a compactação economizaria 1 MB e otimizar imagens, economizaria 500 KB, a regra "Ativar compactação" teria um valor de impacto que é o dobro do valor da regra "Otimizar imagens". Um impacto de zero indica que não há sugestões de melhoria para essa regra.

Como invocar a API

Para invocar a API, chame o método runPagespeed, especificando o URL, a chave de API e outros parâmetros na string de consulta. Consulte os documentos de Referência da API para mais detalhes.

Exemplos de chamadas de API

Na linha de comando

É possível invocar a API PageSpeed Insights na linha de comando do Linux/UNIX com um programa como o curl.

O exemplo a seguir usa essa abordagem para buscar resultados do PageSpeed para dispositivos móveis para o URL https://developers.google.com/speed/pagespeed/insights/. A pontuação do PageSpeed, as estatísticas da página e os resultados formatados do PageSpeed são retornados no formato de dados JSON.

Os resultados formatados são codificados por identificadores de regra (como AvoidBadRequests ou MinifyJavaScript) e contêm a pontuação e o impacto dessa regra, além de sugestões geradas pela regra que, se implementadas, vão acelerar o carregamento da página. Para saber mais sobre os campos na resposta JSON, consulte o documento Referência da API PageSpeed Insights.

Solicitação:

$ curl 'https://www.googleapis.com/pagespeedonline/v4/runPagespeed?url=https://developers.google.com/speed/pagespeed/insights/&strategy=mobile&key=yourAPIKey'

Resposta:

{
 "captchaResult": "CAPTCHA_NOT_NEEDED",
 "kind": "pagespeedonline#result",
 "id": "https://developers.google.com/speed/pagespeed/insights/",
 "responseCode": 200,
 "title": "PageSpeed Insights",
 "ruleGroups": {
  "SPEED": {
   "score": 99
  }
 },
 "loadingExperience": {
  "id": "https://developers.google.com/speed/pagespeed/insights/",
  "metrics": {
   "FIRST_CONTENTFUL_PAINT_MS": {
    "median": 678,
    "distributions": [
     {
      "min": 0,
      "max": 1567,
      "proportion": 0.8726942914078067
     },
     {
      "min": 1567,
      "max": 2963,
      "proportion": 0.07357226585394444
     },
     {
      "min": 2963,
      "proportion": 0.053733442738248746
     }
    ],
    "category": "FAST"
   },
   "DOM_CONTENT_LOADED_EVENT_FIRED_MS": {
    "median": 559,
    "distributions": [
     {
      "min": 0,
      "max": 2120,
      "proportion": 0.9287991742172268
     },
     {
      "min": 2120,
      "max": 4226,
      "proportion": 0.035877050120426655
     },
     {
      "min": 4226,
      "proportion": 0.0353237756623466
     }
    ],
    "category": "FAST"
   }
  },
  "overall_category": "FAST",
  "initial_url": "https://developers.google.com/speed/pagespeed/insights/"
 },
 "pageStats": {
  "numberResources": 11,
  "numberHosts": 6,
  "totalRequestBytes": "1874",
  "numberStaticResources": 6,
  "htmlResponseBytes": "72494",
  "overTheWireResponseBytes": "324002",
  "cssResponseBytes": "8467",
  "imageResponseBytes": "5363",
  "javascriptResponseBytes": "841488",
  "otherResponseBytes": "14548",
  "numberJsResources": 4,
  "numberCssResources": 1,
  "numTotalRoundTrips": 13,
  "numRenderBlockingRoundTrips": 0
 },
 "formattedResults": {
  "locale": "en_US",
  "ruleResults": {
   "AvoidLandingPageRedirects": {
    "localizedRuleName": "Avoid landing page redirects",
    "ruleImpact": 0.0,
    "groups": [
     "SPEED"
    ],
    "summary": {
     "format": "Your page has no redirects. Learn more about {{BEGIN_LINK}}avoiding landing page redirects{{END_LINK}}.",
     "args": [
      {
       "type": "HYPERLINK",
       "key": "LINK",
       "value": "https://developers.google.com/speed/docs/insights/AvoidRedirects"
      }
     ]
    }
   },
   "EnableGzipCompression": {
    "localizedRuleName": "Enable compression",
    "ruleImpact": 0.0,
    "groups": [
     "SPEED"
    ],
    "summary": {
     "format": "You have compression enabled. Learn more about {{BEGIN_LINK}}enabling compression{{END_LINK}}.",
     "args": [
      {
       "type": "HYPERLINK",
       "key": "LINK",
       "value": "https://developers.google.com/speed/docs/insights/EnableCompression"
      }
     ]
    }
   },
   ...
   "PrioritizeVisibleContent": {
    "localizedRuleName": "Prioritize visible content",
    "ruleImpact": 0.0,
    "groups": [
     "SPEED"
    ],
    "summary": {
     "format": "You have the above-the-fold content properly prioritized. Learn more about {{BEGIN_LINK}}prioritizing visible content{{END_LINK}}.",
     "args": [
      {
       "type": "HYPERLINK",
       "key": "LINK",
       "value": "https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent"
      }
     ]
    }
   }
  }
 },
 "version": {
  "major": 1,
  "minor": 15
 }
}

Do JavaScript

É possível invocar a API PageSpeed Insights a partir de JavaScript no navegador, usando o parâmetro de consulta callback e uma função de callback para gerar resultados JSON-P. Isso permite criar aplicativos avançados que mostram dados do PageSpeed sem precisar escrever código no servidor.

O exemplo a seguir usa essa abordagem para exibir resultados do PageSpeed e outras informações para o URL https://developers.google.com/speed/pagespeed/insights/. Esse exemplo também usa as Ferramentas de gráficos do Google para visualizar as informações geradas pela API PageSpeed Insights.

Primeiro, especifique sua chave de API do Google (saiba mais sobre chaves de API):

<script>
// Specify your actual API key here:
var API_KEY = 'yourAPIKey';

// Specify the URL you want PageSpeed results for here:
var URL_TO_GET_RESULTS_FOR = 'https://developers.google.com/speed/pagespeed/insights/';
</script>

Em seguida, busque resultados PageSpeed na PageSpeed Insights API:

<script>
var API_URL = 'https://www.googleapis.com/pagespeedonline/v4/runPagespeed?';
var CHART_API_URL = 'http://chart.apis.google.com/chart?';

// Object that will hold the callbacks that process results from the
// PageSpeed Insights API.
var callbacks = {}

// Invokes the PageSpeed Insights API. The response will contain
// JavaScript that invokes our callback with the PageSpeed results.
function runPagespeed() {
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.async = true;
  var query = [
    'url=' + URL_TO_GET_RESULTS_FOR,
    'callback=runPagespeedCallbacks',
    'key=' + API_KEY,
  ].join('&');
  s.src = API_URL + query;
  document.head.insertBefore(s, null);
}

// Our JSONP callback. Checks for errors, then invokes our callback handlers.
function runPagespeedCallbacks(result) {
  if (result.error) {
    var errors = result.error.errors;
    for (var i = 0, len = errors.length; i < len; ++i) {
      if (errors[i].reason == 'badRequest' && API_KEY == 'yourAPIKey') {
        alert('Please specify your Google API key in the API_KEY variable.');
      } else {
        // NOTE: your real production app should use a better
        // mechanism than alert() to communicate the error to the user.
        alert(errors[i].message);
      }
    }
    return;
  }

  // Dispatch to each function on the callbacks object.
  for (var fn in callbacks) {
    var f = callbacks[fn];
    if (typeof f == 'function') {
      callbacks[fn](result);
    }
  }
}

// Invoke the callback that fetches results. Async here so we're sure
// to discover any callbacks registered below, but this can be
// synchronous in your code.
setTimeout(runPagespeed, 0);
</script>

Ao usar o código acima para buscar resultados da PageSpeed Insights API, estamos prontos para exibir informações interessantes no navegador do usuário usando os exemplos abaixo.

Exemplo 1: mostrar as principais sugestões do PageSpeed

Este exemplo exibe os nomes das principais sugestões de PageSpeed para a página que está sendo analisada, como uma lista não ordenada. Exemplo:

Aproveitar cache do navegador
Adiar análise de JavaScript
Compactar HTML
Compactar JavaScript

Observação: os dados necessários para mostrar os resultados completos do PageSpeed são fornecidos pela API PageSpeed Insights, mas, para manter o exemplo simples, nem todos esses dados são usados aqui.

<script>
callbacks.displayTopPageSpeedSuggestions = function(result) {
  var results = [];
  var ruleResults = result.formattedResults.ruleResults;
  for (var i in ruleResults) {
    var ruleResult = ruleResults[i];
    // Don't display lower-impact suggestions.
    if (ruleResult.ruleImpact < 3.0) continue;
    results.push({name: ruleResult.localizedRuleName,
                  impact: ruleResult.ruleImpact});
  }
  results.sort(sortByImpact);
  var ul = document.createElement('ul');
  for (var i = 0, len = results.length; i < len; ++i) {
    var r = document.createElement('li');
    r.innerHTML = results[i].name;
    ul.insertBefore(r, null);
  }
  if (ul.hasChildNodes()) {
    document.body.insertBefore(ul, null);
  } else {
    var div = document.createElement('div');
    div.innerHTML = 'No high impact suggestions. Good job!';
    document.body.insertBefore(div, null);
  }
};

// Helper function that sorts results in order of impact.
function sortByImpact(a, b) { return b.impact - a.impact; }
</script>

Exemplo 2: mostrar um gráfico de pizza de detalhamento do tamanho do recurso

Este exemplo mostra um gráfico de pizza com o detalhamento do tamanho dos recursos da página que está sendo analisada. Exemplo:

<script>
var RESOURCE_TYPE_INFO = [
  {label: 'JavaScript', field: 'javascriptResponseBytes', color: 'e2192c'},
  {label: 'Images', field: 'imageResponseBytes', color: 'f3ed4a'},
  {label: 'CSS', field: 'cssResponseBytes', color: 'ff7008'},
  {label: 'HTML', field: 'htmlResponseBytes', color: '43c121'},
  {label: 'Flash', field: 'flashResponseBytes', color: 'f8ce44'},
  {label: 'Text', field: 'textResponseBytes', color: 'ad6bc5'},
  {label: 'Other', field: 'otherResponseBytes', color: '1051e8'},
];

callbacks.displayResourceSizeBreakdown = function(result) {
  var stats = result.pageStats;
  var labels = [];
  var data = [];
  var colors = [];
  var totalBytes = 0;
  var largestSingleCategory = 0;
  for (var i = 0, len = RESOURCE_TYPE_INFO.length; i < len; ++i) {
    var label = RESOURCE_TYPE_INFO[i].label;
    var field = RESOURCE_TYPE_INFO[i].field;
    var color = RESOURCE_TYPE_INFO[i].color;
    if (field in stats) {
      var val = Number(stats[field]);
      totalBytes += val;
      if (val > largestSingleCategory) largestSingleCategory = val;
      labels.push(label);
      data.push(val);
      colors.push(color);
    }
  }
  // Construct the query to send to the Google Chart Tools.
  var query = [
    'chs=300x140',
    'cht=p3',
    'chts=' + ['000000', 16].join(','),
    'chco=' + colors.join('|'),
    'chd=t:' + data.join(','),
    'chdl=' + labels.join('|'),
    'chdls=000000,14',
    'chp=1.6',
    'chds=0,' + largestSingleCategory,
  ].join('&');
  var i = document.createElement('img');
  i.src = 'http://chart.apis.google.com/chart?' + query;
  document.body.insertBefore(i, null);
};
</script>

Vídeo de demonstração

Demonstração da API PageSpeed Insights no Google I/O BootCamp 2011.