{"id":127558,"date":"2024-10-01T16:16:06","date_gmt":"2024-10-01T14:16:06","guid":{"rendered":"https:\/\/quondos.com\/mag\/?p=127558"},"modified":"2024-10-01T16:16:07","modified_gmt":"2024-10-01T14:16:07","slug":"por-que-google-lighthouse-no-incluye-inp-un-elemento-esencial-de-la-web","status":"publish","type":"post","link":"https:\/\/quondos.com\/mag\/por-que-google-lighthouse-no-incluye-inp-un-elemento-esencial-de-la-web\/","title":{"rendered":"Por qu\u00e9 Google Lighthouse no incluye INP, un elemento esencial de la Web"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"536\" src=\"https:\/\/quondos.com\/mag\/wp-content\/uploads\/2024\/10\/image-1024x536.webp\" alt=\"\" class=\"wp-image-127560\" title=\"\" srcset=\"https:\/\/quondos.com\/mag\/wp-content\/uploads\/2024\/10\/image-1024x536.webp 1024w, https:\/\/quondos.com\/mag\/wp-content\/uploads\/2024\/10\/image-300x157.webp 300w, https:\/\/quondos.com\/mag\/wp-content\/uploads\/2024\/10\/image-768x402.webp 768w, https:\/\/quondos.com\/mag\/wp-content\/uploads\/2024\/10\/image.webp 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u00bfSab\u00edas que Google Lighthouse no incluye el INP, uno de los Core Web Vitals? Seg\u00fan la fuente, hay razones interesantes detr\u00e1s de esta decisi\u00f3n.<\/p>\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 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\">\u00cdndice de contenidos<\/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=\"Alternar tabla de contenidos\"><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:\/\/quondos.com\/mag\/por-que-google-lighthouse-no-incluye-inp-un-elemento-esencial-de-la-web\/#Google_Lighthouse_y_el_INP_%C2%BFque_esta_pasando\" >Google Lighthouse y el INP: \u00bfqu\u00e9 est\u00e1 pasando?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/quondos.com\/mag\/por-que-google-lighthouse-no-incluye-inp-un-elemento-esencial-de-la-web\/#Lighthouse_mide_cargas_de_pagina_no_interacciones\" >Lighthouse mide cargas de p\u00e1gina, no interacciones<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/quondos.com\/mag\/por-que-google-lighthouse-no-incluye-inp-un-elemento-esencial-de-la-web\/#User_Flows_personalizados_para_medir_el_INP\" >User Flows personalizados para medir el INP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/quondos.com\/mag\/por-que-google-lighthouse-no-incluye-inp-un-elemento-esencial-de-la-web\/#Total_Blocking_Time_como_proxy_del_INP\" >Total Blocking Time como proxy del INP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/quondos.com\/mag\/por-que-google-lighthouse-no-incluye-inp-un-elemento-esencial-de-la-web\/#Limitaciones_del_TBT_como_sustituto_del_INP\" >Limitaciones del TBT como sustituto del INP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/quondos.com\/mag\/por-que-google-lighthouse-no-incluye-inp-un-elemento-esencial-de-la-web\/#Optimizar_para_Lighthouse_vs_la_experiencia_del_usuario\" >Optimizar para Lighthouse vs. la experiencia del usuario<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/quondos.com\/mag\/por-que-google-lighthouse-no-incluye-inp-un-elemento-esencial-de-la-web\/#%C2%BFPor_que_es_importante_esto\" >\u00bfPor qu\u00e9 es importante esto?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/quondos.com\/mag\/por-que-google-lighthouse-no-incluye-inp-un-elemento-esencial-de-la-web\/#Aplicaciones_practicas\" >Aplicaciones pr\u00e1cticas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/quondos.com\/mag\/por-que-google-lighthouse-no-incluye-inp-un-elemento-esencial-de-la-web\/#En_resumen\" >En resumen<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Google_Lighthouse_y_el_INP_%C2%BFque_esta_pasando\"><\/span>Google Lighthouse y el INP: \u00bfqu\u00e9 est\u00e1 pasando?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Seg\u00fan la fuente, aunque el INP (Interaction to Next Paint) es un Core Web Vital, la herramienta Google Lighthouse no lo utiliza en sus pruebas est\u00e1ndar. Esto ha generado curiosidad entre desarrolladores y entusiastas de la web.<\/p>\n<p>Barry Pollard, Web Performance Developer Advocate en el equipo de Google Chrome, explic\u00f3 por qu\u00e9 Lighthouse omite el INP y ofreci\u00f3 <strong>ideas sobre c\u00f3mo medirlo<\/strong>.<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"Lighthouse_mide_cargas_de_pagina_no_interacciones\"><\/span>Lighthouse mide cargas de p\u00e1gina, no interacciones<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La raz\u00f3n principal es que Lighthouse se enfoca en medir una carga de p\u00e1gina simple, capturando diversas caracter\u00edsticas durante ese proceso. Puede estimar el LCP (Largest Contentful Paint) y el CLS (Cumulative Layout Shift) bajo condiciones de carga espec\u00edficas.<\/p>\n<p>Sin embargo, el INP es diferente porque depende de las <strong>interacciones del usuario<\/strong>. Seg\u00fan la fuente, sin interacciones, no hay INP que medir.<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"User_Flows_personalizados_para_medir_el_INP\"><\/span>User Flows personalizados para medir el INP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Aunque Lighthouse no puede medir el INP directamente, si conoces los <strong>viajes comunes de tus usuarios<\/strong>, puedes usar \u00abuser flows\u00bb para medirlo. Esto permite simular interacciones t\u00edpicas en tu sitio.<\/p>\n<p>Seg\u00fan la fuente, estos user flows pueden ser automatizados en un entorno de integraci\u00f3n continua, permitiendo a los desarrolladores probar el INP en cada commit y detectar posibles regresiones.<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"Total_Blocking_Time_como_proxy_del_INP\"><\/span>Total Blocking Time como proxy del INP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Sin interacciones, Lighthouse no puede medir el INP, pero s\u00ed puede medir causas probables de problemas en el INP, especialmente tareas largas y bloqueantes de JavaScript.<\/p>\n<p>Aqu\u00ed es donde entra el TBT (Total Blocking Time). Seg\u00fan la fuente, el TBT mide el tiempo total de todas las tareas que superan los 50ms, lo que puede ser un <strong>indicador de riesgo para el INP<\/strong>.<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"Limitaciones_del_TBT_como_sustituto_del_INP\"><\/span>Limitaciones del TBT como sustituto del INP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A pesar de ser \u00fatil, el TBT tiene sus limitaciones como sustituto del INP. Si no interact\u00faas durante tareas largas, es posible que no tengas problemas de INP. Adem\u00e1s, las interacciones podr\u00edan cargar m\u00e1s JavaScript no medido por Lighthouse.<\/p>\n<p>Seg\u00fan la fuente, el TBT es una pista, pero no un sustituto para medir el INP de manera efectiva. Es importante entender estas limitaciones.<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"Optimizar_para_Lighthouse_vs_la_experiencia_del_usuario\"><\/span>Optimizar para Lighthouse vs. la experiencia del usuario<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Algunos desarrolladores optimizan para obtener mejores puntuaciones en Lighthouse sin considerar el impacto en el usuario. Seg\u00fan la fuente, esto puede ser <strong>perjudicial para la experiencia del usuario<\/strong>.<\/p>\n<p>Por ejemplo, retrasar toda la carga de JavaScript hasta que el usuario interact\u00faa puede mejorar las puntuaciones, pero causar retrasos en la primera interacci\u00f3n, afectando negativamente al usuario.<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFPor_que_es_importante_esto\"><\/span>\u00bfPor qu\u00e9 es importante esto?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Entender la relaci\u00f3n entre Lighthouse, INP y TBT es crucial para optimizar la experiencia del usuario. Reconocer las limitaciones al medir el INP ayuda a evitar optimizaciones mal encaminadas.<\/p>\n<p>Seg\u00fan la fuente, centrarse en las interacciones reales del usuario es esencial para asegurar que las mejoras en rendimiento realmente <strong>beneficien al usuario<\/strong>.<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"Aplicaciones_practicas\"><\/span>Aplicaciones pr\u00e1cticas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Para monitorear el rendimiento de tu sitio y el INP, la fuente sugiere:<\/p>\n<ul>\n  <li>Usar \u00abuser flows\u00bb en Lighthouse para medir el INP en viajes comunes de usuarios.<\/li>\n  <li>Automatizar estos user flows en integraci\u00f3n continua para detectar regresiones.<\/li>\n  <li>Utilizar el TBT como proxy del INP, pero entender sus limitaciones.<\/li>\n  <li>Priorizar mediciones en campo para obtener datos precisos del INP.<\/li>\n<\/ul>\n<p>Es importante <strong>equilibrar las optimizaciones de rendimiento<\/strong> con las consideraciones de experiencia de usuario para lograr un sitio web efectivo.<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"En_resumen\"><\/span>En resumen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Aunque Google Lighthouse no incluye el INP en sus pruebas est\u00e1ndar, existen maneras de medirlo y mejorar la experiencia del usuario. Comprender estas herramientas y sus limitaciones es clave para desarrollar sitios web de alto rendimiento.<\/p>\n<p>Seg\u00fan la fuente, enfocarse en las interacciones reales y comprender c\u00f3mo afectan al INP ayudar\u00e1 a mantener este vital dentro de un umbral aceptable. <strong>Al final del d\u00eda, el usuario es lo m\u00e1s importante<\/strong>.<\/p>\n\n\n\n<p>Fuente: https:\/\/www.searchenginejournal.com\/why-google-lighthouse-doesnt-include-inp-a-core-web-vital\/528734\/<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfSab\u00edas que Google Lighthouse no incluye el INP, uno de los Core Web Vitals? Seg\u00fan la fuente, hay razones interesantes &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Por qu\u00e9 Google Lighthouse no incluye INP, un elemento esencial de la Web\" class=\"read-more button\" href=\"https:\/\/quondos.com\/mag\/por-que-google-lighthouse-no-incluye-inp-un-elemento-esencial-de-la-web\/#more-127558\" aria-label=\"Leer m\u00e1s sobre Por qu\u00e9 Google Lighthouse no incluye INP, un elemento esencial de la Web\">Leer m\u00e1s<\/a><\/p>\n","protected":false},"author":850,"featured_media":127560,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[236],"tags":[],"class_list":["post-127558","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50","no-featured-image-padding"],"_links":{"self":[{"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/posts\/127558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/users\/850"}],"replies":[{"embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/comments?post=127558"}],"version-history":[{"count":2,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/posts\/127558\/revisions"}],"predecessor-version":[{"id":127561,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/posts\/127558\/revisions\/127561"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/media\/127560"}],"wp:attachment":[{"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/media?parent=127558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/categories?post=127558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/tags?post=127558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}