Repare las imágenes de movimiento lento fuera de la pantalla en WordPress con carga diferida

La mayoría de los sitios de contenido están repletos de toneladas de contenido multimedia, ya sean gráficos, imágenes o videos. Aunque este tipo de contenido ofrece un gran atractivo estético y una forma única de mensajería, la desventaja es que ocupan una parte importante de sus páginas web. Esto, a su vez, significa que los usuarios finales tienen que descargar y mostrar varios recursos antes de poder acceder a ellos. Desafortunadamente, esto incluye archivos que inicialmente no son visibles en la pantalla. Aquí es donde entra en juego la carga diferida, cargando medios solo cuando sea necesario. En este artículo, veremos cómo ajustar las recomendaciones de la herramienta Google Speeds Insights, como el uso de técnicas de carga diferida para ralentizar las imágenes fuera de pantalla en WordPress.

¿Qué es la técnica de carga perezosa?

Cuando un usuario lo abre, hay dos secciones en su página web:

• Arriba del pliegue o ATF: esta es el área visible en la pantalla que los robots como Googlebot le muestran en la captura de pantalla de Google PageSpeed ​​​​Insights. Tenga en cuenta que la parte superior del área doblada será diferente para dispositivos móviles y computadoras de escritorio. Es por eso que obtendrá diferentes resultados de velocidad en computadoras móviles y de escritorio.
• Debajo de la parte visible de la pantalla: esta es el área de su página que no está visible en la carga inicial.

Toda la optimización de WordPress está relacionada con la optimización de los archivos que se cargan en el área colapsada mencionada anteriormente. Ya sea que se trate de eliminar los recursos de procesamiento de bloqueo, eliminar CSS/JS no utilizados o reducir el tiempo total de bloqueo, se trata de optimizar los recursos necesarios para cargar contenido rápidamente desde arriba. La carga diferida es un proceso de optimización que inicialmente carga archivos multimedia que solo son visibles en la parte superior de la página. Pero eso no termina ahí, a menos que se utilicen otras tecnologías. La carga diferida también ralentiza todos los archivos multimedia de la página, incluidos los que se encuentran debajo del área colapsada, y los muestra solo cuando el usuario se desplaza a esa posición en la página web. Esto mejorará significativamente la velocidad y el tiempo de carga de su sitio web, lo que resultará en una mejor experiencia de usuario.

La carga diferida es una función de carga de contenido que garantiza que su sitio web cargue contenido multimedia solo en la parte de la página a la que se desplaza hacia abajo, lo que mejora el rendimiento del sitio web y el tiempo de carga de la página.

Comprobar errores en la herramienta Google PageSpeed ​​Insights

Google Speeds Insights (PSI) es una de las herramientas más utilizadas por los webmasters para medir la velocidad de sus sitios web. Como la experiencia y la velocidad de la página son parte de las señales de clasificación, es imperativo que todos los propietarios de sitios web midan la velocidad de su sitio web y tomen las medidas necesarias si es necesario. El siguiente es un ejemplo de un mensaje de "ralentización fuera de la pantalla" que se muestra en la herramienta PSI de Google.

Si filtra los resultados utilizando FCP, TBT, LCP y CLS, se sorprenderá al ver que las imágenes fuera de pantalla retrasadas no pertenecen a ninguno de estos grupos. Sin embargo, solucionar el problema mejorará significativamente su puntaje de velocidad, aunque verá un mensaje que indica que la probabilidad no afectará directamente su puntaje.

¿Cuándo necesitas una carga perezosa?

Muchos usuarios de WordPress simplemente usan complementos para habilitar la carga diferida para todos sus archivos multimedia. Como se mencionó anteriormente, en lugar de cargar el archivo multimedia deseado sobre la imagen plegada durante la carga inicial, simplemente cargue de forma perezosa debajo de la imagen plegada. Aquí hay algunos ejemplos que requieren carga diferida:

• La imagen de Gravatar se muestra en los campos de comentarios y biografía del autor.
• Publicaciones relacionadas o cualquier otra miniatura cargada desde la pantalla.
• Contenido iframe, galería e imágenes deslizantes disponibles debajo de la parte visible de la pantalla.
• Las infografías grandes y las imágenes de vista previa de videos de YouTube no son visibles para los usuarios cuando se cargan por primera vez.

