Reducir el tamaño de las imágenes para mejorar la velocidad de tu WordPress

¿Sabéis que aproximadamente el 30-60% del peso de la web son imágenes? Este número sorprende y nosotros queremos que mejores la velocidad de tu web haciendo más ligero su descarga. Vamos a intentar bajar de 2 segundos, un tiempo normal, y llegar lo más cercano a un 1. Existen muchos factores que afectan en que tu página sea más rápida o más lenta pero está claro que uno de esos factores es la velocidad de carga que se ve directamente afectada por la cantidad de imágenes que tengas en la web. Recomiendo hasta reducir el tamaño del logo y lo vamos a hacer sin pedir nada de calidad. Cuando digo nada de calidad quiero decir que va a ser inapreciable y nadie navega por la web ni con una lupa ni con una pantalla 8K.

Primero quiero que veas que porcentaje de tu web se descarga en imágenes, para ello utiliza una de estas páginas:

En vez de ponerte 20 herramientas te dejo 2 porque en este blog se intenta ir al grano y no llenarlo de paja y que tardes años en leerlo.

Con esas 2 herramientas vas a poder comparar perfectamente resultados y ver cuando “pesa” tu web. Nosotros hacemos también la prueba:

mejorar la carga web wordpress

 

En nuestro caso aún no tenemos más que el logo, pero si podemos fijarnos en el peso 736, nuestro servidor el host está en Canadá por lo que perdemos algo de velocidad por conectar desde Europa pero aun así el resultado no está mal. Este post tiene 2 imágenes, ambas ocupan 436KB, una vez publicado el post pesará la suma 736+436= 1,17MB ahora cuando haya un montón de publicaciones cada una con sus imágenes entonces si la hemos liado. Si te das cuenta aunque parece una tontería no lo es estamos multiplicando, no solo aumentando, el peso de nuestra web cada vez que subimos una imagen ese peso afecta directamente a la velocidad de carga y la velocidad de carga en la experiencia del usuario.

 

El tiempo de carga afecta a la experiencia de usuario

mejorar la velocidad de carga web wordpress

Y tanto es así que Facebook, Amazon y grandes empresas se preocupan muchísimo por esto. Amazon es quizá una de esas empresas que llevan al extremo de la obsesión la optimización, su página web tiene el mínimo código posible y el mínimo de interacciones. Google además valora para el posicionamiento en buscadores la velocidad de la web, por el momento es un factor menor pero parece ser que la tendencia es que va a continuar creciendo con el tiempo. Fijaros en estos datos de interés y como se pesa el tiempo que tarde en cargar una web en dinero:

  • El tráfico de Facebook cae de un 3-6% cuando la web se retrasa al cargar 0,5-1 segundos.
  • Tan solo un retraso de carga de 0,1 tiene un impacto en pérdidas cercano al 1% en Amazon.
  • Un retraso en Yahoo al cargar una noticia de 0,5 segundos supone un 5% de tráfico perdido.

En la mayoría de casos estamos hablando de bien datos pequeños y no fáciles de medir como los de Amazon. ¿Cómo saben que ese 1% es por la velocidad de carga y no por los tipos de productos en el mercado? O ¿Por la depresión de los mercados? Sinceramente creo el dato que facilitan nos dice que tiene efecto y hasta un 0,1% de facturación de Amazon es dinero, y mucho. Facebook su web se basa en php tiene procesos más pesados y aunque van cambiando partes de su web aún tienen que mejorar son según Alexa http://www.alexa.com/topsites la tercera página con más tráfico del mundo y por ello el tiempo de carga cambia y esto afecta a los usuarios. Estos son solo algunos ejemplos de cómo afecta la velocidad de carga web en grandes empresas. Nosotros no tan grandes queremos optimizar porque nuestras webs sí que tardan en mi caso 3 segundos y es difícil de optimizar mas pero lo que si podemos hacer es no empeorar.

 

Comprime o reduce todas las imágenes con TinyPNG

Para cada entrada de blog que realizo comprimo todas mis imágenes antes de subirlas con TinyPNG https://tinypng.com/ que resulta tienen una forma genial de ahorrarnos tiempo a los usuarios WordPress através de un plugin y por eso os lo traigo hoy aquí.

mejora-en-la-carga-de-wordpress-velocidad

Fijate en la cantidad ahorrada en KB solo por haber comprimido las imagenes de esta entrada de blog!

Link al plugin: https://wordpress.org/plugins/tiny-compress-images/

Con este plugin cada imagen que subas al servidor va a ser automáticamente reducida con resultados que te aseguro te van a sorprender, algunas imágenes disminuyen su tamaño hasta un 70-80% lo cual es todo ahorro para evitar que nuestro sitio cargue más lento. Recomiendo encarecidamente su uso. Además de esta magnífica funcionalidad, si quieres comprimir todas las imágenes que ya tienes en tu biblioteca de media puedes hacerlo. No hace falta que lo tengas instalado desde el comienzo en tu blog, este plugin coge todas las imágenes las comprime y las deja en su sitio con el mismo nombre y la misma meta información.

Tras probar múltiples plugins algunos de ellos muy conocidos como WP Smush (https://wordpress.org/plugins/wp-smushit/), el cual debo decir que no me ha gustado nada, TinyPNG nunca falla y es muy superior a la hora de comprimir que WPSmush un plugin que no estoy seguro de si le ha pasado algo similar a los de Yoast que funcionaban muy bien después son vendidos al mejor postor y se vuelven malísimos.

 

Apuntes

En esta entrada solo pretendía hablar de la importancia de la velocidad de carga de nuestras páginas en WordPress. También, quería enseñaros como con poco que hagamos podemos mejorar mucho el tiempo de carga o al menos no ampliarlo. Tan solo nos ha hecho falta instalar un plugin o comprimir unas imágenes para poder mejorar la velocidad de carga de la web por un factor multiplicativo. En próximas entradas hablaremos de más factores que afectan a la carga de la web, quizás el siguiente en la lista sea los hostings ya que es una de las principales razones de lentitud a la hora de cargar webs.

Por último y aunque había dicho que solo traería dos herramientas quería traeros la herramienta final una herramienta que a la propia página de google.com le pone pegas de optimización https://developers.google.com/speed/pagespeed/ No existe nada más exigente si consigues un 100/100 avísame para poder hacer una publicación.