Entendiendo el rendimiento

1

Todo lo que aprenderás sobre optimización web

2

¿Vale el esfuerzo optimizar un sitio web?

3

¿Cuándo realmente un sitio es rápido o lento?

Antes de optimizar...

4

Aprendiendo a medir

5

User Performance Metrics

6

Nuestro proyecto

Crítical Rendering Path

7

Etapas de render del navegador

8

Network waterfall y recursos que bloquean el navegador

9

Priorización de recursos

10

Preloading y prefetching de recursos

11

Fases Paint y Layout del Critical Render Path

CSS

12

Detectando Paints costosos y optimizando animaciones

13

Bloqueos y complejidad en selectores

WebFonts

14

WebFonts y su impacto en rendimiento

Imágenes, Iconos y SVG

15

Imágenes, formato y compresión

16

Imágenes y compresión

17

¿WebFont, Imagen o SVG?

18

Técnicas avanzadas con Lazy Loading

19

Técnicas avanzadas con Responsive Loading

Aplicaciones JavaScript

20

JavaScript y aplicaciones modernas y Utilizando un servidor de producción

21

Analizando el bundle de la aplicación

22

Reduciendo el tamaño del bundle

23

Code Splitting

24

Lazy Module Loading

25

Llevando los listeners a otro nivel

26

Instalando Modal video

27

Lazy loading del modal

28

Moviendo la carga de rendering hacia el servidor: Server Side Rendering

29

Aplicando SSR

30

Pre-renderizando el contenido: Static Generation

Caché

31

Cómo funciona el Caché de recursos y CDN

32

Deploy en Netlify y automatización de contenido en GitHub Actions

33

Aplicando Github Actions

34

Interceptando los requests del navegador con Service Workers

Performance Budget

35

Performance budget y auditorias automatizadas

36

Automatizando una auditoría con Lighthouse CI

37

Medidas reales y monitoreo constante

Conclusiones

38

Conclusiones

You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

1 Días
18 Hrs
9 Min
3 Seg

Imágenes y compresión

16/38
Resources

How to parse JSON in VS Code?

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:

  • Copy and paste the JSON: First, select all the JSON content and copy it. Then, create a new tab in VS Code and paste the content.
  • Define the language: Tell VS Code that the language you are using is JSON.
  • Format the JSON: With the JSON file already pasted, you can use VS Code's formatting command to display it in a clear and structured way.

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.

What are the particularities of an API in terms of image sizes?

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.

  • Image sizes: APIs can provide various resolutions, from large images to more conservative options, such as "medium" or "small".
  • Optimization and choice: It is essential to use a resolution according to the image container to avoid unnecessary loads and improve user experience.
  • Practical example: In the analysis, an image attribute "large" was changed to "medium" to better fit the needs of the project and save storage space.

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;

What to consider when optimizing images on a website?

Optimizing images is a fundamental task in web development to ensure fast loading time and good performance.

  • Downsizing: Choose image sizes appropriate for each context in your web application. Smaller size usually equals better performance.
  • Advanced image formats: WebP is an image format created by Google that could become standard due to its efficiency. Although it is not currently universally supported in browsers, it is advisable to keep an eye on its evolution.
  • Load efficiently: Avoid using formats that require polyfilms (patches for compatibility), as this can increase the weight of the page and the number of HTTP requests.

What's next when working with images and web styling?

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

Sort by:

Want to see more contributions, questions and answers from the community?

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