Optimización de imágenes en WordPress para mejorar rendimiento

  • Autor Autor Ro101
  • Fecha de inicio Fecha de inicio
R

Ro101

Lambda
Buenas gente,

Como comenté en otro post, a mi también me llegó el mensaje de "recomendación" de Adsense:

Publicar las imágenes a escala en sus sitios
Hemos analizado algunas de las páginas de sus sitios que publican la mayoría de los anuncios y hemos detectado problemas de velocidad de página que crean una experiencia muy negativa para algunos usuarios. Las páginas que se visitan con frecuencia en sus sitios obtienen imágenes con una resolución mucho mayor que el tamaño al que se muestran, con lo que malgastan ancho de banda y recursos del cliente.

La realidad es que si bien dice que es una recomendación, tarde o temprano van a terminar penalizando los sitios que no cumplan con este tipo de políticas. En el foro de momento no encontré ninguna ayuda para realizar este tipo de cambios que nos solicitan, y como ForoBeta me dio tanto, decidí compartir lo que investigué y empecé a poner a prueba para realizar los cambios que Google sugirió. Aclaro que esto es solo para Wordpress ya que es el CMS que uso.

Básicamente lo que Google sugiere es que en vez de publicar imágenes en tamaño original y que luego el HTML o el PHP haga el resize (como hace Wordpress), publiquemos las imágenes en el tamaño que corresponda a nuestro theme y mostramos en finalmente en el sitio. De esta forma el usuario final se ahorra tiempo de carga y tanto ellos, como Google, nuestro servicio de hosting y nosotros, estamos contentos.

Tengo algunos sitios con miles de imágenes, por lo que la sugerencia de Google era un tanto difícil de complacer. Esto es lo que encontré para hacer un resize de todas las imágenes:

ayudawordpress.com/reduce-el-tamano-de-wordpress-con-smush-it/

Es un Plugin que hace uso de una herramienta de Yahoo para resizear cada una de las fotos que tengamos en nuestra web. En sitios con un gran número de imágenes puede llevar su buen tiempo. Lo recomendable es que tomen un backup de la base de datos y bajen las carpetas por FTP que contienen las imágenes a su disco antes de realizar cualquier cambio. El smush it para WP lo que hace es tomar la imágen anterior, hacerle un resize y reemplazarla. Todavía no lo corrí en mis sitios, voy a esperar al fin de semana para trabajar un poco más tranquilo en esto.

Por otro lado encontré un plugin que ya puse en funcionamiento para todos mis sitios y corre 10 puntos con la última versión de WP:

WordPress › Resize images before upload « WordPress Plugins

Muy sencillo de poner en funcionamiento. El tamaño de la imágen lo setean en la configuración de multimedia de WP y el plugin entra a funcionar automáticamente cada vez que cargan una imágen desde el uploader de siempre.

Si alguien tiene alguna otra idea o encontró algo mejor se agradece el compartirlo! :encouragement::encouragement:
 
Es la primera vez que veo ese mensaje... ya lo que faltaba tambien jeje
 
De seguro estas activo en el sistema webmaster de google o recomendaciones s para mi sitio de ADSENSE
para que te mande recomendaciones sobre tu sitio
es algo normal de hecho pienso que es bueno que te notifiquen cualquier error .😛irate:
 
cabe mencionar que esto no corre para blogger que esto lo hace automaticamente! 🙂 Wordpress 0 - Blogger 1

Una de las ventajas de blogger!..
 
A mi me llego uno similar pero por todo el sitio 😕
 
Gracias por la info, a tenerlo en cuenta!
 
Creo que están equivocados...

Lo que Google les sugiere es que cuando insertan fotos en los posts de WordPress que no redimensionen la foto Una vez agregada, sino que usen una foto de uno de los tamaños por defecto... Me explico: Cuando subes una foto a WordPress, este la toma y guarda 3 copias: una en tamaño original (digamos, 1000px), otra en tamaño mediano (por ejemplo, 500px) y una miniatura (de 100x100).

Cuando Google te recomienda que pongas las imágenes a tamaño real te está diciendo que insertaste la imagen más grande (la de 1000px) y luego fuiste a la foto y la "achicaste" con el editor de entradas de WordPress. La imagen sigue siendo de 1000px, pero visualmente la dejaste de 600px (por poner un ejemplo). Si esa imagen pesa 1 mega, tus usuarios verán una foto de un mega "apretujada" para caber en 600px porque tú la achicaste.

Lo que debes hacer es subir las fotos del tamaño que correspondan, o, en su defecto, programar una línea de código donde le digas a WordPress que genere, además de las 3 fotos por defecto, una cuarta foto de un tamaño personalizado cada vez que subes una foto.

Si aún no se entiende, avísenme y armo una explicación que se entienda...

Un abrazo.

PD: Blogger no hace eso automáticamente. Es más, Blogger sufre ese problema casi siempre, puesto que al vincular una imagen, también ofrece la opción de redimensionarla.
 
Sería el colmo que Google penalice también por esto, estarían peor que la inquisición. Yo creo (y espero) que son sólo sugerencias de ellos para que el sitio cargue más rápido y sea una "mejor experiencia para el usuario", pero no creo que terminen penalizando.

Gracias por la info, voy a tomar nota del plugin y verificaré mi sitio.
 
Mmm que interesante, yo no lo he visto aún ....
 
Creo que están equivocados...

