Cómo optimicé mi sitio web de portafolio
Tu portafolio es tu primera impresión. Si carga lentamente o no aparece en Google, pierdes oportunidades. Optimicé mi sitio para velocidad, SEO y mantenimiento.
Aquí está mi enfoque.
Velocidad y rendimiento
Elige un stack ligero. Usa generadores de sitios estáticos como Astro o Next.js. Estos envían menos JavaScript que los frameworks pesados.
Evita las librerías de UI pesadas. Construye tus propios componentes simples para ahorrar kilobytes.
Aloja tus fuentes por tu cuenta. Evita los CDNs de terceros para reducir las consultas DNS. Usa font-display: swap para evitar cambios de diseño (layout shifts).
Optimiza cada imagen.
- Convierte las imágenes a WebP o AVIF.
- Redimensiona las imágenes antes de subirlas.
- Usa
loading="lazy"para las imágenes que no están en la parte superior (below the fold). - Añade atributos
widthyheightpara evitar cambios de diseño.
Gestiona tu JavaScript.
- Realiza code-splitting en tus rutas.
- Retrasa la carga de scripts no críticos, como la analítica.
- Audita el tamaño de tu bundle regularmente.
SEO y estructura
Usa títulos y meta descripciones únicos para cada página.
Usa HTML semántico. Utiliza un solo H1 por página y etiquetas adecuadas como nav, main y footer.
Añade etiquetas Open Graph y Twitter Card. Esto hace que tus enlaces se vean bien cuando los compartes.
Incluye un sitemap.xml y un robots.txt. Esto ayuda a los motores de búsqueda a encontrarte.
Usa datos estructurados JSON-LD. Esto le dice a los motores de búsqueda exactamente quién eres.
Añade siempre texto alt a las imágenes para mejorar la accesibilidad y el SEO.
Mantenimiento y flujo de trabajo
Escribe el contenido en Markdown o en un archivo JSON sencillo. Esto te permite añadir proyectos sin tocar el código.
Configura un despliegue con un solo comando. Usa Vercel o Netlify para que un git push actualice tu sitio al instante.
Mantén las dependencias al mínimo. Esto evita problemas de instalación más adelante.
Prueba tu sitio. Usa Google PageSpeed Insights o Lighthouse para encontrar y solucionar problemas.
Construí mi sitio con Next.js y Vercel. Utiliza imágenes WebP, metadatos únicos y despliegue automático. Ahora, tardo treinta segundos en añadir un nuevo proyecto.
Concéntrate en los fundamentos. Configura bien tu stack, tus imágenes y tu marcado una sola vez. Tu sitio seguirá siendo rápido y fácil de gestionar.
¿Qué fue lo que marcó la mayor diferencia en la optimización de tu portafolio? Cuéntamelo en los comentarios.