Poner Lazy Loading Nativo en WordPress Core para imágenes y vídeos sin plugins

PONER LAZY LOADING NATIVO EN WORDPRESS CORE PARA IMÁGENES Y VÍDEOS SIN PLUGINS

Lazy Loading nativo en WordPress Core para las imágenes y vídeos ya son parte del lenguaje HTML y sin instalar ningún tipo de complemento

El atributo “loading lazy” para imágenes e iframes (vídeos) ha sido incluido en el lenguaje estándar de HTML, es cierto que se podía utilizar activando tres “flags” en el navegador de Chrome, pero eso ha cambiado y ahora se puede implementar fácilmente en tu sitio WordPress de forma nativa y sin el uso de plugins.

PONER LAZY LOADING NATIVO EN WORDPRESS CORE PARA IMÁGENES Y VÍDEOS SIN PLUGINS

Las imágenes y vídeos representas casi un 80% del peso en una web, esto provoca una página en el buscador se demore porque antes de abrir tiene que cargar todas las imágenes y vídeos. Todos estos recursos pesados salen caros para el usuario y para la web con pérdida de tráfico y dinero sin una carga diferida implementada.

WordPress es el líder en cuanto a la carga de imágenes y videos para diseñar tu sitio, sin embargo apenas está por implementar lazy loading en su núcleo para que cada vez que subamos un archivo a la biblioteca de medios automáticamente integre el atributo loading lazy sin necesidad que nosotros movamos un dedo.

Beneficios de implementar Lazy Loading en tu sitio web con WordPress

Beneficios de implementar Lazy Loading en tu sitio web con WordPress

La carga diferida (Lazy load) es la función para optimizar la carga del contenido visible esperando que el usuario haga scroll para comenzar a cargar el resto de la página según bajas en ella.

  • JavaScript modifica el comportamiento de precarga priorizando el contenido visible de la página en concreto que te encuentras y demorando la carga en vídeos e imágenes situados en otra parte de la página.
  • El navegador crea el DOM de la página sin precargar o descargar las imágenes y vídeos.
  • La reproducción en vídeos y visibilidad de imágenes no se ejecutan hasta que una visita llega al punto de la página donde se localiza el medio.
  • La velocidad al abrir un sitio web es importante para que Google tome en cuenta tu página y posicionar mejor en las SERP
  • Aumento de tráfico considerable al no dejar escapar posibles usuarios desesperados.
  • Ahorramos espacio y código al no utilizar un plugin

“La carga diferida “Lazy Loading” tiene un impacto profundo para los usuarios y el SEO, si tu sitio tiene muchas fotos y vídeos”

SEO Robbie…

2 soluciones para implementar carga diferida en las imágenes y videos, ahora descubramos que solución es la que te conviene a se adapte a tu proyecto:

Opción 1

content-visibility – Nueva propiedad CSS que aumenta el rendimiento de carga diferida en imágenes y vídeos sin plugin

Tiempo de carga veloz omitiendo el contenido fuera de pantalla con “content-visibility”, esta propiedad de CSS mejorara e impactará positivamente el rendimiento de carga de una página, el aprovechamiento de content visibility te hará conseguir más tráfico.

Navegadores que aceptan esta propiedad CSS content-visibility

Navegadores que aceptan esta propiedad CSS content-visibility

Objetivo clave y el atributo contención de CSS

Mejorar el rendimiento de un contenido web al realizar una construcción optimizada y predecible de un subárbol DOM, básicamente lo que hacemos es indicarle al navegador que partes o divisiones de una página que tiene un atributo de contención CSS “contain”, este contenido o aislado representa la página optimizada que deseamos que abra.

Para ello debemos especificar el valor deseado de la propiedad “contain”

  • El valor “size” – Especifica la contención del tamaño de un medio o elemento sin tener que examinar todos los descendientes.
  • El valor “layout” – Nos dice la contención de diseño para que no salgan modificados o borrosos los que descienden.
  • El valor “style” – La contención de estilo garantiza un visualización optima en los medios más abajo.
  • El valor de “paint” – La contención te pintura garantiza que al ser scroll no se desfiguren la imágenes que están por salir en pantalla.

Cómo implementar content visibility en WordPress para que lazy loading funcione

Cómo implementar content visibility en WordPress para que lazy loading funcione

