Descubre cómo dar soporte a la carga progresiva de imágenes o lazy load nativa de Chrome 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 o hace 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.
Tanto es así, que en uno de los primero tutoriales de Código Genesis ya aprendiste cómo implementar el lazy loading en child themes de Genesis usando Javascript.
Pero la llegada de la versión 76 de Chrome supone un punto de inflexión, ya que soportará de forma nativa el lazy-loading. Es decir, todas las imágenes con el atributo «loading=»lazy»» se cargarán de forma diferida.
El equipo de Genesis ha querido sacar partido de esta novedad y ha implementado una manera muy sencilla de hacerlo a partir de Genesis 3.2.
Aquí tienes cómo:
Snippet para dar soporte al lazy-loading de Chrome en Genesis 3.2
Añade el siguiente snippet al fichero functions.php o a tu plugin de funcionalidades:
Para ver este código y los otros 2057 snippets de esta web,
identifícate o suscríbete aquí.
Así de sencillo.
A partir de ahora todas la imágenes que tengan el atributo:
loading="lazy"se cargarán de forma diferida en las páginas visitadas desde el navegador Chrome.
En concreto, Genesis añade el atributo «loading=»lazy»» a través del filtro de WordPress wp_get_attachment_image_attributes. Por lo tanto, solo se añadirá automáticamente a las imágenes destacadas. Para añadir el atributo al resto de imágenes tendrás que usar un plugin, te dejo un par de ellos en los comentarios.
Recuerda que esta característica ahora mismo (noviembre de 2019) solo está soportada por Chrome (76 o superior). Pero es muy probable que poco a poco vaya extendiéndose a otros navegadores (Firefox, Safari, Edge…).
Además, lo más seguro es que dentro de un tiempo WordPress lo añada al core (de hecho, ya hay un ticket abierto).
Cuando esto ocurra actualizaré el tutorial para recomendarte la mejor forma de implementarlo, no te preocupes.
¿Quieres que la carga diferida funcione desde ya en todos los navegadores? Entonces corre al tutorial sobre cómo implementar el lazy loading en child themes de Genesis usando Javascript.
Conclusiones
Si quieres sacar partido a la carga progresiva de imágenes o lazy loading nativo de Chrome en tus child themes de Genesis, en este tutorial tienes el snippet de código que necesitas.
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».
¡Ojo! Añadir lazy loading no implica que dejes de optimizar las imágenes para la web. Se trata solo un complemento (muy bueno, eso sí) para reducir un poco más el tiempo de carga.
¡Todo suma! 😉
¿Alguna duda? Te leo en los comentarios.
Y si quieres darme una sugerencia para próximos tutoriales, déjamela en el formulario de contacto. Ventajas de ser suscriptor. 😉
