{"id":52072,"date":"2022-08-11T09:29:22","date_gmt":"2022-08-11T12:29:22","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=52072&#038;preview=true&#038;preview_id=52072"},"modified":"2023-08-21T10:11:17","modified_gmt":"2023-08-21T13:11:17","slug":"api-de-desempenho","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/","title":{"rendered":"Uma Introdu\u00e7\u00e3o ao API de Desempenho"},"content":{"rendered":"<p>A <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance_API\">API de desempenho<\/a> mede a capacidade de resposta da sua aplica\u00e7\u00e3o web ao vivo em dispositivos reais de usu\u00e1rio e conex\u00f5es de rede. Ela pode ajudar a identificar gargalos no seu c\u00f3digo do lado do cliente e do lado do servidor:<\/p>\n<ul>\n<li><strong>user timing:<\/strong> Medi\u00e7\u00e3o personalizada do desempenho da <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-javascript\/\">fun\u00e7\u00e3o JavaScript<\/a> do lado do cliente<\/li>\n<li><strong>paint timing:<\/strong> M\u00e9tricas de renderiza\u00e7\u00e3o do navegador<\/li>\n<li><strong>resource timing:<\/strong> Carregamento do desempenho dos ativos e chamadas Ajax<\/li>\n<li><strong>navigation timing:<\/strong> M\u00e9tricas de carregamento de p\u00e1gina, incluindo redirecionamentos, consultas DNS, prontid\u00e3o DOM, e mais<\/li>\n<\/ul>\n<p>A API aborda v\u00e1rios problemas associados com a avalia\u00e7\u00e3o de desempenho t\u00edpica:<\/p>\n<ol>\n<li>Os desenvolvedores frequentemente testam aplicativos em PCs high-end conectados a uma rede r\u00e1pida. O DevTools pode emular dispositivos mais lentos, mas nem sempre destacar\u00e1 problemas do mundo real quando a maioria dos clientes est\u00e1 rodando um celular com dois anos de idade conectado ao WiFi do aeroporto.<\/li>\n<li>Op\u00e7\u00f5es de terceiros, como o <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-usar-o-google-analytics\/\">Google Analytics<\/a>, s\u00e3o frequentemente bloqueadas, levando a resultados e suposi\u00e7\u00f5es distorcidas. Voc\u00ea tamb\u00e9m pode encontrar implica\u00e7\u00f5es de privacidade em alguns pa\u00edses.<\/li>\n<li>A API de desempenho pode medir com precis\u00e3o v\u00e1rias m\u00e9tricas melhor do que m\u00e9todos tais como <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Date\"><code>Date()<\/code><\/a>.<\/li>\n<\/ol>\n<p><br \/>\nAs se\u00e7\u00f5es seguintes descrevem como voc\u00ea pode usar a API de desempenho. Alguns <a href=\"https:\/\/kinsta.com\/pt\/topicos\/tutoriais-javascript\/\">conhecimentos de JavaScript<\/a> e <a href=\"https:\/\/kinsta.com\/pt\/blog\/teste-de-velocidade-do-seu-site\/\">m\u00e9tricas de carregamento de p\u00e1gina<\/a> s\u00e3o recomendados.<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>Disponibilidade da API de desempenho<\/h2>\n<p>A maioria dos navegadores modernos suporta a Performance API &#8211; incluindo o IE10 e IE11 (at\u00e9 o IE9 tem suporte limitado). Voc\u00ea pode detectar a presen\u00e7a da API usando:<\/p>\n<pre><code>if ('performance' in window) {\n  \/\/ use Performance API\n}<\/code><\/pre>\n<p>N\u00e3o \u00e9 poss\u00edvel efetuar um Polyfill completo do API, portanto, tenha cuidado com a falta de navegadores. Se 90% dos seus usu\u00e1rios est\u00e3o navegando com o Internet Explorer 8, voc\u00ea estaria medindo apenas 10% dos clientes com aplicativos mais capazes.<\/p>\n<p>A API pode ser usada em <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Web_Workers_API\/Using_web_workers\" target=\"_blank\" rel=\"noopener noreferrer\">Web Worker<\/a>, que fornecem uma maneira de executar c\u00e1lculos complexos em uma linha de fundo sem interromper as opera\u00e7\u00f5es do navegador.<\/p>\n<p>A maioria dos m\u00e9todos API podem ser usados no server-side Node.js com o <a href=\"https:\/\/nodejs.org\/dist\/latest\/docs\/api\/perf_hooks.html\">m\u00f3dulo perf_hooks<\/a> padr\u00e3o:<\/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>A Deno fornece a <a href=\"https:\/\/doc.deno.land\/deno\/stable\/~\/Performance\">API de desempenho<\/a> padr\u00e3o:<\/p>\n<pre><code>\/\/ Deno performance\nconsole.log( performance.now() );<\/code><\/pre>\n<p>Voc\u00ea precisar\u00e1 executar scripts com a permiss\u00e3o <code>--allow-hrtime<\/code> para permitir a medi\u00e7\u00e3o de tempo em alta resolu\u00e7\u00e3o:<\/p>\n<pre><code>deno run --allow-hrtime index.js<\/code><\/pre>\n<p>O desempenho do lado do servidor geralmente \u00e9 mais f\u00e1cil de avaliar e gerenciar porque depende da carga, CPUs, RAM, discos r\u00edgidos e <a href=\"https:\/\/kinsta.com\/pt\/blog\/espaco-em-disco-o-seu-plano-de-hospedagem-precisa\/\">limites dos servi\u00e7os em nuvem<\/a>. Atualiza\u00e7\u00f5es de hardware ou op\u00e7\u00f5es de gerenciamento de processos como <a href=\"https:\/\/pm2.keymetrics.io\/\">PM2<\/a>, <a href=\"https:\/\/nodejs.org\/api\/cluster.html\">clustering<\/a> e <a href=\"https:\/\/kubernetes.io\/\">Kubernetes<\/a> podem ser mais eficazes do que o c\u00f3digo de refatora\u00e7\u00e3o.<\/p>\n<p>As se\u00e7\u00f5es seguintes se concentram no desempenho do lado do cliente por esta raz\u00e3o.<\/p>\n<h2>Medi\u00e7\u00e3o de desempenho personalizado<\/h2>\n<p>A API de desempenho pode ser usada para cronometrar a velocidade de execu\u00e7\u00e3o das fun\u00e7\u00f5es da sua aplica\u00e7\u00e3o. Voc\u00ea pode ter usado ou encontrado fun\u00e7\u00f5es de cronometragem usando <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>O API de desempenho oferece dois benef\u00edcios principais:<\/p>\n<ol>\n<li><strong>Melhor precis\u00e3o:<\/strong> <code>Date()<\/code> mede at\u00e9 o milissegundo mais pr\u00f3ximo, mas o API de desempenho pode medir fra\u00e7\u00f5es de um milissegundo (dependendo do navegador).<\/li>\n<li><strong>Melhor confiabilidade:<\/strong> O usu\u00e1rio ou sistema operacional pode mudar o tempo do sistema de forma que as m\u00e9tricas baseadas em <code>Date()<\/code> nem sempre ser\u00e3o precisas. Isto significa que suas fun\u00e7\u00f5es podem parecer particularmente lentas quando os rel\u00f3gios avan\u00e7am!<\/li>\n<\/ol>\n<p>O equivalente em <code>Date()<\/code> \u00e9 <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance\/now\"><code>performance.now()<\/code><\/a> que retorna um carimbo de tempo de alta resolu\u00e7\u00e3o que \u00e9 colocado em zero quando o processo respons\u00e1vel pela cria\u00e7\u00e3o do documento come\u00e7a (a p\u00e1gina foi carregada):<\/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>Um n\u00e3o-padr\u00e3o <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance\/timeOrigin\"><code>performance.timeOrigin<\/code><\/a> a propriedade tamb\u00e9m pode devolver um carimbo de data\/hora a partir de 1 de janeiro de 1970, embora isso n\u00e3o esteja dispon\u00edvel no IE e Deno.<\/p>\n<p><code>performance.now()<\/code> torna-se impratic\u00e1vel quando se faz mais do que algumas medidas. A API de desempenho fornece um buffer onde voc\u00ea pode gravar o evento para an\u00e1lise posterior, passando um nome de etiqueta para <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>Um conjunto de todos os objetos de marca\u00e7\u00e3o no buffer de performance pode ser extra\u00eddo usando:<\/p>\n<pre><code>const mark = performance.getEntriesByType('mark');<\/code><\/pre>\n<p>Exemplo 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>O <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Performance\/measure\"><code>performance.measure()<\/code><\/a> calcula o tempo entre duas marcas e tamb\u00e9m o armazena no buffer de desempenho. Voc\u00ea passa um novo nome de medida, o nome da marca inicial (ou nulo para medir a partir do carregamento da p\u00e1gina), e o nome da marca final (ou nulo para medir a hora atual):<\/p>\n<pre><code>performance.measure('init', 'start:init', 'end:init');<\/code><\/pre>\n<p>Um <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceMeasure\">objeto PerformanceMeasure<\/a> \u00e9 anexado ao buffer com a dura\u00e7\u00e3o de tempo calculada. Para obter este valor, voc\u00ea pode solicitar um array de todas as medidas:<\/p>\n<pre><code>const measure = performance.getEntriesByType('measure');<\/code><\/pre>\n<p>ou solicitar uma medida pelo seu nome:<\/p>\n<pre><code>performance.getEntriesByName('init');<\/code><\/pre>\n<p>Exemplo 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>Usando o buffer de desempenho<\/h3>\n<p>Al\u00e9m de marcas e medidas, o buffer de desempenho \u00e9 usado para registrar automaticamente o navigation timing, o resource timing e o paint timing (que discutiremos mais tarde). Voc\u00ea pode obter um array de todas as entradas no buffer:<\/p>\n<pre><code>performance.getEntries();<\/code><\/pre>\n<p>Por padr\u00e3o, a maioria dos navegadores fornece um buffer que armazena at\u00e9 150 m\u00e9tricas de recursos. Isto deve ser suficiente para a maioria das avalia\u00e7\u00f5es, mas voc\u00ea pode aumentar ou diminuir o limite de buffer, se necess\u00e1rio:<\/p>\n<pre><code>\/\/ record 500 metrics\nperformance.setResourceTimingBufferSize(500);<\/code><\/pre>\n<p>As marcas podem ser apagadas pelo nome ou voc\u00ea pode especificar um valor vazio para apagar todas as marcas:<\/p>\n<pre><code>performance.clearMarks('start:init');<\/code><\/pre>\n<p>Da mesma forma, as medidas podem ser limpas pelo nome ou por um valor vazio para limpar tudo:<\/p>\n<pre><code>performance.clearMeasures();<\/code><\/pre>\n<h3>Monitoramento de atualiza\u00e7\u00f5es de buffer de desempenho<\/h3>\n<p>A <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceObserver\"><strong>PerformanceObserver<\/strong><\/a> pode monitorar mudan\u00e7as no buffer de desempenho e executar uma fun\u00e7\u00e3o quando eventos espec\u00edficos ocorrem. A sintaxe ser\u00e1 familiar se voc\u00ea tiver usado <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/MutationObserver\"><strong>MutationObserver<\/strong><\/a> para responder a atualiza\u00e7\u00f5es do DOM ou <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/IntersectionObserver\"><strong>IntersectionObserver<\/strong><\/a> para detectar quando os elementos s\u00e3o rolados para o viewport.<\/p>\n<p>Voc\u00ea deve definir uma fun\u00e7\u00e3o de observador com dois par\u00e2metros:<\/p>\n<ol>\n<li>uma s\u00e9rie de entradas de observadores que foram detectadas, e<\/li>\n<li>o objeto observador. Se necess\u00e1rio, seu <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceObserver\/disconnect\"><code>disconnect()<\/code><\/a> pode ser chamado para parar o 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>A fun\u00e7\u00e3o \u00e9 passada para um novo objeto PerformanceObserver. Seu <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceObserver\/observe\"><code>observe()<\/code><\/a> \u00e9 passado um conjunto de tipos de entrada de buffer de desempenho a serem observados:<\/p>\n<pre><code>let observer = new PerformanceObserver( performanceCallback );\nobserver.observe({ entryTypes: ['mark', 'measure'] });<\/code><\/pre>\n<p>Neste exemplo, a adi\u00e7\u00e3o de uma nova marca ou medida executa a fun\u00e7\u00e3o <code>performanceCallback()<\/code>. Enquanto ela apenas registra mensagens aqui, ela poderia ser usada para acionar um upload de dados ou fazer c\u00e1lculos adicionais.<\/p>\n<h3>Medindo o desempenho Paint<\/h3>\n<p>O Paint Timing API est\u00e1 dispon\u00edvel apenas em JavaScript do lado do cliente e grava automaticamente duas m\u00e9tricas que s\u00e3o importantes para o <a href=\"https:\/\/kinsta.com\/pt\/blog\/core-web-vitals-do-google\/\">Core Web Vitals<\/a>:<\/p>\n<ol>\n<li><strong>first-paint:<\/strong> O navegador come\u00e7ou a renderizar a p\u00e1gina.<\/li>\n<li><strong>first-contentful-paint:<\/strong> O navegador tornou o primeiro elemento significativo do conte\u00fado DOM, como um t\u00edtulo ou uma imagem.<\/li>\n<\/ol>\n<p>Estes podem ser extra\u00eddos do buffer de desempenho para um array:<\/p>\n<pre><code>const paintTimes = performance.getEntriesByType('paint');<\/code><\/pre>\n<p>Tenha cuidado ao executar isto antes que a p\u00e1gina tenha sido totalmente carregada; os valores n\u00e3o estar\u00e3o prontos. Ou espere pelo <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Window\/load_event\"><code>window.load<\/code><\/a> evento ou usar um <a href=\"https:\/\/docs.google.com\/document\/d\/1bO-CdqPOUVV0xaZkQMu5f5eHYxmV1RfoYVwPHXDRvyg\/edit#heading=h.y0ea1dh8xmx\"><code>PerformanceObserver<\/code><\/a> para monitorar <code>paint<\/code> entryTypes.<\/p>\n<p>Exemplo 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>Um first-paint lenta \u00e9 frequentemente causada por CSS ou JavaScript. A lacuna para\u00a0first-paint pode ser grande se o navegador tiver que baixar uma imagem grande ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/bloqueio-de-renderizacao-no-wordpress\/\">renderizar elementos complexos<\/a>.<\/p>\n<h2>Medindo o Resource Performance<\/h2>\n<p>Os tempos de rede para recursos como imagens, folhas de estilo e arquivos JavaScript s\u00e3o automaticamente gravados no buffer de desempenho. Embora haja pouco que voc\u00ea possa fazer para resolver problemas de velocidade da rede (al\u00e9m de reduzir o tamanho dos arquivos), isso pode ajudar a destacar problemas com ativos maiores, respostas lentas do Ajax ou scripts de terceiros com mau desempenho.<\/p>\n<p>Um conjunto de m\u00e9tricas <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceResourceTiming\">PerformanceResourceTiming<\/a> pode ser extra\u00eddo do buffer usando:<\/p>\n<pre><code>const resources = performance.getEntriesByType('resource');<\/code><\/pre>\n<p>Alternativamente, voc\u00ea pode buscar m\u00e9tricas para um ativo passando sua URL completa:<\/p>\n<pre><code>const resource = performance.getEntriesByName('https:\/\/test.com\/script.js');<\/code><\/pre>\n<p>Exemplo 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>As seguintes propriedades podem ser examinadas:<\/p>\n<ul>\n<li><strong>name<\/strong>: URL do recurso<\/li>\n<li><strong>entryType<\/strong>: &#8220;recurso&#8221;<\/li>\n<li><strong>initiatorType<\/strong>: Como o recurso foi iniciado, tal como &#8220;script&#8221; ou &#8220;link&#8221;<\/li>\n<li><strong>serverTiming<\/strong>: Um conjunto de <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceServerTiming\"><code>PerformanceServerTiming<\/code><\/a> objetos passados pelo servidor no <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/HTTP\/Headers\/Server-Timing\">cabe\u00e7alho HTTP Server-Timing<\/a> (sua aplica\u00e7\u00e3o do lado do servidor poderia enviar m\u00e9tricas para o cliente para an\u00e1lise posterior)<\/li>\n<li><strong>startTime<\/strong>: Timestamp quando o fetch come\u00e7ou<\/li>\n<li><strong>nextHopProtocolo<\/strong>: Protocolo de rede utilizado<\/li>\n<li><strong>workerStart<\/strong>: Timestamp antes de iniciar um Trabalhador de Servi\u00e7o Progressivo de Aplica\u00e7\u00e3o Web (0 se a solicita\u00e7\u00e3o n\u00e3o for interceptada por um Trabalhador de Servi\u00e7o)<\/li>\n<li><strong>redirectStart<\/strong>: Carimbo de tempo quando um redirecionamento come\u00e7ou<\/li>\n<li><strong>redirectEnd<\/strong>: Timestamp ap\u00f3s o \u00faltimo byte da \u00faltima resposta de redirecionamento<\/li>\n<li><strong>fetchStart<\/strong>: Timestamp antes do recebimento dos recursos<\/li>\n<li><strong>dom\u00ednioLookupStart<\/strong>: Carimbo da hora antes de uma consulta DNS<\/li>\n<li><strong>domainLookupEnd<\/strong>: Carimbo de tempo ap\u00f3s a pesquisa DNS<\/li>\n<li><strong>connectStart<\/strong>: Timestamp antes de estabelecer uma conex\u00e3o de servidor<\/li>\n<li><strong>connectEnd<\/strong>: Timestamp depois de estabelecer uma conex\u00e3o de servidor<\/li>\n<li><strong>secureConnectionStart<\/strong>: Timestamp antes do aperto de m\u00e3o SSL<\/li>\n<li><strong>requestStart<\/strong>: Timestamp antes que o navegador solicite o recurso<\/li>\n<li><strong>responseStart<\/strong>: Timestamp quando o navegador recebe o primeiro byte de dados<\/li>\n<li><strong>responseEnd<\/strong>: Timestamp depois de receber o \u00faltimo byte ou fechar a conex\u00e3o<\/li>\n<li><strong>duration<\/strong>: A diferen\u00e7a entre startTime e responseEnd<\/li>\n<li><strong>transferSize<\/strong>: O tamanho do recurso em bytes incluindo o cabe\u00e7alho e o corpo comprimido<\/li>\n<li><strong>encodedBodySize<\/strong>: O corpo do recurso em bytes antes de descomprimir<\/li>\n<li><strong>decodedBodySize<\/strong>: O corpo do recurso em bytes ap\u00f3s descompress\u00e3o<\/li>\n<\/ul>\n<p>Este script de exemplo recupera todos os pedidos Ajax iniciados pelo <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Fetch_API\">Fetch API<\/a> e retorna o tamanho total e a dura\u00e7\u00e3o da transfer\u00eancia:<\/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>Medindo o Navigation Performance<\/h2>\n<p>Os tempos de rede para baixar a p\u00e1gina anterior e carregar a p\u00e1gina atual s\u00e3o automaticamente registrados no buffer de desempenho como um \u00fanico objeto <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/PerformanceNavigationTiming\"><code>PerformanceNavigationTiming<\/code><\/a>.<\/p>\n<p>Extraia-o para um array usando:<\/p>\n<pre><code>const pageTime = performance.getEntriesByType('navigation');<\/code><\/pre>\n<p>&#8230;ou passando a URL da p\u00e1gina para <code>.getEntriesByName()<\/code>:<\/p>\n<pre><code>const pageTiming = performance.getEntriesByName(window.location);<\/code><\/pre>\n<p>As m\u00e9tricas s\u00e3o id\u00eanticas \u00e0s dos <a href=\"https:\/\/docs.google.com\/document\/d\/1bO-CdqPOUVV0xaZkQMu5f5eHYxmV1RfoYVwPHXDRvyg\/edit#heading=h.k94hcflv9m3o\">recursos<\/a>, mas tamb\u00e9m incluem valores espec\u00edficos de p\u00e1gina:<\/p>\n<ul>\n<li><strong>entryType<\/strong>: Por exemplo: &#8220;navega\u00e7\u00e3o&#8221;<\/li>\n<li><strong>tipo<\/strong>: Ou &#8220;navigate&#8221;, &#8220;reload&#8221;, &#8220;back_forward&#8221;, ou &#8220;prerender&#8221;<\/li>\n<li><strong>redirectCount<\/strong>: O n\u00famero de redirecionamentos<\/li>\n<li><strong>unloadEventStart<\/strong>: Timestamp antes do evento de descarregamento do documento anterior<\/li>\n<li><strong>unloadEventEnd<\/strong>: Timestamp ap\u00f3s o evento de descarregamento do documento anterior<\/li>\n<li><strong>domInteractive<\/strong>: Timestamp quando o navegador tiver analisado o HTML e constru\u00eddo o DOM<\/li>\n<li><strong>domContentLoadedEventStart<\/strong>: Carimbo da hora antes do evento DOMContentLoadedDomContentLoaded do documento<\/li>\n<li><strong>domContentLoadedEventEnd<\/strong>: Timestamp ap\u00f3s a conclus\u00e3o do evento DOMContentLoadedDomContentLoaded do documento<\/li>\n<li><strong>domComplete<\/strong>: Timestamp ap\u00f3s a constru\u00e7\u00e3o do DOM e eventos DOMContentLoaded<\/li>\n<li><strong>loadEventStart<\/strong>: Timestamp antes que o evento de carga de p\u00e1gina tenha disparado<\/li>\n<li><strong>loadEventEnd<\/strong>: Timestamp ap\u00f3s o evento de carregamento da p\u00e1gina e todos os ativos est\u00e3o dispon\u00edveis<\/li>\n<\/ul>\n<p>As quest\u00f5es t\u00edpicas incluem:<\/p>\n<ul>\n<li>Um longo atraso entre <strong>unloadEventEnd<\/strong>\u00a0e <strong>domInteractive<\/strong>. Isto pode indicar uma resposta lenta do servidor.<\/li>\n<li>Um longo atraso entre <strong>domContentLoadedEventStart<\/strong> e <strong>domComplete<\/strong>. Isto poderia indicar que os scripts de inicializa\u00e7\u00e3o da p\u00e1gina s\u00e3o muito lentos.<\/li>\n<li>Um longo atraso entre <strong>domComplete<\/strong> e <strong>loadEventEnd<\/strong>. Isso pode indicar que a p\u00e1gina tem muitos ativos ou v\u00e1rios est\u00e3o demorando muito para carregar.<\/li>\n<\/ul>\n<h2>Grava\u00e7\u00e3o e an\u00e1lise de desempenho<\/h2>\n<p>A API de desempenho permite que voc\u00ea colete dados de uso no mundo real e os carregue em um servidor para an\u00e1lise posterior. Voc\u00ea <i>poderia <\/i>usar um <a href=\"https:\/\/kinsta.com\/pt\/blog\/alternativas-do-google-analytics\/\">servi\u00e7o de terceiros como o Google Analytics<\/a> para armazenar os dados, mas h\u00e1 um risco de o script de terceiros ser bloqueado ou introduzir novos problemas de desempenho. Sua pr\u00f3pria solu\u00e7\u00e3o pode ser personalizada de acordo com suas necessidades para garantir que o monitoramento n\u00e3o tenha impacto em outras funcionalidades.<\/p>\n<p>Tenha cuidado com situa\u00e7\u00f5es nas quais as estat\u00edsticas n\u00e3o podem ser determinadas &#8211; talvez porque os usu\u00e1rios est\u00e3o em navegadores antigos, bloqueando o JavaScript, ou atr\u00e1s de um proxy corporativo. Entender quais dados est\u00e3o faltando pode ser mais proveitoso do que fazer suposi\u00e7\u00f5es baseadas em informa\u00e7\u00f5es incompletas.<\/p>\n<p>Idealmente, seus scripts de an\u00e1lise n\u00e3o afetar\u00e3o negativamente o desempenho executando c\u00e1lculos complexos ou fazendo upload de grandes quantidades de dados. Considere utilizar trabalhadores da web e minimizar o uso de chamadas sincronizadas do localStorage. \u00c9 sempre poss\u00edvel processar os dados brutos em lote mais tarde.<\/p>\n<p>Finalmente, desconfie de dispositivos e conex\u00f5es an\u00f4malas, tais como dispositivos muito r\u00e1pidos ou muito lentos que afetam adversamente as estat\u00edsticas. Por exemplo, se nove usu\u00e1rios carregarem uma p\u00e1gina em dois segundos, mas o d\u00e9cimo experimentar um download de 60 segundos, a m\u00e9dia de lat\u00eancia sai para quase 8 segundos. Uma m\u00e9trica mais realista \u00e9 o valor mediano (2 segundos) ou o percentil 90 (9 em cada 10 usu\u00e1rios experimentam um tempo de carregamento de 2 segundos ou menos).<\/p>\n<h2>Resumo<\/h2>\n<p>O <a href=\"https:\/\/kinsta.com\/pt\/blog\/monitoramento-desempenho-aplicativos\/\">desempenho da Web<\/a> continua sendo um <a href=\"https:\/\/kinsta.com\/pt\/blog\/desenvolvedor-frontend\/\">fator cr\u00edtico para os desenvolvedores<\/a>. Os usu\u00e1rios esperam que os sites e aplicativos sejam responsivos na maioria dos dispositivos. A Otimiza\u00e7\u00e3o de mecanismos de busca tamb\u00e9m pode ser afetada \u00e0 medida que <a href=\"https:\/\/kinsta.com\/pt\/blog\/core-web-vitals-do-google\/\">sites mais lentos s\u00e3o rebaixados no Google<\/a>.<br \/>\n<br \/>\nExistem muitas <a href=\"https:\/\/kinsta.com\/pt\/blog\/monitoramento-desempenho-aplicativos\/\">ferramentas de monitoramento de desempenho<\/a> por a\u00ed, mas a maioria avalia a velocidade de execu\u00e7\u00e3o do lado do servidor ou usa um n\u00famero limitado de clientes capazes para julgar a renderiza\u00e7\u00e3o do navegador. A API de desempenho fornece uma forma de comparar m\u00e9tricas reais do usu\u00e1rio que n\u00e3o seria poss\u00edvel calcular de outra forma.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A API de desempenho mede a capacidade de resposta da sua aplica\u00e7\u00e3o web ao vivo em dispositivos reais de usu\u00e1rio e conex\u00f5es de rede. Ela pode &#8230;<\/p>\n","protected":false},"author":188,"featured_media":52382,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[367,469,523,506,107,507],"topic":[951,978],"class_list":["post-52072","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-tutoriais-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>Uma Introdu\u00e7\u00e3o ao API de Desempenho<\/title>\n<meta name=\"description\" content=\"Aprenda a medir a capacidade de resposta do seu aplicativo web em dispositivos de usu\u00e1rios reais e conex\u00f5es de rede usando o API de desempenho.\" \/>\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\/pt\/blog\/api-de-desempenho\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Uma Introdu\u00e7\u00e3o ao API de Desempenho\" \/>\n<meta property=\"og:description\" content=\"Aprenda a medir a capacidade de resposta do seu aplicativo web em dispositivos de usu\u00e1rios reais e conex\u00f5es de rede usando o API de desempenho.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-11T12:29:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-21T13:11:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/api-de-desempenho.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=\"Aprenda a medir a capacidade de resposta do seu aplicativo web em dispositivos de usu\u00e1rios reais e conex\u00f5es de rede usando o API de desempenho.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/api-de-desempenho.png\" \/>\n<meta name=\"twitter:creator\" content=\"@craigbuckler\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Craig Buckler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/\"},\"author\":{\"name\":\"Craig Buckler\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/715d986404b06691ab3014e06596908e\"},\"headline\":\"Uma Introdu\u00e7\u00e3o ao API de Desempenho\",\"datePublished\":\"2022-08-11T12:29:22+00:00\",\"dateModified\":\"2023-08-21T13:11:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/\"},\"wordCount\":2273,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/api-de-desempenho.png\",\"keywords\":[\"API\",\"Browsers\",\"JavaScript\",\"node.js\",\"performance\",\"performance testing\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/\",\"name\":\"Uma Introdu\u00e7\u00e3o ao API de Desempenho\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/api-de-desempenho.png\",\"datePublished\":\"2022-08-11T12:29:22+00:00\",\"dateModified\":\"2023-08-21T13:11:17+00:00\",\"description\":\"Aprenda a medir a capacidade de resposta do seu aplicativo web em dispositivos de usu\u00e1rios reais e conex\u00f5es de rede usando o API de desempenho.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/api-de-desempenho.png\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/api-de-desempenho.png\",\"width\":1460,\"height\":730,\"caption\":\"Uma Introdu\u00e7\u00e3o ao API de Desempenho\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"API\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/api\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Uma Introdu\u00e7\u00e3o ao API de Desempenho\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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\/pt\/#\/schema\/person\/715d986404b06691ab3014e06596908e\",\"name\":\"Craig Buckler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/craigbuckler\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Uma Introdu\u00e7\u00e3o ao API de Desempenho","description":"Aprenda a medir a capacidade de resposta do seu aplicativo web em dispositivos de usu\u00e1rios reais e conex\u00f5es de rede usando o API de desempenho.","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\/pt\/blog\/api-de-desempenho\/","og_locale":"pt_PT","og_type":"article","og_title":"Uma Introdu\u00e7\u00e3o ao API de Desempenho","og_description":"Aprenda a medir a capacidade de resposta do seu aplicativo web em dispositivos de usu\u00e1rios reais e conex\u00f5es de rede usando o API de desempenho.","og_url":"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2022-08-11T12:29:22+00:00","article_modified_time":"2023-08-21T13:11:17+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/api-de-desempenho.png","type":"image\/png"}],"author":"Craig Buckler","twitter_card":"summary_large_image","twitter_description":"Aprenda a medir a capacidade de resposta do seu aplicativo web em dispositivos de usu\u00e1rios reais e conex\u00f5es de rede usando o API de desempenho.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/api-de-desempenho.png","twitter_creator":"@craigbuckler","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Craig Buckler","Tempo estimado de leitura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/"},"author":{"name":"Craig Buckler","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/715d986404b06691ab3014e06596908e"},"headline":"Uma Introdu\u00e7\u00e3o ao API de Desempenho","datePublished":"2022-08-11T12:29:22+00:00","dateModified":"2023-08-21T13:11:17+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/"},"wordCount":2273,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/api-de-desempenho.png","keywords":["API","Browsers","JavaScript","node.js","performance","performance testing"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/","url":"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/","name":"Uma Introdu\u00e7\u00e3o ao API de Desempenho","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/api-de-desempenho.png","datePublished":"2022-08-11T12:29:22+00:00","dateModified":"2023-08-21T13:11:17+00:00","description":"Aprenda a medir a capacidade de resposta do seu aplicativo web em dispositivos de usu\u00e1rios reais e conex\u00f5es de rede usando o API de desempenho.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/api-de-desempenho.png","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/api-de-desempenho.png","width":1460,"height":730,"caption":"Uma Introdu\u00e7\u00e3o ao API de Desempenho"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-desempenho\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"API","item":"https:\/\/kinsta.com\/pt\/topicos\/api\/"},{"@type":"ListItem","position":3,"name":"Uma Introdu\u00e7\u00e3o ao API de Desempenho"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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\/pt\/#\/schema\/person\/715d986404b06691ab3014e06596908e","name":"Craig Buckler","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/craigbuckler\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/52072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/188"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=52072"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/52072\/revisions"}],"predecessor-version":[{"id":52383,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/52072\/revisions\/52383"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52072\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52072\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52072\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52072\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52072\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52072\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52072\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52072\/translations\/jp"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/52072\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/52382"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=52072"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=52072"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=52072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}