WP Smush: Tutorial completo

Una página web que tenga imágenes sin optimizar es una web lenta. Y una web lenta no solo afecta a la experiencia del usuario sino también a tu posicionamiento web

Por eso, es muy importante redimensionar las imágenes, para reducir su tamaño y por tanto aumentar la velocidad de carga de nuestro sitio.

Existen numerosos plugins que nos permiten reducir el tamaño de nuestras fotos automáticamente, hoy quiero hablaros del que a mi parecer es el mejor en este sector.

WP Smush WordPress

Smush es un plugin freemium (Gratis con funcionalidades añadidas en su versión de pago) el cual nos permite de una forma muy sencilla optimizar el tamaño de nuestras imágenes, ya sea mediante compresión o redimensionando tu tamaño.

Características 

• Nombre: Wp Smush
• Editor: WPMU DEV
• Periodo de actualización: Mensual
• Instalaciones: +1 millón activas
• Valoración: 5 Estrellas (4.500 votos)
• Coste: Freemium (Versión de pago desde 19e/mes)

Descarga e Instalación

La versión gratuita de este plugin podemos descargarla desde el repositorio de WordPress

La versión de pago podemos adquirirla junto con el resto de programas de WPMU DEV desde su web oficial: https://premium.wpmudev.org/

Configuración Inicial

Una vez hayamos instalado el plugin si accedemos a la pestaña Smush desde el menú izquierdo de nuestro panel de administrador en WordPress podremos iniciar la configuración inicial del programa.

Compresión automática

Al activar esta opción le indicamos al plugin que queremos que cada vez que subamos una imagen a nuestro sitio, Smush pueda optimizarlas y comprimirlas automáticamente para que no tengas que hacerlo manualmente.

La activamos y damos a siguiente.

Metadatos EXIF

Cuando sacamos una foto se almacenan una serie de metadatos en esa imagen como puede ser: La fecha y hora, ubicación, distancia focal etc.

Todos estos datos que no son de utilidad para nuestro sitio web podemos eliminarlos y de esta manera reducir el tamaño de la imagen.

¡CUIDADO!

Es posible, que si queremos posicionar nuestra web a nivel local nos interese que las imágenes estén geolocalizadas, ya que es un factor de posicionamiento.

Si es nuestro caso debemos desactivar esta opción para evitar que esos metadatos sean eliminados.

Lazy load

Esta funcionalidad es bastante útil para mejorar la velocidad de carga de nuestra web.

Lo que hace básicamente es cargar de manera diferida las imágenes, por lo que conforme el usuario vaya haciendo scroll por nuestra página las imágenes se irán cargando de manera progresiva.

Uso de Datos

Si queremos enviar datos de manera anónima a los chicos de WPMU DEV para mejorar el plugin podemos activarlo.

Hay que tener cierta precaución con esto, y comprobar que no se estén enviando demasiadas peticiones externas que puedan afectar a la velocidad de carga de la página.

Eso puedes comprobarlo con herramientas como GT Metrix

Reducción por Lotes

Una vez hayamos finalizado la configuración inicial del programa podemos proceder a reducir el tamaño de las imágenes que tuviéramos previamente subidas en nuestro WordPress.

Reducción por directorio

Si tuviéramos una carpeta en el directorio de nuestro sitio con imágenes también podemos reducir su tamaño con Smush.

Para hacer esto debemos ir a la pestaña de reducción por directorio y elegir la carpeta donde se encuentran estas imágenes.

Integraciones

Una de las ventajas que tiene Smush con respecto a otros plugins de compresión de imágenes, es la integración con los principales maquetadores.

Gutenberg

Si utilizamos el nuevo constructor de bloques que integra por defecto WordPress 5.0 podemos activar esta pestaña para reducir manualmente aquellos bloques que contengan alguna imagen.

WPBakery Page Builder

Este constructor visual es uno de los más utilizados en las plantillas multipropósito y ecommerce.

Si nuestra web lo utiliza podemos activar esta funcionalidad.

Configuración de la carga Diferida

Si hemos activado en la configuración inicial el Lazy load, desde esta pestaña podemos afinar dicha configuración.

Para ello nos permite elegir el formato de imagen que queremos que incluya en la carga diferida (JPG, PNG, GIF o SVG)

Qué tipo de ubicación queremos que se vea afectado por esta carga en diferido.

Los efectos de animación con los que van a aparecer las imágenes una vez cargadas.

Si queremos excluir alguna sección especifica de nuestra web a la que no queremos que le afecte esta funcionalidad también podemos hacerlo desde aquí.

Alguno de los tipos de contenidos que podemos excluir o incluir son:

• Página de inicio
• Blog
• Páginas
• Entradas
• Archivos
• Categorías
• Etiquetas

También podemos indicar la URL exacta que queremos excluir.

O incluso podemos indicar clases e ID de CSS.

Por último, pero no por ello menos importante, tenemos la posibilidad de indicarle donde queremos cargar los scripts que ejecuten el Lazy Load.

Por defecto viene en el Pie de página, te recomiendo que siempre que sea posible, cargues estos scripts desde ahí.

Otras herramientas

Este plugin también nos permite activar otras funcionalidades que pueden ser muy interesantes como, por ejemplo:

Detección de cambio de imagen: Al activar esto nos aparecerá un mensaje en aquellas imágenes que sean demasiado grandes o pequeñas para el contenedor en el que está colocado.

Este mensaje solo lo veremos nosotros al estar logueados como administrador, nunca el usuario visitante.

Restauración por lotes: En caso de que hayamos cometido algún error rescalando las fotos o cambiando sus dimensiones podemos utilizar esta funcionalidad para restaurar las miniaturas a su estado original.

Funcionalidades Premium

Si estás pensando en adquirir Smush Pro te interesa saber que funcionalidades extras incluye respecto a la versión gratuita:

Super-reducción por compresión: Optimiza el tamaño de las imágenes hasta 2 veces más que con la reducción normal, sin perder calidad en la imagen.

WPMU DEV CDN compatible con WebP: Puedes cargar las imágenes de tu web desde la CDN de WPMU DEV y así acelerar el proceso de carga de tu página.

Compresión por lotes ilimitada: Quita la restricción por cantidad en la compresión por lotes y aumenta el tamaño máximo de imagen permitido de 5MB a 32MB

Reducir las imágenes originales a tamaño completo: Por defecto Smush comprime las miniaturas y los tamaños de imágenes generados por WordPress, con la versión pro también puedes reducir el tamaño de la imagen original.

Backup de las imágenes originales: En caso de que actives esta funcionalidad se creará una carpeta con una copia de las imágenes originales (Ten en cuenta que duplicaras el tamaño de tu biblioteca de medios)

Convertir de PNG a JPEG: Si subes una fotografía en PNG, Smush podrá detectar si al convertirla a JPG puede reducir aún más su tamaño, y en caso de que así sea, lo hará.

Integración con Next Gen Gallery: Si utilizas esta galería de imágenes en tu web, puedes beneficiarte de la integración con Smush pro.

Optimizar la velocidad de carga es fundamental, en nuestro servicio de diseño web en malaga realizamos una optimización WPO completa y para ello utilizar herramientas como Smush harán que tu web cargué rápido como el rayo.

¿Y tu, optimizas? Te leo en los comentarios