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

Preloading y prefetching de recursos

10/38
Recursos

Aportes 16

Preguntas 3

Ordenar por:

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

Esto no tiene nada que ver con el curso, es un dato curioso. 驴Han notado que cada que inicia un video y aparece la palabra 鈥淧latzi鈥 tambi茅n hay una voz muy leve susurrandote "Platzi?

jaja Regalame tu like si devolviste el video para tratar de escuchar.

Pdta: Es Cierto 馃槃

Preload: Recurso que se descarga junto con el html
Prefetch: recurso que se descarga para un uso futuro
preconnect: conexi贸n anticipada a recursos de servidores remotos.

馃梼锔 Preloading y prefetching de recursos

<h4>Ideas/conceptos claves</h4>

Preload. - Recurso que se descargue junto el HTML

Prefetch. - Recurso que en el futuro se podr谩 usar

Precconect. - Conexi贸n anticipada a recursos de servidores remotos

<h4>Apuntes</h4>
  • Podemos decir al navegador cuales son los recursos y dominos que se debe conectar o descargar de forma anticipada
  • Existen 3 estrategias para poderlo hacerlo
    • Preload (recursos)
    • Prefetch (recursos)
    • Preconnect (dominios)
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link rel="dns-prefetch" href="https://fonts.gstatic.com/" />
  • podemos especificar con el atributo rel las estrategias para realizar este proceso

RESUMEN: Si le decimos al navegador de forma anticipada que recursos necesita o a que dominios se puede conectar de una forma anticipada podemos mejorar el rendimiento de nuestros sitios

    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
    <link rel="dns-prefetch" href="https://fonts.gstatic.com/" />
    <link rel="preconnect" href="https://kitsu.io/" crossorigin />
    <link rel="dns-prefetch" href="https://kitsu.io/" />

no comprendo porque Next.js llama scrip con link?

que buen curso platzi!.. me encanta la voz del profe

Si desean saber mas acerca de , dns-prefetch , les dejo el enlace , donde explica un poco mas del porque de esto , y habla un poco tambien de que hace el preconnect , esta interesante , se los recomiendo.

  1. Preload (recursos). Recursos que se descargan junto con el html.
  2. Prefetch (recursos). Recursos que se descargan para un uso futuro.
  3. Preconnect (dominios). Conexi贸n anticipada a recursos de servidores remotos.

El crossOrigin que quiere decir?

Para los que est茅n haciendo el curso despu茅s del sep 2021, pueden ver el efecto del preload en el footer, en more y general resources, ya que en el nav al menos a mi no me precargaba las cosas como al profe

Excelente!!

Estrategias

  • Preload (recursos)
  • Prefetch (recursos)
  • Preconnect (dominios)
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link rel="dns-prefetch" href="https://fonts.gstatic.com/" />

<link rel="preconnect" href="https://kitsu.io/" crossorigin />
<link rel="dns-prefetch" href="https://kitsu.io/" />

鈥淒NS-prefetch es un intento de resolver los nombres de dominio antes de que se soliciten los recursos. Esto podr铆a ser un archivo cargado m谩s tarde o un destino de enlace que un usuario intenta seguir鈥︹

Documentacion

Luego de aplicar el prefetch y el preconnect a nuestro codigo, como podemos 鈥渧er鈥 el impacto que tiene esos cambios en el rendimiento de nuestra aplicacion?

y c贸mo aplicar estos recursos en frameworks, por ejemplo, en reacts?? Gracias por su ayuda.

jajaja este plugin de dark mode esta haceindo cosas locas miren estos estilos que me aparecieron en esta clase

<h4>Preloading y prefetching de recursos</h4>

3 Estrategias:

  • Preload (recursos) se trata de un fetch declarativo en el que le decimos al navegador; "Este recurso tienes que descargarlo junto con el HTML.
  • Prefetch (recursos) es una forma de decirle al navegador; 鈥淓ste recurso en espec铆fico podr铆as necesitarlo despu茅s鈥.
  • Preconnect (dominios) nos ayuda a solucionar el handshacking de HTTP que sucede entre el navegador y los servidores de forma anticipada.

Next.js usa mucho preload, hace un muy buen trabajo diviendo el bundle de JS en partes muy peque帽as. Esta t茅cnica se conoce como code spliting.