{"id":56205,"date":"2022-08-11T14:29:15","date_gmt":"2022-08-11T12:29:15","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=56205&#038;preview=true&#038;preview_id=56205"},"modified":"2025-01-20T11:01:15","modified_gmt":"2025-01-20T10:01:15","slug":"performance-api","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/performance-api\/","title":{"rendered":"Introducci\u00f3n a la API de Rendimiento"},"content":{"rendered":"<p>La <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance_API\">API de Rendimiento<\/a> mide la capacidad de respuesta de tu aplicaci\u00f3n web en tiempo real en dispositivos con usuarios reales y conexiones de red. Puede ayudar a identificar cuellos de botella en tu c\u00f3digo del lado del cliente y del lado del servidor con:<\/p>\n<ul>\n<li><strong>user timing:<\/strong> Medici\u00f3n personalizada del rendimiento de <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-javascript\/\">las funciones JavaScript<\/a> del lado del cliente<\/li>\n<li><strong>paint timing:<\/strong> M\u00e9tricas de renderizado del navegador<\/li>\n<li><strong>resource timing:<\/strong> Rendimiento de la carga de activos y de las llamadas Ajax<\/li>\n<li><strong>navigation timing:<\/strong> M\u00e9tricas de carga de la p\u00e1gina, incluidas las redirecciones, las b\u00fasquedas de DNS, la disponibilidad del DOM, etc<\/li>\n<\/ul>\n<p>La API aborda varios problemas asociados a la t\u00edpica evaluaci\u00f3n del rendimiento:<\/p>\n<ol>\n<li>Los desarrolladores suelen probar las aplicaciones en ordenadores de gama alta conectados a una red r\u00e1pida. DevTools puede emular dispositivos m\u00e1s lentos, pero no siempre mostrar\u00e1 los problemas del mundo real cuando la mayor\u00eda de los clientes utilizan un m\u00f3vil de hace m\u00e1s de dos a\u00f1os conectado al WiFi del aeropuerto.<\/li>\n<li>Las opciones de terceros, como <a href=\"https:\/\/kinsta.com\/es\/blog\/como-usar-google-analytics\/\">Google Analytics<\/a>, suelen estar bloqueadas, lo que da lugar a resultados y suposiciones sesgadas. Tambi\u00e9n puedes encontrarte con implicaciones de privacidad en algunos pa\u00edses.<\/li>\n<li>La API de rendimiento puede medir con precisi\u00f3n varias m\u00e9tricas mejor que m\u00e9todos como <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Date\"><code>Date()<\/code><\/a>.<\/li>\n<\/ol>\n<p><br \/>\nLas siguientes secciones describen las formas en que puedes utilizar la API de Rendimiento. Se recomienda tener algunos <a href=\"https:\/\/kinsta.com\/es\/secciones\/tutoriales-javascript\/\">conocimientos de JavaScript<\/a> y de <a href=\"https:\/\/kinsta.com\/es\/blog\/prueba-de-velocidad\/\">m\u00e9tricas de carga de p\u00e1ginas<\/a>.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Disponibilidad de la API de Rendimiento<\/h2>\n<p>La mayor\u00eda de los navegadores actuales son compatibles con la API de rendimiento, incluidos IE10 e IE11 (incluso IE9 tiene una compatibilidad limitada). Puedes detectar la presencia de la API utilizando:<\/p>\n<pre><code>if ('performance' in window) {\n  \/\/ use Performance API\n}<\/code><\/pre>\n<p>No es posible rellenar completamente la API, as\u00ed que ten cuidado con los navegadores que faltan. Si el 90% de tus usuarios navegan felizmente con Internet Explorer 8, s\u00f3lo estar\u00edas midiendo el 10% de los clientes con aplicaciones m\u00e1s potentes.<\/p>\n<p>La API puede utilizarse en <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Web_Workers_API\/Using_web_workers\">Web Workers<\/a>, que proporcionan una forma de ejecutar c\u00e1lculos complejos en un hilo de fondo sin detener las operaciones del navegador.<\/p>\n<p>La mayor\u00eda de los m\u00e9todos de la API pueden utilizarse en Node.js del lado del servidor con el <a href=\"https:\/\/nodejs.org\/dist\/latest\/docs\/api\/perf_hooks.html\">m\u00f3dulo perf_hooks<\/a> est\u00e1ndar:<\/p>\n<pre><code>\/\/ Node.js performance\nimport { performance } from 'node:perf_hooks';\n\/\/ or in Common JS: const { performance } = require('node:perf_hooks');\n\nconsole.log( performance.now() );<\/code><\/pre>\n<p>Deno proporciona la <a href=\"https:\/\/doc.deno.land\/deno\/stable\/~\/Performance\">API de Rendimiento<\/a> est\u00e1ndar:<\/p>\n<pre><code>\/\/ Deno performance\nconsole.log( performance.now() );<\/code><\/pre>\n<p>Necesitar\u00e1s ejecutar scripts con el permiso <code>--allow-hrtime<\/code> para habilitar la medici\u00f3n del tiempo de alta resoluci\u00f3n:<\/p>\n<pre><code>deno run --allow-hrtime index.js<\/code><\/pre>\n<p>El rendimiento del lado del servidor suele ser m\u00e1s f\u00e1cil de evaluar y gestionar porque depende de la carga, las CPU, la RAM, los discos duros y los <a href=\"https:\/\/kinsta.com\/es\/blog\/espacio-en-disco\/\">l\u00edmites del cloud services<\/a>. Las actualizaciones de hardware o las opciones de gesti\u00f3n de procesos como <a href=\"https:\/\/pm2.keymetrics.io\/\">PM2<\/a>, <a href=\"https:\/\/nodejs.org\/api\/cluster.html\">clustering<\/a> y <a href=\"https:\/\/kubernetes.io\/\">Kubernetes<\/a> pueden ser m\u00e1s eficaces que la refactorizaci\u00f3n del c\u00f3digo.<\/p>\n<p>Por esta raz\u00f3n, las siguientes secciones se centran en el rendimiento del lado del cliente.<\/p>\n<h2>Medici\u00f3n Personalizada del Rendimiento<\/h2>\n<p>La API de Rendimiento puede utilizarse para cronometrar la velocidad de ejecuci\u00f3n de las funciones de tu aplicaci\u00f3n. Es posible que hayas utilizado o encontrado funciones de cronometraje utilizando <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Date\"><code>Date()<\/code><\/a>:<\/p>\n<pre><code>const timeStart = new Date();\nrunMyCode();\nconst timeTaken = new Date() - timeStart;\n\nconsole.log(`runMyCode() executed in ${ timeTaken }ms`);<\/code><\/pre>\n<p>La API de rendimiento ofrece dos ventajas principales:<\/p>\n<ol>\n<li><strong>Mejor precisi\u00f3n: <\/strong><code>Date()<\/code> mide al milisegundo m\u00e1s cercano, pero la API de rendimiento puede medir fracciones de milisegundo (dependiendo del navegador).<\/li>\n<li><strong>Mayor fiabilidad:<\/strong> El usuario o el sistema operativo pueden cambiar la hora del sistema, por lo que las m\u00e9tricas basadas en <code>Date()<\/code> no siempre ser\u00e1n precisas. Esto significa que \u00a1tus funciones pueden parecer especialmente lentas cuando los relojes se adelantan!<\/li>\n<\/ol>\n<p>El equivalente a <code>Date()<\/code> es <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance\/now\"><code>performance.now()<\/code><\/a> que devuelve una marca de tiempo de alta resoluci\u00f3n que se pone a cero cuando se inicia el proceso responsable de crear el documento (la p\u00e1gina se ha cargado):<\/p>\n<pre><code>const timeStart = performance.now();\nrunMyCode();\nconst timeTaken = performance.now() - timeStart;\n\nconsole.log(`runMyCode() executed in ${ timeTaken }ms`);<\/code><\/pre>\n<p>Una propiedad no est\u00e1ndar <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance\/timeOrigin\"><code>performance.timeOrigin<\/code><\/a> tambi\u00e9n puede devolver una marca de tiempo del 1 de enero de 1970, aunque no est\u00e1 disponible en IE y Deno.<\/p>\n<p><code>performance.now()<\/code> se vuelve poco pr\u00e1ctico cuando se realizan algo m\u00e1s de unas pocas mediciones. La API de rendimiento proporciona un b\u00fafer en el que puedes registrar los eventos para su posterior an\u00e1lisis, pasando un nombre de etiqueta a <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance\/mark\"><code>performance.mark()<\/code><\/a>:<\/p>\n<pre><code>performance.mark('start:app');\nperformance.mark('start:init');\n\ninit(); \/\/ run initialization functions\n\nperformance.mark('end:init');\nperformance.mark('start:funcX');\n\nfuncX(); \/\/ run another function\n\nperformance.mark('end:funcX');\nperformance.mark('end:app');<\/code><\/pre>\n<p>Se puede extraer un aaray de todos los objetos de marca en el buffer de Rendimiento utilizando:<\/p>\n<pre><code>const mark = performance.getEntriesByType('mark');<\/code><\/pre>\n<p>Ejemplo de resultado:<\/p>\n<pre><code>[\n\n  {\n    detail: null\n    duration: 0\n    entryType: \"mark\"\n    name: \"start:app\"\n    startTime: 1000\n  },\n  {\n    detail: null\n    duration: 0\n    entryType: \"mark\"\n    name: \"start:init\"\n    startTime: 1001\n  },\n  {\n    detail: null\n    duration: 0\n    entryType: \"mark\"\n    name: \"end:init\"\n    startTime: 1100\n  },\n...\n]<\/code><\/pre>\n<p>El m\u00e9todo <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance\/measure\"><code>performance.measure()<\/code><\/a> calcula el tiempo entre dos marcas y tambi\u00e9n lo almacena en el buffer de Rendimiento. Pasas un nuevo nombre de medida, el nombre de la marca inicial (o null para medir desde la carga de la p\u00e1gina) y el nombre de la marca final (o null para medir hasta la hora actual):<\/p>\n<pre><code>performance.measure('init', 'start:init', 'end:init');<\/code><\/pre>\n<p>Se a\u00f1ade al buffer un <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceMeasure\">objeto PerformanceMeasure<\/a> con el tiempo de duraci\u00f3n calculado. Para obtener este valor, puedes solicitar un array de todas las medidas:<\/p>\n<pre><code>const measure = performance.getEntriesByType('measure');<\/code><\/pre>\n<p>o solicitar una medida por su nombre:<\/p>\n<pre><code>performance.getEntriesByName('init');<\/code><\/pre>\n<p>Ejemplo de resultado:<\/p>\n<pre><code>[\n  {\n    detail: null\n    duration: 99\n    entryType: \"measure\"\n    name: \"init\"\n    startTime: 1001\n  }\n]<\/code><\/pre>\n<h3>Uso del Buffer de Rendimiento<\/h3>\n<p>Adem\u00e1s de las marcas y las medidas, el b\u00fafer de Rendimiento se utiliza para registrar autom\u00e1ticamente el navigation timing, resource timing y paint timing (del que hablaremos m\u00e1s adelante). Puedes obtener un array con todas las entradas del b\u00fafer:<\/p>\n<pre><code>performance.getEntries();<\/code><\/pre>\n<p>Por defecto, la mayor\u00eda de los navegadores proporcionan un b\u00fafer que almacena hasta 150 m\u00e9tricas de recursos. Esto deber\u00eda ser suficiente para la mayor\u00eda de las evaluaciones, pero puedes aumentar o disminuir el l\u00edmite del b\u00fafer si es necesario:<\/p>\n<pre><code>\/\/ record 500 metrics\nperformance.setResourceTimingBufferSize(500);<\/code><\/pre>\n<p>Las marcas se pueden borrar por nombre o puedes especificar un valor vac\u00edo para borrar todas las marcas:<\/p>\n<pre><code>performance.clearMarks('start:init');<\/code><\/pre>\n<p>Del mismo modo, las medidas pueden borrarse por su nombre o con un valor vac\u00edo para borrarlas todas:<\/p>\n<pre><code>performance.clearMeasures();<\/code><\/pre>\n<h3>Monitorizaci\u00f3n de las Actualizaciones del B\u00fafer de Rendimiento<\/h3>\n<p><a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceObserver\"><strong>PerformanceObserver<\/strong><\/a> puede monitorizar los cambios en el buffer de Rendimiento y ejecutar una funci\u00f3n cuando se produzcan eventos espec\u00edficos. La sintaxis te resultar\u00e1 familiar si has utilizado <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/MutationObserver\"><strong>MutationObserver<\/strong><\/a> para responder a las actualizaciones del DOM o <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/IntersectionObserver\"><strong>IntersectionObserver<\/strong><\/a> para detectar cuando los elementos se desplazan en la ventana gr\u00e1fica.<\/p>\n<p>Debes definir una funci\u00f3n observadora con dos par\u00e1metros:<\/p>\n<ol>\n<li>un array de entradas de observadores que se han detectado, y<\/li>\n<li>el objeto observador. Si es necesario, se puede llamar a su m\u00e9todo <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceObserver\/disconnect\"><code>disconnect()<\/code><\/a> para detener el observador.<\/li>\n<\/ol>\n<pre><code>function performanceCallback(list, observer) {\n\n  list.getEntries().forEach(entry =&gt; {\n    console.log(`name    : ${ entry.name }`);\n    console.log(`type    : ${ entry.type }`);\n    console.log(`start   : ${ entry.startTime }`);\n    console.log(`duration: ${ entry.duration }`);\n  });\n\n}<\/code><\/pre>\n<p>La funci\u00f3n se pasa a un nuevo objeto PerformanceObserver. A su m\u00e9todo <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceObserver\/observe\"><code>observe()<\/code><\/a> se le pasa un array de tipos de entrada del b\u00fafer de Rendimiento para observar:<\/p>\n<pre><code>let observer = new PerformanceObserver( performanceCallback );\nobserver.observe({ entryTypes: ['mark', 'measure'] });<\/code><\/pre>\n<p>En este ejemplo, al a\u00f1adir una nueva marca o medida se ejecuta la funci\u00f3n <code>performanceCallback()<\/code>. Aunque aqu\u00ed s\u00f3lo se registran los mensajes, podr\u00eda utilizarse para activar una carga de datos o realizar otros c\u00e1lculos.<\/p>\n<h3>Medir el Paint Performance<\/h3>\n<p>La API de Paint Timing s\u00f3lo est\u00e1 disponible en JavaScript del lado del cliente y registra autom\u00e1ticamente dos m\u00e9tricas que son importantes para <a href=\"https:\/\/kinsta.com\/es\/blog\/core-web-vitals\/\">Core Web Vitals<\/a>:<\/p>\n<ol>\n<li><strong>first-paint:<\/strong> El navegador ha comenzado a dibujar la p\u00e1gina.<\/li>\n<li><strong>first-contentful-paint:<\/strong> El navegador ha pintado el primer elemento significativo del contenido del DOM, como un encabezado o una imagen.<\/li>\n<\/ol>\n<p>\u00c9stas pueden extraerse del buffer de Rendimiento a un array:<\/p>\n<pre><code>const paintTimes = performance.getEntriesByType('paint');<\/code><\/pre>\n<p>Ten cuidado con ejecutar esto antes de que la p\u00e1gina se haya cargado completamente; los valores no estar\u00e1n listos. Espera al evento <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Window\/load_event\"><code>window.load<\/code><\/a> o utiliza un <a href=\"https:\/\/docs.google.com\/document\/d\/1bO-CdqPOUVV0xaZkQMu5f5eHYxmV1RfoYVwPHXDRvyg\/edit#heading=h.y0ea1dh8xmx\"><code>PerformanceObserver<\/code><\/a> para controlar <code>paint<\/code> entryTypes.<\/p>\n<p>Ejemplo de resultado:<\/p>\n<pre><code>[\n  {\n    \"name\": \"first-paint\",\n    \"entryType\": \"paint\",\n    \"startTime\": 812,\n    \"duration\": 0\n  },\n  {\n    \"name\": \"first-contentful-paint\",\n    \"entryType\": \"paint\",\n    \"startTime\": 856,\n    \"duration\": 0\n  }\n]<\/code><\/pre>\n<p>Una first-paint lenta suele estar causada por un CSS o un JavaScript que bloquea la renderizaci\u00f3n. El desfase con respecto a first-contentful-paint puede ser grande si el navegador tiene que descargar una imagen de gran tama\u00f1o o <a href=\"https:\/\/kinsta.com\/es\/blog\/eliminar-bloqueadores-de-visualizacion\/\">renderizar elementos complejos<\/a>.<\/p>\n<h2>Medici\u00f3n del Rendimiento de los Recursos<\/h2>\n<p>Los tiempos de red de recursos como im\u00e1genes, hojas de estilo y archivos JavaScript se registran autom\u00e1ticamente en el buffer de rendimiento. Aunque es poco lo que puedes hacer para resolver los problemas de velocidad de la red (aparte de reducir el tama\u00f1o de los archivos), puede ayudar a poner de manifiesto los problemas con los activos m\u00e1s grandes, las respuestas Ajax lentas o los scripts de terceros que funcionan mal.<\/p>\n<p>Se puede extraer un array de m\u00e9tricas <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceResourceTiming\">PerformanceResourceTiming<\/a> del b\u00fafer utilizando:<\/p>\n<pre><code>const resources = performance.getEntriesByType('resource');<\/code><\/pre>\n<p>Alternativamente, puedes obtener las m\u00e9tricas de un activo pasando su URL completa:<\/p>\n<pre><code>const resource = performance.getEntriesByName('https:\/\/test.com\/script.js');<\/code><\/pre>\n<p>Ejemplo de resultado:<\/p>\n<pre><code>[\n  {\n    connectEnd: 195,\n    connectStart: 195,\n    decodedBodySize: 0,\n    domainLookupEnd: 195,\n    domainLookupStart: 195,\n    duration: 2,\n    encodedBodySize: 0,\n    entryType: \"resource\",\n    fetchStart: 195,\n    initiatorType: \"script\",\n    name: \"https:\/\/test.com\/script.js\",\n    nextHopProtocol: \"h3\",\n    redirectEnd: 0,\n    redirectStart: 0,\n    requestStart: 195,\n    responseEnd: 197,\n    responseStart: 197,\n    secureConnectionStart: 195,\n    serverTiming: [],\n    startTime: 195,\n    transferSize: 0,\n    workerStart: 195\n  }\n]<\/code><\/pre>\n<p>Se pueden examinar las siguientes propiedades:<\/p>\n<ul>\n<li><strong>name<\/strong>: La URL del recurso<\/li>\n<li><strong>entryType<\/strong>: \u00abrecurso\u00bb<\/li>\n<li><strong>initiatorType<\/strong>: C\u00f3mo se inici\u00f3 el recurso, como \u00abscript\u00bb o \u00abenlace\u00bb<\/li>\n<li><strong>serverTiming<\/strong>: Un array de <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceServerTiming\"><code>PerformanceServerTiming<\/code><\/a> objetos pasados por el servidor en la <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/HTTP\/Headers\/Server-Timing\">cabecera HTTP Server-Timing<\/a> (tu aplicaci\u00f3n del lado del servidor podr\u00eda enviar m\u00e9tricas al cliente para su posterior an\u00e1lisis)<\/li>\n<li><strong>startTime<\/strong>: Fecha de inicio de la b\u00fasqueda<\/li>\n<li><strong>nextHopProtocol<\/strong>: Protocolo de red utilizado<\/li>\n<li><strong>workerStart<\/strong>: Marca de tiempo antes de iniciar un Progressive Web App Service Worker (0 si la solicitud no es interceptada por un Service Worker)<\/li>\n<li><strong>redirectStart<\/strong>: Marca de tiempo cuando se inici\u00f3 una redirecci\u00f3n<\/li>\n<li><strong>redirectEnd<\/strong>: Marca de tiempo despu\u00e9s del \u00faltimo byte de la \u00faltima respuesta de redirecci\u00f3n<\/li>\n<li><strong>fetchStart<\/strong>: Marca de tiempo antes de la obtenci\u00f3n del recurso<\/li>\n<li><strong>domainLookupStart<\/strong>: Marca de tiempo antes de una b\u00fasqueda de DNS<\/li>\n<li><strong>domainLookupEnd<\/strong>: Marca de tiempo despu\u00e9s de la b\u00fasqueda de DNS<\/li>\n<li><strong>connectStart<\/strong>: Marca de tiempo antes de establecer una conexi\u00f3n con el servidor<\/li>\n<li><strong>connectEnd<\/strong>: Marca de tiempo despu\u00e9s de establecer una conexi\u00f3n con el servidor<\/li>\n<li><strong>secureConnectionStart<\/strong>: Marca de tiempo antes del handshake SSL<\/li>\n<li><strong>requestStart<\/strong>: Marca de tiempo antes de que el navegador solicite el recurso<\/li>\n<li><strong>responseStart<\/strong>: Marca de tiempo cuando el navegador recibe el primer byte de datos<\/li>\n<li><strong>responseEnd<\/strong>: Marca de tiempo despu\u00e9s de recibir el \u00faltimo byte o de cerrar la conexi\u00f3n<\/li>\n<li><strong>duration<\/strong>: La diferencia entre startTime y responseEnd<\/li>\n<li><strong>transferSize<\/strong>: El tama\u00f1o del recurso en bytes, incluyendo la cabecera y el cuerpo comprimido<\/li>\n<li><strong>encodedBodySize<\/strong>: El cuerpo del recurso en bytes antes de la descompresi\u00f3n<\/li>\n<li><strong>decodedBodySize<\/strong>: El cuerpo del recurso en bytes despu\u00e9s de la descompresi\u00f3n<\/li>\n<\/ul>\n<p>Este script de ejemplo recupera todas las peticiones Ajax iniciadas por la <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Fetch_API\">API Fetch<\/a> y devuelve el tama\u00f1o y la duraci\u00f3n total de la transferencia:<\/p>\n<pre><code>const fetchAll = performance.getEntriesByType('resource')\n  .filter( r =&gt; r.initiatorType === 'fetch')\n  .reduce( (sum, current) =&gt; {\n    return {\n      transferSize: sum.transferSize += current.transferSize,\n      duration: sum.duration += current.duration\n    }\n  },\n  { transferSize: 0, duration: 0 }\n);<\/code><\/pre>\n<h2>Medici\u00f3n del Rendimiento de la Navegaci\u00f3n<\/h2>\n<p>Los tiempos de red para la descarga de la p\u00e1gina anterior y la carga de la p\u00e1gina actual se registran autom\u00e1ticamente en el buffer de Rendimiento como un \u00fanico <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceNavigationTiming\"><code>PerformanceNavigationTiming<\/code><\/a> objeto.<\/p>\n<p>Extr\u00e1elo a un array utilizando:<\/p>\n<pre><code>const pageTime = performance.getEntriesByType('navigation');<\/code><\/pre>\n<p>&#8230;o pasando la URL de la p\u00e1gina a <code>.getEntriesByName()<\/code>:<\/p>\n<pre><code>const pageTiming = performance.getEntriesByName(window.location);<\/code><\/pre>\n<p>Las m\u00e9tricas son id\u00e9nticas a las de los <a href=\"https:\/\/docs.google.com\/document\/d\/1bO-CdqPOUVV0xaZkQMu5f5eHYxmV1RfoYVwPHXDRvyg\/edit#heading=h.k94hcflv9m3o\">recursos<\/a>, pero tambi\u00e9n incluyen valores espec\u00edficos de la p\u00e1gina:<\/p>\n<ul>\n<li><strong>entryType<\/strong>: Por ejemplo, \u00abnavigation\u00bb<\/li>\n<li><strong>type<\/strong>: Ya sea \u00abnavigate\u00bb, \u00abreload\u00bb, \u00abback_forward\u00bb o \u00abprerender\u00bb<\/li>\n<li><strong>redirectCount<\/strong>: El n\u00famero de redirecciones<\/li>\n<li><strong>unloadEventStart<\/strong>: Marca de tiempo antes del evento de descarga del documento anterior<\/li>\n<li><strong>unloadEventEnd<\/strong>: Marca de tiempo despu\u00e9s del evento de descarga del documento anterior<\/li>\n<li><strong>domInteractive<\/strong>: Marca de tiempo cuando el navegador ha analizado el HTML y construido el DOM<\/li>\n<li><strong>domContentLoadedEventStart<\/strong>: Marca de tiempo antes de que se dispare el evento DOMContentLoaded del documento<\/li>\n<li><strong>domContentLoadedEventEnd<\/strong>: Marca de tiempo despu\u00e9s de que finalice el evento DOMContentLoaded del documento<\/li>\n<li><strong>domComplete<\/strong>: Marca de tiempo despu\u00e9s de que la construcci\u00f3n del DOM y los eventos DOMContentLoaded hayan finalizado<\/li>\n<li><strong>loadEventStart<\/strong>: Marca de tiempo antes de que se dispare el evento de carga de la p\u00e1gina<\/li>\n<li><strong>loadEventEnd<\/strong>: Marca de tiempo despu\u00e9s del evento de carga de la p\u00e1gina y de que todos los activos est\u00e9n disponibles<\/li>\n<\/ul>\n<p>Los problemas t\u00edpicos son:<\/p>\n<ul>\n<li>Un gran retraso entre <strong>unloadEventEnd<\/strong> y <strong>domInteractive<\/strong>. Esto podr\u00eda indicar una respuesta lenta del servidor.<\/li>\n<li>Un gran retraso entre <strong>domContentLoadedEventStart<\/strong> y <strong>domComplete<\/strong>. Esto podr\u00eda indicar que los scripts de inicio de la p\u00e1gina son demasiado lentos.<\/li>\n<li>Un gran retraso entre <strong>domComplete<\/strong> y <strong>loadEventEnd<\/strong>. Esto podr\u00eda indicar que la p\u00e1gina tiene demasiados activos o que varios est\u00e1n tardando demasiado en cargarse.<\/li>\n<\/ul>\n<h2>Registro y An\u00e1lisis del Rendimiento<\/h2>\n<p>La API de rendimiento te permite recopilar datos de uso del mundo real y subirlos a un servidor para su posterior an\u00e1lisis. <i>Podr\u00edas <\/i>utilizar un <a href=\"https:\/\/kinsta.com\/es\/blog\/alternativas-de-google-analytics\/\">servicio de terceros, como Google Analytics<\/a>, para almacenar los datos, pero existe el riesgo de que el script de terceros se bloquee o introduzca nuevos problemas de rendimiento. Tu propia soluci\u00f3n puede adaptarse a tus necesidades para garantizar que la monitorizaci\u00f3n no afecte a otras funciones.<\/p>\n<p>Ten cuidado con las situaciones en las que no se pueden determinar las estad\u00edsticas, quiz\u00e1s porque los usuarios tienen navegadores antiguos, bloquean JavaScript o est\u00e1n detr\u00e1s de un proxy corporativo. Entender qu\u00e9 datos faltan puede ser m\u00e1s fruct\u00edfero que hacer suposiciones basadas en informaci\u00f3n incompleta.<\/p>\n<p>Lo ideal es que tus scripts de an\u00e1lisis no afecten negativamente al rendimiento al ejecutar c\u00e1lculos complejos o cargar grandes cantidades de datos. Considera la posibilidad de utilizar web workers y minimizar el uso de llamadas sincr\u00f3nicas a localStorage. Siempre es posible procesar por lotes los datos en bruto m\u00e1s tarde.<\/p>\n<p>Por \u00faltimo, ten cuidado con los valores at\u00edpicos, como dispositivos y conexiones muy r\u00e1pidos o muy lentos, que afectan negativamente a las estad\u00edsticas. Por ejemplo, si nueve usuarios cargan una p\u00e1gina en dos segundos, pero el d\u00e9cimo experimenta una descarga de 60 segundos, la latencia media se eleva a casi 8 segundos. Una m\u00e9trica m\u00e1s realista es la cifra media (2 segundos) o el percentil 90 (9 de cada 10 usuarios experimentan un tiempo de carga de 2 segundos o menos).<\/p>\n<h2>Resumen<\/h2>\n<p><a href=\"https:\/\/kinsta.com\/es\/blog\/monitoreo-rendimiento-aplicaciones\/\">El rendimiento de la web<\/a> sigue siendo un <a href=\"https:\/\/kinsta.com\/es\/blog\/desarrollador-de-frontend\/\">factor cr\u00edtico para los desarrolladores<\/a>. Los usuarios esperan que los sitios y las aplicaciones sean responsivos en la mayor\u00eda de los dispositivos. La optimizaci\u00f3n de los motores de b\u00fasqueda tambi\u00e9n puede verse afectada, ya que los <a href=\"https:\/\/kinsta.com\/es\/blog\/core-web-vitals\/\">sitios m\u00e1s lentos baja de posici\u00f3n en Google<\/a>.<br \/>\n<br \/>\nHay un mont\u00f3n de <a href=\"https:\/\/kinsta.com\/es\/blog\/monitoreo-rendimiento-aplicaciones\/\">herramientas de monitorizaci\u00f3n del rendimiento<\/a>, pero la mayor\u00eda eval\u00faan la velocidad de ejecuci\u00f3n del lado del servidor o utilizan un n\u00famero limitado de clientes capaces de juzgar el rendimiento del navegador. La API de rendimiento proporciona una forma de cotejar las m\u00e9tricas reales de los usuarios que no ser\u00eda posible calcular de ninguna otra forma.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La API de Rendimiento mide la capacidad de respuesta de tu aplicaci\u00f3n web en tiempo real en dispositivos con usuarios reales y conexiones de red. Puede &#8230;<\/p>\n","protected":false},"author":188,"featured_media":56206,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[725,814,867,847,407,850],"topic":[1270,1297],"class_list":["post-56205","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-api","tag-browsers","tag-javascript","tag-node-js","tag-performance","tag-performance-testing","topic-api","topic-tutoriales-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introducci\u00f3n a la API de Rendimiento<\/title>\n<meta name=\"description\" content=\"Aprende a medir la capacidad de respuesta de tu aplicaci\u00f3n web en tiempo real en dispositivos de usuarios reales y conexiones de red utilizando la API de rendimiento.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/performance-api\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducci\u00f3n a la API de Rendimiento\" \/>\n<meta property=\"og:description\" content=\"Aprende a medir la capacidad de respuesta de tu aplicaci\u00f3n web en tiempo real en dispositivos de usuarios reales y conexiones de red utilizando la API de rendimiento.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/performance-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-11T12:29:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-20T10:01:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/performance-api.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Craig Buckler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprende a medir la capacidad de respuesta de tu aplicaci\u00f3n web en tiempo real en dispositivos de usuarios reales y conexiones de red utilizando la API de rendimiento.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/performance-api.png\" \/>\n<meta name=\"twitter:creator\" content=\"@craigbuckler\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Craig Buckler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/performance-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/performance-api\/\"},\"author\":{\"name\":\"Craig Buckler\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/715d986404b06691ab3014e06596908e\"},\"headline\":\"Introducci\u00f3n a la API de Rendimiento\",\"datePublished\":\"2022-08-11T12:29:15+00:00\",\"dateModified\":\"2025-01-20T10:01:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/performance-api\/\"},\"wordCount\":2421,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/performance-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/performance-api.png\",\"keywords\":[\"API\",\"browsers\",\"JavaScript\",\"node.js\",\"performance\",\"performance testing\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/performance-api\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/performance-api\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/performance-api\/\",\"name\":\"Introducci\u00f3n a la API de Rendimiento\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/performance-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/performance-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/performance-api.png\",\"datePublished\":\"2022-08-11T12:29:15+00:00\",\"dateModified\":\"2025-01-20T10:01:15+00:00\",\"description\":\"Aprende a medir la capacidad de respuesta de tu aplicaci\u00f3n web en tiempo real en dispositivos de usuarios reales y conexiones de red utilizando la API de rendimiento.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/performance-api\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/performance-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/performance-api\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/performance-api.png\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/performance-api.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/performance-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutoriales JavaScript\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/tutoriales-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Introducci\u00f3n a la API de Rendimiento\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/715d986404b06691ab3014e06596908e\",\"name\":\"Craig Buckler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g\",\"caption\":\"Craig Buckler\"},\"description\":\"Freelance UK web developer, writer, and speaker. Has been around a long time and rants about standards and performance.\",\"sameAs\":[\"https:\/\/craigbuckler.com\/\",\"https:\/\/www.linkedin.com\/in\/craigbuckler\",\"https:\/\/x.com\/craigbuckler\",\"https:\/\/www.youtube.com\/channel\/UCQwdl5oBTWGhifS6bRGADMQ\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/craigbuckler\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Introducci\u00f3n a la API de Rendimiento","description":"Aprende a medir la capacidad de respuesta de tu aplicaci\u00f3n web en tiempo real en dispositivos de usuarios reales y conexiones de red utilizando la API de rendimiento.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/performance-api\/","og_locale":"es_ES","og_type":"article","og_title":"Introducci\u00f3n a la API de Rendimiento","og_description":"Aprende a medir la capacidad de respuesta de tu aplicaci\u00f3n web en tiempo real en dispositivos de usuarios reales y conexiones de red utilizando la API de rendimiento.","og_url":"https:\/\/kinsta.com\/es\/blog\/performance-api\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2022-08-11T12:29:15+00:00","article_modified_time":"2025-01-20T10:01:15+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/performance-api.png","type":"image\/png"}],"author":"Craig Buckler","twitter_card":"summary_large_image","twitter_description":"Aprende a medir la capacidad de respuesta de tu aplicaci\u00f3n web en tiempo real en dispositivos de usuarios reales y conexiones de red utilizando la API de rendimiento.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/performance-api.png","twitter_creator":"@craigbuckler","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Craig Buckler","Tiempo de lectura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/performance-api\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/performance-api\/"},"author":{"name":"Craig Buckler","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/715d986404b06691ab3014e06596908e"},"headline":"Introducci\u00f3n a la API de Rendimiento","datePublished":"2022-08-11T12:29:15+00:00","dateModified":"2025-01-20T10:01:15+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/performance-api\/"},"wordCount":2421,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/performance-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/performance-api.png","keywords":["API","browsers","JavaScript","node.js","performance","performance testing"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/performance-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/performance-api\/","url":"https:\/\/kinsta.com\/es\/blog\/performance-api\/","name":"Introducci\u00f3n a la API de Rendimiento","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/performance-api\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/performance-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/performance-api.png","datePublished":"2022-08-11T12:29:15+00:00","dateModified":"2025-01-20T10:01:15+00:00","description":"Aprende a medir la capacidad de respuesta de tu aplicaci\u00f3n web en tiempo real en dispositivos de usuarios reales y conexiones de red utilizando la API de rendimiento.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/performance-api\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/performance-api\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/performance-api\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/performance-api.png","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/08\/performance-api.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/performance-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Tutoriales JavaScript","item":"https:\/\/kinsta.com\/es\/secciones\/tutoriales-javascript\/"},{"@type":"ListItem","position":3,"name":"Introducci\u00f3n a la API de Rendimiento"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/715d986404b06691ab3014e06596908e","name":"Craig Buckler","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g","caption":"Craig Buckler"},"description":"Freelance UK web developer, writer, and speaker. Has been around a long time and rants about standards and performance.","sameAs":["https:\/\/craigbuckler.com\/","https:\/\/www.linkedin.com\/in\/craigbuckler","https:\/\/x.com\/craigbuckler","https:\/\/www.youtube.com\/channel\/UCQwdl5oBTWGhifS6bRGADMQ"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/craigbuckler\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/56205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/188"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=56205"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/56205\/revisions"}],"predecessor-version":[{"id":56340,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/56205\/revisions\/56340"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/56205\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/56205\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/56205\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/56205\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/56205\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/56205\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/56205\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/56205\/translations\/jp"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/56205\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/56206"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=56205"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=56205"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=56205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}