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

Pre-renderizando el contenido: Static Generation

30/38
Recursos

Aportes 9

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

Qu茅 buen curso hasta el momento 馃憦. Me ha encantado esta secci贸n de JavaScript sobre todo la explicaci贸n del code splitting, SSR, y prerendering. Creo que explicas muy bien y me gustar铆a que hicieras un curso m谩s a fondo con esos temas! 馃槏馃殌

馃彌锔 Pre-renderizando el contenido: Static Generation

<h4>Recursos</h4>

Static Site Generators - Top Open Source SSGs | Jamstack

<h4>Apuntes</h4>
  • Actualmente en el server side rendering on demand, Cada vez que nuestro usuario haga un request, el servidor traer谩 la informaci贸n de la API
    • Si se conectan dos usuarios, se har谩n dos request a las Apis que estamos utilizando
  • Esto depende del proyecto, existen proyectos los cuales no es tan necesario que cada vez en un intervalo corto de tiempo el servidor tenga que ir hasta la API, porque es probable que la informaci贸n sea exactamente la misma
  • En estos casos podemos usar Static Site Generation
  • Consiste en hacer que en el tiempo de construcci贸n del proyecto traiga todo el contenido y que genere una respuesta para enviar a todas las conexiones

RESUMEN: Static Site Generation nos renderiza y busca los datos una sola vez, pero nos da la ventaja de tener todo listo, pero solo se debe usar cuando los datos no cambien en tiempo real

JAMStack

J -> Javascript = interacci贸n del sitio web
A -> Api鈥檚 = interfaz de aplicaciones para consultar informaci贸n que ya es abstraida y ha realizado un proceso en un servidor
M -> Markup = plantilla construida en tiempo de compilaci贸n

Encontr茅 este recurso que podr铆a a帽adir un mejor entendimiento de SSR y SSG

Buen铆sima explicaci贸n.

Me bas茅 en esta url para traspasar los cambios a mis avances:
https://github.com/jonalvarezz/platzi-optimizacion-web/compare/5-with-ssr...7-with-ssg

Luego
npm run build
npm run serve

Fui a localhost:5000 y funcion贸 impeque

Static Site Generation

  • Se trata de pre-renderizar el contenido
  • Ensenia al servido que en el tiempo de construccion del proyecto, traiga todo el contenido de la API鈥檚 de una vez, lo guarda y esa unica respuesta generada se la envia a todas las conexiones
  • Lo podemos subir a cualquier servidor en Internet
  • No aplica para metricas y datos que se necesitan visualizar en tiempo real

Segun veo pre-renderizas el contenido, y esta bien. Pero cuando payload de la respuesta de la API cambia, como haces para actualizar el contenido para mostrar el nuevo contenido?

Cada vez que un usuario se conecta, hace una petici贸n al servidor, esa petici贸n va a traer la informaci贸n de la API.

Server Side Rendering on Demand: Cada vez que hay una nueva conexi贸n vamos a ir a las API a traer informaci贸n.

馃憣