Lo que Google les sugiere es que cuando insertan fotos en los posts de WordPress que no redimensionen la foto Una vez agregada, sino que usen una foto de uno de los tamaños por defecto... Me explico: Cuando subes una foto a WordPress, este la toma y guarda 3 copias: una en tamaño original (digamos, 1000px), otra en tamaño mediano (por ejemplo, 500px) y una miniatura (de 100x100).

Cuando Google te recomienda que pongas las imágenes a tamaño real te está diciendo que insertaste la imagen más grande (la de 1000px) y luego fuiste a la foto y la "achicaste" con el editor de entradas de WordPress. La imagen sigue siendo de 1000px, pero visualmente la dejaste de 600px (por poner un ejemplo). Si esa imagen pesa 1 mega, tus usuarios verán una foto de un mega "apretujada" para caber en 600px porque tú la achicaste.

Lo que debes hacer es subir las fotos del tamaño que correspondan, o, en su defecto, programar una línea de código donde le digas a WordPress que genere, además de las 3 fotos por defecto, una cuarta foto de un tamaño personalizado cada vez que subes una foto.

Exacto es un problema muy comun en sitios de wordpress con plantillas viejas, tambien se presenta con diseños responsivos que utilizan % en vez de medidas exactas.

Lo que debes hacer es en tu plantilla de wordpress en vez de utilizar siempre el mismo thumbnail, necesitas crear via functions un thumbnail especial para cada area que se requiera.

Es aquí donde entra el buen diseño del sitio, si tienes una plantilla que necesita crear (llamar) 5-15 diferentes tamaños de imagen unicos para las distinas areas del sitio, tu capacidad en el disco duro del servidor se va a llenar mas rapido, aparte que utilizarias mas recursos cada que agregas una imagen en wordpress por que creara la medida por default mas aparte las otras medidas que necesitas.

Pero recuerda que mas vale tener imagenes a medida, que tener que decirle al servidor que procese una reduccion de tamaño cada que muestre una imagen (thumbnails).

Saludos y espero todo ande bien en su vida.
 
cabe mencionar que esto no corre para blogger que esto lo hace automaticamente! 🙂 Wordpress 0 - Blogger 1

Una de las ventajas de blogger!..

Tienes razon :encouragement:
 
Google ya penaliza a los sitios que cargan lento. Como dice redlodyas, el problema puede deberse a múltiples factores, incluyendo un theme con un diseño responsivo.

Si te preocupa que puedas resultar penalizado y no está en ti la opción de mejorar el tema de las fotos, entonces mejora otros aspectos de optimización de tu sitio web para que, por último, reduzcan en otras áreas el tiempo de carga.
 
Creo que están equivocados...

Lo que Google les sugiere es que cuando insertan fotos en los posts de WordPress que no redimensionen la foto Una vez agregada, sino que usen una foto de uno de los tamaños por defecto... Me explico: Cuando subes una foto a WordPress, este la toma y guarda 3 copias: una en tamaño original (digamos, 1000px), otra en tamaño mediano (por ejemplo, 500px) y una miniatura (de 100x100).

Cuando Google te recomienda que pongas las imágenes a tamaño real te está diciendo que insertaste la imagen más grande (la de 1000px) y luego fuiste a la foto y la "achicaste" con el editor de entradas de WordPress. La imagen sigue siendo de 1000px, pero visualmente la dejaste de 600px (por poner un ejemplo). Si esa imagen pesa 1 mega, tus usuarios verán una foto de un mega "apretujada" para caber en 600px porque tú la achicaste.

Lo que debes hacer es subir las fotos del tamaño que correspondan, o, en su defecto, programar una línea de código donde le digas a WordPress que genere, además de las 3 fotos por defecto, una cuarta foto de un tamaño personalizado cada vez que subes una foto.

Si aún no se entiende, avísenme y armo una explicación que se entienda...

Un abrazo.

PD: Blogger no hace eso automáticamente. Es más, Blogger sufre ese problema casi siempre, puesto que al vincular una imagen, también ofrece la opción de redimensionarla.


Es justamente lo que explicaba. El problema está en utilizar alguno de los tamaños de WP en vez de cargar la imagen ya redimensionada. Justamente lo que hacen los plugins que compartí es dejar la imágen en el tamaño que especifiquemos, redimensionando y guardandola en esa nueva resolucion.

Por otro lado, ya no se concibe el armar páginas web con medidas absolutas, si no se utilizan medidas relativas, entonces se va a poder visualizar en ciertos monitores y no en todos los dispositivos. 😛7:
 
Exacto es un problema muy comun en sitios de wordpress con plantillas viejas, tambien se presenta con diseños responsivos que utilizan % en vez de medidas exactas.

Lo que debes hacer es en tu plantilla de wordpress en vez de utilizar siempre el mismo thumbnail, necesitas crear via functions un thumbnail especial para cada area que se requiera.

Es aquí donde entra el buen diseño del sitio, si tienes una plantilla que necesita crear (llamar) 5-15 diferentes tamaños de imagen unicos para las distinas areas del sitio, tu capacidad en el disco duro del servidor se va a llenar mas rapido, aparte que utilizarias mas recursos cada que agregas una imagen en wordpress por que creara la medida por default mas aparte las otras medidas que necesitas.

Pero recuerda que mas vale tener imagenes a medida, que tener que decirle al servidor que procese una reduccion de tamaño cada que muestre una imagen (thumbnails).

Saludos y espero todo ande bien en su vida.


Excelente, lo pondre en practica, gracias!

Saludos!
 
Atrás
Arriba