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
Convierte tus certificados en tÃtulos universitarios en USA
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Aportes 8
Preguntas 3
Los Service workers actúan esencialmente como proxy servers asentados entre las aplicaciones web, el navegador y la red (cuando está accesible).
Se pueden utilizar para:
El mapeo de responses, y la comparacion por assets usando una regexp no agrega mayor costo en performance? Dado que las regexp son batante costosas.
Por otro lado, el hecho de guardar las imagenes solo del mismo dominio de la app es una cosa del proyecto como tal, o no es recomendable hacer cache de imagenes (por ejemplo) de un S3?
Si estas utilizando Next js puedes leer este post. https://dev.to/josedonato/adding-a-service-worker-into-your-next-js-application-1dib 😄
Este tema es un poco complicado, honestamente no pude entender la clase
Debemos llamar el service worker en el index.template.html de la siguiente forma:
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
})
}
</script>
Esta implementación la pude ver en el curso de JS profesional del profe Richard B. Kaufman. Creo que me fue más fácil entender recordando lo visto en esa clase. Por supuesto igual pienso que e profesor Jonathan ha venido explicando muy bien cada tema. Excelente.
El video está fallando, al menos desde chrome
👌
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?