Esta página foi traduzida pela API Cloud Translation.

Escrever o primeiro aplicativo cliente

Introdução

Este documento é para desenvolvedores que gostariam de criar aplicativos que possam interagir com a PageSpeed Insights API.

O PageSpeed Insights é uma ferramenta que gera relatórios sobre o desempenho real de uma página para dispositivos móveis e computadores e oferece sugestões sobre como ela pode ser melhorada 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 e identificar seu aplicativo para o Google. Veja abaixo.

Familiarize-se com o PageSpeed

Se você não conhece o PageSpeed, consulte as práticas recomendadas de desempenho na Web.

Saiba como identificar seu aplicativo para o Google

Seu aplicativo precisa se identificar sempre que enviar uma solicitação à API PageSpeed Insights. Para isso, inclua 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.

A chave de API é segura para ser incorporada a URLs sem precisar de codificação.

Contexto da API PageSpeed Insights

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

Experiência de carregamento: A seção "Experiência de carregamento" inclui uma categoria geral de velocidade (RÁPIDA, MÉDIA ou LENTA) e distribuições de categorias.
Estatísticas da página: A seção "Estatísticas da página" contém alguns resultados estatísticos úteis, como as viagens de ida e volta necessárias e o total de bytes usados. Isso indica se a página pode ficar mais rápida modificando a aparência e a funcionalidade.
Pontuação de otimização: A pontuação de otimização do PageSpeed (0 a 100) indica o nível de otimização da 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 se baseia nos princípios gerais de desempenho da página da Web, como armazenamento em cache de recursos, tamanho do download e upload de dados e tempos de retorno do cliente para o servidor. As regras do PageSpeed geram resultados e impactos de regras, 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 ela. Por exemplo, se um recurso compactável for veiculado descompactado, a regra Ativar compactação do PageSpeed vai gerar um resultado que recomenda que o desenvolvedor ative a compactação para esse 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 da implementação das sugestões de resultado da regra em relação a outras regras. Por exemplo, se a ativação da compactação poupar 1 MB, enquanto a otimização de imagens poupar 500 KB, a regra "Ativar compactação" teria um valor de impacto que é o dobro 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 da Referência da API para mais detalhes.

Exemplos de chamadas de API

Na linha de comando

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

O exemplo a seguir usa essa abordagem para buscar resultados do PageSpeed para dispositivos móveis no URL https://developers.google.com/speed/pagespeed/insights/. A pontuação, 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 regras (como AvoidBadRequests ou MinifyJavaScript) e contêm a pontuação e o impacto dessa regra, além de sugestões geradas por ela. Se implementada, a página carregará mais rapidamente. 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
 }
}

No JavaScript

Você pode 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 que você crie aplicativos avançados que exibem dados do PageSpeed sem precisar escrever códigos do lado do servidor.

O exemplo a seguir usa essa abordagem para exibir resultados do PageSpeed e outras informações do URL https://developers.google.com/speed/pagespeed/insights/. Este 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 as 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 os resultados do PageSpeed na API PageSpeed Insights:

<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 na PageSpeed Insights API, estamos prontos para exibir informações interessantes no navegador do usuário usando os exemplos abaixo.

Exemplo 1: exibir as principais sugestões do PageSpeed

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

Aproveitar o processo de cache do navegador
Adiar análise de JavaScript
Minificar HTML
Minificar JavaScript

Observação: os dados necessários para exibir resultados completos do PageSpeed são fornecidos pela API PageSpeed Insights. No entanto, para simplificar o exemplo, nem todos os 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: exibir um gráfico de pizza com detalhamento do tamanho dos recursos

Neste exemplo, é exibido um gráfico de pizza que mostra 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.