Ingeniería 3 min de lectura

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".

Terisuke
Share this article:
高性能Webサイトのイメージ

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.

Imagen de perfil del desarrollador

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.

Secure payment via Stripe

Artículos Relacionados

Leer artículo
韓国語ブログ404ページ
Ingeniería

【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.

#多言語化 #i18n +4
Leer artículo
Google Cloud Platform ロゴ
Ingeniería

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.

#Google Cloud #DevOps +3
Leer artículo
Ingeniería

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.

#Astro #ブログシステム +6