{"id":81651,"date":"2022-10-12T21:36:27","date_gmt":"2022-10-12T19:36:27","guid":{"rendered":"https:\/\/rmarketingdigital.com\/development\/supervision-del-rendimiento-con-lighthouse-ci\/"},"modified":"2020-09-16T15:05:17","modified_gmt":"2020-09-16T18:05:17","slug":"supervision-del-rendimiento-con-lighthouse-ci","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/dev\/supervision-del-rendimiento-con-lighthouse-ci\/","title":{"rendered":"Performance monitoring with Lighthouse CI"},"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\">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=\"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\/supervision-del-rendimiento-con-lighthouse-ci\/#Vision-general\" >Visi\u00f3n general<\/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\/supervision-del-rendimiento-con-lighthouse-ci\/#Usar-Lighthouse-CI-localmente\" >Usar Lighthouse CI localmente<\/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\/supervision-del-rendimiento-con-lighthouse-ci\/#Configure-su-proceso-de-CI-para-ejecutar-Lighthouse-CI\" >Configure su proceso de CI para ejecutar Lighthouse CI<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/supervision-del-rendimiento-con-lighthouse-ci\/#Configurar-una-accion-de-GitHub-para-ejecutar-Lighthouse-CI\" >Configurar una acci\u00f3n de GitHub para ejecutar Lighthouse CI<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/supervision-del-rendimiento-con-lighthouse-ci\/#Configurar-una-verificacion-de-estado-de-GitHub\" >Configurar una verificaci\u00f3n de estado de GitHub<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/supervision-del-rendimiento-con-lighthouse-ci\/#Configurar-el-servidor-Lighthouse-CI\" >Configurar el servidor Lighthouse CI<\/a><\/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\/supervision-del-rendimiento-con-lighthouse-ci\/#Saber-mas\" >Saber m\u00e1s<\/a><\/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>          C\u00f3mo agregar Lighthouse a un sistema de integraci\u00f3n continua, como GitHub Actions.\n        <\/p>\n<p>\n          <time>27 de julio de 2020<\/time><\/p>\n<div class=\"w-layout-container--narrow w-post-signpost\">\n  <span class=\"w-post-signpost__title\">Aparece en:<\/span><br \/>\n  Tiempos de carga r\u00e1pidos\n<\/div>\n<\/header>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse-ci\">Faro CI<\/a> es un conjunto de herramientas para utilizar Lighthouse durante la integraci\u00f3n continua.  Lighthouse CI se puede incorporar a los flujos de trabajo de los desarrolladores de muchas formas diferentes.  Esta gu\u00eda cubre los siguientes temas:<\/p>\n<ul>\n<li>Usando la CLI de Lighthouse CI.<\/li>\n<li>Configuraci\u00f3n de su proveedor de CI para ejecutar Lighthouse CI.<\/li>\n<li>Configurar un <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/features\/actions\">Acci\u00f3n de GitHub<\/a> y<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/help.github.com\/en\/github\/collaborating-with-issues-and-pull-requests\/about-status-checks\">comprobaci\u00f3n del estado<\/a><br \/>\npara Lighthouse CI.  Esto mostrar\u00e1 autom\u00e1ticamente los resultados de Lighthouse en las solicitudes de extracci\u00f3n de GitHub.<\/li>\n<li>Creaci\u00f3n de un panel de rendimiento y un almac\u00e9n de datos para informes Lighthouse.<\/li>\n<\/ul>\n<h2 id=\"overview\"><span class=\"ez-toc-section\" id=\"Vision-general\"><\/span>Visi\u00f3n general <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Lighthouse CI es un conjunto de herramientas gratuitas que facilitan el uso de Lighthouse para la supervisi\u00f3n del rendimiento.  Un solo informe Lighthouse proporciona una instant\u00e1nea del rendimiento de una p\u00e1gina web en el momento en que se ejecuta;  Lighthouse CI muestra c\u00f3mo estos hallazgos han cambiado con el tiempo.  Esto se puede usar para identificar el impacto de cambios de c\u00f3digo particulares o garantizar que se cumplan los umbrales de rendimiento durante los procesos de integraci\u00f3n continua.  Aunque la supervisi\u00f3n del rendimiento es el caso de uso m\u00e1s com\u00fan de Lighthouse CI, se puede utilizar para supervisar otros aspectos del informe Lighthouse, por ejemplo, SEO o accesibilidad.<\/p>\n<p>La funcionalidad principal de Lighthouse CI la proporciona la interfaz de l\u00ednea de comandos de Lighthouse CI.  (Nota: esta es una herramienta separada de la <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse#using-the-node-cli\">CLI de Lighthouse<\/a>.) La CLI de Lighthouse CI proporciona un conjunto de<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse-ci\/blob\/master\/docs\/configuration.md#commands\">comandos<\/a><br \/>\npara usar Lighthouse CI.  Por ejemplo, el <code>autorun<\/code> El comando ejecuta m\u00faltiples ejecuciones de Lighthouse, identifica el informe medio de Lighthouse y carga el informe para su almacenamiento.  Este comportamiento se puede personalizar en gran medida pasando indicadores adicionales o personalizando el archivo de configuraci\u00f3n de Lighthouse CI, <code>lighthouserc.js<\/code>.<\/p>\n<p>Aunque la funcionalidad principal de Lighthouse CI se encapsula principalmente en la CLI de Lighthouse CI, Lighthouse CI se utiliza normalmente a trav\u00e9s de uno de los siguientes enfoques:<\/p>\n<ul>\n<li>Ejecuci\u00f3n de Lighthouse CI como parte de la integraci\u00f3n continua<\/li>\n<li>Uso de una acci\u00f3n Lighthouse CI GitHub que se ejecuta y comenta en cada solicitud de extracci\u00f3n<\/li>\n<li>Seguimiento del rendimiento a lo largo del tiempo a trav\u00e9s del panel proporcionado por Lighthouse Server.<\/li>\n<\/ul>\n<p>Todos estos enfoques se basan en la CLI de Lighthouse CI.<\/p>\n<p>Las alternativas a Lighthouse CI incluyen servicios de monitoreo de rendimiento de terceros o escribir su propio script para recopilar datos de rendimiento durante el proceso de CI.  Deber\u00eda considerar el uso de un servicio de terceros si prefiere dejar que otra persona se encargue de la administraci\u00f3n de su servidor de monitoreo de rendimiento y dispositivos de prueba, o si desea capacidades de notificaci\u00f3n (como correo electr\u00f3nico o integraci\u00f3n de Slack) sin tener que crearlas. caracter\u00edsticas usted mismo.<\/p>\n<h2 id=\"cli\"><span class=\"ez-toc-section\" id=\"Usar-Lighthouse-CI-localmente\"><\/span>Usar Lighthouse CI localmente <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Esta secci\u00f3n explica c\u00f3mo ejecutar e instalar la CLI de Lighthouse CI localmente y c\u00f3mo configurar <code>lighthouserc.js<\/code>.  Ejecutar la CLI de Lighthouse CI localmente es la forma m\u00e1s f\u00e1cil de asegurarse de que su <code>lighthouserc.js<\/code> est\u00e1 configurado correctamente.<\/p>\n<ol>\n<li>\n<p>Instale la CLI de Lighthouse CI.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">npm<\/span> <span class=\"token function\">install<\/span> -g @lhci\/cli<\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Lighthouse CI se configura colocando un <code>lighthouserc.js<\/code> archivo en la ra\u00edz del repositorio de su proyecto.  Este archivo es obligatorio y contendr\u00e1 informaci\u00f3n de configuraci\u00f3n relacionada con Lighthouse CI.  Aunque Lighthouse CI puede <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse-ci\/blob\/master\/docs\/configuration.md#build-context\">configurado para ser utilizado sin un repositorio de git<\/a>, las instrucciones de este art\u00edculo asumen que el repositorio de su proyecto est\u00e1 configurado para usar git.<\/p>\n<\/li>\n<li>\n<p>En la ra\u00edz de su repositorio, cree un <code>lighthouserc.js<\/code> <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse-ci\/blob\/v0.4.1\/docs\/configuration.md#configuration-file\">archivo de configuraci\u00f3n<\/a>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">touch<\/span> lighthouserc.js<\/code><\/pre>\n<p><\/web-copy-code><\/li>\n<li>\n<p>Agregue el siguiente c\u00f3digo a <code>lighthouserc.js<\/code>.  Este c\u00f3digo es una configuraci\u00f3n de Lighthouse CI vac\u00eda.  Agregar\u00e1 a esta configuraci\u00f3n en pasos posteriores.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">module<span class=\"token punctuation\">.<\/span>exports <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br>ci<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br>collect<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br>upload<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/li>\n<li>\n<p>Cada vez que se ejecuta Lighthouse CI, inicia un servidor para servir su sitio.  Este servidor es lo que permite a Lighthouse cargar su sitio incluso cuando no hay otros servidores en ejecuci\u00f3n.  Cuando Lighthouse CI termine de ejecutarse, apagar\u00e1 autom\u00e1ticamente el servidor.  Para asegurarse de que la publicaci\u00f3n funcione correctamente, debe configurar el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse-ci\/blob\/master\/docs\/configuration.md#detecting-collectstaticdistdir\"><code>staticDistDir<\/code><\/a><\/p>\n<p>o<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse-ci\/blob\/v0.4.1\/docs\/configuration.md#startservercommand\"><code>startServerCommand<\/code><\/a><\/p>\n<p>propiedades.<\/p>\n<p>Si su sitio es est\u00e1tico, agregue el <code>staticDistDir<\/code> propiedad a la <code>ci.collect<\/code><br \/>\nobjeto para indicar d\u00f3nde se encuentran sus archivos est\u00e1ticos.  Lighthouse CI utilizar\u00e1 su propio servidor para servir estos archivos mientras prueba su sitio.  Si su sitio no es est\u00e1tico, agregue el <code>startServerCommand<\/code> propiedad a la<br \/>\n<code>ci.collect<\/code> objeto para indicar el comando que inicia su servidor.  Lighthouse CI iniciar\u00e1 un nuevo proceso de servidor durante la prueba y lo apagar\u00e1 despu\u00e9s.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><br>collect<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br>staticDistDir<span class=\"token operator\">:<\/span> <span class=\"token string\">'.\/public'<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><br>collect<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br>startServerCommand<span class=\"token operator\">:<\/span> <span class=\"token string\">'npm run start'<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/li>\n<li>\n<p>A\u00f1ade el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse-ci\/blob\/master\/docs\/configuration.md#url\"><code>url<\/code><\/a><\/p>\n<p>propiedad a la <code>ci.collect<\/code> objeto para indicar URL (s) en las que Lighthouse CI debe ejecutar Lighthouse.  El valor de la <code>url<\/code> la propiedad debe proporcionarse como una matriz de URL;  esta matriz puede contener una o m\u00e1s URL.  De forma predeterminada, Lighthouse CI ejecutar\u00e1 Lighthouse tres veces en cada URL.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">collect<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br>url<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">'http:\/\/localhost:8080'<\/span><span class=\"token punctuation\">]<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Nota: El servidor que configur\u00f3 en el paso anterior deber\u00eda poder publicar estas URL.  Por lo tanto, si est\u00e1 ejecutando Lighthouse CI localmente, estas URL probablemente deber\u00edan incluir <code>localhost<\/code> en lugar de su host de producci\u00f3n.<\/p>\n<\/li>\n<li>\n<p>A\u00f1ade el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse-ci\/blob\/master\/docs\/configuration.md#target\"><code>target<\/code><\/a><\/p>\n<p>propiedad a la <code>ci.upload<\/code> objeto y establezca el valor en<br \/>\n<code>'temporary-public-storage'<\/code>.  Los informes de Lighthouse recopilados por Lighthouese CI se cargar\u00e1n en un almacenamiento p\u00fablico temporal.  El informe permanecer\u00e1 all\u00ed durante siete d\u00edas y luego se eliminar\u00e1 autom\u00e1ticamente.  Esta gu\u00eda de configuraci\u00f3n utiliza la opci\u00f3n de carga de \u00abalmacenamiento p\u00fablico temporal\u00bb porque es r\u00e1pida de configurar.  Para obtener informaci\u00f3n sobre otras formas de almacenar informes Lighthouse, consulte la<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse-ci\/blob\/master\/docs\/configuration.md#target\">documentaci\u00f3n<\/a>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">upload<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br>target<span class=\"token operator\">:<\/span> <span class=\"token string\">'temporary-public-storage'<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>La ubicaci\u00f3n de almacenamiento del informe ser\u00e1 similar a esta:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-text\"><code class=\"language-text\">https:\/\/storage.googleapis.com\/lighthouse-infrastructure.appspot.com\/reports\/1580152437799-46441.report.html<\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>(Esta URL no funcionar\u00e1 porque el informe ya se elimin\u00f3).<\/p>\n<\/li>\n<li>\n<p>Ejecute la CLI de Lighthouse CI desde la terminal utilizando el <code>autorun<\/code> mando.  Esto ejecutar\u00e1 Lighthouse tres veces y cargar\u00e1 el informe de Lighthouse mediano.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-shell\"><code class=\"language-shell\">lhci autorun<\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Si ha configurado correctamente Lighthouse CI, la ejecuci\u00f3n de este comando deber\u00eda producir un resultado similar a este:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-shell\"><code class=\"language-shell\">\u2705  .lighthouseci\/ directory writable<br>\u2705  Configuration <span class=\"token function\">file<\/span> found<br>\u2705  Chrome installation found<br>\u26a0\ufe0f   GitHub token not <span class=\"token builtin class-name\">set<\/span><br>Healthcheck passed<span class=\"token operator\">!<\/span><p>Started a web server on port <span class=\"token number\">65324<\/span><span class=\"token punctuation\">..<\/span>.<br>Running Lighthouse <span class=\"token number\">3<\/span> time<span class=\"token punctuation\">(<\/span>s<span class=\"token punctuation\">)<\/span> on http:\/\/localhost:65324\/index.html<br>Run <br>Run <br>Run <br>Done running Lighthouse<span class=\"token operator\">!<\/span><\/p><p>Uploading median LHR of http:\/\/localhost:65324\/index.html<span class=\"token punctuation\">..<\/span>.success<span class=\"token operator\">!<\/span><br>Open the report at https:\/\/storage.googleapis.com\/lighthouse-infrastructure.appspot.com\/reports\/1591720514021-82403.report.html<br>No GitHub token set, skipping GitHub status check.<\/p><p>Done running autorun.<\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Puedes ignorar el <code>GitHub token not set<\/code> mensaje en la salida de la consola.  Un token de GitHub solo es necesario si desea utilizar Lighthouse CI con una acci\u00f3n de GitHub.  M\u00e1s adelante en este art\u00edculo se explica c\u00f3mo configurar una acci\u00f3n de GitHub.<\/p>\n<p>Al hacer clic en el enlace en la salida que comienza con<br \/>\n<code>https:\/\/storage.googleapis.com...<\/code> lo llevar\u00e1 al informe de Lighthouse correspondiente a la carrera mediana de Lighthouse.<\/p>\n<p>Los valores predeterminados utilizados por <code>autorun<\/code> se puede anular a trav\u00e9s de la l\u00ednea de comando o<br \/>\n<code>lighthouserc.js<\/code>.  Por ejemplo, el <code>lighthouserc.js<\/code> La configuraci\u00f3n siguiente indica que se deben recopilar cinco ejecuciones de Lighthouse cada vez <code>autorun<\/code><br \/>\nejecuta.<\/p>\n<\/li>\n<li>\n<p>Actualizar <code>lighthouserc.js<\/code> usar el <code>numberOfRuns<\/code> propiedad:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">module<span class=\"token punctuation\">.<\/span>exports <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br>collect<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br>numberOfRuns<span class=\"token operator\">:<\/span> <span class=\"token number\">5<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/li>\n<li>\n<p>Vuelva a ejecutar el <code>autorun<\/code> mando:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-shell\"><code class=\"language-shell\">lhci autorun<\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>La salida del terminal debe mostrar que Lighthouse se ha ejecutado cinco veces en lugar de las tres predeterminadas:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-shell\"><code class=\"language-shell\">\u2705  .lighthouseci\/ directory writable<br>\u2705  Configuration <span class=\"token function\">file<\/span> found<br>\u2705  Chrome installation found<br>\u26a0\ufe0f   GitHub token not <span class=\"token builtin class-name\">set<\/span><br>Healthcheck passed<span class=\"token operator\">!<\/span><p>Automatically determined .\/dist as <span class=\"token variable\"><span class=\"token variable\">`<\/span>staticDistDir<span class=\"token variable\">`<\/span><\/span><span class=\"token builtin class-name\">.<\/span><br>Set it explicitly <span class=\"token keyword\">in<\/span> lighthouserc.json <span class=\"token keyword\">if<\/span> incorrect.<\/p><p>Started a web server on port <span class=\"token number\">64444<\/span><span class=\"token punctuation\">..<\/span>.<br>Running Lighthouse <span class=\"token number\">5<\/span> time<span class=\"token punctuation\">(<\/span>s<span class=\"token punctuation\">)<\/span> on http:\/\/localhost:64444\/index.html<br>Run <br>Run <br>Run <br>Run <br>Run <br>Done running Lighthouse<span class=\"token operator\">!<\/span><\/p><p>Uploading median LHR of http:\/\/localhost:64444\/index.html<span class=\"token punctuation\">..<\/span>.success<span class=\"token operator\">!<\/span><br>Open the report at https:\/\/storage.googleapis.com\/lighthouse-infrastructure.appspot.com\/reports\/1591716944028-6048.report.html<br>No GitHub token set, skipping GitHub status check.<\/p><p>Done running autorun.<\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Para conocer otras opciones de configuraci\u00f3n, consulte Lighthouse CI<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse-ci\/blob\/master\/docs\/configuration.md\">documentaci\u00f3n de configuraci\u00f3n<\/a>.<\/p>\n<\/li>\n<\/ol>\n<h2 id=\"ci-setup\"><span class=\"ez-toc-section\" id=\"Configure-su-proceso-de-CI-para-ejecutar-Lighthouse-CI\"><\/span>Configure su proceso de CI para ejecutar Lighthouse CI <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Lighthouse CI se puede utilizar con su herramienta de CI favorita.  los <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse-ci\/blob\/master\/docs\/getting-started.md#configure-your-ci-provider\">Configure su proveedor de CI<\/a><br \/>\nLa secci\u00f3n de la documentaci\u00f3n de Lighthouse CI contiene ejemplos de c\u00f3digo que muestran c\u00f3mo incorporar Lighthouse CI en los archivos de configuraci\u00f3n de herramientas de CI comunes.  Espec\u00edficamente, estos ejemplos de c\u00f3digo muestran c\u00f3mo ejecutar Lighthouse CI para recopilar medidas de rendimiento durante el proceso de CI.<\/p>\n<p>El uso de Lighthouse CI para recopilar medidas de rendimiento es un buen lugar para comenzar con la supervisi\u00f3n del rendimiento.  Sin embargo, los usuarios avanzados pueden querer ir un paso m\u00e1s all\u00e1 y usar Lighthouse CI para fallar en las compilaciones si no cumplen con los criterios predefinidos, como aprobar auditor\u00edas espec\u00edficas de Lighthouse o cumplir con todos los presupuestos de desempe\u00f1o.  Este comportamiento se configura a trav\u00e9s del<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse-ci\/blob\/master\/docs\/configuration.md#assert\"><code>assert<\/code><\/a><\/p>\n<p>propiedad de la <code>lighthouserc.js<\/code> expediente.<\/p>\n<p>Lighthouse CI admite tres niveles de afirmaciones:<\/p>\n<ul>\n<li><code>off<\/code>: ignorar afirmaciones<\/li>\n<li><code>warn<\/code>: imprime fallas en stderr<\/li>\n<li><code>error<\/code>: imprime fallas en stderr y sale de Lighthouse CI con un valor distinto de cero<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.gnu.org\/software\/bash\/manual\/html_node\/Exit-Status.html#:~:text=A%20non%2Dzero%20exit%20status,N%20as%20the%20exit%20status.\">c\u00f3digo de salida<\/a><\/li>\n<\/ul>\n<p>A continuaci\u00f3n se muestra un ejemplo de <code>lighthouserc.js<\/code> configuraci\u00f3n que incluye aserciones.  Establece afirmaciones para las puntuaciones de las categor\u00edas de accesibilidad y rendimiento de Lighthouse.  Para probar esto, agregue las afirmaciones que se muestran a continuaci\u00f3n a su <code>lighthouserc.js<\/code> y luego vuelva a ejecutar Lighthouse CI.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">module<span class=\"token punctuation\">.<\/span>exports <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br>ci<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br>collect<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br>assert<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br>assertions<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token string\">'categories:performance'<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">'warn'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>minScore<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token string\">'categories:accessibility'<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">'error'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>minScore<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">]<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br>upload<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>La salida de la consola que genera se ve as\u00ed:<\/p>\n<figure class=\"w-figure\">\n  <img alt='lhci-warning-8663364' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/lhci-warning-8663364.png' alt=\"Captura de pantalla de un mensaje de advertencia generado por Lighthouse CI\" class=\"w-screenshot\"><br \/>\n<\/figure>\n<p>Para obtener m\u00e1s informaci\u00f3n sobre las afirmaciones de Lighthouse CI, consulte la<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse-ci\/blob\/master\/docs\/configuration.md#assert\">documentaci\u00f3n<\/a>.<\/p>\n<h2 id=\"github-actions\"><span class=\"ez-toc-section\" id=\"Configurar-una-accion-de-GitHub-para-ejecutar-Lighthouse-CI\"><\/span>Configurar una acci\u00f3n de GitHub para ejecutar Lighthouse CI <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"w-aside w-aside--note\">\n<p>Esta secci\u00f3n asume que est\u00e1 familiarizado con las solicitudes de extracci\u00f3n de git, GitHub y GitHub.<\/p>\n<\/div>\n<p>UNA <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/features\/actions\">Acci\u00f3n de GitHub<\/a> se puede utilizar para ejecutar Lighthouse CI.  Esto generar\u00e1 un nuevo informe Lighthouse cada vez que se env\u00ede un cambio de c\u00f3digo a cualquier rama de un repositorio de GitHub.  Use esto junto con un <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/help.github.com\/en\/github\/collaborating-with-issues-and-pull-requests\/about-status-checks\">comprobaci\u00f3n del estado<\/a><br \/>\npara mostrar estos resultados en cada solicitud de extracci\u00f3n.<\/p>\n<figure class=\"w-figure\">\n  <img alt='github-action1-7329948' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/github-action1-7329948.png' alt=\"Captura de pantalla de una verificaci\u00f3n de estado de GitHub\" class=\"w-screenshot\"><br \/>\n<\/figure>\n<ol>\n<li>\n<p>En la ra\u00edz de su repositorio, cree un directorio llamado<br \/>\n<code>.github\/workflows<\/code>.  los<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/help.github.com\/en\/actions\/configuring-and-managing-workflows\/configuring-a-workflow#about-workflows\">flujos de trabajo<\/a><br \/>\npara su proyecto ir\u00e1 en este directorio.  Un flujo de trabajo es un proceso que se ejecuta en un momento predeterminado (por ejemplo, cuando se env\u00eda un c\u00f3digo) y se compone de una o m\u00e1s acciones.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">mkdir<\/span> .github<br><span class=\"token function\">mkdir<\/span> .github\/workflows<\/code><\/pre>\n<p><\/web-copy-code><\/li>\n<li>\n<p>En <code>.github\/workflows<\/code> crea un archivo llamado <code>lighthouse-ci.yaml<\/code>.  Este archivo contendr\u00e1 la configuraci\u00f3n para un nuevo flujo de trabajo.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-shell\"><code class=\"language-shell\"><span class=\"token function\">touch<\/span> lighthouse-ci.yaml<\/code><\/pre>\n<p><\/web-copy-code><\/li>\n<li>\n<p>Agregue el siguiente texto a <code>lighthouse-ci.yaml<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">name<\/span><span class=\"token punctuation\">:<\/span> Build project and run Lighthouse CI<br><span class=\"token key atrule\">on<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span>push<span class=\"token punctuation\">]<\/span><br><span class=\"token key atrule\">jobs<\/span><span class=\"token punctuation\">:<\/span><br><span class=\"token key atrule\">lhci<\/span><span class=\"token punctuation\">:<\/span><br><span class=\"token key atrule\">name<\/span><span class=\"token punctuation\">:<\/span> Lighthouse CI<br><span class=\"token key atrule\">runs-on<\/span><span class=\"token punctuation\">:<\/span> ubuntu<span class=\"token punctuation\">-<\/span>latest<br><span class=\"token key atrule\">steps<\/span><span class=\"token punctuation\">:<\/span><br><span class=\"token punctuation\">-<\/span> <span class=\"token key atrule\">uses<\/span><span class=\"token punctuation\">:<\/span> actions\/checkout@v1<br><span class=\"token punctuation\">-<\/span> <span class=\"token key atrule\">name<\/span><span class=\"token punctuation\">:<\/span> Use Node.js 10.x<br><span class=\"token key atrule\">uses<\/span><span class=\"token punctuation\">:<\/span> actions\/setup<span class=\"token punctuation\">-<\/span>node@v1<br><span class=\"token key atrule\">with<\/span><span class=\"token punctuation\">:<\/span><br><span class=\"token key atrule\">node-version<\/span><span class=\"token punctuation\">:<\/span> 10.x<br><span class=\"token punctuation\">-<\/span> <span class=\"token key atrule\">name<\/span><span class=\"token punctuation\">:<\/span> npm install<br><span class=\"token key atrule\">run<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">|<\/span><span class=\"token scalar string\"><br>npm install<\/span><br><span class=\"token punctuation\">-<\/span> <span class=\"token key atrule\">name<\/span><span class=\"token punctuation\">:<\/span> run Lighthouse CI<br><span class=\"token key atrule\">run<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">|<\/span><span class=\"token scalar string\"><br>npm install -g @lhci\/cli@0.3.x<br>lhci autorun --upload.target=temporary-public-storage || echo \"LHCI failed!\"<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Esta configuraci\u00f3n establece un flujo de trabajo que consta de un \u00fanico trabajo que se ejecutar\u00e1 cada vez que se env\u00ede un nuevo c\u00f3digo al repositorio.  Este trabajo tiene cuatro pasos:<\/p>\n<ul>\n<li>Consulte el repositorio en el que se ejecutar\u00e1 Lighthouse CI<\/li>\n<li>Instalar y configurar Node<\/li>\n<li>Instalar los paquetes npm necesarios<\/li>\n<li>Ejecute Lighthouse CI y cargue los resultados en un almacenamiento p\u00fablico temporal.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>Confirme estos cambios y env\u00edelos a GitHub.  Si ha seguido correctamente los pasos anteriores, enviar c\u00f3digo a GitHub activar\u00e1 la ejecuci\u00f3n del flujo de trabajo que acaba de agregar.<\/p>\n<\/li>\n<li>\n<p>Para confirmar que Lighthouse CI se ha activado y ver el informe que gener\u00f3, vaya a la <strong>Comportamiento<\/strong> pesta\u00f1a de su proyecto.  Deber\u00edas ver el<br \/>\n<strong>Construir proyecto y ejecutar Lighthouse CI<\/strong> flujo de trabajo enumerado en su confirmaci\u00f3n m\u00e1s reciente.<\/p>\n<figure class=\"w-figure\">\n  <img alt='github-action2-9621453' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/github-action2-9621453.png' alt=\"Captura de pantalla de la pesta\u00f1a 'Configuraci\u00f3n' de Github\" class=\"w-screenshot\"><br \/>\n<\/figure>\n<p>Puede navegar hasta el informe Lighthouse correspondiente a una confirmaci\u00f3n en particular desde el <strong>Comportamiento<\/strong> leng\u00fceta.  Haga clic en el compromiso, haga clic en el <strong>Faro CI<\/strong><br \/>\npaso del flujo de trabajo, luego expanda los resultados del <strong>ejecutar Lighthouse CI<\/strong> paso.<\/p>\n<figure class=\"w-figure\">\n  <img alt='github-action3-4590666' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/github-action3-4590666.png' alt=\"Captura de pantalla de la pesta\u00f1a 'Configuraci\u00f3n' de Github\" class=\"w-screenshot\"><br \/>\n<\/figure>\n<p>Acaba de configurar una acci\u00f3n de GitHub para ejecutar Lighthouse CI.  Esto ser\u00e1 m\u00e1s \u00fatil cuando se use junto con un GitHub <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/help.github.com\/en\/github\/collaborating-with-issues-and-pull-requests\/about-status-checks\">comprobaci\u00f3n del estado<\/a>.<\/p>\n<\/li>\n<\/ol>\n<h3 id=\"github-status-checks\"><span class=\"ez-toc-section\" id=\"Configurar-una-verificacion-de-estado-de-GitHub\"><\/span>Configurar una verificaci\u00f3n de estado de GitHub <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Una verificaci\u00f3n de estado, si est\u00e1 configurada, es un mensaje que aparece en cada RP y generalmente incluye informaci\u00f3n como los resultados de una prueba o el \u00e9xito de una compilaci\u00f3n.<\/p>\n<figure class=\"w-figure\">\n  <img alt='github-action1-7329948' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/github-action1-7329948.png' alt=\"Captura de pantalla de la pesta\u00f1a 'Configuraci\u00f3n' de Github\" class=\"w-screenshot\"><br \/>\n<\/figure>\n<p>Los pasos siguientes explican c\u00f3mo configurar una verificaci\u00f3n de estado para Lighthouse CI.<\/p>\n<ol>\n<li>\n<p>Ve a la <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/apps\/lighthouse-ci\">P\u00e1gina de la aplicaci\u00f3n Lighthouse CI GitHub<\/a> y haga clic en <strong>Configurar<\/strong>.<\/p>\n<\/li>\n<li>\n<p>(Opcional) Si formas parte de varias organizaciones en GitHub, elige la organizaci\u00f3n propietaria del repositorio para el que quieres usar Lighthouse CI.<\/p>\n<\/li>\n<li>\n<p>Seleccione <strong>Todos los repositorios<\/strong> si desea habilitar Lighthouse CI en todos los repositorios o seleccione <strong>Seleccionar solo repositorios<\/strong> si solo desea usarlo en repositorios espec\u00edficos, y luego seleccione los repositorios.  Luego haga clic en<br \/>\n<strong>Instalar y autorizar<\/strong>.<\/p>\n<\/li>\n<li>\n<p>Copie el token que se muestra.  Lo usar\u00e1 en el siguiente paso.<\/p>\n<\/li>\n<li>\n<p>Para agregar el token, navegue hasta el <strong>Configuraciones<\/strong> p\u00e1gina de su repositorio de GitHub, haga clic en <strong>Misterios<\/strong>, luego haga clic en <strong>Agregar un nuevo secreto<\/strong>.<\/p>\n<figure class=\"w-figure\">\n  <img alt='github-action4-9799703' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/github-action4-9799703.png' alt=\"Captura de pantalla de la pesta\u00f1a 'Configuraci\u00f3n' de Github\" class=\"w-screenshot\"><br \/>\n<\/figure>\n<\/li>\n<li>\n<p>Selecciona el <strong>Nombre<\/strong> campo a <code>LHCI_GITHUB_APP_TOKEN<\/code> y configurar el <strong>Valor<\/strong><br \/>\ncampo al token que copi\u00f3 en el \u00faltimo paso y luego haga clic en el <strong>Agregar secreto<\/strong> bot\u00f3n.<\/p>\n<\/li>\n<li>\n<p>La verificaci\u00f3n de estado est\u00e1 lista para usarse.  Para probarlo, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/docs.github.com\/en\/github\/collaborating-with-issues-and-pull-requests\/creating-a-pull-request\">crear una nueva solicitud de extracci\u00f3n<\/a><br \/>\no enviar una confirmaci\u00f3n a una solicitud de extracci\u00f3n existente.<\/p>\n<\/li>\n<\/ol>\n<h2 id=\"server-setup\"><span class=\"ez-toc-section\" id=\"Configurar-el-servidor-Lighthouse-CI\"><\/span>Configurar el servidor Lighthouse CI <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El servidor Lighthouse CI proporciona un panel para explorar los informes hist\u00f3ricos de Lighthouse.  Tambi\u00e9n puede actuar como un almac\u00e9n de datos privado a largo plazo para los informes Lighthouse.<\/p>\n<figure class=\"w-figure\">\n  <img alt='server1-1307565' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/server1-1307565.png' alt=\"Captura de pantalla del panel de Lighthouse CI Server\" class=\"w-screenshot\"><br \/>\n<\/figure>\n<figure class=\"w-figure\">\n  <img alt='server2-5267537' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/server2-5267537.png' alt=\"Captura de pantalla de la comparaci\u00f3n de dos informes Lighthouse en Lighthouse CI Server\" class=\"w-screenshot\"><br \/>\n<\/figure>\n<ol>\n<li>Elija qu\u00e9 compromisos comparar.<\/li>\n<li>La cantidad que ha cambiado la puntuaci\u00f3n de Lighthouse entre las dos confirmaciones.<\/li>\n<li>Esta secci\u00f3n solo muestra las m\u00e9tricas que han cambiado entre las dos confirmaciones.<\/li>\n<li>Las regresiones se resaltan en rosa.<\/li>\n<li>Las mejoras est\u00e1n resaltadas en azul.<\/li>\n<\/ol>\n<p>Lighthouse CI Server se adapta mejor a los usuarios que se sienten c\u00f3modos implementando y administrando su propia infraestructura.<\/p>\n<p>Para obtener informaci\u00f3n sobre c\u00f3mo configurar el servidor Lighthouse CI, incluidas las recetas para usar Heroku y Docker para la implementaci\u00f3n, consulte estos<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse-ci\/blob\/master\/docs\/server.md\">instrucciones<\/a>.<\/p>\n<h2 id=\"find-out-more\"><span class=\"ez-toc-section\" id=\"Saber-mas\"><\/span>Saber m\u00e1s <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>\n","protected":false},"excerpt":{"rendered":"<p>C\u00f3mo agregar Lighthouse a un sistema de integraci\u00f3n continua, como GitHub Actions. 27 de julio de 2020 Aparece en: Tiempos de carga r\u00e1pidos Faro CI es un conjunto de herramientas&#8230;<\/p>","protected":false},"author":1,"featured_media":81652,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[1434],"class_list":["post-81651","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev","tag-chrome"],"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>Supervisi\u00f3n del rendimiento con Lighthouse CI - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"C\u00f3mo agregar Lighthouse a un sistema de integraci\u00f3n continua, como GitHub Actions. 27 de julio de 2020 Aparece en: Tiempos de carga r\u00e1pidos Faro CI es un\" \/>\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\/supervision-del-rendimiento-con-lighthouse-ci\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Supervisi\u00f3n del rendimiento con Lighthouse CI\" \/>\n<meta property=\"og:description\" content=\"C\u00f3mo agregar Lighthouse a un sistema de integraci\u00f3n continua, como GitHub Actions. 27 de julio de 2020 Aparece en: Tiempos de carga r\u00e1pidos Faro CI es un\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/dev\/supervision-del-rendimiento-con-lighthouse-ci\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-12T19:36:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-5628280.png\" \/>\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\/png\" \/>\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\\\/supervision-del-rendimiento-con-lighthouse-ci\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/supervision-del-rendimiento-con-lighthouse-ci\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Supervisi\u00f3n del rendimiento con Lighthouse CI\",\"datePublished\":\"2022-10-12T19:36:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/supervision-del-rendimiento-con-lighthouse-ci\\\/\"},\"wordCount\":2194,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/supervision-del-rendimiento-con-lighthouse-ci\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-5628280.png\",\"keywords\":[\"Chrome\"],\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/supervision-del-rendimiento-con-lighthouse-ci\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/supervision-del-rendimiento-con-lighthouse-ci\\\/\",\"name\":\"Supervisi\u00f3n del rendimiento con Lighthouse CI - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/supervision-del-rendimiento-con-lighthouse-ci\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/supervision-del-rendimiento-con-lighthouse-ci\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-5628280.png\",\"datePublished\":\"2022-10-12T19:36:27+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"C\u00f3mo agregar Lighthouse a un sistema de integraci\u00f3n continua, como GitHub Actions. 27 de julio de 2020 Aparece en: Tiempos de carga r\u00e1pidos Faro CI es un\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/supervision-del-rendimiento-con-lighthouse-ci\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/supervision-del-rendimiento-con-lighthouse-ci\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-5628280.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-5628280.png\",\"width\":1200,\"height\":360,\"caption\":\"hero-5628280-5328494-png\"},{\"@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":"Supervisi\u00f3n del rendimiento con Lighthouse CI - R Marketing Digital","description":"How to add Lighthouse to a continuous integration system, like GitHub Actions. Jul 27, 2020 Appears in: Fast Charging Times Faro CI is a","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\/supervision-del-rendimiento-con-lighthouse-ci\/","og_locale":"en_US","og_type":"article","og_title":"Supervisi\u00f3n del rendimiento con Lighthouse CI","og_description":"C\u00f3mo agregar Lighthouse a un sistema de integraci\u00f3n continua, como GitHub Actions. 27 de julio de 2020 Aparece en: Tiempos de carga r\u00e1pidos Faro CI es un","og_url":"https:\/\/rmarketingdigital.com\/en\/dev\/supervision-del-rendimiento-con-lighthouse-ci\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-12T19:36:27+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-5628280.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/supervision-del-rendimiento-con-lighthouse-ci\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/supervision-del-rendimiento-con-lighthouse-ci\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Supervisi\u00f3n del rendimiento con Lighthouse CI","datePublished":"2022-10-12T19:36:27+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/supervision-del-rendimiento-con-lighthouse-ci\/"},"wordCount":2194,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/supervision-del-rendimiento-con-lighthouse-ci\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-5628280.png","keywords":["Chrome"],"articleSection":["Dev"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/supervision-del-rendimiento-con-lighthouse-ci\/","url":"https:\/\/rmarketingdigital.com\/dev\/supervision-del-rendimiento-con-lighthouse-ci\/","name":"Supervisi\u00f3n del rendimiento con Lighthouse CI - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/supervision-del-rendimiento-con-lighthouse-ci\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/supervision-del-rendimiento-con-lighthouse-ci\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-5628280.png","datePublished":"2022-10-12T19:36:27+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"How to add Lighthouse to a continuous integration system, like GitHub Actions. Jul 27, 2020 Appears in: Fast Charging Times Faro CI is a","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/supervision-del-rendimiento-con-lighthouse-ci\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/dev\/supervision-del-rendimiento-con-lighthouse-ci\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-5628280.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-5628280.png","width":1200,"height":360,"caption":"hero-5628280-5328494-png"},{"@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\/81651","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=81651"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/81651\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/81652"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=81651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=81651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=81651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}