La página web promedio pesa alrededor de 3719 kB con imágenes y videos ocupando casi el 78% del peso total, de acuerdo al HTTP Archive. Esos son muchos bytes que el navegador de un visitante tiene que descargar y visualizar, y todas las tendencias apuntan a páginas aún más grandes y un incremento en el uso de imágenes para el futuro. WordPress está liderando la carga cuando se trata de compartir archivos multimedia e incorporando archivos multimedia en el diseño del sitio. Con WordPress, es fácil integrar imágenes y videos a las publicaciones, páginas, e incluso en el fondo de un tema.
Con el lanzamiento de WordPress 5.5 la lazy loading se convirtió en parte de la versión principal y hace muy fácil la implementación de esta técnica.
Sin embargo, todos esos recursos pesados hacen que descargar una página web, sea una experiencia costosa para los usuarios que tienen que esperar para descargar grandes archivos – incluyendo archivos que al inicio no son visibles – antes de ver la página. Aquí es donde entra en juego la carga diferida (Lazy Loading) de WordPress.
- ¿Qué es carga diferida y cómo funciona?
- Carga diferida de WordPress
- Mejorando la velocidad de carga de la página con plugins de carga diferida
- Impacto de carga diferida en el SEO
¿Qué Es Carga Diferida y Cómo Funciona?
Carga diferida es una técnica de optimización que carga contenido visible, pero retrasa la carga y la versión del contenido que aparece debajo del pliegue. Es el tipo de cosas que a Google le emociona, y es una técnica que debería considerar si sus publicaciones y páginas incluyen muchos videos e imágenes de alta resolución.
Carga diferida funciona así:
- El navegador construye la página web DOM sin descargar imágenes y precargar videos.
- JavaScript es usado para determinar que imágenes descargar y que videos precargar, basado en el contenido que es inicialmente visible cuando la página carga. Estas imágenes y videos son descargados y precargados como sea apropiado.
- El descargar y la versión de videos adicionales es retrasado hasta que el visitante del sitio baje a lo largo de la página y un contenido adicional aparece.
El resultado final es que las imágenes no son descargadas y los videos cargados hasta que realmente sean necesarios. Esto puede brindar un impulso significativo en el desempeño para sitios que incluyan muchas imágenes de alta resolución y videos.
Carga Diferida de WordPress
Como con muchos otros problemas de desempeño de otros sitios, cuando se trata de carga diferida de WordPress, hay un plugin que puede utilizar para arreglar el problema. En realidad, hay muchos plugins gratuitos disponibles en el directorio de WordPress que pueden ser usados para hacer carga diferida a imágenes y videos. Después de considerar una docena de plugins y poniendo varios por sus ritmos, hemos identificado cinco plugins que producen una gran mejora en el desempeño del sitio. Si usted está listo para implementar carga diferida, comience a considerar estas cinco opciones.
¿Las imágenes y videos realmente hacen más lentos a los sitios web?
Antes que nada y antes de cargar imágenes a WordPress asegúrese de que estén optimizados.
Necesitamos una calificación base para que podamos ver el impacto al agregar nuevas imágenes y videos. No tiene sentido arreglar un problema, si en realidad no hay un problema que haya que arreglar. Para probar las cosas, yo preparo una instalación estándar de WordPress en una cuenta de hosting de Kinsta. TwentySixteen es el tema activo y no se han implementado plugins de optimización ni técnicas como el almacenamiento en caché.
Así es como Pingdom website speed test califica el sitio antes de agregar cualquier imagen o video.
Como puede ver, la página es muy liviana, pesa menos de 155 kb y carga en menos de medio segundo. Es difícil encontrar una falla con estos resultados. ¿Qué pasa si cargamos la página con imágenes grandes y videos de YouTube?
El tamaño de la página subió a 1.7 MB y el tiempo de carga se ha triplicado, por tan sólo debajo de los 1.3 segundos. TwentySixteen es un tema liviano y bien programado, así que incluso con una media docena de imágenes y videos de YouTube, el sitio sigue siendo bastante liviano y se carga súper rápido. Sin embargo, podemos ver que, al agregar imágenes y videos, ha hecho mucho mayor el tamaño de la página y a reducido su velocidad considerablemente.
Mejorando la Velocidad de la Carga de la Página con Clugins de Carga Diferida
Dos plugins que aceleran considerablemente la carga de esta página son a3 Lazy Load y Lazy Load. Veamos como cada una se desempeña. También probamos muchos otros plugins, pero no mostraron una mejora considerable en el desempeño del sitio. Cuando pruebe los plugins de carga diferida, asegúrese de hacer una prueba antes y después para asegurarse de que están produciendo los resultados que está buscando.
a3 Lazy Load
a3 Lazy Load es otra opción popular de carga diferida para WordPress en el repositorio. Este plugin se encuentra activo en más de 50,000 sitios de WordPress y ha ganado una muy buena calificación de 4.7 de 5, y ha recibido casi 40 reseñas de usuarios.
Cuando se activa el plugin, este agrega una opción adicional Opciones > a3 Lazy Load. Para propósitos de prueba, no moví ni una de las opciones, con una excepción. Si usa la opción de color de fondo de carga, para que el color del marcador sea igual al color de la página de fondo. Con este cambio, y las opciones base, el sitio tuvo un buen desempeño.
Estamos de vuelta a un tiempo de carga por debajo de medio segundo. Esto es destacable, considerando el número de imágenes y videos incluidos en el sitio web.
Comparando los resultados de las pruebas
Sin duda alguna, usted notará que el tamaño de la página y el número de peticiones ha disminuido considerablemente, ¿Qué está causando esta dramática diferencia? Pingdom brinda una imagen del tamaño del contenido, y una rápida comparación provee la respuesta. Primero, así es como luce la imagen del tamaño del contenido con a3 lazy Load activado.
La huella de la imagen es pequeña, con tan sólo 150 kb. Así es como luce la imagen del contenido con un total de carga de 2.0 MB.
El script, HTML, CSS y otros tamaños de contenido son casi idénticos. Sin embargo, el tamaño de la imagen es de 1.86 MB – básicamente el tamaño de la versión de resolución completa es la primera imagen de la página – en lugar de solo 150 kb. Así que, ¿Qué está pasado?
Como mencioné anteriormente, WordPress automáticamente provee una variedad de tamaños de imagen y el navegador elige y visualiza la versión más pequeña posible basada en el tamaño en la que la imagen será representada en la pantalla. A3 Lazy Load deja intacto el comportamiento predeterminado de WordPress y el resultado es que se entrega un archivo de imagen mucho más pequeño.
Lazy Load
La segunda opción es Lazy Load, que es un plugin gratuito creado por el equipo de WP Rocket. Actualmente se encuentra activo en más de 10,000 instalaciones con una calificación de 4 de 5. Si está buscando una opción simple de Lazy Load para WordPress, con una buena velocidad, esta es una buena opción.
El plugin funciona con thumbnails, todas las imágenes en el contenido de una publicación o en el texto de un widget, avatars y smilies. La gran ventaja de este plugin es que no hay una biblioteca de JavaScript como la de jQuery que esté siendo usada y el script pesa menos de 10 KB. No hay opciones para configurar, simplemente instale el plugin y lazy loading hará el trabajo.
Native Lazy Loading
En los últimos años, ha habido un empuje para integrar la funcionalidad de lazy loading directamente en los navegadores web. En este momento, lazy loading nativa está disponible en los navegadores basados en Chromium como Chrome y Brave, así como en Firefox.
Lazy loading es excelente para el rendimiento del sitio porque no depende del código Javascript en línea o de scripts externos. Para agregar lazy loading a tu sitio, simplemente agrega un atributo loading=lazy a las imágenes y iframes que desees cargar.
Google ha desarrollado el plugin Native Lazyload para facilitar este proceso. Después de activar el plugin, WordPress insertará automáticamente el atributo de loading en tus etiquetas de img e iframe.
Lazy Load for Videos
Si sólo le preocupa hacer lazy load a los videos, también le recomendamos checar el plugin de Lazy Load for Videos. Mientras que los plugins anteriores hacen esto también.
Impacto de Lazy Loading en el SEO
Sin importar que plugin termine utilizando para el lazy loading en WordPress, es importante que no dañe su SEO. Hay dos cosas que necesita chequear muy bien.
- Asegúrese de que Google aún pueda buscar sus imágenes cargadas con lazy loading. Fácilmente puede chequear esto utilizando la herramienta de “Fetch as Google” bajo la sección de crawl en el Google Search Console. Si aún puede ver las imágenes en el código fuente entonces es muy probable que todo esté bien.
- Asegúrese de que siga utilizando texto alternativo en sus imágenes ya que esto es importante para el posicionamiento de la búsqueda en Google image.
Alt text is extremely helpful for Google Images — if you want your images to rank there. Even if you use lazy-loading, you know which image will be loaded, so get that information in there as early as possible & test what it renders as.
— John is updating his unnamed profile name #ok (@JohnMu) September 4, 2018
Resumen
Con el amplio soporte delazy loading nativa del navegador en el horizonte, recomendamos usar un plugin como Native Lazy Load de Google para establecer una línea base de lazy loading para tu sitio.
Con la compatibilidad con Chrome y Firefox, y la compatibilidad con Safari en el futuro, lazy loading nativa del navegador debería ser todo lo que necesitas para con lazy loading tus imágenes y iframes. Dicho esto, si buscas una opción basada en JavaScript que también esté dirigida a los navegadores más antiguos, a3 Lazy Load es una gran opción.
Carga diferida es solo una técnica que puede usar para optimizar su sitio de WordPress. Sin embargo, tiene el potencial de tener un impacto profundo en la velocidad del sitio, si usted utiliza muchas imágenes y videos. Aún así, una vez que haya implementado lazy loading, hay varias técnicas adicionales que podría considerar e implementar para ofrecer el desempeño más rápido posible en su sitio web.
¿Nos faltó alguna solución de lazy load para WordPress? Si es así, por favor comparta en la parte de abajo.
Jon es el Director de Operaciones de Kinsta y colabora a diario con los equipos de ventas, atención al cliente y soporte técnico de Kinsta. Jon es un hombre de familia. Así que cuando no está golpeando frenéticamente las teclas de su portátil, suele estar ayudando a uno de sus hijos a arreglar una bicicleta o configurando Netflix para un niño impaciente en edad preescolar.
Deja una respuesta