No se si serva pero siento que se ve muy bien el uso de webp.
(https://caniuse.com/#feat=webp )
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
Jonathan Alvarez
Aportes 11
Preguntas 1
No se si serva pero siento que se ve muy bien el uso de webp.
(https://caniuse.com/#feat=webp )
Les recomiendo JSON Viewer para Chrome, se ve mucho mejor la información:
Al 31/5/2022!
Ya podríamos decir que es un estándar
Hola! 😃
En VSC para cambiar el formato a JSON => Cmd + May + P
abre una Search Bar escribes:
Change Language Mode (y escribes JSON)
Format Document (y enter para que te lo formatee)
Saludos! 👋
También se puede seleccionar enviarlo o no en formato webp dependiendo si el navegador lo soporta o no (step 5):
https://www.digitalocean.com/community/tutorials/how-to-create-and-serve-webp-images-to-speed-up-your-website
La otra optimización que se puede hacer es tener la imagen normal y en 2x de densidad de pixel para las pantallas retina:
<img src=“photo.png” srcset=“[email protected] 2x” …>
https://developers.google.com/web/fundamentals/design-and-ux/responsive/images?hl=es
Debes hacer mas descriptivos cada movimiento, aunque te pase en modo luego no logro ver dónde diste click…
hoy el panorama se ve mejor con respecto al formato webp 😄
AVIF es un nuevo formato que llegará a la web. Hasta el momento ha demostrado mejor compresión que WebP.
https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4
NOTA:
Todavía no lo uses porque solo es soportado por chrome (por el momento)
En Chrome hay una extensión llamada JSON Viewer que permite visualizar de mejor formas los archivos JSON directamente desde el navegador 🚀
así está webp en este 2022:
cada vez va mejor webp
https://caniuse.com/?search=webp
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?