Preload en la práctica: cuándo usarlo (y cuándo evitarlo) para mejorar el rendimiento web

Roy Andres Huaman Avila — Wed, 23 Jul 2025 21:44:03 +0000

En el mundo del rendimiento web, cada milisegundo cuenta. Una de las herramientas más poderosas —y a menudo mal entendidas— es el atributo preload. Usado correctamente, puede acelerar la carga de recursos críticos. Usado sin criterio, puede hacer justo lo contrario.

En este artículo te explico qué es preload y cuándo usarlo estratégicamente.
<link rel="preload"> es una instrucción para el navegador que le indica que debe cargar un recurso lo antes posible, incluso antes de que se necesite en el renderizado.

Ejemplo básico:

🔍 Claves importantes:

El atributo as define el tipo de recurso (script, style, font, image, etc.)
Es útil para recursos críticos que no se descubren de inmediato en el HTML
No ejecuta el recurso, solo lo descarga

💡 ¿Cuándo usar preload?

Fuentes personalizadas: evita el flash de texto sin estilo (FOUT)
Imágenes hero: si no están en el HTML inicial pero son visualmente prioritarias
Scripts esenciales: si se cargan dinámicamente pero son necesarios para la interacción inicial

🚫 ¿Cuándo evitar preload?

Preload de recursos no críticos: aumenta el tiempo de carga total
Usar preload en exceso: puede saturar el ancho de banda
Preload sin as: el navegador no sabe cómo manejar el recurso

❗Consejo: Si no estás seguro de la criticidad del recurso, considera prefetch o lazy loading como alternativas.

Preload es una herramienta poderosa cuando se usa con intención. Al identificar los recursos verdaderamente críticos y aplicar preload con precisión, puedes mejorar significativamente el rendimiento percibido de tu sitio.

¿Has usado preload en tus proyectos? ¿Te ha dado buenos resultados? ¡Cuéntamelo en los comentarios!

Variables Globales CSS

Roy Andres Huaman Avila — Fri, 18 Jul 2025 05:44:04 +0000

Variables Globales en el selector :root
- En el inicio de cada proyecto, crea un archivo de estilos (por ejemplo, _settings.scss) para definir las variables globales. Estas variables representan los ajustes visuales del proyecto, como colores, sombras, espaciado, etc.
- Utiliza el selector :root para definir estas variables. Por ejemplo:

    :root {
      /* Colores de la interfaz de usuario */
      --primary-hue: 12;
      --color--primary: hsl(var(--primary-hue), 100%, 44%);
      --color--primary--hover: hsl(var(--primary-hue), 100%, 39%);
      --color--primary--active: hsl(var(--primary-hue), 84%, 30%);

      /* Sombras */
      --shadow-01: 0px 2px 4px rgba(37, 37, 37, 0.1);
      --shadow-02: 0px 4px 8px rgba(37, 37, 37, 0.1);
      /* ...otros estilos... */
    }

Luego, utiliza estas variables en otros selectores para mantener la coherencia visual.

    .card {
      box-shadow: var(--shadow-01);
      border: 1px solid var(--border-color);
      transition: box-shadow 0.2s linear;

      &:hover,
      &:focus {
        box-shadow: var(--shadow-03);
      }
    }

<aside>
💡 Si necesitas cambiar algún ajuste durante el proyecto, modifica la variable en un solo lugar (en **`:root`**)

</aside>

Variables Personalizadas (Custom Properties)
- Las variables personalizadas (también conocidas como Custom Properties) son una característica de CSS que permite definir variables reutilizables en tus estilos.
- Define tus variables personalizadas en el selector :root o en cualquier otro selector. Por ejemplo:
```
:root {
  --spacing: 1.2rem;
  --main-color: hotpink;
  /* ...otros estilos... */
}
```

- Luego, úsalas en tus estilos:

```css
.button {
  padding: var(--spacing);
  background-color: var(--main-color);
  /* ...otros estilos... */
}
```

- La ventaja de las variables personalizadas es que son más flexibles y pueden utilizarse en cualquier parte del documento, no solo en el nivel global.

Utiliza la extensión CSS Variable Autocomplete
Esta extensión mejora la experiencia de desarrollo web al proporcionar funciones avanzadas como autocompletado, vista previa de colores y navegación a la definición de variables.
Te ayudara con el autocompletado a otros archivos CSS que tengas en :root.

DEV Community: Roy Andres Huaman Avila

Preload en la práctica: cuándo usarlo (y cuándo evitarlo) para mejorar el rendimiento web

Variables Globales CSS