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

Nuestro proyecto

6/38
Recursos

Aportes 22

Preguntas 7

Ordenar por:

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

Vaya! Gracias por aportar tanto conocimiento Jonathan. Es muy valioso para nosotros poder reducir la curva de aprendizaje utilizando tu experiencia.

Creo que tendré que hacer una pausa para hacer cursos de GIT y manejar sistemas Línux. Emocionante el curso y el tema, pero odio la parte en que el otros sistemas operativos son los que se usan para los cursos y los que aún seguimos en windows quedamos perdidos.

Me encanta la terminal, donde puedo conseguir info de como la tiene modificada así? la quiero igual jajajaja. Amor a primera vista.

Añadan esto al archivo webpack.config.js en la raíz del proyecto:

  devServer: {
    contentBase: '.',
    open: 'Google Chrome', // Navegador de tu preferencia
    host: '192.168.1.101', // El IP de tu dispositivo
  },

Cuando ejecuten el comando:

npm run start

Se abrirá automáticamente el navegador con el proyecto en tu IP y así podrás verlo desde cualquier dispositivo conectado a tu red.

Para los que usan Debian probablemente les saldrá un error

Error: Protocol error (Tracing.start): 'Tracing.start' wasn't found

Según vengo leyendo en github es un error de Debian y no parece tener solución por el momento. Yo solucioné mi problema bajando una versión portable de Chromium y ejecutando lighthouse ahí

Al insertar “npm install” me encontré con el error: “Error: Cannot find module ‘…/lib/utils/unsupported.js’”. Pude repararlo tras reinstalar node desde homebrew con “brew reinstall node”.

Cuando quise cambiar de branch, así como el profesor lo hizo en el minuto 3:04, a mi me salió en la ventana de comandos que primero debía hacer el pre-commit con algo llamado husky. Primera vez en mi vida que yo veo eso., investigué es stackover flow y la mejor respuesta que encontré fue que es mejor ir manualmente al directorio del proyecto y borrar esa carpeta husky, porque si no lo haces no te va a dejar hacer tu primer commit por nada del mundo, peor cambiar de branch.
Espero esto les sirva de algo.
Saludos.

En mac no me dejaba hacer el checkout como en el video, sería:
git switch -c <new-branch-name>
En este caso:
git switch -c 0-inicio

Luego si el npm i

¿Por que usa Google Chrome Canary? 🤔

<h3>A eso lo llamo un ‘O O F’</h3>

“webpack-dev-server” no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.
npm ERR! code ELIFECYCLE

Solo mirar las métricas del proyecto local y se te eriza la piel

algun dia espero llegar a ser tan crack como el profesor Jonathan

En webpack.config.js tuve un problema en:

devServer:{
	contentBase: '.',
},

Hay que reemplazar contentBase con static

Todo instalado y funcionando correctamente. Vamo’ a por ello

Hola compañeros, si al ejecutar: “npm run dev” les aparece lo siguiente:

La solución es actualizar las dependencias, en mi caso actualice webpack-dev-server y webpack-cli:

Actualizando eso, funciono correctamente el comando 😄.

Dos horas después, pero ya esta todo listo

git clone https://github.com/jonalvarezz/platzi-optimizacion-web.git```

Mal para los que usamos Windows.

👌

He visto varios comentarios que dicen que ‘mal para los usuarios e windows’. No se porque se quejan si en este video no hay nada que no se pueda hacer en Windows.

Generé ambos reportes, Y me llamo la intención la gran diferencia que obtuve.

Desktop

Mobile