Empezar a utilizar la API de PageSpeed Insights

Con la API de PageSpeed Insights, puedes:

  • Medir el rendimiento de una página web.
  • Obtener sugerencias sobre cómo mejorar algunos aspectos de una página, como su rendimiento, accesibilidad o SEO.
  • Aprender a convertir una página en una aplicación web progresiva.

La API de PageSpeed Insights ofrece datos del mundo real del informe "Experiencia de Usuario de Chrome" y datos de experimentos de Lighthouse.

Requisitos

Si estás leyendo este tutorial, se da por supuesto que tienes unos conocimientos generales sobre la interfaz de línea de comandos y sobre el desarrollo web.

Opcional: Configurar claves de API

Si solo quieres probar la API de PageSpeed Insights, no hace falta que tengas una clave de API. Solo la necesitas si tienes previsto usarla de manera automatizada y hacer muchas consultas por segundo.

Adquirir y usar claves de API

Obtener clave

Aunque también puedes crear una en la página Credenciales.

Una vez que dispongas de una clave, tu aplicación puede añadir el parámetro de consulta key=yourAPIKey a todas las URL de solicitud.

Estas claves se pueden insertar en URLs sin que haga falta codificarlas.

Explorador de APIs

Utiliza el Explorador de APIs para hacer llamadas a la API de PageSpeed Insights sin tener que cambiar ningún fragmento del código.

cURL

Para probar la API de PageSpeed Insights a través de la línea de comandos, sigue estos pasos:

  1. Abre un terminal.

  2. Ejecuta el comando que se muestra a continuación y añade el parámetro &key=yourAPIKey si usas una clave de API. 

    curl https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://developers.google.com

    La respuesta que devuelve es un objeto JSON. Consulta la sección sobre respuesta para obtener más información sobre las propiedades del objeto de respuesta. 

    {
 "captchaResult": "CAPTCHA_NOT_NEEDED",
 "kind": "pagespeedonline#result",
 "id": "https://developers.google.com/",
 "loadingExperience": {
  "id": "https://developers.google.com/",
  "metrics": {
   "FIRST_CONTENTFUL_PAINT_MS": {
    "percentile": 3482,
    "distributions": [
     {
      "min": 0,
      "max": 1000,
      "proportion": 0.37151728768042963
     },
     {
      "min": 1000,
      "max": 2500,
      "proportion": 0.4244153519077991
     },
     {
      "min": 2500,
      "proportion": 0.2040673604117713
     }
    ],
    "category": "SLOW"
   },
   "FIRST_INPUT_DELAY_MS": {
    "percentile": 36,
    "distributions": [
     {
      "min": 0,
      "max": 50,
      "proportion": 0.960628961482204
     },
     {
      "min": 50,
      "max": 250,
      "proportion": 0.02888834714773281
     },
     {
      "min": 250,
      "proportion": 0.010482691370063388
     }
    ],
    "category": "FAST"
   }
  },
  "overall_category": "SLOW",
  "initial_url": "https://developers.google.com/"
 },
 "originLoadingExperience": {
  "id": "https://developers.google.com",
  "metrics": {
   "FIRST_CONTENTFUL_PAINT_MS": {
    "percentile": 2761,
    "distributions": [
     {
      "min": 0,
      "max": 1000,
      "proportion": 0.4236433226493666
     },
     {
      "min": 1000,
      "max": 2500,
      "proportion": 0.45045120795679117
     },
     {
      "min": 2500,
      "proportion": 0.1259054693938423
     }
    ],
    "category": "SLOW"
   },
   "FIRST_INPUT_DELAY_MS": {
    "percentile": 45,
    "distributions": [
     {
      "min": 0,
      "max": 50,
      "proportion": 0.9537371485251699
     },
     {
      "min": 50,
      "max": 250,
      "proportion": 0.03044972719889055
     },
     {
      "min": 250,
      "proportion": 0.01581312427593959
     }
    ],
    "category": "FAST"
   }
  },
  "overall_category": "SLOW",
  "initial_url": "https://developers.google.com/"
 },
 "lighthouseResult": {
  "requestedUrl": "https://developers.google.com/",
  "finalUrl": "https://developers.google.com/",
  "lighthouseVersion": "3.2.0",
  "userAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/72.0.3584.0 Safari/537.36",
  "fetchTime": "2018-11-01T03:03:58.394Z",
  "environment": {
   "networkUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3559.0 Safari/537.36",
   "hostUserAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/72.0.3584.0 Safari/537.36",
   "benchmarkIndex": 590.0
  },
  "runWarnings": [],
  "configSettings": {
   "emulatedFormFactor": "desktop",
   "locale": "en-US",
   "onlyCategories": [
    "performance"
   ]
  },
  "audits": {
   "estimated-input-latency": {
    "id": "estimated-input-latency",
    "title": "Estimated Input Latency",
    "description": "The score above is an estimate of how long your app takes to respond to user input, in milliseconds, during the busiest 5s window of page load. If your latency is higher than 50 ms, users may perceive your app as laggy. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/estimated-input-latency).",
    "score": 1.0,
    "scoreDisplayMode": "numeric",
    "displayValue": "30 ms"
   },
   "uses-rel-preconnect": {
    "id": "uses-rel-preconnect",
    "title": "Preconnect to required origins",
    "description": "Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins. [Learn more](https://developers.google.com/web/fundamentals/performance/resource-prioritization#preconnect).",
    "score": 1.0,
    "scoreDisplayMode": "numeric",
    "details": {
     "headings": [],
     "type": "opportunity",
     "items": [],
     "overallSavingsMs": 0.0
    }
   },
   ...
  },
  "categories": {
   "performance": {
    "id": "performance",
    "title": "Performance",
    "score": 0.96,
    "auditRefs": [
     {
      "id": "first-contentful-paint",
      "weight": 3.0,
      "group": "metrics"
     },
     {
      "id": "first-meaningful-paint",
      "weight": 1.0,
      "group": "metrics"
     },
     ...
    ]
   }
  },
  "categoryGroups": {
   "a11y-element-names": {
    "title": "Elements Have Discernible Names",
    "description": "These are opportunities to improve the semantics of the controls in your application. This may enhance the experience for users of assistive technology, like a screen reader."
   },
   "a11y-language": {
    "title": "Page Specifies Valid Language",
    "description": "These are opportunities to improve the interpretation of your content by users in different locales."
   },
   ...
  },
  "i18n": {
   "rendererFormattedStrings": {
    "varianceDisclaimer": "Values are estimated and may vary.",
    "opportunityResourceColumnLabel": "Opportunity",
    "opportunitySavingsColumnLabel": "Estimated Savings",
    "errorMissingAuditInfo": "Report error: no audit information",
    "errorLabel": "Error!",
    "warningHeader": "Warnings: ",
    "auditGroupExpandTooltip": "Show audits",
    "passedAuditsGroupTitle": "Passed audits",
    "notApplicableAuditsGroupTitle": "Not applicable",
    "manualAuditsGroupTitle": "Additional items to manually check",
    "toplevelWarningsMessage": "There were issues affecting this run of Lighthouse:",
    "scorescaleLabel": "Score scale:",
    "crcLongestDurationLabel": "Maximum critical path latency:",
    "crcInitialNavigation": "Initial Navigation",
    "lsPerformanceCategoryDescription": "[Lighthouse](https://developers.google.com/web/tools/lighthouse/) analysis of the current page on an emulated mobile network. Values are estimated and may vary.",
    "labDataTitle": "Lab Data"
   }
  }
 },
 "analysisUTCTimestamp": "2018-11-01T03:03:58.394Z"
}