En ocasiones suele ser complicado y tedioso agregar CSS sin saber qué valor realmente nos interesa, dependiendo de la tarea que deseemos, es por eso que preferimos utilizar un solo y simple valor como “content-visibility” ya que la función de este atributo funciona automáticamente.

Resumiendo, al utilizar content visibility nos aseguramos que no ocurra nada extraño cuando bajemos por la página y todo debe verse perfecto.

“Al tener integrado “content-visibility” conseguimos que vídeos e imágenes sean Lazy Loading logrando un sitio web muy rápido”

SEO Robbie…

Modificando WordPress con Lazy Loading desde CSS “Content Visibility”

Ir al editor de temas de wordpress en apriencia, nos aseguramos de estar en el apartado del menú lateral izquierdo en “style.css” hoja de estilo, ya que será ahí donde pegaremos el código debajo de la llave de cierre de html y arriba de body.

Modificando WordPress con Lazy Loading desde CSS “Content Visibility” - donde poner el código

Copia este código:

.story {
    Content-visibility: auto;
    Contain-intrinsic-size: 100px 1000px;
}

El código tendrá que quedar como en la imagen abajo, cabe resaltar que yo puse de ejemplo para mostrar las dimensiones de una imagen de 100×1000 en el valor de “contain-intrinsic-size” tu asignaras los pixeles de tamaño que quieras que se vea tu foto.

Modificando WordPress con Lazy Loading desde CSS “Content Visibility” - pega el código como en la imagen

Ahora no dirigimos a la página, adentro buscamos la imagen, hacemos Click en la imagen para seleccionar el bloque, en las opciones del menú izquierdo despliega la que dice “avanced” o avanzado, luego en cuadro vacio de “Aditional class CSS” escribe la clase de lazy loading llamada “story”.

Modificando WordPress con Lazy Loading desde CSS “Content Visibility” - agregar la clase css a la imagen

Actualiza tu página y ya tendrás carga diferida en tu WordPress sin instalar un solo pluging.

Vez complicado este método de carga diferida tal vez te interese el siguiente:

Opción 2

Carga Diferida Nativa o “Native Lazy Loading” de imágenes en WordPress y los navegadores sin plugin

¡La carga diferida nativa para navegadores ha llegado para quedarse!

La compatibilidad de origen en HTML del atributo lazy loading significa que podemos olvidarnos de códigos JavaScript para implementar sencillamente la carga diferida en imágenes y vídeos (iframes) ya que puede funcionar con los navegadores de manera automática. Es genial que podamos quitar código JS que ocupa espacio innecesario en wordpress.

Los navegadores hoy día tienen compatibilidad de imágenes con carga diferida natural o nativa (native lazy-loading) los webmasters solo se preocuparan por colocar etiquetas con el atributo “loading” y especificar su valor “lazy”,  “eager” y “auto”.

  • El valor “lazy” – le dice al buscador que debe aplazar o atrasar la carga de una imagen o vídeo (iframe) hasta que el usuario este a cierta distancia cercana del medio.
  • El valor “eager” – este informa al buscador que debe cargar la totalidad de la página web para poder abrirla.
  • El valor “auto” – El comportamiento de Lazy Loading será el que por defecto tenga el buscador de un usuario, sería lo mismo que no poner nada.

Para muestra un botón, mira el comportamiento de un sitio web que implementa el atributo “lazy-loading”:

vídeo de seoalive

Existen 2 formas de obtener lazy load aplazando la carga de imágenes:

  • API de Intersection Observer
  • Controladores de eventos (scroll, resize o orientationchange)

Estas nos permiten agregar el atributo de carga diferida para que funcione correctamente en el navegador sin depender de JavaScript, esto garantiza un lazy load en las imágenes de tu página.

Con el simple hecho de colocar en la etiqueta de una imagen o vídeo el atributo “loading=”lazy”, los buscadores entienden la acción para mostrar el contenido según bajes en la página.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Navegador vs JavaScript

La carga diferida nativa que ha implementado Chromium nos da la certeza que carguen las imágenes fuera de pantalla para usarlas en cuanto hagas scroll de manera natural.

JavaScript y sus bibliotecas de carga diferida, también es efectiva pero debes saber un poco de código para implementar correctamente lazy loading en tu sitio web.

