Curso de optimizaci贸n web dictado por @jonalvarezz para Platzi
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.
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
-
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.
- 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.
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!