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

Bienvenida al curso

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
david Chaparro
david Chaparro
Estudiante

Compré un dominio y hosting en Godaddy pero, no he podido migrar a ifastnet. Alguien me puede ayudar con eso?

0
Silvana Ramos
Silvana Ramos
Estudiante

Iconos svg crecen demasiado durante la carga. Estoy migrando de font Awesome a svg, todo bien con modificarle los colores, tamaños y demás, cuando es inline. Pero también tengo iconos compartidos que varían de estilo, y en Firefox sobre todo durante la carga de la web se vuelven gigantescos hasta que termina de cargan y obtienen los estilos que quiero, alguien sabe cómo corregir eso o si talvez es tema del navegador? iconos gigantes

se incluyen de la sgte manera:

<span>
	<svg viewBox="0 0 1792 1792" ><path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z"/>
                    </svg>
</span>

Intenté cargar un svg personalizado de 20x20px pero el problema persiste

0
German Moren
German Moren
Estudiante
adhiero a la pregunta de @castillozambrano, si además de cargar el .woff generamos un Font.css entiendo que es la peor alternativa, pero si mi fuente no está en ninguna de las páginas mencionadas como hago. es 'Causten' su nombre
0
German Moren
German Moren
Estudiante
recomienda BEM sobre css modules de en react? me parece que no hay mejor manera de hacerlo que con css modules pero de verdad no se como le asigna ese hash a las clases, si lo hace mientras se construye el ccsom o luego con el bundle.js
0
Victor Andres Castillo Zambrano
Victor Andres Castillo Zambrano
Estudiante

Y si descargamos las fuentes .woff y las cargamos en nuestra carpeta dist con webpack, que tanto afectaria de esta forma en el rendimiento de nuestra pagina?

0
luis-gabriel-cazzullo
luis-gabriel-cazzullo
Estudiante

¡Hola! Esta parte me sirvió exactamente para el proyecto en el que estoy trabajando. Una duda, el cliente con el que trabajo utiliza una decena de servicios de terceros (todos importantes por razones de marketing), hay alguna manera más avanzada de optimizar la carga? Además, algunos servicios vienen con unused javascript, es decir, parece que no están optimizados. Algún consejo? Muchas gracias, excelente curso.

0
Darksiders
Darksiders
Estudiante

Yo tengo una duda pero no sé si es relacionado con optimización (yo supongo que si). en muchos sitios web he visto que para llamar una hoja de estilos usan la dirección url y no lo llaman de forma local por ejemplo: https://www.dominio.com/css/estilos.css pero, en todos los cursos que yo he visto nos enseñan a llamarlo de forma local por ejemplo: …/…/css/estilos.css, y mi pregunta es ¿Cuál es la mejor forma de llamar cualquier archivo?
Yo supongo que la mejor forma es con la dirección url porque de la otra forma le estas diciéndole al servidor que retroceda de carpeta y luego entre a otra carpeta para llegar el archivo y eso me imagino que gasta recursos

1
Sebastián Buitrago
Sebastián Buitrago
Estudiante

Los github actions solo aparecen cuando se ha hecho el deploy cada semana en netlify, porque subi todo al repo de github y no aparece nada?

1
Sebastián Buitrago
Sebastián Buitrago
Estudiante

trate de hacer lo del hover y no vi que ningun archivo se cargara en network sera que ya quitaron eso y lo optimizan de otra manera?

0
Antony Jose Cabeza Rauseo
Antony Jose Cabeza Rauseo
Estudiante

Debería tomar este curso siguiendo la ruta de la Escuela de Desarrollo Web o ver los cursos que recomienda el profesor antes de empezar con este curso?

0