¿Has notado que tu página web carga algo más lenta de lo que te gustaría y quieres aprender a mejorar la velocidad de tu WordPress?
Seguro que ya has probado algunos trucos y plugins como Optimizador.io de Webempresa, que sirve para optimizar el tamaño de tus imágenes en WordPress y mejorar la velocidad de carga de tu web. Y si aún no es así, ¡te lo recomiendo!.
Sin embargo, puedes hilar un poco más fino y dar un paso más, para empezar a cargar ahora tus imágenes en la web solo si son necesarias, es decir, si son visibles en el navegador del usuario.
Utilizando Lazy Load se cargarán las imágenes de tu sitio solo cuando sean visibles para tus usuarios en la pantalla actual. Si hay imágenes que están ocultas por debajo de la última línea de scroll, únicamente se cargarán cuando haya desplazamiento vertical en pantalla. Esto te ayudará a mejorar la velocidad de carga de tu web.
Así que, toma nota, porque en este artículo te explico cómo optimizar las imágenes de WordPress de manera simple utilizando Lazy Load en WordPress.
Tabla de contenidos
¿Qué es Lazy Load?
Según Wikipedia, Lazy Load o carga diferida, es un patrón de diseño que se usa en informática que consiste en retrasar la carga o inicialización de un elemento hasta el mismo momento de su utilización.
Partiendo de esta definición, ¿qué es Lazy Load en WordPress? y ¿de qué manera afecta a la carga de contenidos?, te explico.
Esta funcionalidad de «carga diferida» de las imágenes está disponible de forma nativa desde WordPress 5.4, la cual vino a completar un vacío existente en el «núcleo» de este CMS que de manera importante necesitaba hacer que los contenidos gráficos de las páginas web creadas con WordPress pudiesen cargar más rápido, permitiendo el retraso de la carga de imágenes y su posterior «carga progresiva» a medida que se hace scroll vertical en una página del sitio web.
Según los comentarios de WordPress, en la liberación de WordPress 5.4, los atributos de carga lenta se implementarán de manera que sea fácil eliminarlos. Esto es importante en caso de que los futuros navegadores comiencen a cargar todas las imágenes por defecto, sin necesidad de un atributo de carga.
¿Es necesario entonces utilizar plugins en WordPress para retrasar la carga de imágenes en Páginas y Entradas?
La respuesta corta sería no es necesario, pero como todo en la vida, esto también tiene matices y algunos de ellos son que no siempre el usuario que diseña un sitio web quiere que estos contenidos por defecto tengan un retraso al mostrarse al usuario, (por ejemplo sitios de diseño, galerías de imágenes o museos online, etc.), y también cabe la posibilidad de que el usuario quiera aplicar esta tecnología de forma selectiva, es decir, para unos contenidos si y otros no.
Entonces, es posible que el uso de determinados plugins permita que el usuario active «lazy load» solo en aquellos contenidos, por Categoría, ID u otro parámetro, de manera que solo actúen en los deseados y no en todos.
¿Cómo funciona Lazy Load en WordPress?
En lugar de cargar todas las imágenes de la página actual, a través de Lazy Load se descargan solo las imágenes que son visibles en el área actual de la pantalla, reemplazando las imágenes que no son visibles con una imagen por defecto (usualmente de 1×1 píxel).
El atributo HTML lazy-loading indica al navegador que espere antes de descargar una imagen o que la descargue de inmediato. No es necesario usar JavaScript para lograr esto.
Si el usuario hace scroll y hay imágenes que mostrar, las imágenes reales se cargarán y reemplazarán a la imagen por defecto.
Todo este proceso es transparente para tus usuarios.
¿Qué beneficios tiene Lazy Load en WordPress?
Es bien sabido que Google premia la velocidad de tu sitio, una de las cosas que más retarda la carga de una página web suelen ser las imágenes.
Para optimizar la carga de imágenes puedes utilizar herramientas de optimización de imágenes o incluso colocar tus imágenes en un CDN para WordPress, sin embargo, en ambos casos, las imágenes se cargarán (incluso si no se muestran), afectando a los tiempos de carga de tu sitio web.
Para superar este inconveniente y cargar las imágenes en diferido puedes añadir Lazy Load a tu sitio web.
Cómo activar Lazy Load en WordPress
WordPress te facilita el uso de Lazy Load de forma nativa, por lo que te sugiero primero revisar si tu Tema o plantilla de WordPress tiene esta opción de activar Lazy Load.
En el caso de que tu Tema no lo incluya, puedes evaluar utilizar algún plugin; en el repositorio de WordPress encontrarás muchos con esta funcionalidad; sin embargo, en este artículo nos vamos a centrar en el plugin Smush – Lazy Load Images, Optimize & Compress Images.
Haz clic en la imagen para acceder al plugin en WordPress.org
Tras descargar e instalar el plugin verás las opciones de configuración del plugin en el dashboard ➜ Smush ➜ Ajustes, tal y como se muestra en la siguiente imagen.
En la mayoría de los casos no será necesario cambiar la configuración que viene por defecto.
En este caso lo que te interesa activar se encuentra en dashboard ➜ Smush ➜ Carga diferida, donde verás el botón azul Activar.
En el apartado de la configuración específica de Carga diferida ➜ Incluir / Excluir puedes excluir qué elementos de tu sitio web no utilizarán esta funcionalidad. Por defecto vienen todos activados.
Para comprobar si realmente el plugin está funcionando, verifica al cargar un artículo (post) con varias imágenes, que puedes usar el inspector de código de tu navegador para comprobar qué elementos está cargando.
Por ejemplo, en la imagen anterior, al abrir el inspector de código desde tu navegador (en Mac y Linux: Cmd + Opción + i, en Windows: Ctrl + Shift + i), verás en la pestaña Red / Network que las imágenes solo cargarán cuando se requiera, es decir, al desplazar el scroll serán cargadas a través del archivo JavaScript de Lazy Load.
Cómo añadir Lazy Load en vídeos de WordPress
Sí, es cierto que YouTube incorpora lazy load por defecto en sus videos. Cuando un video de YouTube es insertado en una página web, mediante un iframe, este solo se descarga y se reproduce cuando el usuario lo solicita, es decir, al hacer clic en el reproductor del video. Esto ayuda a mejorar la velocidad de carga de la página y reduce el uso de ancho de banda.
Sin embargo, si insertas un video de YouTube utilizando su código de incorporación, el video se descargará junto con la página, ya que el código de incorporación de YouTube no incluye Lazy Load. Por eso es recomendable utilizar un plugin de «retardo de carga» para videos, servirá para cargar los videos solo cuando el usuario los visualiza.
Para añadir Lazy Load en vídeos incrustados (oEmbed) en un sitio WordPress, dentro de Entradas, Páginas o widgets, puedes utilizar el plugin Lazy Load for Videos.
Haz clic en la imagen para acceder al plugin en WordPress.org
Este plugin mejora el tiempo de carga de la página y aumenta el Google PageSpeed Score. Funciona con oEmbed y sustituye los vídeos incrustados de YouTube y Vimeo por una imagen de previsualización en la que se puede hacer clic.
Al cargar los vídeos solo cuando el usuario hace clic en la imagen de vista previa, no se carga JavaScript innecesario. Los vídeos de YouTube se cargan en un modo de privacidad mejorada utilizando la URL de incrustación https://www.youtube-nocookie.com.
El plugin funciona sin bloqueo de proveedor y sin códigos cortos o shortcodes personalizados.
Para instalar y utilizar el plugin, sigue estos pasos:
- Instala y activa el plugin Lazy Load for Videos en tu sitio de WordPress.
- Configura el plugin según tus necesidades. Puedes encontrar la configuración en Ajustes ➜ Lazy Load for Videos.
- Añade vídeos a tu sitio utilizando el código nativo de WordPress para vídeos.
- El plugin se encargará de aplicar la carga retrasada a los vídeos automáticamente.
Por ejemplo, si quieres añadir un vídeo de YouTube a tu sitio utilizando un shortcode, puedes utilizar el siguiente código en tu editor de contenido:
[ video src="https://www.youtube.com/watch?v=ytJsOlyaBgo" ]El plugin detectará automáticamente que es un vídeo y lo cargará utilizando «lazy load» o carga retrasada.
Para comprobar si un vídeo incrustado en WordPress incluye lazy load, puedes utilizar las herramientas de desarrollador de tu navegador web.
Te pongo un ejemplo de cómo hacerlo utilizando las herramientas de desarrollador de Google Chrome:
- Abre el sitio de WordPress que contenga algún vídeo incrustado con el plugin Lazy Load for Videos.
- Haz clic derecho en el vídeo y selecciona Inspeccionar (o utiliza la combinación de teclas Ctrl + Shift + I).
- En las herramientas de desarrollador, selecciona la pestaña Red.
- Recarga la página donde se encuentra el vídeo.
- En la sección Multimedia del panel de Red, busca el vídeo.
- Si el vídeo tiene lazy load, debería aparecer con un status 200 OK y la etiqueta lazyloaded.
- Comprueba también en la sección JS si los scripts de JavaScript de Lazy Load están cargados y tienen estado 200.
Si no ves resultados, o bien tu vídeo incrustado no se ha incorporado en la publicación con el código oEmbed de WordPress o no está usando las funcionalidades que el plugin aporta.
Ten en cuenta que esta es solo una forma de verificar si un vídeo tiene lazy load habilitado, ya que también existen otras formas de verificarlo dependiendo de la implementación de lazyload que hayas utilizado.
Lazy Load con respecto al SEO y posicionamiento
El uso de Lazy Load puede mejorar significativamente la velocidad de carga de la página, especialmente en dispositivos móviles, lo que sin duda tendrá un impacto positivo en el SEO, ya que las páginas que se cargan más rápido pueden tener un mejor rendimiento en los resultados de búsqueda.
Además de mejorar la velocidad de carga de la página, el «lazy load» también puede ayudar a reducir el uso de datos de los visitantes, especialmente en dispositivos móviles, lo que puede ser beneficioso para los aquellos que tienen un límite de datos o conexiones muy lentas y de paso ayuda a reducir el porcentaje de rebote.
Hace tiempo que Google declaro que la velocidad de carga de la página es un factor de clasificación importante, por lo que el uso de la carga diferida puede ayudar a mejorar el rendimiento de una web en los resultados de búsqueda.
Si un sitio web carga más rápido, sobre todo los 3 primeros segundos, y eso se consigue evitando que carguen o pre-carguen contenidos que no se están mostrando en el navegador en ese momento, la experiencia de usuario será muy positiva y cuanto más rápido cargue mejor posicionará, en conjunción con otros aspectos importantes del SEO.
Conclusiones
Con la carga diferida, los vídeos no se cargan en tu página y las imágenes no se descargan hasta que se necesitan, lo que sin duda te sirve para optimizar WordPress, especialmente en el caso de sitios web con varios vídeos incrustados e imágenes de alta resolución.
Si tienes muchas imágenes en los artículos de tu sitio web, también puedes evaluar, usar un plugin en WordPress que te permita la carga diferida de imágenes y vídeos o dejar que las nuevas versiones de WordPress lo gestionen desde el núcleo.
Utiliza Lazy Load si las Páginas y Entradas de tu sitio web tienen varias imágenes de alta resolución y vídeos incrustados. En pocas palabras, la carga diferida reduce las llamadas de los visitantes al servidor de tu sitio web, ya que le estás diciendo a estos medios (imágenes, etc.) que se carguen solo cuando los visitantes los tengan en su navegador.
Algunos consejos finales para mejorar la carga de tus contenidos de manera optimizada:
- Haz uso del plugin de lazy load para videos, esto ayudará a mejorar significativamente la velocidad de carga de tu sitio y a reducir el consumo de ancho de banda.
- Utiliza lazy load también para tus imágenes porque son uno de los elementos que más ancho de banda suele consumir y si no están optimizadas retrasan la carga de la página.
- Existen numerosas herramientas de medición de velocidad de carga para verificar el impacto de lazy load en tu sitio y hacer ajustes según sea necesario ¡Utilízalas!
- Con el uso de un plugin de caché para mejorar la velocidad de carga de tu sitio en general conseguirás mejores tiempos de carga.
- Sube siempre imágenes escaladas y optimizadas para reducir el tamaño de los archivos y mejorar la velocidad de carga de la web.
- Usa un servicio de entrega de contenido (CDN) para mejorar la velocidad de carga de tu sitio y reducir la carga en tu servidor (Cloudflare, etc.)
Ten en cuenta que lazy load es solo una de las varias técnicas para mejorar la velocidad de carga de tu sitio, y que para lograr los mejores resultados, debes combinarlo con otras técnicas de optimización del rendimiento del sitio web WordPress.
Con esto estarás optimizando la carga de tu sitio web y Google lo tiene en cuenta a la hora de posicionar tus contenidos.
También te puede interesar:
¿Te ha resultado útil este artículo?
Miembro del equipo de soporte técnico de Webempresa.
Coordinador de contenidos en el Blog y en Youtube.
Soporte técnico en CiberProtector. Teacher en Webempresa University
