Proyecto del Curso: Optimizaci贸n Web
Curso de optimizaci贸n web dictado por @jonalvarezz para Platzi
馃攷 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.
-
Actualiza la informaci贸n de las etiquetas:
Anteriormente debiste clonar este repositorio tal como lo hicimos en clase.
git fetch --tags
-
Lista las etiquetas disponibles:
git tag
Deber铆as ver algo como:
0-inicio 1-css 2-webfonts 3-imagenes 4-javascript ...
-
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 [email protected]:jonalvarezz/mi-repo-mas-bello.git
# Agrega el nuevo remote
git remote add mi-repo [email protected]: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
-
Empieza a desarrollar.
Instala dependencias
npm install
Inicia el proyecto
npm run dev
El sitio estar谩 disponible en http://localhost:3000.
Happy hacking!
-
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
- Elimina bloqueo en etiquetas
script
. - Convierte los estilos en Mobile First.
- Carga los estilos para Desktop con baja prioridad en M贸vil.
- Agiliza HTTP handshake con otros dominios de recursos.
- Reduce Paints en la animacion hover de los items del carousel.
- Reduce complejidad de selectores CSS.
- Desbloquea la carga del logo.
- Evita texto invisible durante la carga (FOIT).
- Reduce el tama帽o del logo en 90%.
- Minimiza requests HTTP con SVG.
- Aplica Lazy load para las im谩genes.
- Evita Layout Shifts.
- Compila el c贸digo para producci贸n.
- Utiliza un servidor para producci贸n.
- Agrega analizador del bundle:
npm run dev|build -- --analyze
- Uso conciente de Tree Shaking.
- Mejora TTI por 5 seg.
- Reduce el tama帽o del Bundle un 70% gzipped.
- Divide el bundle en dos archivos (code splitting)
- Aplica lazy load para la librer铆a del modal.
- Renderiza el contenido principal desde nuestro propio servidor node (SSR).
- Pre-renderiza el contenido principal de forma est谩tica (SSG).
- Deploy en Netlify.
- Genera el contenido est谩tico cada semana con GitHub Actions.
- Guarda assets en el cache del navegador con Service Workers.
- 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!