En pocas palabras estamos avanzando al futuro simplificando las acciones y es lo que buscan los navegadores para hacerte la vida más sencilla y que no dejes de buscar nunca.

Como poner la carga diferida nativa “Lazy Loading Native”en WordPress sin plugin

Como poner la carga diferida nativa “Lazy Loading Native”en WordPress sin plugin

Ya puedes incorporar el atributo Lazy Loading en el núcleo o Core de WordPress. Admitido por Chrome, FireFox y Edge tanto en ordenadores como en Android.

Antes recuerda que es muy importante que las imágenes o vídeos que subas a WordPress se encuentren optimizadas en cuanto al peso, esto ayuda a tener una web más ligera.

Que atributos de dimensión poner en las imágenes

Primero que nada evita la carga diferida nativa (lazy-loading) en imágenes de cabecera o ubicadas en la primera pantalla de la página.

Cuando el navegador comienza a leer tu página no sabe las dimensiones de las imágenes, nosotros podemos ayudar especificando el ancho y alto de estas, con agregar en la etiqueta “<img>” los atributos de “width” y “height”.

Recuerda cambiar el valor de altura y ancho de la imagen en cualquiera de las dos opciones:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">
-----------------------------------------------------------------------
<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

Como poner la carga diferida nativa “Lazy Loading Native”en WordPress sin plugin

Selecciona el bloque de la imagen y despliega las opciones de los tres puntos, elige “Editar como HTML”.

Como poner la carga diferida nativa “Lazy Loading Native”en WordPress sin plugin

Ahora copia los atributos, lazy=”loading” lo pegas tal cual después de las comillas de la url de la imagen y a continuación coloca el ancho y alto “width y height” con las medidas o dimensiones que quieras:

loading="lazy" width="200" height="200"
Como poner la carga diferida nativa “Lazy Loading Native”en WordPress sin plugin - especifica alto y ancho

Repite el procedimiento con todas las imágenes de la página, después actualiza y guarda, con esto obtendrás como resultado una página web que cargue muy veloz y no dejes escapar tráfico.

No quieres complicarte la vida y “perder tiempo”, puedes optar por un plugin de carga diferida

No quieres complicarte la vida y “perder tiempo”, puedes optar por un plugin de carga diferida

Te urge ver resultados, no cuentas con el tiempo necesario o simplemente no te gusta meter mano en cuestiones de código y lenguajes complicados. Perfecto, no pongas Lazy Loading en tu web… Es mentira, la verdad y respuesta está en instalar un complemento mejor conocido como “PLUGIN” en tu WordPress.

OJO, no cualquier plugin de carga diferida, tranquil@ te voy a enlistar solo los 5 mejores, basándonos en sus características y en resultados de usuarios, para que no la cajeties.

5 PLUGINS de WordPress para Carga Diferida en Imágenes y Vídeos

1 Lazy Loading Feature Plugin – The WordPress Team

El mejor en cuanto a complementos de carga diferida, a pesar de ser reciente tiene valoración de 4 estrellas, es el recomendable por WordPress, fácil instalación y sin preocupaciones de configuración y lo mejor de todo es GRATIS.

2 WP Fastest Cache – The simplest and fastest WP Cache system

Una gran herramienta de aceleración a páginas mal estructuradas, munífica todo el JS y CSS además de poner tus imágenes y vídeos en modo lazy loading.

3 Smush – Compress, Image Optimizer, Lazy Load, WebP Images

Excelente opción para comprimir imagines y atribuirles carga diferida, lo malo es que la versión gratuita es limitada, asi que si la quieres completa tendrás que pagar por ella.

4 a3 Lazy Load – Use a3 Lazy Load for images, videos, iframes

Solución aceptable para relentizar la carga de imágenes y vídeos en el navegador, tiene buenas valoraciones por los usuarios y es confiable.

5 Lazy Loader – Lazy loading plugin that supports images, iFrames, video and audio

Aunque este plugin de carga diferida tiene solo 10,000 instalaciones los comentarios y valoración son muy buenos.

Espero haya sido de ayuda este pequeño tutorial para poner Lazy Loading en tu wordpress desde el núcleo (Core) para optimización y carga de imágenes haber utilizado ningún plugin.

Solución definitiva – poner lazy loading nativo a todos los vídeos con un solo paso

