La historia de cómo intenté una y otra vez el sitio web de Hiroshi Abe y creé un sitio web increíble
La crónica y las ideas técnicas de desafiar continuamente el sitio web de Hiroshi Abe como "el hombre con el sitio web autoproclamado más rápido en descender".

La historia de cómo intenté superar la página web de Hiroshi Abe y creé una página web increíble
Como “el hombre con la página web de carga más rápida autoproclamada”, he estado desafiando continuamente la página web del Sr. Hiroshi Abe. Como resultado, nació un sitio web verdaderamente de alto rendimiento que trasciende una simple carrera de velocidad. Por cierto, el sitio del Sr. Hiroshi Abe sigue siendo rápido hoy en día. Le rindo homenaje.
Selección del stack tecnológico
Por qué elegimos Astro + Alpine.js
¿Por qué esta combinación? La respuesta es sencilla. Encarna el espíritu Zen de “solo lo que necesitas, cuando lo necesitas”. ¿React? Pesado. ¿Vue? Regular. Pero ¿Alpine.js? Esa fue la respuesta más ligera.
---
// Arquitectura de Astro Islands
import Hero from '../components/Hero.astro';
import ContactForm from '../components/ContactForm.vue';
---
<Layout title="Sitio web ultrarrápido">
<Hero />
<!-- Cargar JavaScript solo donde sea necesario -->
<ContactForm client:load />
</Layout>
Estrategia de optimización de imágenes
Las imágenes son una carga pesada en la web moderna. Por eso adopté el último formato AVIF. Es la mitad del tamaño de JPEG con la misma calidad de imagen. Parece magia, pero así es el progreso tecnológico.
<!-- Entrega de imágenes en formato AVIF -->
<picture>
<source srcset="hero-480w.avif 480w, hero-800w.avif 800w" type="image/avif">
<source srcset="hero-480w.webp 480w, hero-800w.webp 800w" type="image/webp">
<img src="hero-800w.jpg" alt="Imagen principal" loading="lazy">
</picture>
Resultados de la optimización del rendimiento
Lo logré. Obtuve la puntuación perfecta en todas las métricas:
- Puntuación Lighthouse: 100/100/100/100 (¡Perfecto!)
- First Contentful Paint: 0.3 segundos (tan rápido que no puedes parpadear)
- Largest Contentful Paint: 0.5 segundos (cargado antes de que puedas tomar un sorbo de café)
- Cumulative Layout Shift: 0 (no se mueve ni un ápice)
Estrategia de Cache-Control
La caché es tu amiga. Con una configuración de caché de un año (31536000 segundos), las imágenes que se han cargado una vez nunca se volverán a cargar. Esto también ahorra datos de usuario. Todos felices.
// Configuración de Firebase Hosting
{
"headers": [
{
"source": "**/*.@(jpg|jpeg|gif|png|webp|avif)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=31536000, immutable" // ¡Caché de 1 año!
}
]
}
]
}
A través de este desafío, aprendí la importancia de diseñar sitios web que prioricen la experiencia del usuario, yendo más allá de la simple “velocidad”. Conclusión: la velocidad es justicia, pero la facilidad de uso es aún más justicia.
Si está interesado en crear un sitio web de alto rendimiento, no dude en ponerse en contacto con nosotros a través de Contacto. Construyamos juntos un sitio más rápido que el del Sr. Hiroshi Abe (puede que no sea posible, pero vale la pena intentarlo).
Support this article
If this article was helpful, please support us with a tip. You can choose any amount.
Etiquetas
Artículos Relacionados

【Soporte completo para 5 idiomas】Crónica de una batalla furiosa de 3 horas para expandir un blog que solo era para inglés y japonés a chino, coreano y español
El impactante hecho de que, aunque pensábamos que era compatible con 5 idiomas, en realidad solo tenía 2. El registro completo de la implementación ultrarrápida del soporte para chino, coreano y español con Claude Code.

La migración completa de un proyecto de Google Cloud entre organizaciones se completó en un día
Los registros de las lágrimas de un desarrollador que había creado un script para migrar GCS poco a poco, solo para descubrir que los proyectos se podían mover enteros.
Implementación completa del sistema de blogs en Astro 4.8 - Un enfoque integral con traducción automática por IA y pruebas E2E
Registro de la implementación de un sistema de blogs de alto rendimiento basado en Astro Content Collections. Se detalla el proceso de desarrollo integral, que incluye traducción automática por IA con la API Google Gemini, pruebas E2E con Playwright y funcionalidad de limitación de velocidad.