Entendiendo el rendimiento
Todo lo que aprenderás sobre optimización web
¿Vale el esfuerzo optimizar un sitio web?
¿Cuándo realmente un sitio es rápido o lento?
Antes de optimizar...
Aprendiendo a medir
User Performance Metrics
Nuestro proyecto
Crítical Rendering Path
Etapas de render del navegador
Network waterfall y recursos que bloquean el navegador
Priorización de recursos
Preloading y prefetching de recursos
Fases Paint y Layout del Critical Render Path
CSS
Detectando Paints costosos y optimizando animaciones
Bloqueos y complejidad en selectores
WebFonts
WebFonts y su impacto en rendimiento
Imágenes, Iconos y SVG
Imágenes, formato y compresión
Imágenes y compresión
¿WebFont, Imagen o SVG?
Técnicas avanzadas con Lazy Loading
Técnicas avanzadas con Responsive Loading
Aplicaciones JavaScript
JavaScript y aplicaciones modernas y Utilizando un servidor de producción
Analizando el bundle de la aplicación
Reduciendo el tamaño del bundle
Code Splitting
Lazy Module Loading
Llevando los listeners a otro nivel
Instalando Modal video
Lazy loading del modal
Moviendo la carga de rendering hacia el servidor: Server Side Rendering
Aplicando SSR
Pre-renderizando el contenido: Static Generation
Caché
Cómo funciona el Caché de recursos y CDN
Deploy en Netlify y automatización de contenido en GitHub Actions
Aplicando Github Actions
Interceptando los requests del navegador con Service Workers
Performance Budget
Performance budget y auditorias automatizadas
Automatizando una auditoría con Lighthouse CI
Medidas reales y monitoreo constante
Conclusiones
Conclusiones
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 12
Preguntas 1
webpack-contrib/webpack-bundle-analyzer
<h4>Apuntes</h4>RESUMEN: Podemos verificar el tamaño de nuestras dependencias y nuestro código a través de herramientas de análisis de tamaño
si a alguien le puede servir dejo la doc de next.js
https://github.com/vercel/next.js/tree/canary/examples/analyze-bundles
Les recomiendo crear un comando nuevo en su archivo package.json, de forma que sea más sencillo utilizar este nuevo comando de webpack.
"analyze": "webpack -p --analyze"
Para usarlo solo ejecuten en consola npm run analyze
Creo que ahora Chrome nos permite hacer esto directamente desde la pestaña de lighthouse con la opción View Treemap
👇
Genial esta herramienta, de ahora en adelante la tendré como una de mis herramientas fijas.
Like si sienten el poder llegando a sus manos.
Asegurate de tener la version de webpack actualizada para que no te tire error el plugin por incompatibilidad de versiones.
npm install webpack@latest
Si les sale algun error al correr el comando, puede ser que porque no hayan cerrado el serve ya que el analyzer abre en el puerto 8080 y si este esta ocupado genera un error
Quiero compartir que en el archivo apis.js estamos trayendo toda la librería de lodash al usarlo de esta manera:
import _ from 'lodash''
const extractData = json => _.get(json, 'data', []);
Lo que hice fue importar sólo la función que necesitamos de la librería y no toda la librería, de esta manera:
import get from 'lodash/get';
const extractData = json => get(json, 'data', []);
Como resultado el tamaño de lodash disminuyó en el reporte del analizador pasando de 531kb a 30.93kb
Con moment no se puede porque la función moment siempre debe ser usada para llenarla con parámetros y luego hacer uso de sus métodos en el objeto devuelto.
Que genial 🤟
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?