Como puede ver, no solo los archivos de imagen deben cargarse con pereza, sino que el contenido de iframe y video también debe cargarse con pereza. Se argumenta que algunos casos deben excluirse de la carga diferida para evitar otro problema en la herramienta PSI de Google.

• La imagen del logotipo en una computadora de escritorio y un dispositivo móvil se carga sobre el área doblada.
• Pequeños iconos e imágenes SVG utilizados en los menús de navegación de la cabecera.
• Todas las demás imágenes más pequeñas cargadas en la sección de título de su página web.

Sin embargo, hay una excepción a esto lógica - el mayor contenido de la imagen pintada. Digamos que tiene una imagen de fondo muy grande en la sección de encabezado, digamos 1 MB. Debe retrasar la carga de esta imagen de fondo aunque esté en el área visible para que no vea la advertencia "la imagen de descarga más grande no se carga con pereza" en la herramienta PSI de Google.

notas: A veces, es posible que desee excluir intencionalmente imágenes importantes del pliegue inferior que desea que los usuarios vean sin esperar una carga diferida. Además, el mayor problema proviene de fuentes de terceros debido a las imágenes retrasadas fuera de la pantalla. Habiendo explicado la carga diferida de archivos multimedia para su propio sitio web, lo explicaremos al final de este artículo.

Carga diferida en WordPress

Entonces, ahora que sabemos qué es la carga diferida y por qué es necesaria, es hora de aprender cómo implementarla en su sitio de WordPress. Hay varias formas de hacer esto, y en este tutorial veremos algunos complementos diferentes para ayudarlo a lograr sus objetivos. Tenga en cuenta que algunos complementos tienen la opción de desactivar la carga diferida y muchos complementos no. Como se mencionó anteriormente, si hay un logotipo de texto sobre el área doblada y no hay otras imágenes, recomendamos usar un complemento simple sin opciones de exclusión. De lo contrario, debe intentar proporcionar un complemento que excluya la lista de imágenes de la carga diferida.

1. Complemento de carga diferida para WP Rocket

Este complemento es el mejor con más de 100 000 instalaciones activas hasta el momento. Fue desarrollado por WP Rocket y es fácilmente el mejor complemento para el rendimiento web de WordPress. Con este complemento, no solo puede optimizar las imágenes, sino también reemplazar los marcos de YouTube incrustados con miniaturas de vista previa. Esto reducirá aún más el peso de la página y mejorará la velocidad de carga de la página en el proceso.

Dado que este es un complemento gratuito disponible en el repositorio de WordPress, puede instalarlo desde el panel de control de WordPress yendo a la sección "Complementos> Agregar nuevo". Simplemente escriba "arranque perezoso" en el cuadro de búsqueda para encontrar complementos desarrollados por WP Rocket.

Para instalar y activar el complemento, primero haga clic en el botón "Instalar ahora", luego en el botón "Activar". Vaya a Configuración> Carga diferida para acceder a la página de configuración del complemento. Haga clic en la casilla de verificación para aplicar la carga diferida a imágenes, marcos incrustados y videos, y reemplace los videos de YouTube con miniaturas.

Haga clic en el botón "Guardar cambios" en la esquina inferior izquierda de la página antes de salir. Eso es todo, el plugin hará el resto por ti. El complemento ahora solo mostrará imágenes, marcos incrustados y videos en la página cuando sea visible para el usuario final, lo que resultará en un uso de ancho de banda reducido y tiempos de carga más rápidos. Aunque el complemento Lazy Boot es fácil de usar con solo unos pocos clics, no ofrece excepciones. Es posible que desee el complemento WP Rocket premium completo, incluidas las funciones de almacenamiento en caché para mejorar la salud general de SEO de su sitio web. Si está utilizando WP Rocket, vaya a la pestaña Medios y habilite la carga diferida para imágenes, marcos incrustados y vistas previas de imágenes de YouTube.

Perfmatters es ideal si ya tiene un complemento de almacenamiento en caché y desea probar otro complemento para optimizar el rendimiento. También ofrece carga diferida, activación de imágenes, miniaturas de vista previa de YouTube, marcos incrustados y solo unos pocos clics. Puede habilitar estas opciones en la sección Opciones> Carga diferida del complemento.

2. Use el complemento Smush para la carga diferida

