Cómo agregar carga perezosa a WordPress

Hay muchas formas de mejorar el rendimiento de su sitio de WordPress. Las imágenes y otros archivos multimedia son algunos de los mayores culpables detrás de los largos tiempos de carga. Esto significa que la implementación de cualquier método de optimización de imágenes puede tener un impacto significativo en el rendimiento del sitio, y la carga perezosa no es una excepción. En este artículo, hablaremos sobre cómo funciona la carga perezosa y cómo puede beneficiarse su sitio. Luego le mostraremos algunas de las formas más populares de agregar carga retrasada en WordPress para varios tipos de artículos. Finalmente, hablaremos sobre algunos de los problemas técnicos más comunes que este entorno puede causar.
¡Vamos a eso! Suscríbase a nuestro canal de YouTube ¿Qué es la carga perezosa? Por lo general, cuando visita un sitio web, todos sus componentes intentan cargarse simultáneamente. Su navegador mostrará cada medio, texto, enlace y otro elemento de la página. Si la página tiene muchos elementos de los medios, como las imágenes, pueden ralentizar lentamente el tiempo de carga. Hay muchas maneras de reducir el impacto que tienen las imágenes en los tiempos de carga de la página. Puede optimizar las imágenes, activar el almacenamiento en caché en el navegador, puede usar una red de entrega de contenido (CDN) y puede optar por tipos de archivos más pequeños. Idealmente, hará esfuerzos adicionales e implementará tantas optimizaciones como sea posible, porque no hay un sitio web demasiado rápido.
La carga perezosa no reduce el tamaño de los archivos de imagen y no cambia el tiempo requerido para cargar para cada usuario. En su lugar, esta configuración puede posponer la carga de cada imagen hasta que la ventana de vista del navegador llegue a la sección de la página con ese archivo: en la práctica, la carga pospuesta debe tener un impacto mínimo en cómo los usuarios interactúan con su sitio, si ya tiene un sitio receptivo . La mayoría de los visitantes no deben notar imágenes que aparezcan mientras ejecutan sus páginas. Al mismo tiempo, puede beneficiarse de tiempos de carga iniciales más rápidos, porque los usuarios no tendrán que solicitar y cargar cada imagen simultáneamente.

¿Cuáles son los beneficios de la carga perezosa en WordPress? La carga retrasada puede ayudar al tiempo de carga inicial. Esto es esencial si considera que el 40% de los usuarios dejarán una página web si tarda más de tres segundos en cargarse. Por lo tanto, esta configuración puede atraer a los visitantes a permanecer en su sitio y explorar su contenido. Además, la carga retrasada puede reducir la solicitud de memoria y almacenamiento. Como tal, su uso puede permitirle optar por un plan de alojamiento de sitios web más accesible. Es importante tener en cuenta que comenzando con WordPress 5.5, el sistema de administración de contenido (CMS) perezoso las imágenes de forma predeterminada. Sin embargo, hay algunas disputas sobre si el enfoque predeterminado puede dañar los puntajes centrales de la web.
Por defecto, la carga retrasada mejora los tiempos de carga en papel. Sin embargo, también puede afectar la pintura de contenido más alta (LCP). LCP mide cuánto tiempo lleva hasta que se cargue la imagen o el bloque de texto más grande en cualquier página: WordPress usa el atributo HTML de carga = perezoso para su sitio web en general, esta es la forma más fácil de implementar la carga pospuesta. Sin embargo, no todos los navegadores aceptan este atributo. Si desea deshabilitar la carga pospuesta para ciertas imágenes, deberá cambiar manualmente ese atributo usando HTML. La alternativa es el uso de un complemento de WordPress que implementa la carga retrasada con un enfoque diferente (que le brinda más control).
¿Pueden otros artículos tener carga perezosa? Desde un punto de vista técnico, puede posponer la carga para casi cualquier elemento en un sitio web. La carga retrasada funciona increíblemente bien con las imágenes y también es una característica asesina para los materiales de video. Además de los materiales de los medios, también puede posponer la carga del código, como JavaScript y CSS. De hecho, le recomendamos que posponga los scripts que pueden bloquear el juego en su sitio web para mejorar sus primeros puntajes de pintura (FCP). Al ir más allá, puede elegir y perezoso los elementos de texto. Sin embargo, esta no es una buena práctica en términos de uso. Además, incluso si muestra el texto de un libro completo en una página, no debería tener un impacto significativo en los tiempos de carga.

