Optimización de imágenes en WordPress con lazy loading y formato Webp

Optimización de la imagen en WordPress, se refiere al proceso de optimización de imágenes para mejorar su rendimiento y reducir su tamaño de archivo sin comprometer significativamente su calidad visual.

Veamos algunas técnicas y prácticas destinadas a mejorar la velocidad de carga de las imágenes en un sitio web WordPress. Por lo general, esto se traduce en una mejor experiencia de usuario y un mejor posicionamiento en los motores de búsqueda (porque a los motores de búsqueda no les gustan los sitios web de carga lenta).

Veamos algunas técnicas comunes para optimizar imágenes en WordPress.

Consiste en reducir el tamaño del archivo de una imagen sin perder demasiada calidad visual. Las imágenes se pueden comprimir mediante varios métodos y utilizando herramientas de compresión de imágenes en línea, plugins de WordPress o software de optimización de imágenes.

Las imágenes deben ajustarse a sus dimensiones de visualización en el sitio web, para evitar el uso innecesario de ancho de banda. Dicho esto, todavía tratan de mantener su cantidad de tamaños de corte a un mínimo, otros plugins, incluso temas pueden registrar tamaños de corte adicionales a su WordPress, por suerte se puede desactivar ellos, así que ten cuidado.

Recortar le permite eliminar cualquier parte no deseada de una imagen que no sea esencial para el contenido. WordPress tiene 3 tamaños de recorte incorporados, miniatura, mediano y grande. Sólo el tamaño miniatura tiene una casilla de verificación que permite recortar a las dimensiones exactas, los otros tamaños son, de hecho, cambiar el tamaño proporcionalmente. Hay una manera de cambiar las dimensiones desde la pantalla de administración. Visita Configuración > Medios para cambiarlas.

Consejo profesional: Tendrá que regenerar sus miniaturas (es decir, todos los tamaños más pequeños que el original) para que las imágenes existentes se recorten a los tamaños de la configuración de medios. Vea más sobre controlar el tamaño de las imágenes en WordPress.

Nota: Si realmente desea tener imágenes de alta resolución en su sitio, por la razón que sea, intente mantener las dimensiones al ancho o alto máximos de su tamaño de recorte más grande.

Elegir el formato de archivo adecuado para las imágenes puede afectar significativamente al tamaño del archivo y a la velocidad de carga. JPEG suele ser adecuado para fotografías e imágenes complejas, mientras que PNG es mejor para imágenes con fondos transparentes o gráficos sencillos. Con WebP puedes tener lo mejor de ambos mundos, tamaños de archivo reducidos y muy poca pérdida de calidad visual.

Con la carga lenta, las imágenes se cargan sólo cuando se hacen visibles en el punto de vista del visitante, en lugar de cargarse todas a la vez. Esta técnica reduce el tiempo de carga inicial de la página, especialmente en páginas con muchas imágenes. Desde WordPress 5.5, la carga lenta es una función predeterminada.

La caché consiste en almacenar imágenes en el navegador del visitante, lo que permite que las siguientes cargas de la página recuperen las imágenes localmente en lugar de descargarlas de nuevo. Esto reduce la carga del servidor y acelera la carga de la página. Utilice plugins como WP Super Cache (que es lo que estamos utilizando en wplake.org), W3 Total Cache o LiteSpeed Cache para habilitar la caché de su sitio web.

Estas técnicas no son realmente tan complejas, sólo requieren algunos pasos más. Pero si las utiliza, es probable que también obtenga otros beneficios adicionales. Veámoslas.

Utilizar una CDN ayuda a entregar imágenes de forma más eficiente. Por supuesto, una CDN es mucho más que un servicio de entrega de imágenes. En pocas palabras, acelera su sitio, almacenando copias en servidores distribuidos por diferentes ubicaciones geográficas. Esto reduce la distancia y la latencia entre el navegador del usuario y el servidor de imágenes.

Existen varios plugins para WordPress, como Smush, Imagify y EWWW Image Optimizer, que automatizan los procesos de optimización de imágenes. Siempre recomiendo probarlos primero en un entorno de prueba hasta que sepas lo que hace. Porque si no estás seguro de lo que hace, podría, por ejemplo, borrar tus imágenes originales (significa que cuando pruebes otra cosa, las nuevas imágenes no se recortarán a partir de las originales, sino a partir de una versión más pequeña de la imagen). Además, estos plugins pueden encargarse de tareas como la compresión, el redimensionamiento, la carga lenta y el almacenamiento en caché, simplificando el flujo de trabajo de optimización.

Consejo profesional: Recuerde, tenga cuidado de no anular o duplicar pasos. Por ejemplo, si tiene un plugin de optimización de imágenes y también ofrece almacenamiento en caché, no lo active si ya tiene un plugin de almacenamiento en caché en uso.

Muchas veces es realmente un escenario de prueba y error cuando se hace la optimización de la velocidad de página y optimizaciones de imagen, pero tenga en cuenta que si su sitio no contiene una gran cantidad de imágenes, entonces el impacto no será tan grande como si fuera lo contrario.

Mediante la aplicación de estas técnicas, puede mejorar significativamente la velocidad de carga y el rendimiento de las imágenes en su sitio web de WordPress, lo que resulta en una mejor experiencia de usuario y potencialmente mejor posicionamiento en los motores de búsqueda. Hay muchas otras técnicas que puede utilizar para optimizar su sitio web WordPress porque, en última instancia, un sitio web rápido mejora la UX y, como ya debería saber, a los motores de búsqueda les encanta.

Espero que este artículo le haya resultado útil.

¡Feliz optimización!