• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Mejora la puntuación de Web Vitals personalizando el lazy-loading de imágenes en WordPress

Aprende con este tutorial cómo mejorar la puntuación de Web Vitals, concretamente el Largest Contentful Paint (LCP), personalizando la carga diferida de imágenes.

WordPress 5.5 introdujo bastantes funcionalidades nuevas, entre ellas, el lazy-loading o carga diferida de imágenes.

Esta mejora es fantástica ya que no carga de forma innecesaria las imágenes, solo lo hace cuando el usuario hace scroll hasta dónde se encuentran.

El problema es que las imágenes que se encuentran above the fold o en la parte superior visible de la web es mejor que se carguen directamente (no de forma diferida).

Para solucionarlo a partir de WordPress 5.9 tienes un filtro que te permite personalizar a partir de qué imagen se aplica el lazy-loading.

Por defecto, WordPress aplicará la excepción solo a la primera imagen.

Pero, por ejemplo, en la página de tutoriales de Código Genesis lo que me interesa es que la excepción se aplique a 4 imágenes, ya que son las que se muestran en la primera visualización. Una es el logo y las otras 3 son las imágenes destacadas de tutoriales que aparecen en una rejilla de 3 columnas.

Te dejo las puntuaciones de esa página antes y después de aplicar este tutorial para que te hagas una idea de la mejora que puede suponer:

Antes de personalizar lazy-loading
Después de personalizar lazy-loading

Vamos a ver cómo puedes ponerlo en práctica:

Snippet para personalizar la carga diferida de imágenes en WordPress

Si tu caso es idéntico al que te contaba antes, tendrías que añadir el siguiente snippet al fichero functions.php o a tu plugin de funcionalidades:

Para ver este código y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.

Con este fragmento le indicas que en la página /tutoriales/ no aplique lazy-loading a las 4 primeras imágenes.

Obviamente puedes personalizar tanto la página como el número de imágenes tu gusto.

Esta sería otra posible situación:

Para ver este código y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.

En este caso le estás indicando que:

  • Si es la página principal no aplique lazy-loading a las 2 primeras imágenes.
  • Y si es una página de archivo o la de blog no aplique lazy-loading a las 3 primeras imágenes.

Esto son solo ejemplos, la idea es que lo ajustes a las necesidades de tu web o la de tus clientes.

Conclusiones

¿Quieres mejorar la puntuación de Google Web Vitals? Ahora ya sabes cómo mejorar el parámetro LCP (Largest Contentful Paint) excluyendo las primeras imágenes del lazy-loading.

Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.

Todo ventajas de ser suscriptor. 😉

PHP WordPress

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?