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

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 11

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

鉀 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鈥檚

  • 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.

Hay muchos selectores demasiado complejos y que ni siquiera se estan utilizando

input:not([type='submit']):not([type='checkbox'])

Y si hacemos un preload de la imagen cargada mediante CSS? En el ejemplo pr谩ctico de que sea una imagen principal.

el curso est谩 excelente!!, no obstante finalizando la secci贸n de CSS me queda un sinsabor el que no se le haya dedicado una clase al Critical CSS (above-the-fold) 馃 鈥 continuamos

馃憣