--- title: "Qué es el lazy loading y cómo implementarlo en WordPress" description: "La velocidad de carga de una página web o de un e-commerce es un factor muy importante para ofrecer la mejor experiencia de usuario y conseguir así incrementar el número de conversiones (suscripciones..." url: https://wpdirecto.com/que-es-el-lazy-loading-y-como-implementarlo-en-wordpress/ date: 2021-12-15 modified: 2021-12-15 author: "David Carrero Fernández-Baillo" image: https://wpdirecto.com/wp-content/uploads/2021/12/lazy-loading-web-internet.jpg categories: ["Temas y diseño"] type: post lang: es --- # Qué es el lazy loading y cómo implementarlo en WordPress La velocidad de carga de una página web o de un *e-commerce* es un factor muy importante para ofrecer la mejor **experiencia de usuario** y conseguir así incrementar el número de conversiones (suscripciones o ventas). Optimizar una web para acelerar su tiempo de carga es uno de los principales trabajos en cuanto al SEO que deben realizarse, aunque existen técnicas como e*l ****lazy loading*** que permiten ofrecer una mejor experiencia a los visitantes. A continuación, hablaremos sobre el *lazy loading,* qué es, cómo se puede implementar en una web WordPress y por qué es una técnica muy interesante. ## **Qué es el *****lazy loading*** El *lazy loading* o carga diferida es una **técnica que se implementa en un sitio web para diferir la carga de sus objetos al momento en el que aparecen en el área visible** para el usuario. Con este método se consigue un acceso más rápido a una web debido a que muchos objetos permanecen en espera sin ser cargados, hasta que el usuario se mueva por la web y aparezcan en la zona visible de la misma. Una forma de entender este tipo de carga “*retardada*” se puede ver de forma sencilla con las imágenes, que se mostrarían solo cuando el usuario llega a la zona donde se encuentran, no cargándose en memoria hasta ese momento, por lo que la velocidad web sería superior cuando el usuario accede a la web. ### **Cómo funciona el *****lazy loading*** El funcionamiento de esta técnica es sencilla: una vez implementada en una web, cuando el usuario accede a ella, su navegador **crea la web DOM sin descargar imágenes y otros elementos**, y sin descargar los vídeos. Luego, mediante un **script de JavaScript se identifican los distintos elementos que se deben precargar** para mostrarlos al usuario, dejando pendiente aquellos que solo lo harán cuando el visitante se desplace a lo largo de la web. ## **Cómo implementar el *****lazy load***** desde WordPress** En WordPress es muy sencillo implementar esta técnica de carga diferida gracias al uso de *plugins,* existiendo diversos complementos especialmente diseñados para implementar este método. Veamos dos *plugins* WordPress para *lazy load:* - **A3 Lazy Load**. Es el *plugin* ideal para todos los que no tengan conocimientos de CSS, JavaScript y HTML, ya que permite configurar la carga diferida sin tener que tocar código. Además, es un *plugin* orientado principalmente a implementar el *lazy load* para dispositivos móviles, por lo que se adapta perfectamente a las necesidades actuales, donde estos dispositivos son los más utilizados por los usuarios para navegar por internet y realizar compras *online.* - **Lazyload by WP Rocket**. El *lazy load* de la prestigiosa empresa de *plugins* WP Rocket es especialmente recomendado para webs que contengan un gran número de imágenes, como puede ser un *e-commerce.* Funciona muy bien a la hora de evitar que se carguen las imágenes que no están dentro del campo visual del usuario, consiguiendo que se acelere de forma considerable su velocidad web. Es un complemento de *lazy load images* muy popular que cuenta con gran cantidad de instalaciones activas. ## **Ventajas del *****lazy loading*** Utilizar CSS para *lazy load* junto a JavaScript permite acelerar de forma significativa el tiempo de carga de una web, beneficiando a los sitios web de varias maneras: ### **Acelera la velocidad web** La principal característica de esta técnica es que disminuye el tiempo de carga de una web. Al cargarse solo los elementos que aparecen a la vista del usuario, permaneciendo el resto a la espera de ser cargados, **la velocidad del sitio se ve incrementada mostrando el contenido de forma inmediata **al usuario.  Una alta velocidad web consigue: - Reducir la tasa de rebote. - Incrementar el tiempo de permanencia. - Aumentar las conversiones o ventas. - Ayudará a conseguir mejores posiciones en las páginas de resultados de Google y otros motores de búsqueda. ### **Mejora la experiencia de usuario** Los usuarios que acceden a una web con *lazy loading* podrán ver el contenido y acceder a sus funcionalidades de forma mucho más rápida. Esta mejora del rendimiento **les permite disfrutar es una buena experiencia navegando por la web** y utilizando sus distintas funcionalidades. ### **Libera al servidor web de mucha carga** El servidor web es otro de los beneficiados de esta técnica, ya que **tendrá menos trabajo al evitar cargar muchos elementos que probablemente no son necesarios**, al usuario no acceder a ellos. Por ejemplo, el servidor no tendrá que procesar y enviar las imágenes de la parte inferior de la web, ya que la mayoría de los usuarios no accederán a esa zona. El *loading lazy* es un método muy interesante para que los usuarios de tu página web, blog o tienda *online* puedan acceder de forma más rápida al sitio y disfruten de una gran experiencia de usuario. Implementar esta técnica en WordPress y WooCommerce es muy sencillo gracias a la existencia de diferentes *plugins* específicos que facilitan su configuración.