{"id":1141,"date":"2020-10-27T11:43:29","date_gmt":"2020-10-27T11:43:29","guid":{"rendered":"https:\/\/madeinmedia.es\/blog\/?p=1141"},"modified":"2020-10-28T09:34:21","modified_gmt":"2020-10-28T09:34:21","slug":"como-analizar-el-rendimiento-de-tu-sitio-web-con-google-lighthouse","status":"publish","type":"post","link":"https:\/\/madeinmedia.es\/blog\/como-analizar-el-rendimiento-de-tu-sitio-web-con-google-lighthouse\/","title":{"rendered":"C\u00f3mo analizar el rendimiento de tu sitio web con Google Lighthouse"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Google Lighthouse<\/strong> es una herramienta de c\u00f3digo abierto que <strong>te<\/strong> <strong>permite llevar a cabo una auditor\u00eda automatizada con test en nuestro sitio web<\/strong> para comprobar si se trata de una aplicaci\u00f3n web progresiva (PWA) y poder mejorar su calidad y rendimiento. Adem\u00e1s, <strong>se puede utilizar en cualquier p\u00e1gina web, <\/strong>sea p\u00fablica o no, es decir, podremos beneficiarnos de esta herramienta en webs que no sean de nuestra propiedad.<\/p><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_75 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\">\u00bfQu\u00e9 encontrar\u00e1s en este art\u00edculo de marketing?<\/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:\/\/madeinmedia.es\/blog\/como-analizar-el-rendimiento-de-tu-sitio-web-con-google-lighthouse\/#%C2%BFComo_podemos_utilizar_Google_Lighthouse\" >\u00bfC\u00f3mo podemos utilizar Google Lighthouse?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/madeinmedia.es\/blog\/como-analizar-el-rendimiento-de-tu-sitio-web-con-google-lighthouse\/#%C2%BFPara_que_sirve_exactamente_Google_Lighthouse\" >\u00bfPara qu\u00e9 sirve exactamente Google Lighthouse?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/madeinmedia.es\/blog\/como-analizar-el-rendimiento-de-tu-sitio-web-con-google-lighthouse\/#Accesibilidad\" >Accesibilidad<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/madeinmedia.es\/blog\/como-analizar-el-rendimiento-de-tu-sitio-web-con-google-lighthouse\/#Buenas_practicas\" >Buenas pr\u00e1cticas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/madeinmedia.es\/blog\/como-analizar-el-rendimiento-de-tu-sitio-web-con-google-lighthouse\/#SEO\" >SEO<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/madeinmedia.es\/blog\/como-analizar-el-rendimiento-de-tu-sitio-web-con-google-lighthouse\/#Aplicacion_web_progresiva_PWA\" >Aplicaci\u00f3n web progresiva (PWA)<\/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:\/\/madeinmedia.es\/blog\/como-analizar-el-rendimiento-de-tu-sitio-web-con-google-lighthouse\/#%C2%BFEn_que_puede_beneficiar_Google_Lighthouse_a_tu_tienda_online\" >\u00bfEn qu\u00e9 puede beneficiar Google Lighthouse a tu tienda online?<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%C2%BFComo_podemos_utilizar_Google_Lighthouse\"><\/span>\u00bfC\u00f3mo podemos utilizar Google Lighthouse?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Actualmente <strong>existen\ndos formas de instalarlo: mediante una<\/strong> <strong>extensi\u00f3n\npara Chrome<\/strong> (la forma m\u00e1s sencilla) <strong>o\nmediante<\/strong> <strong>l\u00ednea de comandos con NPM.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para poder utilizar Google Lighthouse en Chrome, tendremos\nque buscar dicha extensi\u00f3n e instalarla. Una vez hecho esto, aparecer\u00e1 el icono\nen la barra de herramientas del navegador. Al hacer clic en \u00e9l, se lanzar\u00e1 el\ntest en la web que tengamos abierta en ese momento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Los resultados ser\u00e1n\nvisibles en el navegador una vez que el test finalice, <\/strong>y podremos acceder a\ndiversos datos relacionados con la accesibilidad, las buenas pr\u00e1cticas y el SEO\nde la web, entre otros; as\u00ed como con qu\u00e9 porcentaje cumple dicha web para ser\nuna PWA.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%C2%BFPara_que_sirve_exactamente_Google_Lighthouse\"><\/span>\u00bfPara qu\u00e9 sirve exactamente Google Lighthouse?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">B\u00e1sicamente, <strong>Google\nLighthouse nos ayuda a hacer auditor\u00edas de nuestra web.<\/strong> Cuando vayas a\nusarlo, <strong>te dar\u00e1 la opci\u00f3n de activar o\ndesactivar las m\u00e9tricas que te interesen<\/strong> de las siguientes \u00e1reas y que\nposteriormente aparecer\u00e1n en el informe:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Accesibilidad\"><\/span>Accesibilidad<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Es fundamental que la <strong>accesibilidad<\/strong>\nest\u00e9 presente en cualquier web porque <strong>hace\nla vida m\u00e1s f\u00e1cil a todos los usuarios. <\/strong>Entre los factores que componen la\naccesibilidad, podemos mencionar algunos como el contraste de los colores, los\nformularios o las im\u00e1genes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Google Lighthouse te indicar\u00e1 que los revises manualmente si existe alg\u00fan aspecto que mejorar  y hasta te dar\u00e1 algunas auditor\u00edas que podr\u00edas hacer para mejorar la accesibilidad de tu web.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Buenas_practicas\"><\/span>Buenas pr\u00e1cticas<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Te estar\u00e1s preguntando, \u00bfqu\u00e9 son las buenas pr\u00e1cticas de un\nsitio web? Y es, sin duda, una pregunta muy acertada, porque la explicaci\u00f3n de\nlo que incluye las buenas pr\u00e1cticas de una web es bastante extensa. <strong>En este apartado podr\u00edamos incluir desde permitir\npegar la contrase\u00f1a en su campo correspondiente hasta la relaci\u00f3n de aspecto y\nla resoluci\u00f3n de las im\u00e1genes de la web.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"SEO\"><\/span>SEO<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Con Google Lighthouse <strong>podr\u00e1s\nobtener un informe de algunos factores tan importantes en el SEO como son la\nindexaci\u00f3n o el rastreo de las p\u00e1ginas de una web, <\/strong>entre otros muchos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Aplicacion_web_progresiva_PWA\"><\/span>Aplicaci\u00f3n web progresiva (PWA)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Las <strong>aplicaciones web progresivas<\/strong> se diferencian de las web nativas en que <strong>se usan a trav\u00e9s del navegador,<\/strong> es decir, no se descargan. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Algunos de los factores que una aplicaci\u00f3n web progresiva debe cumplir son los siguientes: <strong>tiempos de carga muy reducidos, dise\u00f1o <em>responsive, <\/em>notificaciones <em>push<\/em> o interfaz similar a la de una <em>app<\/em> nativa. <\/strong>Gracias a Google Lighthouse, <strong>podr\u00e1s tener un mejor control de todos estos factores y otros muchos.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%C2%BFEn_que_puede_beneficiar_Google_Lighthouse_a_tu_tienda_online\"><\/span>\u00bfEn qu\u00e9 puede beneficiar Google Lighthouse a tu tienda <em>online<\/em>?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En todos los sitios web, y especialmente en los comercios\nelectr\u00f3nicos, <strong>el tiempo de carga es\nfundamental y afecta directamente a los <em>rankings<\/em>\ny a la experiencia de usuario <\/strong>de la web en cuesti\u00f3n, ya que si dicho factor\nest\u00e1 optimizado, <strong>habr\u00e1 mejor experiencia\nde compra y, por regla general, m\u00e1s conversiones.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por tanto, <strong>si queremos controlar todos los aspectos que hay que tener en cuenta para que la experiencia de usuario sea lo m\u00e1s buena posible<\/strong>, <em>Google Lighthouse<\/em> puede sernos de gran ayuda con esta tarea.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si est\u00e1s buscando mejorar tu web y no sabes ni por d\u00f3nde empezar, en Madein:Media podemos echarte una mano. Cont\u00e1ctanos y te ayudaremos a que tu negocio funcione como nunca antes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google Lighthouse es una herramienta de c\u00f3digo abierto que te permite llevar a cabo una auditor\u00eda automatizada con test en nuestro sitio web para comprobar si se trata de una aplicaci\u00f3n web progresiva (PWA) y poder mejorar su calidad y rendimiento. Adem\u00e1s, se puede utilizar en cualquier p\u00e1gina web, sea p\u00fablica o no, es decir, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1147,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-1141","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo"],"_links":{"self":[{"href":"https:\/\/madeinmedia.es\/blog\/wp-json\/wp\/v2\/posts\/1141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madeinmedia.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/madeinmedia.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/madeinmedia.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madeinmedia.es\/blog\/wp-json\/wp\/v2\/comments?post=1141"}],"version-history":[{"count":6,"href":"https:\/\/madeinmedia.es\/blog\/wp-json\/wp\/v2\/posts\/1141\/revisions"}],"predecessor-version":[{"id":1155,"href":"https:\/\/madeinmedia.es\/blog\/wp-json\/wp\/v2\/posts\/1141\/revisions\/1155"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/madeinmedia.es\/blog\/wp-json\/wp\/v2\/media\/1147"}],"wp:attachment":[{"href":"https:\/\/madeinmedia.es\/blog\/wp-json\/wp\/v2\/media?parent=1141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/madeinmedia.es\/blog\/wp-json\/wp\/v2\/categories?post=1141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/madeinmedia.es\/blog\/wp-json\/wp\/v2\/tags?post=1141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}