Sobes.tech
Middle

¿Cómo evitar el problema de 'destello de contenido sin estilo' (FOUC)?

sobes.tech AI

Respuesta de la IA

Las formas más efectivas:

  1. Carga síncrona de CSS: Coloca <link rel="stylesheet"> en <head> del documento para que el navegador cargue y aplique los estilos antes del renderizado del contenido.

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Mi Aplicación</title>
      <link rel="stylesheet" href="/styles/main.css">
      <!-- Otras etiquetas en head -->
    </head>
    
  2. Incrustar estilos críticos: Inserta estilos necesarios para mostrar la parte visible de la página ("Above the fold") directamente en <head> usando <style>. Esto acelera el renderizado inicial. Los demás estilos pueden cargarse de forma asíncrona.

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Mi Aplicación</title>
      <style>
        /* Estilos críticos aquí */
        body { margin: 0; padding: 0; }
        h1 { color: blue; }
      </style>
      <link rel="stylesheet" href="/styles/main.css">
      <!-- Otras etiquetas en head -->
    </head>
    
  3. Usar font-display: swap u otras propiedades similares para las fuentes: Para fuentes personalizadas que puedan causar FOUT (Flash of Unstyled Text), usa font-display en la regla @font-face en CSS. swap permite mostrar inmediatamente el texto con la fuente del sistema y reemplazarla por la personalizada tras la carga.

    @font-face {
      font-family: 'MyCustomFont';
      src: url('my-custom-font.woff2') format('woff2');
      font-display: swap; /* O fallback, optional, block */
    }
    
  4. Aplicar plantillas ligeras (en renderizado en servidor): Si usas renderizado en servidor (SSR), puedes incrustar en HTML un conjunto mínimo de estilos necesarios para mostrar el esqueleto de la página.

  5. Minimizar y combinar archivos CSS: Reducir la cantidad de solicitudes HTTP y el tamaño de los archivos CSS acelera su carga.

  6. Usar herramientas de construcción: Webpack, Parcel y otros empaquetadores pueden automatizar la inserción de estilos críticos y la optimización de CSS.