Descubre cómo introducir la carga progresiva de imágenes o lazy load en cualquier child theme de Genesis mediante código.
Aviso: Ya no es necesario usar este snippet ya que WordPress 5.5 ya ha añadido soporte para la carga diferida de imágenes de forma nativa.
La carga progresiva de imágenes o lazy load permite que las fotografías se carguen a medida que el usuario se desplaza con el scroll por la página.
Esto mejora el tiempo de carga y resulta especialmente interesante en webs que utilizan muchas imágenes, como las de fotógrafos y otros creativos.
Hay varios plugins que te dejan agregar esta funcionalidad. Pero estás en Código Genesis, así que aquí vas a aprender cómo implementarlo mediante snippets. 😉
Aunque existen distintas librerías de javascript que te permiten hacerlo, este tutorial se basa en la estrategia del proyecto WPRig, un fantástico starter theme que pretende facilitar la creación de temas progresivos para WordPress.
De hecho, es un proyecto que sigo muy de cerca con la intención de aplicar algunas de sus ideas más interesantes en Genesis.
Una de las ideas que propone WPRig es la de añadir las funcionalidades útiles para varias plantillas en una carpeta (llamada pluggable) de manera que puedas moverla de forma sencilla entre ellos.
Muy práctico, ¿a que sí?
El módulo de lazy loading de imágenes cumple a la perfección esta premisa.
En el starter theme utilizan una versión modificada del módulo de Jetpack, que es el mismo que utilizo en este tutorial. Aquí te explico cómo aplicarlo en cualquier child theme de Genesis paso a paso:
Instrucciones para añadir lazy load a un tema de Genesis
1. Genera la estructura de carpetas
En primer lugar, crea una carpeta llamada pluggable en la raíz del child theme. Dentro de ella agrega una llamada lazyload. Y por último dentro, de esta, otra que se llame js.
La estructura final debe quedar así:
2. Crea un archivo lazyload.php
Este fichero lazyload.php contendrá el siguiente código:
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
Colócalo dentro de la carpeta /pluggable/lazyload/ del child theme.
Este archivo es el encargado de identificar las imágenes y decidir sobre cuáles se debe aplicar el lazy load.
3. Genera el fichero lazyload.js
El nuevo archivo lazyload.js debe contener las siguientes líneas:
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
Y, en este caso, colócalo dentro de la carpeta /pluggable/lazyload/js/.
De esta forma, configuras el script que se encarga de gestionar el efecto de carga progresiva en las imágenes.
4. Modifica el fichero functions.php
Pega este snippet al final de functions.php:
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
Con este bloque te aseguras de que se cargue el fichero lazyload.php y, por lo tanto, de que se ejecute la carga progresiva de imágenes en tu child theme.
De hecho, si quieres moverlo a otra plantilla solo necesitarás copiar la carpeta plugabble e introducir esta última línea de código al functions.php.
5. Inserta una imagen como placeholder
Por motivos únicamente estéticos, lo último que debes hacer es seleccionar la foto que se mostrará mientras se carga la definitiva (placeholder, en inglés).
Te invito a utilizar esta: placeholder.svg, 100% transparente (más minimalista, imposible). 😉
Colócala en la carpeta /images/ del tema.
Si decides usar otra, reemplaza el nombre de la imagen en la línea 217 del fichero lazyload.php.
Por ejemplo, puedes sustituir ‘/images/placeholder.svg’ por ‘/images/tuplaceholder.svg/’. Sobre todo, asegúrate de añadir ese fichero a la carpeta images.
¡Ya lo tienes!
Conclusiones
Siguiendo este tutorial paso a paso conseguirás que tu child theme de Genesis utilice la carga progresiva de imágenes o lazy load.
Esta funcionalidad resulta muy útil para mejorar el tiempo de carga de la web, por lo que puede ser especialmente interesante implementarla en temas dirigidos a fotógrafos o creativos que vayan a utilizar galerías «generosas».
Recuerda que añadir lazy load no implica que dejes de optimizar las imágenes para la web. Es solo un complemento (muy bueno, eso sí) para reducir un poco más el tiempo de carga.
¡Todo suma! 😉
¿Tienes alguna pregunta o quieres darme una sugerencia para próximos snippets? Cuéntamela en los comentarios (opción exclusiva para suscriptores).