JavaScript

Para probar la API de PageSpeed Insights a través de JavaScript, sigue estos pasos:

  1. Copia el fragmento de código que se muestra a continuación. En este fragmento se utiliza la API de PageSpeed Insights para medir el rendimiento de la página https://developers.google.com y posteriormente mostrar sus resultados. 

    <script>
function run() {
  const url = setUpQuery();
  fetch(url)
    .then(response => response.json())
    .then(json => {
      // See https://developers.google.com/speed/docs/insights/v5/reference/pagespeedapi/runpagespeed#response
      // to learn more about each of the properties in the response object.
      showInitialContent(json.id);
      const cruxMetrics = {
        "First Contentful Paint": json.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.category,
        "First Input Delay": json.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.category
      };
      showCruxContent(cruxMetrics);
      const lighthouse = json.lighthouseResult;
      const lighthouseMetrics = {
        'First Contentful Paint': lighthouse.audits['first-contentful-paint'].displayValue,
        'Speed Index': lighthouse.audits['speed-index'].displayValue,
        'Time To Interactive': lighthouse.audits['interactive'].displayValue,
        'First Meaningful Paint': lighthouse.audits['first-meaningful-paint'].displayValue,
        'First CPU Idle': lighthouse.audits['first-cpu-idle'].displayValue,
        'Estimated Input Latency': lighthouse.audits['estimated-input-latency'].displayValue
      };
      showLighthouseContent(lighthouseMetrics);
    });
}

function setUpQuery() {
  const api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
  const parameters = {
    url: encodeURIComponent('https://developers.google.com')
  };
  let query = `${api}?`;
  for (key in parameters) {
    query += `${key}=${parameters[key]}`;
  }
  return query;
}

function showInitialContent(id) {
  document.body.innerHTML = '';
  const title = document.createElement('h1');
  title.textContent = 'PageSpeed Insights API Demo';
  document.body.appendChild(title);
  const page = document.createElement('p');
  page.textContent = `Page tested: ${id}`;
  document.body.appendChild(page);
}

function showCruxContent(cruxMetrics) {
  const cruxHeader = document.createElement('h2');
  cruxHeader.textContent = "Chrome User Experience Report Results";
  document.body.appendChild(cruxHeader);
  for (key in cruxMetrics) {
    const p = document.createElement('p');
    p.textContent = `${key}: ${cruxMetrics[key]}`;
    document.body.appendChild(p);
  }
}

function showLighthouseContent(lighthouseMetrics) {
  const lighthouseHeader = document.createElement('h2');
  lighthouseHeader.textContent = "Lighthouse Results";
  document.body.appendChild(lighthouseHeader);
  for (key in lighthouseMetrics) {
    const p = document.createElement('p');
    p.textContent = `${key}: ${lighthouseMetrics[key]}`;
    document.body.appendChild(p);
  }
}

run();
</script>
  2. Pégalo en un archivo HTML.

  3. Abre este archivo en un navegador. Tras este proceso, el aspecto de tu página será el que se ve en la Figura 1.

    Figura 1: Demostración de JavaScript

Pasos siguientes

  • Consulta la sección sobre respuesta para obtener más información sobre las propiedades del objeto de respuesta.
  • Configura una clave de API si tienes previsto hacer más de dos consultas por segundo.
  • Consulta más información sobre la API de PageSpeed Insights para saber cómo se mide el rendimiento.

Comentarios

¿Te ha resultado útil esta página?