Creación de Pull Request y Auditorías con Github Actions

Contenido del curso

Entendiendo el rendimiento

Antes de optimizar...

Crítical Rendering Path

CSS

WebFonts

14
Optimización de WebFonts para Mejorar el Rendimiento Web
15:30 min

Imágenes, Iconos y SVG

Aplicaciones JavaScript

Caché

Performance Budget

Conclusiones

38
Optimización del Critical Render Path en Aplicaciones Web
02:04 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:35

Creación de Pull Request y Auditorías con Github Actions

Curso de Optimización Web

Clase 36 de 38

Clase 36 / 38

Recursos

¿Cómo gestionar un pull request para auditar el performance en GitHub?

Al trabajar en la optimización de un proyecto, es fundamental asegurar que los cambios no afecten negativamente el rendimiento del sitio web. GitHub facilita la integración de auditorías de rendimiento, ofreciendo feedback valioso a través de sus herramientas de CI (integración continua). Aprender a gestionar un pull request eficazmente es crucial para garantizar que tu proyecto se mantenga en óptimo estado.

¿Qué pasos seguir para crear un pull request?

Antes de iniciar, asegúrate de tener tus métricas definidas y tu reporte de auditoría listo. Cuando estés listo para integrar estos cambios en tu proyecto, sigue estos pasos:

Realiza un commit: Asegúrate de tener un commit que contenga todos los cambios necesarios para la auditoría.
Sube los cambios: Utiliza git push para subir tus cambios a la rama en la que estás trabajando. Si estás en una situación académica, y únicamente por fines didácticos, podrías necesitar usar push force si tienes conflictos de subidas anteriores, pero esto no es recomendable en situaciones reales.
Navega en GitHub: Ve a la pestaña de pull request en GitHub y crea uno nuevo desde la base master hacia el branch activo, en este caso, optimización audit.
Crea y nombra tu pull request: Establece un nombre descriptivo para el pull request, por ejemplo, "In test Lighthouse CI with GitHub Actions".

¿Qué beneficio aporta el uso de actions para auditar?

Una vez creado el pull request, podrás verificar el rendimiento del proyecto mediante la pestaña "Checks". Esto te permitirá confirmar que los cambios son positivos:

Ejecución de auditoría: GitHub ejecutará una serie de checks, incluyendo el cálculo de rendimiento mediante Lighthouse.
Feedback instantáneo: Recibirás retroalimentación inmediata dependiendo de si las métricas cumplen o fallan con el presupuesto estimado. Una x indicará un fallo, alertándote de posibles regresiones.
Acceso a artefactos de resultados: Si has activado la opción de upload artefacts, puedes descargar un archivo comprimido (ZIP) con los informes en formato HTML y JSON, como se generaría manualmente desde la terminal.

¿Cómo interpretar los artefactos generados por Lighthouse?

Cuando descargas el ZIP de artefactos generado, obtendrás detalles muy valiosos sobre el estado de tu proyecto:

HTML y JSON: Los informes te ofrecen una visión clara de las áreas que cumplen o necesitan mejora.
Comparaciones entre URLs: Puedes ver resultados de auditorías de diferentes URLs si has realizado múltiples pruebas.

Estos pasos te facilitarán la revisión y te proporcionarán un marco para prevenir regresiones futuras, manteniendo siempre un ojo en el rendimiento del proyecto.

¿Qué precauciones debes tener al trabajar con auditorías?

El proceso de auditoría y CI en GitHub no solo optimiza el rendimiento, sino que previene la entrada de regresiones mediante alertas anticipadas. Es un método preventivo crucial que te asegurará que los cambios futuros no comprometan tu sitio web. Además, siempre es importante:

No usar force push salvo en casos académicos: Hacerlo puede sobrescribir cambios esenciales realizados por otros colaboradores, lo que podría causar conflictos.
Revisar con regularidad los resultados de las auditorías: Esto asegura que estés siempre al tanto de cómo los cambios impactan a tu proyecto.

Con todo esto conocimiento, seguir perfeccionando tus habilidades en herramientas de CI y auditorías será un gran aliado en tu camino de desarrollo profesional. ¡Sigue adelante y no dejes de aprender!

Entendiendo el rendimiento

Optimización Avanzada de Páginas Web con Técnicas Prácticas

Optimización de Sitios Web para Mejorar Conversión y Experiencia Usuario

Optimización del Rendimiento Web: Modelo RAIL de Google

Antes de optimizar...

Medición del Rendimiento Web con Chrome DevTools y Lighthouse

Métricas de Experiencia de Usuario: LCP, FID y CLS

Instalación y Configuración de Proyecto Web con Git y Webpack

Crítical Rendering Path

Entendiendo el Critical Rendering Path en Navegadores Web

Optimización de JavaScript para mejorar rendimiento web

Priorización de recursos CSS para mejorar rendimiento web

Optimización de Carga de Recursos con Preload, Prefetch y Preconnect

Optimización de Animaciones CSS para Mejorar el Renderizado

CSS

Optimización de Animaciones CSS para Mejorar Rendimiento

Optimización de CSS: Reducir Complejidad y Mejorar Rendimiento

WebFonts

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

Optimización de Imágenes para Web: Formatos y Herramientas Efectivas

Optimización de Imágenes para Web: Uso de Tamaños y Formatos Adecuados

Comparación entre WebFonts y SVG: Ventajas y Desventajas

Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas

Carga Adaptativa de Imágenes con Gatsby y Web API

Aplicaciones JavaScript

Optimización de JavaScript para Producción Web

Análisis y Optimización de Bundles con Webpack

Optimización de Bundles en Proyectos Web con Webpack

Code Splitting con Webpack: Optimización de Bundles en Proyectos Web

Lazy Loading de Videos con JavaScript y Modales

Event Propagation y Filtrado de Eventos en JavaScript

Integración de Librerías en Proyectos JavaScript

Optimización de Carga de Modales con Lazy Loading en Webpack

Renderizado en Cliente vs. Servidor: Diferencias y Funciones

Implementación de Server Side Rendering en NodeJS

Optimización de Sitios con Static Site Generation

Caché

Funcionamiento de Caché y Redes de Distribución de Contenido (CDN)

Configuración y despliegue de sitios web con Netlify y Github Actions

Automatización de despliegues con Github Actions y Cron en Netlify

Implementación de Caché con Service Workers en JavaScript

Performance Budget

Auditoría de Performance Web con Github Actions y Lighthouse

Creación de Pull Request y Auditorías con Github Actions

Monitoreo de Métricas en Sitios Web en Producción

Conclusiones

Optimización del Critical Render Path en Aplicaciones Web

Creación de Pull Request y Auditorías con Github Actions