Entendiendo el rendimiento

1

Optimización Web Avanzada con JavaScript y CSS

2

Optimización de Velocidad en Páginas Web: Impacto y Conversión

3

Optimización del Rendimiento Web con RAIL de Google

Antes de optimizar...

4

Medición de Performance Web con Chrome DevTools y RAIL

5

Métricas Web: LCP, FID y CLS para Mejorar Experiencia Usuario

6

Clonación y configuración de proyectos en Git y npm

Crítical Rendering Path

7

Proceso de Critical Rendering Path en Navegadores Web

8

Optimización de Carga de JavaScript y su Impacto en el Rendimiento

9

Priorización de Recursos CSS para Mejora de Carga en Navegadores

10

Optimización Web: Uso de Preload, Prefetch y Preconnect

11

Renderizado Eficiente: Optimización de CSS y JavaScript

CSS

12

Optimización de Animaciones CSS para Mejorar el Rendimiento

13

Optimización de Selectores CSS y Carga de Imágenes en Proyectos Web

WebFonts

14

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

15

Optimización de Imágenes para Web: Formatos y Herramientas Avanzadas

16

Optimización de Imágenes para Web: Formatos y Resoluciones

17

Vectorización de Imágenes: Comparación entre SVG y WebFonts

18

Lazy Loading: Técnicas y Estrategias Aplicadas

19

Carga de Imágenes Responsivas con Gatsby y Picture Element

Aplicaciones JavaScript

20

Optimización de JavaScript para Producción en Webpack

21

Análisis y Optimización de Bundles con Webpack

22

Optimización de Bundles en JavaScript con Tree Shaking

23

Estrategias de Code Splitting con Webpack

24

Carga Diferida de JavaScript para Modales Interactivos

25

Técnicas de Propagación de Eventos en JavaScript

26

Integración de librería Modal Video con Webpack y CSS

27

Lazy Loading y Optimización en Webpack

28

Diferencias entre Client-Side y Server-Side Rendering

29

Optimización de Server Side Rendering con Node.js

30

Optimización de Sitios Web con Static Site Generation

Caché

31

Funcionamiento del Caché y CDNs en la Optimización Web

32

Alojamiento de Sitios Web Estáticos con Netlify y GitHub

33

Automatización de despliegues con GitHub Actions y Netlify

34

Implementación de Service Workers para Caché Avanzado

Performance Budget

35

Auditoría de Performance Web con Lighthouse y GitHub Actions

36

Automatización de Auditorías con Github Actions y LighthouseCI

37

Optimización de Sitios Web con Datos de Usuarios Reales

Conclusiones

38

Optimización de Imágenes y CSS para Mejorar la Velocidad Web

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Optimización de Animaciones CSS para Mejorar el Rendimiento

12/38
Recursos

¿Cómo optimizar rendimientos en Paints de CSS y animaciones?

La optimización de contenidos en web es esencial para mejorar la experiencia del usuario. En particular, las etapas de "paint" pueden ser costosas para el navegador y, si no se gestionan adecuadamente, pueden hacer que la página se ejecute de manera lenta o que las animaciones se vean sueltas. En este contenido, te guiaremos sobre cómo realizar el perfilamiento de paint y optimizar las animaciones de CSS para mejorar el rendimiento de tu proyecto.

¿Cuál es la razón detrás de las optimizaciones tardías?

En muchos desarrollos, este tipo de optimización se ejecuta solo cuando se identifica un problema de rendimiento. Las optimizaciones no suelen aplicarse al inicio, sino cuando notamos que la página funciona lentamente o que las animaciones no son fluidas. Esto implica que debemos desarrollar un criterio para identificar cuándo y dónde realizar ajustes. Sin embargo, nunca está de más conocer el proceso por anticipado para poder aplicarlo en el momento indicado.

¿Cuál es la importancia del perfilamiento de Paint?

Antes de llevar a cabo la optimización, es crucial evaluar nuestro proyecto con herramientas de perfilamiento como las Developer Tools de Google Chrome. En particular, la pestaña de "performance" nos permite grabar y evaluar secciones específicas del proyecto, observando los recursos usados en diferentes partes del navegador. Al detectar las animaciones costosas en paint, podemos saber exactamente dónde aplicar mejoras.

¿Cómo identificar y optimizar animaciones ineficientes?

  1. Ubicar la Animación Problemática: En nuestro caso de estudio, se evaluó un componente denominado "carousel item", el cual se transformaba al hacer hover, expandiendo su tamaño y añadiendo un box shadow.

  2. Evalúa alternativas más eficientes: Algunas propiedades CSS, como box-shadow, son costosas. Para optimizarla, se recomienda sustituirla por volumen como opacity, que no causa un nuevo paint.

  3. Implementar optimización con opacity:

    • Usa el pseudo-elemento before para añadir capas individuales donde aplicar la animación.
    • Controla la opacidad de la animación desde 0.4 a 1 al hacer hover. Implementa cambios en tiempo real usando las Developer Tools.
    .carousel-item:hover::before {
        opacity: 1;
        transition: opacity 0.3s;
    }
    
  4. Reemplazo de margin-left por transform:

    • La propiedad margin-left es muy costosa. Usa en su lugar transform: translateX();.
    .carousel-item:hover {
        transform: translateX(100px);
    }
    

