{"id":92888,"date":"2022-10-18T12:06:52","date_gmt":"2022-10-18T10:06:52","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/optimizar-el-retardo-de-la-primera-entrada\/"},"modified":"2021-07-06T09:54:13","modified_gmt":"2021-07-06T07:54:13","slug":"optimizar-el-retardo-de-la-primera-entrada","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/dev\/optimizar-el-retardo-de-la-primera-entrada\/","title":{"rendered":"Optimize the delay of the first entry"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimizar-el-retardo-de-la-primera-entrada\/#Ejecucion-pesada-de-JavaScript\" >Heavy JavaScript execution<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimizar-el-retardo-de-la-primera-entrada\/#Divida-las-tareas-largas\" >Break up long tasks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimizar-el-retardo-de-la-primera-entrada\/#Optimice-su-pagina-para-que-este-lista-para-la-interaccion\" >Optimize your page so that it is ready for interaction<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimizar-el-retardo-de-la-primera-entrada\/#La-ejecucion-de-un-script-de-origen-puede-retrasar-la-preparacion-de-la-interaccion\" >Running a source script can delay interaction preparation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimizar-el-retardo-de-la-primera-entrada\/#La-busqueda-de-datos-puede-afectar-muchos-aspectos-de-la-preparacion-para-la-interaccion\" >Searching for data can affect many aspects of preparing for interaction<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimizar-el-retardo-de-la-primera-entrada\/#La-ejecucion-de-un-script-de-terceros-ademas-puede-retrasar-la-latencia-de-la-interaccion\" >La ejecuci\u00f3n de un script de terceros adem\u00e1s puede retrasar la latencia de la interacci\u00f3n<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimizar-el-retardo-de-la-primera-entrada\/#Utilice-un-empleado-web\" >Utilice un empleado web<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimizar-el-retardo-de-la-primera-entrada\/#Disminuir-el-tiempo-de-ejecucion-de-JavaScript\" >Disminuir el tiempo de ejecuci\u00f3n de JavaScript<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimizar-el-retardo-de-la-primera-entrada\/#Aplazar-JavaScript-no-utilizado\" >Defer unused JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimizar-el-retardo-de-la-primera-entrada\/#Minimice-los-polyfills-no-utilizados\" >Minimize unused polyfills<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          How to respond faster to user interactions.\n        <\/p>\n<p>\n          <time>May 5, 2020<\/time><\/p>\n<\/header>\n<blockquote>\n<p>    I clicked but nothing happened! Why can&#039;t I interact with this page? \ud83d\ude22\n  <\/p>\n<\/blockquote>\n<p>First Contentful Paint (FCP) y Largest Contentful Paint (LCP) son m\u00e9tricas que miden el tiempo que tarda el contenido en renderizarse (pintar) de forma visual en una p\u00e1gina.  A\u00fan cuando importante, los tiempos de pintura no capturan <em>load responsiveness<\/em>: or how fast a page responds to user interaction.<\/p>\n<p>First Input Delay (FID) is a Core Web Vitals metric that captures a user&#039;s first impression of a site&#039;s interactivity and responsiveness. Measures the time from when a user first interacts with a page until the browser is able to respond to that interaction. FID is a field metric and cannot be simulated in a lab environment. <strong>A real user interaction<\/strong> hace falta para medir el retardo de respuesta.<\/p>\n<picture><source srcset=\"https:\/\/web.dev\/vitals\/fid_8x2.svg\" media=\"(min-width: 640px)\"><\/source><\/picture>\n<p>Para ayudar a predecir la FID en el laboratorio, sugerimos el Tiempo de bloqueo total (TBT).  Miden cosas diferentes, pero las mejoras en TBT de forma general corresponden a mejoras en FID.<\/p>\n<p>The main cause of a poor FID is <strong>heavy javascript execution<\/strong>.  Optimizar la forma en que JavaScript analiza, compila y ejecuta en su p\u00e1gina web reducir\u00e1 de forma directa la FID.<\/p>\n<h2 id=\"heavy-javascript-execution\"><span class=\"ez-toc-section\" id=\"Ejecucion-pesada-de-JavaScript\"><\/span>Heavy JavaScript execution <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El navegador no puede responder a la mayor\u00eda de las entradas de los usuarios mientras ejecuta JavaScript en el hilo principal.  Dicho de otra forma, el navegador no puede responder a las interacciones del usuario mientras el hilo principal est\u00e1 ocupado.  Para impulsar esto:<\/p>\n<h2 id=\"long-tasks\"><span class=\"ez-toc-section\" id=\"Divida-las-tareas-largas\"><\/span>Break up long tasks <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Si ya ha intentado disminuir la cantidad de JavaScript que se carga en una sola p\u00e1gina, puede resultar \u00fatil dividir el c\u00f3digo de larga duraci\u00f3n en <strong>smaller asynchronous tasks<\/strong>.<\/p>\n<p><strong>Long tasks<\/strong> son per\u00edodos de ejecuci\u00f3n de JavaScript en los que los usuarios pueden hallar que su interfaz de usuario no responde.  Cualquier fragmento de c\u00f3digo que bloquee el hilo principal durante 50 ms o m\u00e1s se puede caracterizar como una tarea larga.  Las tareas largas son una se\u00f1al de un potencial exceso de JavaScript (cargar y ejecutar m\u00e1s de lo que un usuario puede necesitar actualmente).<br \/>La divisi\u00f3n de tareas largas puede disminuir el retraso de entrada en su sitio.<\/p>\n<figure class=\"w-figure\">\n  <img alt='long-task-6693785' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/long-task-6693785.png'><figcaption class=\"w-figcaption\">Chrome DevTools <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2020\/03\/devtools#long-tasks\">visualize long tasks<\/a> on the performance dashboard<\/figcaption><\/figure>\n<p>FID deber\u00eda mejorar notablemente a medida que adopte las mejores pr\u00e1cticas, como la divisi\u00f3n de c\u00f3digo y la divisi\u00f3n de tareas largas.  Aunque TBT no es una m\u00e9trica de campo, es \u00fatil para verificar el progreso hacia la mejora final tanto de Time To Interactive (TTI) como de FID.<\/p>\n<h2 id=\"optimize-your-page-for-interaction-readiness\"><span class=\"ez-toc-section\" id=\"Optimice-su-pagina-para-que-este-lista-para-la-interaccion\"><\/span>Optimize your page so that it is ready for interaction <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>There are a number of common causes of low FID and TBT scores in web applications that rely heavily on JavaScript:<\/p>\n<h3 id=\"first-party-script-execution-can-delay-interaction-readiness\"><span class=\"ez-toc-section\" id=\"La-ejecucion-de-un-script-de-origen-puede-retrasar-la-preparacion-de-la-interaccion\"><\/span>Running a source script can delay interaction preparation <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Excessive JavaScript size, heavy execution times, and inefficient fragmentation can slow down how quickly a page can respond to user input and affect FIDs, TBTs, and TTIs. Progressive code and feature loading can help spread this work and improve interaction readiness.<\/li>\n<li>Las aplicaciones renderizadas del lado del servidor pueden parecer que est\u00e1n pintando p\u00edxeles en la pantalla r\u00e1pidamente, pero tenga cuidado con las interacciones de los usuarios bloqueadas por ejecuciones de scripts grandes (a modo de ejemplo, rehidrataci\u00f3n para conectar a los oyentes de eventos).  Esto puede tardar varios miles de milisegundos, a veces inclusive segundos, si se usa la divisi\u00f3n de c\u00f3digo basada en rutas.  Considere cambiar m\u00e1s l\u00f3gica del lado del servidor o generar m\u00e1s contenido de forma est\u00e1tica durante el tiempo de compilaci\u00f3n.<\/li>\n<\/ul>\n<p>A continuaci\u00f3n, se muestran los puntajes TBT antes y posteriormente de aprovechar al m\u00e1ximo la carga de scripts propios para una aplicaci\u00f3n.  Al mover la costosa carga de scripts (y ejecuci\u00f3n) para un componente no esencial fuera de la ruta cr\u00edtica, los usuarios pudieron interactuar con la p\u00e1gina mucho antes.<\/p>\n<p><img alt='tbt-before-after-first-party-4830319' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/tbt-before-after-first-party-4830319.png'><\/p>\n<h3 id=\"data-fetching-can-impact-many-aspects-of-interaction-readiness\"><span class=\"ez-toc-section\" id=\"La-busqueda-de-datos-puede-afectar-muchos-aspectos-de-la-preparacion-para-la-interaccion\"><\/span>Searching for data can affect many aspects of preparing for interaction <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Esperar una cascada de recuperaciones en cascada (a modo de ejemplo, JavaScript y recuperaciones de datos para componentes) puede afectar la latencia de interacci\u00f3n.  Trate de minimizar la dependencia de las recuperaciones de datos en cascada.<\/li>\n<li>Los grandes almacenes de datos en l\u00ednea pueden incrementar el tiempo de an\u00e1lisis de HTML y afectar tanto a las m\u00e9tricas de pintura como de interacci\u00f3n.  Intente minimizar la cantidad de datos que deben procesarse despu\u00e9s en el lado del cliente.<\/li>\n<\/ul>\n<h3 id=\"third-party-script-execution-can-delay-interaction-latency-too\"><span class=\"ez-toc-section\" id=\"La-ejecucion-de-un-script-de-terceros-ademas-puede-retrasar-la-latencia-de-la-interaccion\"><\/span>La ejecuci\u00f3n de un script de terceros adem\u00e1s puede retrasar la latencia de la interacci\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Muchos sitios incluyen etiquetas y an\u00e1lisis de terceros que pueden mantener la red ocupada y hacer que el hilo principal deje de responder de forma peri\u00f3dica, lo que afecta la latencia de la interacci\u00f3n.  Explore la carga bajo demanda de c\u00f3digo de terceros (a modo de ejemplo, quiz\u00e1 no cargue esos anuncios de la mitad inferior de la p\u00e1gina hasta que se acerquen m\u00e1s a la ventana gr\u00e1fica).<\/li>\n<li>En algunos casos, los scripts de terceros pueden adelantarse a los propios en t\u00e9rminos de prioridad y ancho de banda en el hilo principal, lo que adem\u00e1s retrasa la rapidez con la que una p\u00e1gina est\u00e1 lista para la interacci\u00f3n.  Intente priorizar la carga de lo que crea que ofrece el mayor valor a los usuarios primero.<\/li>\n<\/ul>\n<h2 id=\"use-a-web-worker\"><span class=\"ez-toc-section\" id=\"Utilice-un-empleado-web\"><\/span>Utilice un empleado web <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A blocked main thread is one of the main causes of input lag. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Worker\">web employees<\/a> hacen viable ejecutar JavaScript en un hilo de fondo.  Mover operaciones que no son de UI a un subproceso de trabajo separado puede disminuir el tiempo de bloqueo del subproceso principal y, por consiguiente, mejorar el FID.<\/p>\n<p>Considere utilizar las siguientes bibliotecas para facilitar el uso de empleados web en su sitio:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChromeLabs\/comlink\">Comlink<\/a>: An auxiliary library that abstracts<br \/>\n<code>postMessage<\/code> and makes it easy to use<\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/WebReflection\/workway\">Workway<\/a>: Un exportador de empleados web de prop\u00f3sito general<\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/developit\/workerize\">To work<\/a>: Mover un m\u00f3dulo a un empleado web<\/li>\n<\/ul>\n<h3 id=\"reduce-javascript-execution\"><span class=\"ez-toc-section\" id=\"Disminuir-el-tiempo-de-ejecucion-de-JavaScript\"><\/span>Disminuir el tiempo de ejecuci\u00f3n de JavaScript <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Limitar la cantidad de JavaScript en su p\u00e1gina reduce la cantidad de tiempo que el navegador requiere para ejecutar c\u00f3digo JavaScript.  Esto acelera la rapidez con que el navegador puede empezar a responder a las interacciones del usuario.<\/p>\n<p>Para disminuir la cantidad de JavaScript ejecutado en su p\u00e1gina:<\/p>\n<ul>\n<li>Defer unused JavaScript<\/li>\n<li>Minimize unused polyfills<\/li>\n<\/ul>\n<h4 id=\"defer-unused-javascript\"><span class=\"ez-toc-section\" id=\"Aplazar-JavaScript-no-utilizado\"><\/span>Defer unused JavaScript <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>De manera predeterminada, todo JavaScript bloquea el procesamiento.  Cuando el navegador encuentra una etiqueta de secuencia de comandos que se vincula a un archivo JavaScript externo, debe pausar lo que est\u00e1 haciendo y descargar, analizar, recabar y ejecutar ese JavaScript.  Por ende, solo debe cargar el c\u00f3digo que se requiere para la p\u00e1gina o responder a la entrada del usuario.<\/p>\n<p>the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/coverage\">Coverage<\/a> La pesta\u00f1a de Chrome DevTools puede decirle cu\u00e1nto JavaScript no se est\u00e1 usando en su p\u00e1gina web.<\/p>\n<p><img alt='coverage-panel-js-6236715' class=\"w-screenshot w-screenshot--filled\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/coverage-panel-js-6236715.png'><\/p>\n<p>Para disminuir el JavaScript no utilizado:<\/p>\n<ul>\n<li>Divide your package code into multiple chunks<\/li>\n<li>Aplazar cualquier JavaScript no cr\u00edtico, incluidos los scripts de terceros, usando <code>async<\/code> or <code>defer<\/code><\/li>\n<\/ul>\n<p><strong>Code division<\/strong> es el concepto de dividir un solo paquete grande de JavaScript en fragmentos m\u00e1s peque\u00f1os que se pueden cargar condicionalmente (adem\u00e1s conocido como carga diferida).<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/caniuse.com\/#feat=es6-module-dynamic-import\">Most newer browsers support dynamic import syntax<\/a>, que posibilita la consecuci\u00f3n de m\u00f3dulos a pedido:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">import<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'module.js'<\/span><span class=\"token punctuation\">)<\/span>\t<br><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">module<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\t<br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\t<\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>La importaci\u00f3n din\u00e1mica de JavaScript en determinadas interacciones del usuario (como cambiar una ruta o mostrar un modal) garantizar\u00e1 que el c\u00f3digo que no se usa para la carga de la p\u00e1gina inicial solo se recupere cuando sea necesario.<\/p>\n<p>Aparte de la compatibilidad general con el navegador, la sintaxis de importaci\u00f3n din\u00e1mica se puede usar en muchos sistemas de compilaci\u00f3n diferentes.<\/p>\n<ul>\n<li>Si usa <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/webpack.js.org\/guides\/code-splitting\/\">web package<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/medium.com\/rollup\/rollup-now-has-code-splitting-and-we-need-your-help-46defd901c82\">Roll up<\/a>or <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/parceljs.org\/code_splitting.html\">Pack or pack<\/a> As a module package, take advantage of its dynamic import support.<\/li>\n<li>Client-side frameworks, like<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/reactjs.org\/docs\/code-splitting.html#reactlazy\">React<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/angular.io\/guide\/lazy-loading-ngmodules\">Angular<\/a>and<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/vuejs.org\/v2\/guide\/components-dynamic-async.html#Async-Components\">Vue<\/a> provide abstractions to facilitate lazy loading at the component level.<\/li>\n<\/ul>\n<p>Apart from code splitting, always use <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/javascript.info\/script-async-defer\">async or defer<\/a> for scripts that are not required for top half or critical path content.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> <span class=\"token attr-name\">defer<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\u2026<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\t<br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> <span class=\"token attr-name\">async<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\u2026<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\t<\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Unless there is a specific reason not to do so, all third-party scripts must be loaded with <code>defer<\/code><br \/>\nor <code>async<\/code> default.<\/p>\n<h4 id=\"minimize-unused-polyfills\"><span class=\"ez-toc-section\" id=\"Minimice-los-polyfills-no-utilizados\"><\/span>Minimize unused polyfills <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Si crea su c\u00f3digo usando la sintaxis JavaScript moderna y hace referencia a las API de los navegadores modernos, deber\u00e1 transpilarlo e incluir polyfills para que funcione en navegadores m\u00e1s antiguos.<\/p>\n<p>Una de las principales preocupaciones de rendimiento de incluir polyfills y c\u00f3digo transpilado en su sitio es que los navegadores m\u00e1s nuevos no deber\u00edan tener que descargarlo si no lo necesitan.  Para disminuir el tama\u00f1o de JavaScript de su aplicaci\u00f3n, minimice los polyfills no utilizados tanto como sea viable y restrinja su uso a los entornos donde se necesitan.<\/p>\n<p>Para aprovechar al m\u00e1ximo el uso de polyfill en su sitio:<\/p>\n<ul>\n<li>\n<p>Si usa <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/babeljs.io\/docs\/en\/index.html\">Babel<\/a> as a transpiler, use<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/babeljs.io\/docs\/en\/babel-preset-env\"><code>@ babel \/ preset-env<\/code><\/a>  to include only the polyfills required by the browsers you plan to target. For Babel 7.9, enable the<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/babeljs.io\/docs\/en\/babel-preset-env#bugfixes\"><code>bugfixes<\/code><\/a>  opci\u00f3n para disminuir todav\u00eda m\u00e1s los polyfills innecesarios<\/p>\n<\/li>\n<li>\n<p>Use the module \/ non-module pattern to deliver two separate packages (<code>@ babel \/ preset-env<\/code> adem\u00e1s es compatible con esto a trav\u00e9s de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/babeljs.io\/docs\/en\/babel-preset-env#targetsesmodules\"><code>target.esmodules<\/code><\/a>)<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>module<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>modern.js<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\t<br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> <span class=\"token attr-name\">nomodule<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>legacy.js<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">defer<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\t<\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Muchas de las funciones de ECMAScript m\u00e1s nuevas compiladas con Babel ya son compatibles con entornos que admiten m\u00f3dulos JavaScript.  Entonces, al hacer esto, simplifica el procedimiento de asegurarse de que solo se use el c\u00f3digo transpilado para los navegadores que verdaderamente lo necesitan.<\/p>\n<\/li>\n<\/ul>\n<p>Hay varias funciones disponibles para medir y depurar FID:<\/p>\n<p><em>We thank Philip Walton, Kayce Basques, Ilya Grigorik, and Annie Sullivan for their reviews.<\/em><\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>C\u00f3mo responder m\u00e1s r\u00e1pido a las interacciones de los usuarios. 5 de mayo de 2020 \u00a1Hice clic pero no pas\u00f3 nada! \u00bfPor qu\u00e9 no puedo interactuar con esta p\u00e1gina? \ud83d\ude22&#8230;<\/p>","protected":false},"author":1,"featured_media":92889,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-92888","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Optimizar el retardo de la primera entrada - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"C\u00f3mo responder m\u00e1s r\u00e1pido a las interacciones de los usuarios. 5 de mayo de 2020 \u00a1Hice clic pero no pas\u00f3 nada! \u00bfPor qu\u00e9 no puedo interactuar con esta\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimizar-el-retardo-de-la-primera-entrada\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimizar el retardo de la primera entrada\" \/>\n<meta property=\"og:description\" content=\"C\u00f3mo responder m\u00e1s r\u00e1pido a las interacciones de los usuarios. 5 de mayo de 2020 \u00a1Hice clic pero no pas\u00f3 nada! \u00bfPor qu\u00e9 no puedo interactuar con esta\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/dev\/optimizar-el-retardo-de-la-primera-entrada\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-18T10:06:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero2-7560715.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimizar-el-retardo-de-la-primera-entrada\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimizar-el-retardo-de-la-primera-entrada\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Optimizar el retardo de la primera entrada\",\"datePublished\":\"2022-10-18T10:06:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimizar-el-retardo-de-la-primera-entrada\\\/\"},\"wordCount\":1775,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimizar-el-retardo-de-la-primera-entrada\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero2-7560715.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimizar-el-retardo-de-la-primera-entrada\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimizar-el-retardo-de-la-primera-entrada\\\/\",\"name\":\"Optimizar el retardo de la primera entrada - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimizar-el-retardo-de-la-primera-entrada\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimizar-el-retardo-de-la-primera-entrada\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero2-7560715.jpg\",\"datePublished\":\"2022-10-18T10:06:52+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"C\u00f3mo responder m\u00e1s r\u00e1pido a las interacciones de los usuarios. 5 de mayo de 2020 \u00a1Hice clic pero no pas\u00f3 nada! \u00bfPor qu\u00e9 no puedo interactuar con esta\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimizar-el-retardo-de-la-primera-entrada\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/optimizar-el-retardo-de-la-primera-entrada\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero2-7560715.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero2-7560715.jpg\",\"width\":1200,\"height\":360,\"caption\":\"hero2-7560715-7120702-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Optimizar el retardo de la primera entrada - R Marketing Digital","description":"How to respond faster to user interactions. May 5, 2020 I clicked but nothing happened! Why can&#039;t I interact with this","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:\/\/rmarketingdigital.com\/en\/dev\/optimizar-el-retardo-de-la-primera-entrada\/","og_locale":"en_US","og_type":"article","og_title":"Optimizar el retardo de la primera entrada","og_description":"C\u00f3mo responder m\u00e1s r\u00e1pido a las interacciones de los usuarios. 5 de mayo de 2020 \u00a1Hice clic pero no pas\u00f3 nada! \u00bfPor qu\u00e9 no puedo interactuar con esta","og_url":"https:\/\/rmarketingdigital.com\/en\/dev\/optimizar-el-retardo-de-la-primera-entrada\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-18T10:06:52+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero2-7560715.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/optimizar-el-retardo-de-la-primera-entrada\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/optimizar-el-retardo-de-la-primera-entrada\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Optimizar el retardo de la primera entrada","datePublished":"2022-10-18T10:06:52+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/optimizar-el-retardo-de-la-primera-entrada\/"},"wordCount":1775,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/optimizar-el-retardo-de-la-primera-entrada\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero2-7560715.jpg","articleSection":["Dev"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/optimizar-el-retardo-de-la-primera-entrada\/","url":"https:\/\/rmarketingdigital.com\/dev\/optimizar-el-retardo-de-la-primera-entrada\/","name":"Optimizar el retardo de la primera entrada - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/optimizar-el-retardo-de-la-primera-entrada\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/optimizar-el-retardo-de-la-primera-entrada\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero2-7560715.jpg","datePublished":"2022-10-18T10:06:52+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"How to respond faster to user interactions. May 5, 2020 I clicked but nothing happened! Why can&#039;t I interact with this","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/optimizar-el-retardo-de-la-primera-entrada\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/dev\/optimizar-el-retardo-de-la-primera-entrada\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero2-7560715.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero2-7560715.jpg","width":1200,"height":360,"caption":"hero2-7560715-7120702-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/92888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=92888"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/92888\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/92889"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=92888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=92888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=92888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}