Por qué la página salta mientras carga

Qué es el desplazamiento del diseño

El desplazamiento del diseño es contenido que se mueve después de haberse dibujado. El navegador pinta la página con la información que tiene, entonces llega una imagen con un tamaño que no conocía, y todo lo que está debajo baja para hacerle sitio. O carga una fuente y cada línea se reajusta. O una barra de avisos se inserta arriba y empuja la página cinco centímetros.

Se mide como Cumulative Layout Shift, la suma de cada movimiento inesperado durante la carga, y una puntuación por debajo de 0,1 se considera buena. Los visitantes no conocen el número. Saben que pulsaron un enlace y le dieron al que estaba debajo.

Causa uno: imágenes sin dimensiones

Con diferencia, la causa más común. Una etiqueta img con un src y nada más no le dice nada al navegador sobre la forma de la imagen, así que reserva cero de alto hasta que el archivo se descarga. La corrección son dos atributos: width y height. No fuerzan la imagen a ese tamaño en pantalla; con el CSS habitual de max-width 100% y height auto, simplemente le dicen al navegador la relación de aspecto, y reserva la caja correcta antes de que llegue el primer byte.

WordPress ya conoce estos números para cada archivo de la biblioteca de medios. Abra cualquier imagen en Medios y el panel de detalles muestra sus dimensiones, 1920 por 1080 píxeles por ejemplo. Las imágenes colocadas desde el editor reciben width y height en la etiqueta automáticamente.

Donde falla es en el tema: las imágenes principales definidas desde un maquetador de páginas, un campo del personalizador o una plantilla escrita a mano suelen emitir solo la URL. En una plantilla, pídale la imagen a WordPress en lugar de construir la etiqueta a mano, y los atributos vienen con ella:

<?php
// Right: WordPress writes src, srcset, sizes, width, height, and alt for you.
echo wp_get_attachment_image( $hero_id, 'full', false, array(
  'class'         => 'hero-img',
  'fetchpriority' => 'high',
  'loading'       => 'eager',
) );

// If you must build the tag yourself, take the real dimensions from the library:
$img = wp_get_attachment_image_src( $hero_id, 'full' ); // [ url, width, height ]
printf(
  '<img src="%s" width="%d" height="%d" alt="%s" />',
  esc_url( $img[0] ), $img[1], $img[2], esc_attr( get_post_meta( $hero_id, '_wp_attachment_image_alt', true ) )
);

Después, la única línea de CSS que hace que los atributos se comporten en todos los tamaños de pantalla:

El CSS que lo acompaña

Con width y height presentes, esta regla deja que la imagen escale a su contenedor mientras el navegador mantiene la caja reservada con la forma correcta. La mayoría de los temas ya la tienen; compruebe que nada sobrescriba height con un valor fijo.

img {
  max-width: 100%;
  height: auto;
}

/* A hero set as a CSS background can't carry dimensions. Give its box a shape instead: */
.hero {
  aspect-ratio: 16 / 9;
  background-size: cover;
}

Causa dos: incrustaciones sin espacio reservado

Un iframe de YouTube o de C-SPAN llega con la altura que especificaba el código de incrustación, a menudo 315 píxeles para 560 de ancho, y entonces un tema adaptable estira el ancho sin ajustar el alto, o el script del reproductor lo redimensiona después de cargar. En ambos casos, la página se mueve.

Envuelva cada video incrustado en una caja con la forma declarada, y deje que el iframe la llene. El espacio queda reservado antes de que cargue el reproductor, y escala con la columna.

.embed {
  aspect-ratio: 16 / 9;   /* 4 / 3 for older video, or match the embed's own ratio */
  width: 100%;
}
.embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

Causa tres: fuentes que se intercambian

Una fuente web que llega después de pintar la página reajusta cada línea compuesta con ella, y si la fuente de reserva tiene otro ancho, párrafos enteros cambian de altura. Precargar el archivo de la fuente la hace llegar antes del primer pintado en la mayoría de las conexiones. El descriptor size-adjust permite afinar la fuente de reserva para que el intercambio, cuando ocurra, no cambie casi nada.

<!-- in the head: fetch the font before the page needs it -->
<link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin />

/* in the CSS: a fallback shaped to match, so the swap barely moves anything */
@font-face {
  font-family: "Body Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
}
body { font-family: "Body", "Body Fallback", sans-serif; }

Causa cuatro: cosas insertadas arriba después de pintar la página

Los avisos de cookies, las barras de anuncios y los banners de alerta inyectados con JavaScript son la última causa común, y la más fácil de ver: toda la página baja en el momento en que aparece la barra. Dos correcciones, y cualquiera sirve. Renderice la barra en el HTML de la página para que su espacio exista desde el primer pintado, o conviértala en una capa que se superponga al contenido en lugar de empujarlo hacia abajo. Lo que nunca funciona es insertar un bloque encima del contenido después de dibujarlo.

Verlo usted mismo

En Chrome, abra el panel Performance y grabe una carga de página; cada desplazamiento queda marcado y se nombra el elemento que se movió. Lighthouse informa el total como Cumulative Layout Shift. La auditoría gratuita de este sitio ejecuta la misma medición en su portada y le dice en lenguaje claro si la página se mueve.

Si es cliente, corregir la imagen principal de una plantilla o la caja de una incrustación es una tarea pequeña dentro de la iguala. Un tema que construye cada etiqueta de imagen a mano es un proyecto, con presupuesto cerrado. Abra una solicitud y buscaremos primero el elemento que se mueve.