¿Qué resultados se obtienen al optimizar animaciones?

Al realizar las optimizaciones necesarias, el paint se redujo significativamente. En pruebas iniciales, las animaciones tardaban 10 milisegundos en promedio, y tras optimizarlas con las propiedades adecuadas, el tiempo se redujo a 3 milisegundos. Esto evidencia cómo un perfilamiento y ajustes correctos pueden mejorar drásticamente el rendimiento.

¿Por qué la propiedad will-change es crucial?

El uso de will-change le advierte al navegador sobre qué transformaciones o cambios vendrán, optimizando el procesamiento anticipadamente. Esta práctica le permite al navegador reservar recursos y priorizar tareas que exigen un trabajo intensivo en el renderizado.

.carousel-item {
   will-change: transform;
}

Con estos consejos y técnicas, no solo mejoramos el rendimiento de nuestras páginas, sino que también proporcionamos una experiencia más eficiente y fluida para los usuarios. No pierdas la oportunidad de transformar tus proyectos web después de conocer estas estrategias de optimización CSS.

Aportes 17

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

.carousel-item:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 1);
  opacity: 0.4;
  transition: 450ms opacity;
}

.carousel-item:hover:before {
  opacity: 1;
}

.carousel-item:hover + .carousel-item {
  transform: translateX(100px);
}

.carousel-item {
  will-change: transform;
  border-radius: 20px;
  position: relative;
  display: inline-block;
  width: 200px;
  height: 250px;
  margin-right: 10px;
  font-size: 20px;
  cursor: pointer;
  transition: 450ms all;
  transform-origin: center left;
}


Pueden usar el selector ~ para lograr que todos lo items que le siguen al item que esta en estado hover tengan el translateX y no solo el inmediatamente siguiente

👀 Detectando Paints costosos y optimizando animaciones

<h4>Recursos</h4>

opacity

transform

<h4>Apuntes</h4>
  • Este tipo de optimizaciones no es algo que se haga al inicio si no que, al momento de detectar el problema, procedemos con la optimización del lugar visto
  • Por lo general se trata de CSS y animaciones
  • Esto es bastante notable de percibir ya que nuestro sitio web va lento o las animaciones no van fluidas
  • Podemos medir los paints costosos con las dev tools en la sección en performance
  • Debemos tener siempre en mente que todas las propiedades que cambiarán serán costosas a excepción y el transform
  • Podemos preparar al navegador de futuros cambios con la propiedad will-change en CSS

RESUMEN: Podemos detectar paints costosos con las dev tools integradas de chrome. Tambien podemos reducirlas usando el concepto de Cualquier cambio en una propiedad que no sea opacity o transform genera un Paint y también usando la propiedad will-change de CSS

Si un sitio, ocupa en su código css propiedades con valores decimales. ejemplo= margin: 0.5rem 0.1rem 0.25rem 0;

Esta proporción decimal en el uso de medidas rem o em, influyen en el cargado de la página?, estoy pensando en como se comporta el calculo, para cada medida y cada elemento.
saludos!!=)

Y que pasa si mi JS tiene más ms que el paint y el render???

Si les aparece el error, es que al meterse a otra librería, tienen que descargar una versión de webpack:

npm i webpack@latest webpack-cli@latest webpack-dev-server@latest

Recomiendo esta extension de VSC css-triggers, es muy útil para identificar de manera visual el impacto de cada propiedad CSS en el render.

😊👍

realmente me impresiono lo que se optimizo con unos pocos cambios 😲

curso favorito y profesor favorita hehehe

<h4>Detectando Paints costosos y optimizando animaciones</h4>

will-change Sirve para decirle al navegador que algo cambiará y debe estar listo para optimizarlo.

Pagina para saber que tan costosa es la propiedad a animar
https://csstriggers.com/
Ejemplo:
Propiedad height
En cada uno de los motores de renderizado, podemos darnos cuenta por la imagen de abajo que requiere de los pasos de Layout, Paint y Composite, lo cual es bastante costoso.

Aquí está solo el código que el profesor hace en el navegador para seguirle el mismo ritmo 😃

.carousel-item:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background: #ff634770; */
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

👌

Waoo esto es sorprendente y es algo que no conocia ni de cerca

Según google traductor:
hover = flotar.

No lo sé si el ajuste del box-shadow le dé una mejor optimización a la página web, si se tuvo una reducción en el tiempo del painting en 2 ms pero al crear otro elemento y aplicarle estilos con css se aumento el rendering en 6 ms.

Eso da a entender que los elementos que se remplazaron, no se deberian de usar en el caso de hacerlo con un Hover. ?

Por que eso no lo comentan.