Una de las optimizaciones recomendadas por las métricas web principales de Google es posponer, aplazar la carga de recursos (imágenes) hasta que no sea necesaria su visualización en la pantalla, lo que se conoce como carga diferida o, en inglés, lazy loading.
Esta recomendación tiene todo el sentido, porque ¿qué necesidad hay de qué el ordenador, y especialmente un móvil, descargue una imagen que, a no ser que el usuario termine haciendo scroll para seguir navegando, igual no hace falta terminar de mostrar? De este modo se ahorran recursos del servidor y del dispositivo, algo especialmente importante en móviles, siempre luchando contra la falta de espacio y la duración de las baterías.
Ahora bien, en esta práctica hay una salvedad, de la que también nos avisa en ocasiones la herramienta de medición de métricas web principales de Google, y es que no se deben cargar en diferido aquellas imágenes que estén en la sección de antes del doblado, o above the fold, o sea, en esa primera pantalla que se visualiza de una web nada más acceder.
Si lo piensas bien es totalmente lógico porque no tiene sentido alguno que no se carguen las primeras imágenes de la parte superior de la web hasta que no se navegue, deberían verse de inmediato, sin posponer su visualización, porque se espera que se vean nada más llegar a la web.
Lo contrario provoca una mala experiencia para los usuarios, que verán que faltan imágenes en la primera parte más visible de tu web, que solo se mostrarán si deciden navegar por la página. La sensación será de que a la página le faltan cosas o está rota.
Ya vimos hace tiempo cómo desactivar el lazy loading de manera selectiva, con montones de trucos para los principales plugins de optimización, como WP Rocket o Autoptimize, y también vimos como, por defecto, con el plugin SG Optimizer se pueden excluir imágenes de la carga diferida añadiendo su clase CSS en los ajustes del mismo.
Ahora bien, hay situaciones en las que no es posible excluir imágenes usando una clase CSS:
- La clase CSS incluye otros elementos, a los que no queremos aplicar ningún parámetro de renderizado.
- No es fácil, o no sabemos, identificar la clase CSS de la imagen.
Por este motivo, la opción de excluir imágenes de la carga diferida usando clases CSS no es viable para todos, y necesitamos alternativas ¿las hay?
¿Lo dudabas? 😀
Índice de contenidos
Excluir imágenes de la carga diferida «inventándote» la clase CSS
Parece una ñapa a las que te vengo acostumbrando … y ¡acertaste! Pero resulta que funciona…
En esas ocasiones en las que no eres capaz de identificar claramente la clase CSS que afecta a una imagen, y quieres excluirla del lazy loading, puedes inventarte una clase CSS. Se haría más o menos así…
Añade la clase CSS inventada a la lista de exclusiones de carga diferida de SG Optimizer
Yo suelo empezar por aquí, no cuesta nada, no rompe nada, y ya lo tienes. Simplemente invéntate un nombre de clase CSS, importante que no esté ya en uso ni en el tema ni en ningún plugin, y la añades a las exclusiones en los ajustes de medios de SG Optimizer.
Confirma y se guardarán los cambios automáticamente. Con este paso le dices al plugin SG Optimizer que cuándo una imagen tenga la clase CSS llamada nomelazyloades no haga lazy loading o carga diferida. Primer paso terminado 🙂
Añade la clase CSS inventada a las imágenes que quieras excluir de la carga diferida
Ahora solo queda añadir esa clase CSS inventada a aquellas imágenes que no quieras que se vean afectadas por el lazy loading. Dónde hacerlo dependerá de dónde esté la imagen. Vamos a ver algunos ejemplos…
Logotipo del sitio
Una imagen que siempre será susceptible de excluir de la carga diferida sería el logo del sitio, porque siempre está en la cabecera de la web, y siempre debería de verse de inmediato ¿no?
Si utilizas un tema con edición completa del sitio, abre el editor del sitio y abre las partes de plantillas de cabecera que tenga tu tema.
A continuación selecciona el bloque de «Logo del sitio» y, en los ajustes del bloque, en la sección de «Avanzado → Clase(s) CSS adicional(es)» añade el nombre de tu clase CSS recién inventada.
A continuación guarda los cambios, confirmando que se aplicará al resto de plantillas, al ser una parte de plantilla que comparten otras plantillas del tema.
Si utilizas un tema que no sea compatible con el editor del sitio dependerás de los ajustes del tema en particular para poder añadirle una clase CSS (o no) al logo del sitio.
Imágenes en la sección above the fold
Si lo que quieres excluir son imágenes añadidas ya en el contenido principal que primero se ve al llegar a tu web es igual de sencillo, pero en este caso da igual si usas el editor de WordPress o cualquier maquetador, siempre vas a poder añadir una clase CSS adicional a tus imágenes.
Con el editor de bloques lo tienes en el mismo sitio que vimos antes, en los ajustes del bloque, en este caso bloque de imagen, o de fondo, cualquiera, todos los bloques del editor tienen la sección de «Avanzado → Clase(s) CSS adicional(es)».
Y si aún utilizas el editor clásico, solo tienes que editar la imagen desde el icono emergente del lápiz, y añadirle tu clase CSS.
¿Utilizas maquetadores como Elementor o Divi? ¡Sin problema también, todos tienen algún campo en el que añadir una clase CSS a sus elementos o módulos!
Excluir imágenes de la carga diferida añadiendo las URLs a una función
Lo que mucha gente no sabe es que el plugin SG Optimizer ofrece un montón de funciones con las que personalizar prácticamente cualquiera de sus funcionalidades, más allá de los ajustes visibles en las pantallas de configuración del plugin.
Una de estas funciones sirve precisamente para excluir imágenes, por su URL, de la carga diferida, y es como en este ejemplo:
/* Filtro para excluir imagenes de lazy load de SG Optimizer por URL */
add_filter( 'sgo_lazy_load_exclude_images', 'exclude_images_from_lazy_load' );
function exclude_images_from_lazy_load( $excluded_images ) {
// Aqui las urls completas que quieras excluir del lazy load
$excluded_images[] = 'https://midominio.com/wp-content/2023/01/imagen.jpg';
$excluded_images[] = 'https://midominio.com/wp-content/2022/12/imagen2.jpg';
return $excluded_images;
}Solo tienes que sustituir las $excluded_images[] por las rutas a las imágenes que quieras excluir del lazy loading (la de tu logo por ejemplo) y guardar la función donde prefieras, siguiendo esta preciosa guía sobre cómo y dónde copiar y pegar códigos para WordPress que te encuentres por ahí (aquí por ejemplo).
Otras posibilidades que ofrecen los filtros de SG Optimizer son excluir por tipo de contenido, o usar el filtro para excluir clases, como en los ajustes.
Como habrás visto, por opciones que no quede.
Así que ya sabes que, cuando PageSpeed te recomiende que no hagas carga en diferido de las primeras imágenes de tu web, ya sabes también cómo excluirlas si utilizas el plugin SG Optimizer, gratuito por obra y gracias de SiteGround.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Genial y muy buena idea Fernando. Gracias
Hola,
creo que a esta linia le falta una comilla de cierre al 2º parámetro:
add_filter( ‘sgo_lazy_load_exclude_images’, ‘exclude_images_from_lazy_load );
Lo tienen así en la página del plugin para este y 2 filtros más. Se lo he dicho también a ellos.
CREO…
Saludos.
Cierto, falta la segunda comilla de cierre 😉
Muchas gracias Fernando… Excelente entrega la de hoy!!!
Me gustaría añadir que además de excluir de la carga diferida a las imágenes «above the fold»; cuando se trata de una imagen de héroe o un slider full pantalla en la cabecera de la página (donde se usan imágenes grandes), yo acostumbro precargar la(s) imagen(es) para evitar valores altos en algunas métricas como el FCP y LCP, usando etiquetas como la siguiente en la cabecera de la página:
Si se tiene elementor pro, en la sección «Código personalizado» se puede colocar fácilmente esta etiqueta en el head de la página, seleccionando con la opción «Condiciones» en cuál(es) página(s) se deberá insertar esa etiqueta para evitar (muy importante) que las imágenes se precarguen en páginas donde no se necesitan.
Yo generalmente prefiero hacer esto sin plugins aunque es un poco más complicado porque requiere crear un gancho en el archivo header.php (si el tema no lo proporciona) y un script en el archivo functions.php para extraer la etiqueta desde el valor de un campo personalizado creado en la misma página o entrada (de los campos que se pueden crear con el propio wordpress, sin necesidad de ACF). Fernando, seguramente conoces algún plugin que nos puedas recomendar para agregar meta etiquetas en la sección de una página o entrada específicas.
Saludos desde Venezuela
Luis De Sousa
Justo estos días estoy configurando SG Optimizer y activando la carga diferida de medios veo en código fuente que elimina el loading=»lazy» nativo de WP y en su lugar añade la clase «lazyloaded» (además de añadir un buen código dentro de etiquetas noscript que no sé qué hace, pero bueno).
Y tenía preparadas un listado de URLs de imágenes del above the fold de todas las páginas de la web para excluirlas en el functions.php como pusiste aquí,… pero antes de hacerlo pasando el PageSpeed Insights de todas esas páginas, Google me muestra en VERDE «La imagen del renderizado del mayor elemento con contenido NO se ha cargado en diferido»…. mostrándome junto con el mensaje la imagen del above the fold que se ve que sí tiene la clase «lazyloaded»,… Entonces por qué google me lo muestra ya correcto como que no se está cargando en diferido?
¿Puede ser que en SG Optimizer hayan añadido algo que compruebe si es la imagen del above the fold y aunque le asignen la clase lazyloaded no lo hagan??
Obviamente si ya Google me lo muestra bien no me voy a molestar a excluir URLs de imágenes above the fold,… pero me gustaría saber por qué está ocurriendo esto…
A ver si lo sabes 😛
Saludos!
Pablo.
Buenas, me respondo yo mismo con lo que me han dicho de soporte del plugin en el repositorio de WP:
«Yes, we serve a specific JavaScript code when Lazy Loading is activated from the plugin. And there are specific checks in order to assure that the above-fold images will be loaded as expected. Please note that we are not aware of how PageSpeed tool exactly simulates the browser loading in order to determine if an image is lazy loaded or not.»
O sea que aunque ellos quiten el loading=»lazy» nativo y en su lugar añadan una clase propia A TODAS LAS IMÁGENES incluidas las de above the fold,… por detrás añaden algún JavaScript que hace que las imágenes que ellos consideren above the fold NO se haga el lazy (aunque lleven su clase asignada)…
Por lo tanto NO hace falta excluir las URLs de las imágenes en el functions.php,… ni asignar clases de exclusiones,… pues ya lo hacen por defecto.
Deberían documentar mejor,…
Saludos.
Pero no siempre funciona, en montones de sitios me he encontrado con lazy loading imágenes que no ha detectado el JS de SG Optimizer, y que he excluido usando lo que comento en esta entrada.