{"id":343,"date":"2019-04-10T14:07:59","date_gmt":"2019-04-10T19:07:59","guid":{"rendered":"https:\/\/www.tesseractspace.com\/blog\/?p=343"},"modified":"2019-04-10T19:52:53","modified_gmt":"2019-04-11T00:52:53","slug":"auditorias-de-desempeno-para-sitios-web-con-lighthouse","status":"publish","type":"post","link":"https:\/\/www.tesseractspace.com\/blog\/auditorias-de-desempeno-para-sitios-web-con-lighthouse\/","title":{"rendered":"Auditor\u00edas de desempe\u00f1o para sitios web con Lighthouse"},"content":{"rendered":"\n

El desempe\u00f1o (performance<\/em>) de un sitio web es un elemento clave en su dise\u00f1o de experiencia de usuario, pero su medici\u00f3n y optimizaci\u00f3n depende de muchos factores. Lighthouse es una herramienta para automatizar la medici\u00f3n y diagn\u00f3stico de los indicadores de desempe\u00f1o de un sitio.<\/h4>\n\n\n\n

El concepto de desempe\u00f1o<\/strong> (performance<\/em>) de un sitio web se refiere a la percepci\u00f3n de muchos elementos y factores en la interacci\u00f3n entre un usuario y el sitio. Entre estos elementos est\u00e1n el tiempo de carga del sitio, su usabilidad percibida, su accesibilidad, la facilidad para encontrarlo en un buscador<\/strong>, entre muchos otros.<\/p>\n\n\n\n

En el proceso de dise\u00f1o de la experiencia de usuario, es importante poder convertir los elementos de desempe\u00f1o en objetivos cuantitativos (<\/a>m\u00e9tricas<\/a><\/strong>)<\/a> que describan la implementaci\u00f3n del desempe\u00f1o y que sobre las que se puedan definir metas para poder hacer trabajo de optimizaci\u00f3n y mejora.<\/p>\n\n\n\n

Lighthouse para medici\u00f3n de desempe\u00f1o <\/h3>\n\n\n\n

Lighthouse<\/a><\/strong> es una herramienta opensource<\/em> para mejorar la calidad del desempe\u00f1o de una p\u00e1gina web. Se puede utilizar en cualquier p\u00e1gina web, p\u00fablica o en proceso de desarrollo, y ofrece auditor\u00edas<\/strong> de desempe\u00f1o, accesibilidad, buenas pr\u00e1cticas de dise\u00f1o, posicionamiento en buscadores y otras m\u00e1s.<\/p>\n\n\n\n

Lighthouse<\/strong> puede ejecutarse directo desde Google Chrome<\/a><\/strong> o desde la l\u00ednea de comandos en una consola como un m\u00f3dulo de node.js<\/strong>.<\/p>\n\n\n\n

C\u00f3mo realizar una auditor\u00eda con Lighthouse desde Chrome<\/h4>\n\n\n\n

En sus primeras versiones Lighthouse<\/a><\/strong> se instalaba en <\/a>Chrome<\/a><\/strong> como una extensi\u00f3n<\/a>. M\u00e1s recientemente ya viene incluido en las herramientas para desarrolladores (developer tools)<\/em> de Chrome<\/strong>:<\/p>\n\n\n\n

\"Lighthouse
Lighthouse<\/strong> se puede encontrar en la opci\u00f3n \u00abHerramientas del desarrollador<\/strong>\u00bb en Google Chrome<\/figcaption><\/figure><\/div>\n\n\n\n

Al abrir las herramientas de desarrollador<\/em> en Chrome<\/strong> (tambi\u00e9n con el shortcut<\/em> Ctrl+Shift+i<\/strong>) hay que buscar la pesta\u00f1a de Auditor\u00edas (audits<\/em>) en la parte superior:<\/p>\n\n\n\n

\"Las
Las auditor\u00edas de Lighthouse se encuentran en las opciones de navegaci\u00f3n en la parte superior (audits)<\/figcaption><\/figure><\/div>\n\n\n\n

En la pesta\u00f1a de Auditor\u00edas <\/strong>(audits<\/em>) se encuentran las diferentes auditor\u00edas que se pueden realizar sobre la p\u00e1gina web. Se puede elegir realizarlas en modo para dispositivos m\u00f3viles o para escritorio, as\u00ed como simular un ancho de banda reducido para la prueba o no:<\/p>\n\n\n\n

\"Las
Las opciones para realizar auditor\u00edas en una p\u00e1gina web con Lighthouse, para desktop o m\u00f3vles, y con diferentes anchos de banda.<\/figcaption><\/figure><\/div>\n\n\n\n

Con la p\u00e1gina que se quiere evaluar abierta en el navegador, se seleccionan las auditor\u00edas que se quieren ejecutar (desempe\u00f1o, progressive web app, mejores pr\u00e1cticas, accesibilidad <\/strong>y\/o optimizaci\u00f3n para buscadores<\/strong>) y se ejecutan las auditor\u00edas.<\/p>\n\n\n\n

El an\u00e1lisis tomar\u00e1 algunos minutos, dependiendo del tama\u00f1o y complejidad de la p\u00e1gina:<\/p>\n\n\n\n

\"Lighthouse
Lighthouse ejecutando auditor\u00edas de desempe\u00f1o sobre una p\u00e1gina web<\/figcaption><\/figure><\/div>\n\n\n\n

Terminada la revisi\u00f3n, Lighthouse<\/strong> genera un informe sobre el desempe\u00f1o de la p\u00e1gina, con indicadores que van de 0 a 100. A partir de ah\u00ed, se utiliza la informaci\u00f3n en las auditor\u00edas fallidas como indicadores de desempe\u00f1o de la p\u00e1gina. <\/p>\n\n\n\n

\"Reporte
Reporte de las auditor\u00edas de Lighthouse sobre una p\u00e1gina web, con los indicadores num\u00e9ricos y el an\u00e1lisis sobre lo que funciona y lo que se puede mejorar.<\/figcaption><\/figure><\/div>\n\n\n\n

Cada auditor\u00eda tiene informaci\u00f3n y enlaces de referencia que explican por qu\u00e9 la auditor\u00eda es importante y c\u00f3mo resolver los problemas que se encontraron para mejorar su desempe\u00f1o.<\/p>\n\n\n\n

\"Reporte
Reporte de auditor\u00eda de desempe\u00f1o de una p\u00e1gina web en Lighthouse, con indicadores cuantitativos de velocidad de carga, tiempo de renderizado, indexaci\u00f3n, etc. y recomendaciones sobre qu\u00e9 es necesario mejorar y por qu\u00e9.<\/figcaption><\/figure><\/div>\n\n\n\n

C\u00f3mo realizar una auditor\u00eda con Lighthouse desde la l\u00ednea de comandos<\/h4>\n\n\n\n

Las auditor\u00edas de Lighthouse<\/strong> pueden ejecutarse desde la l\u00ednea de comandos en una consola con node.js<\/strong>. Para hacerlo, es necesario:<\/p>\n\n\n\n

  1. Tener instalada una versi\u00f3n actualizada de <\/a>Chrome<\/a><\/strong>.<\/li>
  2. Tener instalada una versi\u00f3n estable de <\/a>node.js<\/a><\/strong><\/li>
  3. Instalar el m\u00f3dulo de Lighthouse<\/strong> para node.js:<\/strong><\/li><\/ol>\n\n\n\n
    npm install -g lighthouse<\/code><\/pre>\n\n\n\n
    Para correr las auditor\u00edas se utiliza el siguiente comando, sustituyendo <url> por la direcci\u00f3n de la p\u00e1gina que se quiere evaluar:<\/p>\n\n\n\n
    lighthouse <url><\/code><\/pre>\n\n\n\n
    Para ver las opciones que se pueden configurar en esta modalidad, se escribe:<\/p>\n\n\n\n
    lighthouse --help<\/code><\/pre>\n\n\n\n
    Esta opci\u00f3n es muy \u00fatil para analizar muchas p\u00e1ginas de forma automatizada, en lugar de revisarlas manualmente una por una con Chrome<\/strong>. La opci\u00f3n de Lighthouse CLI<\/strong> (Command Line Interface<\/em>) se puede usar en combinaci\u00f3n con el Sitemap<\/strong> de un sitio web<\/a> para auditar todas sus p\u00e1ginas en una sola sesi\u00f3n. <\/p>\n\n\n\n
    Gesti\u00f3n de reportes de Lighthouse<\/h3>\n\n\n\n
    \"\"
    Descarga de reportes de Lighthouse, junto al s\u00edmbolo de \u00ab+\u00bb<\/figcaption><\/figure><\/div>\n\n\n\n
    Lighthouse<\/strong> genera los reportes de sus auditor\u00edas en de texto archivos con formato <\/a>JSON<\/a><\/strong>. Para obtenerlos, se pueden descargar dando clic en la la flecha de \u00abDownload report<\/em>\u00bb en la esquina superior derecha de la herramienta.<\/p>\n\n\n\n
    Para hacerlo desde la consola, se utiliza este comando:<\/p>\n\n\n\n
    lighthouse --output json --nombre-del-archivo <\/pre>\n\n\n\n
    Para compartir los reportes, se puede utilizar Lighthouse Viewer<\/a>, una herramienta que genera una URL para compartir el reporte:<\/p>\n\n\n\n
    \"Lighthouse
    Lighthouse Viewer, una herramienta para analizar y compartir los resultados de las auditor\u00edas<\/figcaption><\/figure><\/div>\n\n\n\n
    \"Ejemplo
    Ejemplo de un reporte de auditor\u00eda en Lighthouse Viewer<\/figcaption><\/figure><\/div>\n\n\n\n
    Conclusi\u00f3n<\/h3>\n\n\n\n
    Como herramienta, Lighthouse<\/strong> realiza un an\u00e1lisis automatizado y cuantitativo de muchos factores que afectan el desempe\u00f1o de un sitio web. El reporte que genera puede utilizarse como base para tomar medidas de optimizaci\u00f3n tanto en dise\u00f1o, contenido y desarrollo, y por consecuencia, mejorar la experiencia de sus usuarios.<\/p>\n\n\n\n
    Hay que tener en cuenta que Lighthouse<\/strong> no cubre todos los factores de an\u00e1lisis de desempe\u00f1o<\/strong> y que no es la \u00fanica evaluaci\u00f3n que debe realizarse<\/strong>. Hay otros m\u00e9todos de evaluaci\u00f3n de factores cualitativos como las heur\u00edsticas de usabilidad<\/a> que deben realizarse para complementar los resultados de una auditor\u00eda de Lighthouse<\/strong>. <\/p>\n","protected":false},"excerpt":{"rendered":"
    Lighthouse es una herramienta para automatizar la medici\u00f3n y diagn\u00f3stico de los indicadores de desempe\u00f1o de un sitio web.<\/p>\n","protected":false},"author":1,"featured_media":355,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[72],"tags":[114,115,21,112,116,107],"class_list":["post-343","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-investigacion","tag-chrome","tag-desempeno","tag-google","tag-navegadores-web","tag-reportes","tag-sitios-web","entry"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/04\/google-lighthouse.png?fit=1200%2C385&ssl=1","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/comments?post=343"}],"version-history":[{"count":3,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/343\/revisions"}],"predecessor-version":[{"id":359,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/343\/revisions\/359"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/media\/355"}],"wp:attachment":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/media?parent=343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/categories?post=343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/tags?post=343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}