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-javascriptEso 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!