No te interesa la carga diferida en las imágenes, solo deseas lazy loadyng en tus videos, pues mira este pequeño tutorial «video con lazy loading nativo»y en segundos conseguirás una página rápida.

FAQ – Preguntas frecuentes

¿Qué buscadores aceptan el atributo “lazy-loading”?

No todos los navegadores son compatibles con <img loading=lazy> aunque no afecta en nada a tu sitio web, la buena noticia es que los principales navegadores como Chrome, Edge y FireFox en versiones más recientes. Aunque en poco tiempo se sumaran todos los navegadores.

¿Wordpress ha dicho que tendrá carga diferida nativa?

Una excelente pregunta, aunque en este post tratamos alternativas de implementar lazy loading sin ocupar ningún tipo de complemento, debes saber que los desarrolladores de WorPress tinen un plugin específico para cubrir de manera automática las etiquetas de Lazy Loading en todas las imágenes y vídeos que hay en tu biblioteca de medios. Ya está en desarrollo, en fase beta para ser más preciso, los comentarios de los que la han puesto a prueba son muy buenos, tu puedes hacer uso de ella gratuitamente, el plugin se llama “Lazy Loading Feature Plugin”, creada por el equipo de WordPress.

¿Lazy Loading sirve para imágenes y vídeos de carrusel o galerías completas?

Definitivamente, la carga diferida es funcional para carruseles y galerías, siempre y cuando no estén al comienzo de la página, no le veo mucho sentido querer retardar la carga en un medio que tiene que verse como primera impresión.

¿Honestamente sirve para algo la carga diferida, nativa, retardada, lazyload o como sea?

Te respondo honestamente, no solo sirve para hacer más veloz tu sitio web, sabes cuantas personas esperan más de 4 minutos y si no abre se van a buscar otro sitio, ahí estás perdiendo tráfico que puede ser la diferencia, como pilón, te digo que Google da preferencia a páginas optimizadas y rápidas para posicionarlas mejor en los resultados.

¿Quiero saber si pongo lazy loading en mi sitio cuanto puedo ahorrar?

Bueno, tanto así como ahorrar solo los Scripts y espacio que ocupa un plugin de carga diferida, mejor te digo que más bien puedes ganar y mucho.

¿Dicen que solo funciona para Crhome?

Al día de hoy Google ha dicho que ya reconocen esta tecnología además de Chrome, FireFox y Edge, y viendo la situación no pasara mucho para que se integren los demás navegadores.

¿Puedo elegir una imagen que cargue sin el atributo de carga diferida?

Si pasaste por el tutorial de implementación de lazy loading, en cualquiera de las dos opciones decides que imágenes o vídeos contaran con carga diferida y cuáles no, echa un ojo de nuevo es muy fácil.

Si te quedaste con dudas pregunta lo que desees en la caja de comentarios más abajo para poder ayudarte.

Robbie - redactor y editor poleposition.website

Robbie twiter poleposition.website facebook poleposition.website

Editor | Redactor | Blog | PolePosition.WebSite

Descubre todo lo que esta sucediendo en el mundo del SEO y WordPress

10 Errores que no debes cometer al escribir meta descripciones

10 Errores que no debes cometer al escribir meta descripciones

¿Quieres aumentar la tasa de clics? ¿Cómo generar tráfico orgánico? ¿Cómo generar conversiones altas? ¿El CTR es un factor importante? ...
Leer Más
Cómo tener éxito en Google Discover

¿Cómo tener éxito en Google Discover?

Google Discover ofrece una forma llamativa de mostrar nuestro contenido antes de que un usuario ingrese a una página. Esto ...
Leer Más
30 Errores comunes de SEO en WordPress que podemos evitar (Actualizado 2020)

30 Errores comunes de SEO en WordPress que podemos evitar (Actualizado 2020)

¿Qué es lo que más desea un SEO? ¿Qué su sitio web de WordPress sea visible en los resultados? ¿Obtener ...
Leer Más
Google Web Stories: 6 cosas que NO debe hacer para salir en los resultados de búsqueda

Google Web Stories: 7 cosas que NO debe hacer para salir en los resultados de búsqueda 2020

Conocer las pautas de Google es muy importante, las historias web funcionan con parámetros distintos a una publicación común. Uno ...
Leer Más
Cargando...
Spread the love