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? 😀
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.
0 Commentaires