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

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

28/38
Recursos

Aportes 6

Preguntas 0

Ordenar por:

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

o inicia sesi贸n.

Me hubiera gustado haber visto esta explicaci贸n hace mucho tiempo. En su momento me cost贸 mucho trabajo comprender el SSR, es muy complicado de encontrar alguien que lo entienda y pueda explicarlo de una manera tan sencilla.

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

<h4>Ideas/conceptos claves</h4>

Client Side Rendering es que toda la carga suceda en el navegador y en el cliente

<h4>Apuntes</h4>
  • Client-Side Rendering tiene la caracter铆stica que
    • No se mostrar谩 nada hasta que el navegador haya descargado y ejecutado el JS
<h3>馃啔 Client Side Rendenring vs Server Side Rendering</h3>

Client Side Rendering

  • Tenemos un navegador y un servidor
  • Cada vez que entramos a un sitio web el servidor responde un archivo JS
  • La p谩gina comienza a renderizar HTML a partir del JS recibido
  • Todo nuestro contenido principal sucede dentro del cliente [Navegador o Browser]

Server Side Rendering

  • Nuestra p谩gina se conecta al servidor, pero este le env铆a un HTML ya renderizado, es decir que se salta el proceso de esperar el JS para mostrar el contenido
  • El JS seguir谩 siendo usado, pero lo separaremos para la interactividad

RESUMEN: Server Side Rendering es una estrategia de enviar 鈥測a comido鈥 nuestra aplicaci贸n a nivel HTML es decir que no sera necesario esperar el JS para mostrar contenido

Si ahora el render se hace del lado de server.
No se generan unos problemas porque ya no se sabe el tama帽o de la pantalla del cliente, supongo que una vez que llega al cliente debe aplicar otro render? para que se ajuste al browser del cliente?

Es muy interesante este tema, y muy buena observaci贸n por parte de Omar Alvarez, lo cual me surge una duda, es muy costoso el proceso para el servidor (tomando como ejemplo el proyecto) ?

Para considerar cuando uno renta servidores como los de amazon que te cobran por procesamiento鈥 aumentar铆a un poco claro y dependiendo de cada plataforma pero aterrizandolo en este proyecto que es una llamada a la api (Mucho, poco, algo considerable, practicamente nada) 鈥 Muchas gracias 馃槃

Me gustaba ver el temario como se veia antes. Ahora tengo que hacer un scroll infinito para poder cerrar la pestania de Temario y ademas no hay como ir a la pagina principal del temario 鈥

馃憣