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 redimiento

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

No tienes acceso a esta clase

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

Bloqueos y complejidad en selectores

13/38
Recursos

Aportes 8

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

⛔ Bloqueos y complejidad en selectores

<h4>Ideas/conceptos claves</h4>

BEM es una forma de escribir clases en CSS. Viene de Bloque Elemento y Modificador

<h4>Apuntes</h4>
  • Si no le damos la debida atención al CSS se puede volver complejo a lo largo del tiempo
    • Complejo de mantenimiento en equipo
    • Complejidad para el navegador
  • Entre más pequeño sea nuestro CSS, mejor
  • Entre menos complejos sean los selectores que usemos, el navegador tendrá que hacer un menor esfuerzo
  • Anidar selectores genera más trabajo al navegador .menu > div > img
  • Podemos ayudar al navegador usando BEM
    • Nos dará mayor contexto de que bloques estamos editando
    • No daremos selectores complejos por lo cual facilitaremos el trabajo del navegador
  • Nuestro código debería tener como máximo 1 solo selector, 1 sola clase y tratar de evitar los id’s

  • Si deseamos priorizar un recurso en el critical render path lo que deberíamos hacer es ponerlo en una etiqueta img

RESUMEN: El CSS puede bloquear recursos importantes como una imagen de un logo. Tambien debemos estar conscientes de no dar selectores complejos para hacer que el navegador haga un menor esfuerzo

Jonathan Alvarez: Este tipo de selector no sólo es muy complejo, no es humano
Estefany Aguilar: 😐

Increible curso!

Aca dejo un enlace de como con node y puppeter extraer el css critico del coverage . https://www.youtube.com/watch?v=GIYp3qG1520

En una pagina compleja ya terminada, utilizando frameworks de css como bootstrap, materialize, etc…

**¿Hay alguna herramienta que se pueda utilizar para generar un css con las clases que se utilizan?

¿Que tan recomendado es utilizar estos frameworks para el desarrollo? **

Jaja siempre como que me había dado pereza agregar el logo desde el CSS. Ahora ya se que desde el HTML estoy mejorando la percepción de carga que tienen los usuarios 🤑👌

<h4>Bloqueos y complejidad en selectores</h4>

CSS es algo a lo que si no se le presta atención desde el principio, se volverá algo muy complejo a lo largo del proyecto.

Entre más pequeño sea el CSS y menos complejos sean los selectores, mucho mejor. Entre más cortos y directos sean nuestros selectores, mucho mejor.

Máximo 1 selector, 1 sola clase, evitamos usar ID.

Idealmente el logo tendría que ser una de las primeras cosas en cargar en las páginas.

👌