Hay muchas maneras de mejorar el rendimiento de su sitio de WordPress. Las imágenes y otros archivos multimedia son algunos de los mayores culpables de los tiempos de carga lentos. Esto significa que la implementación de cualquier método de optimización de imágenes puede afectar significativamente el rendimiento de su sitio web, y la carga diferida no es una excepción.
En este artículo, hablaremos sobre cómo funciona la carga diferida y cómo puede beneficiar a su sitio web. A continuación, le mostramos algunas de las formas más populares de agregar carga diferida en WordPress para muchos tipos de elementos. Finalmente, cubriremos algunos de los problemas técnicos más comunes que puede causar esta configuración.
¡Sigamos adelante!
Suscríbete a nuestro canal de YouTube
¿Qué es la carga diferida?
Por lo general, cuando visita un sitio web, todos sus componentes intentan cargarse simultáneamente. Su navegador mostrará todos los recursos multimedia, textos, enlaces y otros elementos de la página. Si una página contiene muchos recursos multimedia, como imágenes, pueden ralentizar significativamente los tiempos de carga.
Ellos existen gráfico maneras de reducir el impacto de las imágenes en los tiempos de carga de la página. Puede optimizar imágenes, habilitar el almacenamiento en caché del navegador, usar una red de entrega de contenido (CDN) y elegir tipos de archivos más pequeños. Es mejor si va un paso más allá e implementa tantas de estas optimizaciones como sea posible porque no existe un sitio web que sea demasiado rápido.
La carga diferida no reduce el tamaño de los archivos de imagen ni cambia el tiempo de carga para cada usuario. Sin embargo, esta configuración puede: aplazar cargando cada imagen hasta que la ventana del navegador llegue a la sección de la página que contiene ese archivo:
En la práctica, la carga diferida debería tener un impacto mínimo en la interacción de los usuarios con su sitio web si ya tiene un sitio web receptivo. La mayoría de los visitantes no deberían notar las imágenes mientras se desplazan por las páginas. Al mismo tiempo, puede aprovechar una carga inicial más rápida ya que los usuarios no tendrán que solicitar y cargar cada imagen simultáneamente.
¿Cuáles son los beneficios de la carga diferida en WordPress?
La carga retrasada puede ayudar con la carga inicial. Esto es esencial si crees que 40 por ciento de los usuarios saldrá de la página web si tarda más de tres segundos en cargarse. Por lo tanto, esta configuración puede alentar a los visitantes a permanecer en su sitio y ver su contenido.
Además, la carga retrasada puede reducir la carga en la memoria y el almacenamiento. Por lo tanto, usarlo puede permitirle elegir un plan de alojamiento de sitios web más asequible.
Cabe señalar que a partir de WordPress 5.5, el sistema de gestión de contenidos (CMS) Lazy carga imágenes por defecto. Sin embargo, existe cierto desacuerdo sobre si el enfoque predeterminado podría: dañar los resultados de Core Web Vitals.
De forma predeterminada, la carga retrasada reduce el tiempo que se tarda en cargar el papel. Sin embargo, también puede dañar su Top Content Score (LCP).
El LCP mide cuánto tiempo lleva cargar el bloque más grande de imagen o texto en cualquier página:
Usos de WordPress HTML cargando = perezoso atributo para las imágenes en su sitio. En general, esta es la forma más fácil de implementar el cobro diferido. Sin embargo, no todos los navegadores admiten este atributo.
Si desea deshabilitar la carga diferida para imágenes específicas, debe modificar manualmente este atributo a través de HTML. Una alternativa es usar un complemento de WordPress que implemente la carga diferida con un enfoque diferente (dándole más control).
¿Pueden otros elementos tener carga diferida?
Técnicamente, puede aplazar un cargo por casi cualquier artículo en el sitio web. La carga diferida funciona sorprendentemente bien para las imágenes y también es una excelente función de activos de video.
Además de los activos multimedia, también puede diferir la carga de código como JavaScript y CSS. De hecho, recomendamos retrasar los scripts que pueden estar bloqueando el renderizado en su sitio para mejorar los resultados de First Contentful Paint (FCP).
Continuando, también puede elegir activos de texto de carga diferida. Sin embargo, esta no es una buena práctica desde el punto de vista de la usabilidad. Además, incluso si muestra el texto de todo el libro en la página, no debería afectar significativamente el tiempo de carga.
La carga diferida es mejor para recursos multimedia pesados que afectan significativamente los tiempos de carga. Sin embargo, el núcleo de WordPress solo admite la carga diferida de imágenes. Si desea extender esta práctica a otros elementos, debe buscar una implementación alternativa. Aquí es donde entran los complementos.
Cómo agregar carga diferida de imágenes y videos en WordPress
Como mencionamos anteriormente, WordPress agrega la carga diferida para todas las imágenes de forma predeterminada. Sin embargo, tendrás poco control sobre qué fotos tardan en cargarse. Si desea elegir un enfoque diferente, le recomendamos utilizar a3 Carga perezosa enchufar.
Paso 1: Instale y active el complemento a3 Lazy Load
El complemento A3 le permite excluir ciertas imágenes y páginas de la carga diferida. Además, también admite la carga retrasada de videos en su sitio web:
Este complemento también agrega soporte para la carga diferida de imágenes y videos externos. Esto es algo que la implementación principal de WordPress no hace.
Instale y active el complemento desde su panel de WordPress. Ahora podrá ajustar la configuración de la herramienta.
Paso 2: personaliza la configuración de la imagen del complemento
Luego ve a Ajustes > a3 Carga diferida. mirando debajo Activación de carga diferidanotará que el complemento está habilitado de forma predeterminada después de la instalación.
Para abrirlo Imágenes de carga diferida Correa. Puede (1) elegir qué imágenes retrasar en su sitio y (2) habilitar una opción alternativa para los navegadores que bloquean JavaScript. También puede (3) establecer una clase CSS para imágenes que no desea posponer la carga para:
La configuración predeterminada tiene todas las opciones activadas y le recomendamos que las mantenga. Continúe y configure una clase CSS que le permitirá omitir la carga diferida para imágenes específicas.
Paso 3: Ajuste la configuración de video del complemento
Luego ve a Lazy Load Vídeos e iframes Correa. Al igual que con las imágenes, a3 Lazy Load le permite elegir Lazy Load para clips específicos.
El complemento admite videos en (1) contenido y widgets, y ofrece (2) una función alternativa para navegadores que bloquean JavaScript:
La configuración de video (3) le permite especificar una clase de CSS que excluye ciertos videos de la carga diferida. Para una configuración más sencilla, lo hace Energía use la misma clase que seleccionó en la sección de imágenes.
Paso 4: deshabilite la carga diferida (opcional)
Finalmente, si desea deshabilitar la carga diferida para ciertos tipos de página, puede hacerlo en Excluir por URL y tipos de página Correa. Aquí puede ingresar páginas específicas o tipos de contenido que no deberían usar la carga diferida:
Guarde los cambios en la configuración del complemento y listo. Si desea deshabilitar la carga diferida para un elemento específico, abra el editor y seleccione el bloque de imagen o video que desea configurar.
Abra el menú de configuración del bloque y vaya a Avanzado marcador para encontrar Clases adicionales de CSS campo:
Puede usar este campo para agregar la clase de exclusión de carga diferida que configuró al configurar el complemento. Si hace esto, la imagen se cargará inmediatamente cuando el usuario visite su sitio.
Solucionar problemas de carga diferida
Si bien la carga diferida es una característica útil y básica de WordPress, también puede generar varios tipos de errores en su sitio web. En esta sección, discutiremos cuáles son estos problemas y cómo solucionarlos.
Problemas con las imágenes en la mitad superior de la página
En general, no recomendamos la carga diferida de imágenes en la parte de la página visible en la pantalla. Cuando decimos «sobre marcador» nos referimos a la primera área visible que ven los visitantes cuando cargan una página de su sitio.
Posponer imágenes por encima de la parte visible en la pantalla puede afectar sus puntajes de FCP. También puede afectar las primeras impresiones de los visitantes de su sitio web.
Una solución simple es deshabilitar la carga diferida de imágenes en los encabezados de página y otros elementos críticos. Si tomamos esta página como ejemplo, recomendamos deshabilitar la carga diferida para (1) logotipo y (2) fondo de encabezado:
WordPress requiere añadir código a su sitio web para deshabilitar la implementación de carga diferida nativa. La forma más fácil de deshabilitar la carga diferida para activos de medios específicos es usar un complemento como a3 Lazy Load como discutimos en la última sección.
Diseño modificado debido a la carga diferida
El cambio de diseño ocurre cuando carga la página y los elementos se mueven a medida que se hacen visibles. El cambio de diseño acumulativo (CLS) es una herramienta básica en línea que mide el desplazamiento del diseño. En algunos casos, una mala implementación de carga diferida puede afectar los resultados de CLS de su sitio web.
Los elementos de la página no se cargan simultáneamente. En cambio, pasan uno por uno incluso si el proceso se ve casi instantáneamente en el navegador. Si tiene archivos de imagen que se cargan después de otros elementos, pueden llevar esos activos.
La solución a este problema es evitar el uso de imágenes de tamaño completo en WordPress. Cuando subes fotos a WordPress, el CMS las redimensionará automáticamente a resoluciones estándar:
El uso de resoluciones estándar reduce la probabilidad de cambios drásticos en el diseño, incluso con carga diferida. También puede especificar manualmente las dimensiones de la imagen para cada archivo. Sin embargo, este es un proceso que requiere mucho tiempo. En resumen, le recomendamos que solo haga esto para las imágenes que desea mostrar en dimensiones únicas.
Problemas con la carga diferida y el almacenamiento en caché de complementos
A menudo, el almacenamiento en caché de complementos entra en conflicto con las herramientas de carga diferida. Algunos complementos de almacenamiento en caché, como WP Rocket, vienen con una función de carga diferida incorporada. El uso de esta función con un complemento de carga diferida como A3 Lazy Load a menudo genera conflictos.
Le recomendamos que se ciña a una sola familia de enchufes para evitar problemas de visualización de imágenes debido a herramientas conflictivas. Si tiene habilitados los complementos de carga diferida y almacenamiento en búfer y comienza a recibir errores, le recomendamos que desactive primero la primera opción:
Después de deshabilitar el complemento de carga diferida, verifique si sus imágenes se cargan correctamente. Si ese es el caso, es probable que su herramienta de almacenamiento en caché tenga incorporada una función de carga diferida. Esto significa que no necesita configurar ningún software adicional para esta función.
Solicitud
Aunque la carga diferida es parte del Características principales de WordPress, hay maneras de mejorar su implementación. Puedes usar complementos como a3 Carga perezosa para tener más control sobre el retraso en su sitio web. Con la ayuda del complemento apropiado, también puede configurar y excluir la carga diferida de recursos externos.
Dependiendo de cómo implemente la carga diferida, la práctica debería reducir drásticamente el tiempo de carga de la página. Cuanto más contenido multimedia tenga su sitio, mejores resultados verá, todo ello sin afectar negativamente a la experiencia del usuario.
¿Tiene preguntas sobre el uso de la carga diferida en WordPress? ¡Hablemos de ellos en la sección de comentarios a continuación!
Imagen destacada a través de vectorplus / shutterstock.com
