---
title: "Cargas diferidas en el SEO - WPO - Carlos Sánchez"
description: "Descubre cómo mejorar el rendimiento de tu web controlando el orden en el que cargan tus recursos. Una de las formas es por medio de cargas diferidas, haciendo que los recursos no los descargue o ejecute el usuario hasta que sea estrictamente necesario."
author: "Carlos Sánchez"
url: https://carlossanchezdonate.com/articulo/cargas-diferidas-seo/
image: https://carlossanchezdonate.com/wp-content/uploads/tb-cargas-diferidas.jpg
---





# Las cargas diferidas




                Las cargas diferidas nos permiten descargar o ejecutar elementos más tarde que los elementos principales de la web.






![Las cargas diferidas](https://carlossanchezdonate.com/wp-content/uploads/cover-cargas-diferidas.jpg)




**Autor:**

        : [Carlos Sánchez](https://carlossanchezdonate.com/sobre-mi/)


**Temática: **
: [WPO](https://carlossanchezdonate.com/seo-avanzado/rendimiento-velocidad/)




**Fecha de publicación:**

        : 2023-06-26



**Última revisión:**

        : 2026-04-22




        **Índice**
                mostrar


        1
                Cargas diferidas de Javascript
        1.1
                Async
        1.2
                Defer
        1.3
                Carga pospuesta por tiempo
        1.4
                Lazy Loading nativo
        1.5
                Lazy Loading por medio de JS
        1.5.1
                Lazy loading en imágenes de background
        1.6
                Lazy Loading en CMS
        1.6.1
                Shopify
        1.6.2
                WordPress
        2
                Load on Interaction
        3
                Efectos de CSS
        4
                Bibliografía

Del mismo modo que existen las [precargas](/articulo/precarga-de-recursos/) para conseguir que el usuario descargue o ejecute elementos necesarios en la web lo antes posible, se puede hacer exactamente lo opuesto para elementos que no son necesarios de ejecutar al inicio de la página, para que esta sea viable o eficiente para el usuario.

El orden de carga de los elementos de una web afecta directamente al [WPO](https://carlossanchezdonate.com/seo-avanzado/rendimiento-velocidad/), por lo que tener un control sobre los elementos que se cargan en la web, y posponer los elementos no esenciales para la navegación inicial del usuario, puede ayudar notoriamente a mejorar el rendimiento de una web.

**
Solo tiene sentido la carga diferida en aquellos elementos que no afecten en la visibilidad de la página.

Para entender estas cargas diferidas, tenemos que entender que cuando hacemos una solicitud en la página web y pasamos al [proceso de renderización](https://carlossanchezdonate.com/noticia/martin-splitt-renderizacion/), estamos descargando y procesando todos los elementos que esta página web tiene. Esto el navegador en un orden, tanto la descarga del contenido (código, imágenes, vídeos), como el procesamiento del mismo (que se ejecute el código), ya que el ordenador debe ejecutar todas estas acciones, y aunque los ordenadores sean buenos haciendo estas tareas de forma rápida y eficiente, no son capaces de hacer todas a la vez. Es por esto que darle a los navegadores pistas sobre qué elementos son más prioritarios, ayudan a tener una [mejor experiencia de cara al usuario](/articulo/sxo-especialidad-seo/).

## Cargas diferidas de Javascript

El JavaScript es el lenguaje de programación que funciona en los navegadores, por lo que es el lenguaje de programación ideal para interactuar sobre el usuario, ya que (a excepción de node.js y otros) se procesa en el navegador del visitante de la web.

Esto permite que las páginas tengan un mayor dinamismo y una gran funcionalidad, sin JavaScript y sin su estandarización de interpretación en los navegadores,[las páginas webs no funcionarían como lo hacen a día de hoy](/articulo/como-funciona-una-web/).

Dicho esto, hay Scripts que tienen sentido que se descarguen y se ejecuten al inicio de la web para poder cumplir ese dinamismo, al igual que hay Scripts que necesitan ser ejecutados posteriormente a la aparición de ciertos elementos a los que estos Scripts hacen referencia para poder funcionar.

Además de poder alterar el orden de la llamada a los archivos de JavaScript o del Script inline/internal (cambiándolos de posición en el HTML), tenemos ciertos atributos y técnicas para poder tener un mayor control de la ejecución de estos archivos (cuando se llaman por medio de archivos externos).

> Los atributos async y defer solo tienen efecto en los scripts con el atributo src, es decir, en aquellos que carguen elementos externos.

Tradicionalmente, la descarga de una página funciona, comenzando a descargar los elementos de forma lineal. Principalmente el HTML, en el HTML se va poniendo por medio de etiquetas que elementos se descargan, estos elementos a su vez pueden descargar además otros elementos y retrasar la ejecución (por ejemplo el [CSS](https://carlossanchezdonate.com/articulo/css-posicionamiento-web/) puede llamar a más archivos CSS por medio de @import y JavaScript más de lo mismo). Pues cuando se llega a un Script, la descarga de HTML para, se comienza a descargar el Script, se ejecuta y tras su ejecución, continua la descarga de HTML por donde iba. Con los atributos async y defer, podemos hacer que esto funcione de forma distinta.

### Async

También conocido como carga asíncrona, hace que el elemento de JavaScript se descargue en paralelo del análisis de HTML, y una vez se haya descargado el Script por completo, se parará la descarga como con la utilización de un Script tradicional, y cuando termine la ejecución se continua la descarga de HTML.

``

Hay que tener un cuidado especial en la utilización del ASYNC, pues el tiempo que tarda en descargarse puede variar entre un usuario y otro, por lo que el script con el atributo async ejecutará en un lugar distinto del DOM en diferentes usuarios. Por lo que hay que tener en cuenta que este Script no tenga que ejecutarse previa o posteriormente a un elemento situado después de este script en el HTML original, ya que podría causar fallos. Así que solo debería utilizarse si no tiene dependencias con otros Scripts.

### Defer

Sería la mayor definición de la descarga diferida. El atributo defer consigue descargar el archivo de JavaScript de forma paralela al igual que lo hace defer pero siempre se ejecutará al final de la descarga y ejecución del HTML, por lo que generaría un [efecto bastante similar a un preload](https://carlossanchezdonate.com/articulo/precarga-de-recursos/#preload) y una ejecución del Script al final de toda la página.

Si utilizamos el atributo defer, tenemos que tener en cuenta que el Script no debe requerir la ejecución antes de ningún elemento concreto.

``

Ejemplo gráfico de cómo funcionaría cada una de estas descargas:

![](https://carlossanchezdonate.com/wp-content/uploads/defer-y-async.png)
Imagen de [cybmeta.com](https://cybmeta.com/diferencia-async-y-defer)

### Carga pospuesta por tiempo

La [carga pospuesta](https://carlossanchezdonate.com/articulo/delay-en-javascript/) consistiría en programar con el propio JavaScript que no suceda algo hasta que no pase determinado tiempo.

Esto es funcional por ejemplo para los Scripts de analíticas. Se puede perder efectividad a nivel de analizar el rebote, pero si no se utiliza esta herramienta analítica para analizar el rebote pero si otras estadísticas, es bastante funcional. Por ejemplo para Clarity, Hotjar o Metrika si lo que se quiere analizar son los mapas de calor y las grabaciones de los usuarios.

Ejemplo:

`setTimeout(function(){

(function(c,l,a,r,i,t,y){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};

t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;

y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);

})(window, document, "clarity", "script", "xxxxxxxxxxx");

}, 1000); // Selecciona el tiempo sin alterar negativamente a tus estadísticas.`



                ¿No lo estás entendiendo?
                Si quieres aprender a aplicar todo esto y mucho más, accede a mi formación:
                [¡Aprende SEO de verdad!](/master-seo-tecnico/)



Lazy Loading o carga perezosa

El Lazy loading consiste en hacer que los elementos que el usuario no está viendo no sean descargados hasta que no llegue hasta la parte donde necesita dichos elementos, o hasta que la web cargue por completo (opcional).

![](https://carlossanchezdonate.com/wp-content/uploads/below-above-thefold.jpg)

### Lazy Loading nativo

Debido a la utilización de esta práctica, con HTML5 hubo un gran avance y se incluyó un atributo que hace directamente este efecto. El atributo es loading y el valor para que se active la carga perezosa sería lazy.

Este atributo se puede utilizar en las etiquetas IMG e [Iframe](/articulo/optimizacion-de-iframes-en-el-seo/).

`![](imagen.jpg)

`

> Aunque no todos los navegadores aceptan este atributo, especialmente en la etiqueta iframe, no tiene impacto negativo más allá de que no hace el lazy loading en los navegadores donde no es interpretado.

### Lazy Loading por medio de JS

El lazy loading por medio de JavaScript hace la misma función, y era la opción más popular antes de la existencia de la opción nativa. No obstante, sigue siendo una opción bastante viable para "elementos no normativos" que requieran de una carga perezosa.

#### Lazy loading en imágenes de background

Lo mejor es ver un caso práctico donde es útil y necesaria esta práctica a día de hoy.

A menudo nos podemos encontrar con elementos como imágenes que igualmente están haciendo un impacto en la descarga, pero estas están siendo cargadas mediante un background de CSS. Para este caso no nos sirve la función nativa, pues no es la imagen que se carga a través de un src en una etiqueta img.

Entonces podríamos hacer que ese div tenga un atributo "data-src" por ejemplo, que sea donde se añada la URL de la imagen. Con esto conseguimos la URL de la imagen que queremos dispones (si es que son imágenes dinámicas que dependen de llamadas a bases de datos, si no, resulta mucho más simple).

Entonces podríamos tener un div así:

`