El tema de WordPress activa la carga diferida global, incluso en el banner principal y en la imagen que define la pintura con contenido más grande. Lighthouse mobile muestra un LCP de 4,2 segundos. Al desactivar la función diferida en esta única imagen, el LCP se reduce a 1,8 segundos. El equipo había “optimizado” retrasando precisamente el recurso más importante para el usuario y para Google.
La carga diferida retrasa la descarga de un recurso hasta que se acerca a la ventana gráfica. En el contenido de la mitad inferior de la página, es una ganancia gratuita en ancho de banda y tiempo de carga inicial. En la primera pantalla, lo que observan los motores de búsqueda es una degradación mensurable, a veces dramática, de la señal de rendimiento.
Por lo tanto, la pregunta correcta no es "¿deberíamos realizar una carga diferida?" » pero qué recurso merece llegar primero y cuál puede esperar a que el usuario se desplace.
Por encima y por debajo de la línea de flotación
La regla básica es simple de formular y fácil de violar en producción: todo lo que el usuario ve sin desplazarse debe cargarse inmediatamente; el resto puede esperar.
| Elemento | Estrategia recomendada |
|---|---|
| Héroe de imagen / candidato a LCP | cargando="ansioso" + fetchpriority="alta" |
| Logotipo del encabezado | ansioso, archivo ligero, precarga si es crítico |
| Primera línea de productos o miniaturas de página | ansioso o perezoso |
| Imágenes al final de la página | cargando="perezoso" |
| Avatares de comentarios, iconos secundarios | perezoso |
En HTML nativo, la sintaxis es directa:
<img src="product.webp" cargando="lazy" decodificación="async" ancho="800" altura="600" alt="...">
Retrasar la carga de la imagen LCP es optimizar el orden de prioridades incorrecto.
Muchos temas y complementos se aplican de forma diferida de forma predeterminada a todas las etiquetas <img>. Antes de habilitar una opción global, identifique el elemento LCP real a través de Search Console o Lighthouse; no siempre es la imagen que imagina.
prioridad de búsqueda, precarga y dimensiones
Más allá del atributo "cargar", dos palancas completan la priorización. fetchpriority="high" le indica al navegador que priorice un recurso candidato a LCP por página, normalmente la imagen principal o la foto del producto principal.
La precarga (<link rel="preload" as="image" href="hero.webp">) compensa el descubrimiento tardío: por ejemplo, cuando la imagen LCP se define como un fondo CSS en lugar de una etiqueta <img>. Evite esto último si es posible: las imágenes LCP en CSS son más difíciles de optimizar y medir.
Los atributos "ancho" y "alto" siguen siendo obligatorios, sean lentos o no: reservan espacio antes de cargar y evitan desplazamientos de diseño (CLS). La carga diferida bien configurada nunca compensa las dimensiones faltantes.
Iframes, mapas y scripts de terceros
Las imágenes no son los únicos recursos para contraatacar de forma inteligente. Un iframe de YouTube integrado carga varios megabytes de JavaScript tan pronto como se muestra la página, mucho más que el peso de una miniatura estática.
Dos enfoques eficaces:
- Fachada Lite-youtube (o equivalente): una imagen de vista previa y un reproductor cargado al hacer clic.
loading="lazy"en el iframe si la fachada no está disponible.
Para Google Maps, una imagen estática con un enlace al mapa interactivo suele ser suficiente hasta que el usuario hace clic. Combine la carga diferida y la gestión del consentimiento de cookies antes de cargar rastreadores de terceros: es más compatible y más eficiente.
CMS, temas y errores comunes
WordPress 5.5+ permite la carga diferida nativa de imágenes. Utilice los filtros wp_lazy_loading_enabled o la clase skip-lazy para excluir el héroe y el logotipo. Shopify y WooCommerce merecen la misma verificación: la galería principal de productos no debería ser perezosa por defecto si ocupa la primera pantalla.
En un sitio compartido o VPS, la carga diferida en la parte frontal a veces compensa la lentitud del alojamiento, pero no reemplaza una CDN ni una compresión de imágenes adecuada. Compare las ofertas a través de nuestro directorio si el TTFB sigue siendo alto a pesar de un lazy bien configurado.
La cumbre: la pereza como sustituto de la reflexión
Esto es lo que esconden las opciones de “carga diferida de todas las imágenes” detrás de una redacción tranquilizadora.
Para acelerar la primera pantalla a veces es necesario cargar una imagen antes, no retrasarla. Es contradictorio, pero eso es lo que muestran las mediciones de LCP en el terreno.
Decide y avanza sin puntos ciegos
Durante medio día, puede volver a poner la carga diferida al servicio del rendimiento real. Primero identifique el elemento LCP a través de Search Console o una auditoría móvil de Lighthouse y observe el selector exacto. Fuerce ansioso y fetchpriority="high" en este elemento, luego exclúyalo del tema o del complemento global diferido. Habilite la carga diferida solo en imágenes de la mitad inferior de la página y galerías largas. Reemplace los pesados iframes con fachadas de cargar con un clic para YouTube y mapas. Verifique el ancho y el alto de todas las imágenes para evitar saltos en el diseño. Por último, prueba en condiciones realistas con WebPageTest en tira de película 4G: el héroe debe ser visible desde el primer fotograma.
Para comparar hosting y CDN si el LCP sigue siendo lento a pesar de la pereza correcta, utilice el comparador y las guías de rendimiento.
Preguntas frecuentes
¿Debería aplicarse la carga diferida a todas las imágenes de forma predeterminada?
No. Los elementos de la mitad superior de la página (héroe, logotipo, primera imagen visible) deben cargarse inmediatamente. La carga diferida se aplica al contenido que el usuario descubrirá mientras se desplaza, no a lo que ve cuando llega.
¿carga nativa="lazy" o observador de intersección personalizado?
El atributo nativo es suficiente en la gran mayoría de los casos y evita JavaScript adicional. Un script personalizado está justificado para marcadores de posición avanzados (LQIP) o reglas de carga muy específicas, no como un reemplazo sistemático del nativo.
¿La carga diferida tiene un impacto en el SEO?
Indirectamente sí, a través del LCP y Core Web Vitals. Retrasar la imagen principal degrada la puntuación de rendimiento. Las imágenes críticas deben permanecer accesibles sin interacción ni desplazamiento infinito que ocultaría el contenido.
¿Y para los iframes de YouTube o Google Maps?
Combine loading="lazy" y una fachada que solo carga el reproductor al hacer clic. El impacto en el peso de la página a menudo supera el de la carga diferida de imágenes por sí sola.
La carga diferida útil retrasa lo que es invisible, no lo que el usuario vio primero.