Hay una obsesión por tener una web veloz que sea digna de un buen resultado y del agrado de las pruebas de Google Page Insights y GTMetrix.
Algunas de las medidas para mejorar los resultados van dirigidas a la optimización de imágenes.
Las imágenes se puede optimizar de muchas formas:
- Reducir el peso de las imágenes
- Adaptar el tamaño
- Servirlas desde otro servidor
- Pasarlas al formato WEBP
- Hacer una carga diferida de imágenes. (Lazy loading)
Antes de hablar más sobre el lazy loading, recuerden que no todas las web son iguales, lo que le sirve a Pedro, no necesariamente le sirve a Pablo y la optimización de imágenes no es la excepción.
Table of Contents
Tipos de Lazy Loading
Hay dos tipos de Lazy loading, uno de ellos es por medio de la implementacioń de un código javascript bastante liviano.
La otra opción de lazy loading es la opción nativa donde la implementación de Lazy Loading esta a cargo del navegador.
El detalle es que no todos los navegadores permiten la carga diferida nativa por lo que esta función no garantiza que el lazy loading se implemente en el 100% de los casos por la variedad de navegadores disponibles para los usuarios.
Plugins como Flying Images y PerfMatters tiene ambas opciones en caso de querer probar lo mencionado.
¿Debería Usar Lazy Loading?
Yo no te voy a decir a ciegas si debes usar Lazy Loading o no pero si te voy a decir sobre cómo averiguarlo.
- Haz una prueba de una página de tu sitio en Google Page Insights. Revisa los resultados y las indicaciones de mejora dadas.
- Descarga Lazy Load – Optimize Images por WP-Rocket y activa el Lazy Loading.
- Limpia el cache del sitio o de la página usada en el paso #1.
- Ahora realiza una nueva prueba en Google Page Insights y verifica si hubo una mejora en los resultados o recomendaciones.
Si no ves mejora, entonces no pienses tanto en el Lazy Loading.
Un sitio que no usa muchas imágenes, quizas no deberia de preocuparse tanto por implementarlo.
Palabras de un Experto
WPJohhny en uno de sus artículos sobre velocidad de WordPress dice lo siguiente sobre Lazy Loading:
- No uses Lazy Loading por simplemente aumentar el resultado de Google Page Insights.
- No uses Lazy Loading si tienes un CDN.
- No uses Lazy Loading si tienes pocas imágenes en tu sitio.
- No uses Lazy Loading si tu pagina no tiene problemas de velocidad.
Si tienes muchas imagenes o si estas son muy pesadas, quizas deberías considerar la implementación del Lazy loading.
Cómo Implementar el Lazy Loading
En mi caso específico, no veo prudente hacerlo debido a que las imágenes ya están optimizadas, son livianas, tamaños pequeños y están en la parte superior del blog.
Estos son algunos plugins que debes considerar:
- Native LazyLoad por Google
- a3 Lazy Load por a3rev Software
- Jetpack de WordPress.com
- Lazy Load por WP-Rocket
- PerfMatters
- Flying Images por WP Speed Matter
Piensalo bien y recuerda que el Lazy Loading será muy pronto una función nativa en WordPress. 5.5
Lazy Loading para Videos
Recuerda que podemos aplicar Lazy Loading para los videos, es decir los videos mostraran una miniatura y estos cargarán únicamente si el visitante hace click en el video
Esto lo puedes lograr usando algunos de los siguientes plugins:
Estos fueron mis resultados sin realizar ninguna optimización a los videos de YouTube
| feature=oembed | 27.1KB |
| www-player.css | 46.5KB |
| www-embed-player.js | 93.8KB |
| base.js | 532KB |
| fetch-polyfill.js | 2.75KB |
| remote.js | 36.8KB |
| embed.js | 7.88KB |
| generate | 0 |
| POST | 50B |
| Total | 747.33 KB |
Estos fueron mis resultados después de aplicar “lazy loading” a los videos de YouTube con el plugin proporcionado de WP Rocket
El script para aplicar lazy loading a las imagenes, a los iframes y a los videos y el que reemplaza los video con un Thumbnail pesa unicamente:
3.23 KB
Mientras que el botón por defecto pesa 1.19 KB
Por lo que podemos decir con seguridad que vale la pena aplicar esta optimización a tu sitios.
Recuerda realizar pruebas en GTMetrix para determinar cuál será el plugin titular en tus sitios
Artículos Relacionados
Espero que esta publicación haya sido de ayuda en la optimización de tu sitio de WordPress
Puedes leer otras publicaciones para aprender más sobre las optimización de sitios de WordPress
- Limpiar la Tabla wp_Options
- 3 Plugins de Cache para WordPress
- Reseña sobre Perfmatters
- Cómo Desactivar el HeartBeat de WordPress
- Cómo Optimizar la Base de Datos en WordPress
- Servir Imágenes WEBP en WordPress
- Optimización de Imágenes en WordPress
Si tienes preguntas, puedes escribirme por medio de mis redes sociales