Este es otro complemento que puede hacer maravillas para sus necesidades de carga de contenido perezoso. El complemento Smush puede ser mejor conocido por sus funciones de compresión y optimización de imágenes, pero el complemento también ofrece funciones como la carga diferida. Con más de un millón de instalaciones, este complemento es uno de los mejores complementos centrados en SEO para WordPress. Primero, busque e instale el complemento desde el repositorio gratuito de WordPress.

Activar arranque perezoso con Smush

Después de activar el complemento, verá un asistente de configuración que lo guiará a través de todas las funciones. Puede habilitar el arranque diferido desde el asistente de configuración u omitir este por ahora paso.

Navegue hasta el panel de control del complemento Smush haciendo clic en el elemento de menú "Smush> Lazy Load" en el Panel de control de administración de WordPress.

Si no lo ha habilitado desde el asistente de configuración, puede activar la función de inicio diferido aquí y ahora puede realizar cambios personalizados en la configuración de inicio diferido en su sitio web. A diferencia del complemento Lazy Load de WP Rocket, puede elegir el tipo de medio y la salida de medios con el complemento Smush. La carga retrasada está habilitada de forma predeterminada para todos los tipos de medios (como .png, .jpeg, etc.) y todas las salidas de medios (como contenido, widgets, miniaturas y Gravatars). Si tiene alguna preferencia específica, desmarque las opciones que no desea aplicar Lazy Boot.

Sigue la parte genial; puede elegir cómo desea que se carguen las imágenes y el tipo de animación que se mostrará. Las diversas opciones proporcionadas por el plugin son:

• se desvanece: Esta función mostrará la imagen algún tiempo después de la carga.
• Hilandero: Se mostrará una animación de rotación donde la imagen se carga lentamente. Puede usar uno de los Gif preestablecidos para rotar o cargar uno propio, como el logotipo de su empresa.
• Sustituir: Como sugiere el nombre, también puede mostrar una imagen de lugar en lugar del contenido real mientras se carga lentamente. Como antes, puede utilizar una de las plantillas proporcionadas o cargar la suya propia.
• No todo el mundo: Aquí no se aplicará nada fantástico, la imagen se mostrará después de cargar.

Excepciones y otras configuraciones de Smush

Como se mencionó, debe cargar excepciones para excluir elementos específicos, y Smush ofrece muchas opciones que incluso los complementos de primera clase no ofrecen. Puede excluir opciones según el tipo de publicación, la página/URL de publicación y la clase/identificador de CSS.

• Esto es útil para deshabilitar todos los archivos o solo la primera página al deshabilitar estas opciones.
• Es posible que parte del contenido de la página, como las páginas de cartera de filtros, no funcione correctamente en la carga diferida. Simplemente puede ingresar la URL de la página y excluirla de la carga diferida.
• Finalmente, para elementos como su logotipo e imagen de encabezado, puede usar la clase o ID de CSS adecuada y optar por la carga diferida.

Además de las opciones de configuración anteriores, puede cambiar dónde se cargan los scripts, habilitar la compatibilidad para cargar su propio navegador y deshabilitar Noscript durante la carga diferida. Por lo general, puede usar una ubicación en el pie de página para las secuencias de comandos y deshabilitar las opciones nativas y sin secuencias de comandos.

Después de actualizar la configuración, haga clic en "Guardar cambios" en la esquina inferior derecha de la página para aplicar la configuración de arranque diferido que acaba de seleccionar.

notas: Los navegadores como Google Chrome proporcionan una característica natural para la carga diferida. Sin embargo, habilitar esta función en el complemento Smush no resolverá el problema de "pantalla lenta fuera de la pantalla" en Google PSI. También puede ver esta advertencia debajo de las opciones en la configuración del complemento.

3. Usa el Optimizador de SiteGround

Este complemento en nuestra lista es solo para usuarios de alojamiento de SiteGround. Como el complemento SiteGround Optimizer tiene más de 1 millón de usuarios activos, se lo presentaremos a los usuarios de SiteGround.

• SG Optimizer está disponible de forma predeterminada con todas las instalaciones de WordPress en SiteGround. Por lo tanto, este complemento estará preinstalado, no es necesario volver a instalarlo.
• Vaya al menú "SG Optimizer" y vaya a la sección "Medios".
• Desplácese hacia abajo hasta la sección de optimización de medios y active la opción Lazy Load Media.
• También puede excluir clases de CSS y tipos de medios en esta sección.