La carga retrasada es lo mejor para los materiales de medios pesados ​​que tienen un impacto significativo en los tiempos de carga. Sin embargo, el núcleo de WordPress solo acepta una carga perezosa para imágenes. Si desea expandir esta práctica a otros elementos, deberá buscar una implementación alternativa. Aquí intervienen los complementos. Cómo agregar una carga perezosa para imágenes y videos a WordPress Como se mencionó anteriormente, WordPress agrega una carga perezosa para todas las imágenes. Sin embargo, tendrá poco control sobre las imágenes para cargar perezosamente. Si desea optar por un enfoque diferente, le recomendamos usar el complemento de carga Lazy A3. Además, también acepta la carga retrasada de videos en su sitio web:
Este complemento también agrega soporte para cargas perezosas y videos externos. Es algo que la implementación básica de WordPress no. Instale y active el complemento desde el tablero de WordPress. Ahora podrá personalizar la configuración del instrumento. Paso 2: ajuste la configuración de la imagen del complemento y luego vaya a Configuración> A3 Carga perezosa. Buscando en la activación de carga perezosa, notará que el complemento se activa de forma predeterminada después de la instalación.
Abra la pestaña de imágenes LAZY LAD. Puede (1) elegir qué imágenes posponer en su sitio y (2) activar una reserva para bloques JavaScript. También puede (3) establecer una clase CSS para las imágenes que no desea posponer:
La configuración predeterminada tiene cada opción activada, que recomendamos mantener. Continúe y configure una clase CSS que le permita omitir la carga pospuesta para ciertas imágenes. Paso 3: ajuste la configuración de video para el complemento y luego, pase a la pestaña de videos de carga perezosa y iframes. Al igual que con las imágenes, el A3 Lazy Load le permite elegir la carga retrasada para ciertos clips. La placa acepta videos en (1) contenido y widgets y ofrece (2) una función de reserva para bloques JavaScript:

Configuración de video (3) le permite especificar una clase CSS que excluya ciertos videos de la carga pospuesta. Para una configuración más fácil, puede usar la misma clase que eligió en la sección de imágenes. Paso 4: Desactive la carga retrasada (opcional) Finalmente, si desea desactivar la carga pospuesta para ciertos tipos de páginas, puede hacerlo en la pestaña Excluir después de la URL y los tipos de páginas. Aquí puede ingresar ciertas páginas o tipos de contenido que no deben usar la carga perezosa:
Guarde los cambios en la configuración del complemento y estará listo. Si desea deshabilitar la carga pospuesta para un elemento en particular, abra el editor y seleccione la imagen o el bloque de video que desea configurar. Abra el menú Configuración para bloques y explore la pestaña avanzada para encontrar el campo CSS adicional:


Puede usar ese campo para agregar la clase de exclusión con la carga perezosa que ha configurado al configurar el complemento. Si hace esto, esa imagen se cobrará instantáneamente cuando un usuario visita su sitio. Los problemas de carga perezosos restantes, aunque la carga pospuesta está a la mano y una característica básica en WordPress, también puede conducir a varios tipos de errores en su sitio. Esta sección discutirá cuáles son estos problemas y cómo solucionarlos. Problemas con las imágenes sobre el pliegue en general, le recomendamos que no perezue las imágenes sobre el pliegue. Cuando decimos “por encima del pliegue”, nos referimos a la primera ventana de visualización que sus visitantes ven al cargar una página desde su sitio. Posponiendo las imágenes sobre el pliegue puede afectar sus puntajes FCP. También puede afectar las primeras impresiones de los usuarios cuando visitan su sitio web. La solución simple es deshabilitar la carga pospuesta para las imágenes en los encabezados de su página y otros elementos superiores. Si tomamos esta página, por ejemplo, le recomendamos que deshabilite la carga perezosa para (1) logotipo y (2) fondo del encabezado:
WordPress le pide que agregue código a su sitio para deshabilitar su implementación nativa de carga perezosa. La forma más fácil de desactivar la carga pospuesta para ciertos medios es usar un complemento como A3 Lazy Load, como exploré en la última sección. Cambiar la apariencia debido a la carga pospuesta de la apariencia ocurre cuando carga una página y los elementos se mueven a medida que se vuelven visibles. El cambio de diseño acumulativo (CLS) es un núcleo web vital que mide el cambio de apariencia. En algunos casos, la implementación débil de la carga perezosa puede afectar los puntajes de CLS de su sitio web. Los elementos en una página no se cargan de una vez. En cambio, paso uno por uno, incluso si el proceso parece casi instantáneamente en un navegador. Cuando tiene archivos de imagen que se cargan de acuerdo con otros elementos, pueden mover esos activos. La solución a este problema es evitar usar imágenes de tamaño completo en WordPress. Al cargar imágenes en WordPress, el CMS las cambiará automáticamente a resoluciones estandarizadas:

El uso de resoluciones estándar reduce la probabilidad de cambios drásticos de apariencia, incluso con la carga pospuesta. También puede especificar el tamaño de la imagen para cada archivo manualmente. Sin embargo, este es un proceso que requiere tiempo. En resumen, le recomendamos que lo haga solo para las imágenes que desea mostrar en dimensiones únicas. Los problemas con los complementos de carga pospuestos y el almacenamiento en caché están acostumbrados a los complementos de caché para entrar en conflicto con las herramientas de carga perezosa. Algunos complementos de almacenamiento en caché, como WP Rocket, incluyen la funcionalidad de carga incorporada. El uso de esta característica con un complemento de carga pospuesto, como A3 Lazy Load, a menudo conducirá a conflictos. Le recomendamos que se quede con una sola familia de complementos para evitar problemas con imágenes que no aparecen debido a las herramientas en conflicto. Si tiene complementos perezosos y de almacenamiento en caché y comienza a cumplir con los errores, le recomendamos que apague la primera opción: