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
You don't have access to this class
Keep learning! Join and start boosting your career
When parsing JSON data it is crucial to do it in an organized way to make it easier to understand and use. In this case, VS Code was used to format a JSON derived from an API. Follow these steps to work with JSON data in VS Code:
By performing this procedure, it is easier to identify key attributes, such as the elements to be rendered in a project, for example, the titles and images of an anime carousel.
APIs for visual content usually offer different image resolutions. This feature allows developers to choose the size that best suits their project, thus improving efficiency and performance.
Here is an example of how to modify the URL of an image in code:
// We changed the attribute value from "large" to "medium"const imageUrl = imageAttributes.medium;
Optimizing images is a fundamental task in web development to ensure fast loading time and good performance.
The next step in website optimization is to integrate everything learned about web fonts, images and SVG vectors to improve overall performance. Continuing to explore current image formats and trends will make you a more efficient and responsive developer for your users' needs.
Ultimately, while learning how to handle each component optimally, the key is to maintain a balance between visual quality and loading efficiency. To further develop your skills, consider integrating different elements and technologies to create smooth and engaging digital experiences, continue to explore and learn about best practices in web development!
Contributions 11
Questions 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
Want to see more contributions, questions and answers from the community?