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

JavaScript y aplicaciones modernas y Utilizando un servidor de producci贸n

20/38
Recursos

Aportes 7

Preguntas 1

Ordenar por:

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

馃挅 JavaScript y aplicaciones modernas y Utilizando un servidor de producci贸n

<h4>Recursos</h4>

The cost of JavaScript in 2019

<h4>Apuntes</h4>
  • Web moderna est谩 basada en JavaScript
  • Muchas veces no somos conscientes al momento de instalar muchas dependencias, estamos creando una mala experiencia para los usuarios
  • En el 2018 se estim贸 que el tama帽o medio de los sitios web esta alrededor de 350kB [Tama帽o moderadamente aceptable]
    • El tiempo de espera para que una aplicaci贸n sea interactiva tarda m谩s de 15 segundos

Si el JavaScript de lado del cliente no est谩 beneficiando a la experiencia de usuario, preg煤ntate a ti mismo, si realmente es necesario

  • Webpack en modo de desarrollo no realiza ninguna optimizaci贸n de c贸digo
  • lo que haremos sera:
    1. Compilar webpack en producci贸n
    2. Utilizar un servidor listo para producci贸n
  • Si ponemos -p en webpack hace dos cosas
    • Pone NODE_ENV=production a node
    • Pasa el par谩metro mode=production a webpack

RESUMEN: Es importante tomar en cuenta el modo de producci贸n para analizar si vamos bien con nuestro JavaScript a nivel de performance

Para confirmar, lo que se est谩 haciendo es:

1- Construyendo un build.js m谩s liviano con el script 鈥渘pm run build鈥-
2- Creando un servidor, usando 鈥渘pm run serve鈥, que lea el proyecto de la ra铆z que incluye el build.js, que acaba de construirse con 鈥渘pm run build鈥

es correcto?

馃 Buen铆sima la charla de Addy Osmani -"The cost of JavaScript in 2019 馃敟馃敟

Para que no tengan que copiar la url que les da el serve solo deben dar ctrl + click y listo se abrira la url en el navegador

package.json

  1. Compilar Webpack produccion
    "build": "webpack -p"
  2. Utilizar un servidor para produccion
    "serve" : " serve ."

Este curso es una joya!

馃憣