Curso de Optimización Web

Clases del Curso de Optimización Web

Instruido por:
Jonathan Alvarez
Jonathan Alvarez
Avanzado
7 horas de contenido
Ver la ruta de aprendizaje
PlatziVideo
Proyecto del curso
PlatziVideo

Iniciamos con una página web típica que utiliza JavaScript para renderizar contenido de una API externa, estudiaremos desde cómo funciona el navegador, pasando por HTML, Imágenes, WebFonts, SVG y JavaScript, hasta implementar nuestro propia estrategia Server Side Rendering (SSR), potencializar hasta Static Site Generation (SSG) y deploy en en la nube. Sin frameworks o librerías que realicen magia, todo transparente con vanilla JS, CSS y HTML.

Curso de Optimización Web

Curso de Optimización Web

Progreso del curso:0/38contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/38contenidos(0%)

Entendiendo el rendimiento

Material Thumbnail

Todo lo que aprenderás sobre optimización web

01:13 min

Material Thumbnail

¿Vale el esfuerzo optimizar un sitio web?

03:44 min

Material Thumbnail

¿Cuándo realmente un sitio es rápido o lento?

04:51 min

Antes de optimizar...

Material Thumbnail

Aprendiendo a medir

07:58 min

Material Thumbnail

User Performance Metrics

05:46 min

Crítical Rendering Path

Material Thumbnail

Etapas de render del navegador

11:11 min

Material Thumbnail

Network waterfall y recursos que bloquean el navegador

10:53 min

Material Thumbnail

Priorización de recursos

11:50 min

Material Thumbnail

Preloading y prefetching de recursos

10:36 min

Material Thumbnail

Fases Paint y Layout del Critical Render Path

02:35 min

CSS

Material Thumbnail

Detectando Paints costosos y optimizando animaciones

20:15 min

Material Thumbnail

Bloqueos y complejidad en selectores

13:39 min

WebFonts

Material Thumbnail

WebFonts y su impacto en redimiento

15:30 min

Imágenes, Iconos y SVG

Material Thumbnail

Imágenes, formato y compresión

15:32 min

Material Thumbnail

Imágenes y compresión

05:21 min

Material Thumbnail

¿WebFont, Imagen o SVG?

08:58 min

Material Thumbnail

Técnicas avanzadas con Lazy Loading

10:14 min

Material Thumbnail

Técnicas avanzadas con Responsive Loading

04:13 min

Aplicaciones JavaScript

Material Thumbnail

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

11:20 min

Material Thumbnail

Analizando el bundle de la aplicación

11:25 min

Material Thumbnail

Reduciendo el tamaño del bundle

17:14 min

Material Thumbnail

Lazy Module Loading

21:44 min

Material Thumbnail

Llevando los listeners a otro nivel

17:24 min

Material Thumbnail

Instalando Modal video

14:58 min

Material Thumbnail

Lazy loading del modal

13:25 min

Material Thumbnail

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

08:44 min

Material Thumbnail

Pre-renderizando el contenido: Static Generation

15:51 min

Caché

Material Thumbnail

Cómo funciona el Caché de recursos y CDN

05:51 min

Material Thumbnail

Deploy en Netlify y automatización de contenido en GitHub Actions

09:03 min

Material Thumbnail

Aplicando Github Actions

09:25 min

Material Thumbnail

Interceptando los requests del navegador con Service Workers

14:04 min

Performance Budget

Material Thumbnail

Performance budget y auditorias automatizadas

16:55 min

Material Thumbnail

Automatizando una auditoría con Lighthouse CI

06:35 min

Material Thumbnail

Medidas reales y monitoreo constante

03:25 min

Conclusiones

nuevosmás votadossin responder
Fredy Daniel Flores Lemus
Fredy Daniel Flores Lemus
Estudiante

Github pages tambien te ofrece CDN?

0
Stiven Castillo Montero
Stiven Castillo Montero
Estudiante

¿Qué pasa si yo agrego un package de npm y ese paquete usa moment, el bundle sigue siendo grande?

1
Lady Vargas
Lady Vargas
Estudiante

Que tan apropiado seria utilizar como logo una imagen .svg?

1
Juan Sebastian Bueno
Juan Sebastian Bueno
Estudiante

[email protected] tengo una duda, si hago destructuring del paquete sobre toda la libreria tambien estoy haciendo tree shaking? asi…

import {get} from'lodash'

o lo logro solo siendo mas especifico en la importacion de esta manera…

importgetfrom'lodash/get'

muchas gracias

2
Geordy Elian Reyes Mendoza
Geordy Elian Reyes Mendoza
Estudiante

Si tienes js dentro de etiquetas scripts html, osea inline, tiene sentido async o refer?

<body><scriptasync >document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script></body>
1
Geordy Elian Reyes Mendoza
Geordy Elian Reyes Mendoza
Estudiante

En resumen, el parse html debe estar al principio, antes del evaluar el script?
{D734D1CB-BB3A-48C9-973F-6349EFB5317C}.png.jpg

Entonces que opinan de esto?
{188711FA-BBC0-42D4-AA86-45BF915E65D1}.png.jpg

1
Angel David
Angel David
Estudiante

Como se coloca async cuando se carga desde webpack?

1
Nazareno Aznar Altamiranda
Nazareno Aznar Altamiranda
Estudiante

Por qué le damos preload al dominio gstatic pero no al de googleapis?

1
Nazareno Aznar Altamiranda
Nazareno Aznar Altamiranda
Estudiante

Cuando voy a la pestaña network no me cargan los assets requeridos, aunque la pagina se ve normal :S

1
Nazareno Aznar Altamiranda
Nazareno Aznar Altamiranda
Estudiante

Saben por qué cuando uso async no cargan los javascript (dejando la pagina vacia solo con el buscador y el header), pero si uso defer sí carga?

1