Desafortunadamente, la carga diferida en SiteGround Optimizer no funcionará cuando alojes archivos multimedia desde subdominios. Esto creará una violación de uso compartido de recursos de origen cruzado (CORS) y bloqueará los activos en el complemento, verá espacios en blanco en lugar de imágenes. Así que asegúrese de borrar su caché y verifique si sus imágenes funcionan después habilite el arranque diferido con el complemento SiteGround Optimizer.

4. Carga perezosa de Jetpack

Más de 5 millones de usuarios usan Jetpack para mejorar la seguridad, archivar y optimizar sus sitios de WordPress. Si está utilizando Jetpack, vaya a la sección Jetpack> Configuración y habilite la opción Carga diferida de imágenes en la sección Rendimiento.

5. Otros complementos de caché gratuitos

Casi todos los complementos de optimización y almacenamiento en caché ofrecen carga diferida, ya que es importante obtener una página de alta velocidad en Google PageSpeed ​​​​Insights. Aquí hay dos de los complementos de almacenamiento en caché gratuitos más populares para WordPress.

• Caché total W3 - Puede ir a la pestaña Lazy Loading en la guía de configuración para activar la opción Lazy Loading.

• Optimización automática - Vaya a la pestaña "Imágenes" y active la opción de arranque lento.

Pruebe si la carga diferida se está ejecutando en su sitio web

Hay dos formas de probar si la carga diferida funciona bien en su sitio web. La primera opción es probar su sitio en Google PSI y confirmar que "Imagen fuera de pantalla retrasada" aparece en la sección "Vista previa".

La siguiente opción es verificar el origen de la página. Puede encontrar scripts para la carga diferida desde el complemento que usa. También verifique que la imagen esté incluida en la clase CSS para carga diferida. El siguiente es un ejemplo del complemento WP Rocket, que muestra que la imagen contiene la clase CSS "rocket-lazy-load" y el parámetro "data-lazy-src".

Lazy loading de contenido de terceros

Verá problemas de carga diferida en Google PSI cuando use imágenes y videos incrustados de servicios de terceros. Por lo general, verá "carga diferida de activos de terceros con máscaras" en la sección de auditoría que pasa. Pero encontrará que las pruebas típicas de "cámara lenta fuera de la pantalla" fallan cuando utiliza incrustaciones de terceros, como videos de YouTube o anuncios publicitarios.

• Como se mencionó anteriormente, puede reemplazar el video de YouTube incrustado con una imagen de vista previa estática. A continuación, puede cargar esta imagen de forma perezosa para su revisión y resolver el problema con la herramienta PSI de Google.
• Desafortunadamente, en el caso de las imágenes de banner en el programa publicitario Google AdSense, etc., no se puede hacer mucho. Debido a que estos anuncios se cargan dinámicamente, cambian cada vez que carga una página y no hay una forma fija de evitar la advertencia de Google PSI. Sin embargo, hay algunos temas de WordPress que facilitan el uso de la carga diferida y la carga dinámica de anuncios. A continuación se muestra la página del tema del tema Minimalist Breek, donde puede ver la opción de carga diferida para los anuncios de Google AdSense. Como hizo en el texto, el tema le pide que elimine el clic del anuncio en la etiqueta de anuncio predeterminada y que haga clic en él dinámicamente cuando el usuario llegue a la ubicación de la página. No recomendamos usar este tipo de función, ya que afecta sus ganancias y es posible que no funcione correctamente (bajo ninguna circunstancia puede usar otra cosa que no sea AdSense)

ultimas palabras

La carga diferida de aplicaciones no es difícil ni complicada y al leer este artículo, puede hacerlo en poco tiempo. Asegúrese de elegir el complemento que mejor se adapte a su situación y funcione mejor para usted. Sin embargo, tenga en cuenta que la carga diferida requiere que se incluya un script en el complemento en el pie de página de la página. A veces, este script se puede bloquear y sus imágenes no se cargarán con SiteGround Optimizer, como se mencionó anteriormente. Por lo tanto, después de activar la carga diferida, pruebe exhaustivamente sus páginas en diferentes navegadores, especialmente las páginas que contienen una gran cantidad de JavaScript incorporado.