Proyecto del Curso: Optimización Web

Curso de optimización web dictado por @jonalvarezz para Platzi

• Cómo trabajar en este proyecto?
• Guía rápida
• Optimizaciones aplicadas
• Encontraste un error o mejora?

🔎 Cómo trabajar en este proyecto?

El curso es totalmente práctico y progresivo este repositorio sólo existe como una guía para cuando lo necesites. Puedes realizar todo el curso en tu propio proyecto y tu propio repositorio.

Avanzamos en el curso a un nuevo tema y no puedes o no quieres completar los cambios anteriores para continuar? Empieza desde la etiqueta git correspondiente al módulo del curso.

1. Actualiza la información de las etiquetas:

   Anteriormente debiste clonar este repositorio tal como lo hicimos en clase.

   git fetch --tags

2. Lista las etiquetas disponibles:

   git tag

   Deberías ver algo como:

   0-inicio
   1-css
   2-webfonts
   3-imagenes
   4-javascript
   ...

3. Inicia un nuevo branch desde el punto que desees:

   git checkout -b el-nombre-de-mi-branch etiqueta-elegida
   
   # Por ejemplo, para iniciar desde el módulo 4-javascript
   git checkout -b jonalvarezz-javascript 4-javascript

   Eso es todo, ya puedes iniciar con todos los cambios incluídos hasta ese módulo. En la sección Tags de GitHub, encuentras más información de cada etiqueta.

Bonus: Cómo subo mis cambios a otro repositorio?

Git permite manejar varios repositorios remotos en una misma copia local. Aquí encuentras más información y te dejaré el cheatsheet a continuación:

# Crea tu nuevo repositorio en GitHub/GitLab/otro. 
# Asumamos la URL es git@github.com:jonalvarezz/mi-repo-mas-bello.git
# Agrega el nuevo remote

git remote add mi-repo git@github.com:jonalvarezz/mi-repo-mas-bello.git

# Para push
git push mi-repo branch-a-hacer-push


# Para pull
git pull mi-repo branch-a-hacer-push

🤖 Guía Rápida

1. Empieza a desarrollar.

   Instala dependencias

   npm install

   Inicia el proyecto

   npm run dev

   El sitio estará disponible en http://localhost:3000.

   Happy hacking!

2. Para producción.

   Construye el proyecto

   npm run build

   El sitio podrá ser accedido como un sitio estático.

   Un servidor de archivos estático está incluido y se puede iniciar con

   npm start

   El sitio estará disponible en http://localhost:5000.

🚀 Optimizaciones aplicadas

1. Elimina bloqueo en etiquetas script.
2. Convierte los estilos en Mobile First.
3. Carga los estilos para Desktop con baja prioridad en Móvil.
4. Agiliza HTTP handshake con otros dominios de recursos.
5. Reduce Paints en la animacion hover de los items del carousel.
6. Reduce complejidad de selectores CSS.
7. Desbloquea la carga del logo.
8. Evita texto invisible durante la carga (FOIT).
9. Reduce el tamaño del logo en 90%.
10. Minimiza requests HTTP con SVG.
11. Aplica Lazy load para las imágenes.
12. Evita Layout Shifts.
13. Compila el código para producción.
14. Utiliza un servidor para producción.
15. Agrega analizador del bundle: npm run dev|build -- --analyze
16. Uso conciente de Tree Shaking.
17. Mejora TTI por 5 seg.
18. Reduce el tamaño del Bundle un 70% gzipped.
19. Divide el bundle en dos archivos (code splitting)
20. Aplica lazy load para la librería del modal.
21. Renderiza el contenido principal desde nuestro propio servidor node (SSR).
22. Pre-renderiza el contenido principal de forma estática (SSG).
23. Deploy en Netlify.
24. Genera el contenido estático cada semana con GitHub Actions.
25. Guarda assets en el cache del navegador con Service Workers.
26. Automatiza Performance Audits con Lighthouse y GitHub Actions.

🐞 Encontraste un error o mejora?

Ayuda a otros estudiantes con eso que acabas de descubrir que haría este curso y respositorio mucho mejor.

• En Issues puedes reportar errores, agregar sugerencias y comentarios.
• Por su parte, los Pull Request siempre estarán abiertos para recibir mejoras puntuales.

Happy hacking!