13 Abr 2018

15 minutos

Mediano

Optimizacion de WordPress – Imagenes

Optimizacion WordPress

Introducción

A nadie le agrada un sitio lento, para nuestros usuarios esto genera frustración y que no compren nuestros productos, no vuelvan a visitar nuestra página, o lo peor: se vayan con la competencia! Por consecuencia esto genera pérdidas económicas, definitivamente algo que queremos evitar a toda costa. En otras ocasiones, el tiempo de carga es aceptable pero consume demasiados recursos, dependiendo del servicio de hosting que tengan (principalmente los de cloud), esto puede subir el costo de operación (algo que también debemos evitar).

La gran mayoría de las veces que los clientes se acercan a agencias para ayuda con el rendimiento de su website, éstos sugieren rehacer todo el sitio por conseguir un contrato mas grande (o simple incompetencia) y para los que no tienen presupuesto, tiempo o la capacidad de rehacer todo el proyecto significa que se quedan atrapados con su sitio lento.

En esta guia documentaré como optimizo un sitio basado en WordPress, solo haré uso de herramientas gratuitas, de esta manera, optimizar sus sitios no representará costo adicional (recuerden: gastar = malo), debido a que es un cliente real, no publicaré el nombre del website, pero daré la mayor cantidad de información para que puedan replicar las técnicas en sus proyectos.

Requisitos

Para este tutorial necesitarás:

  • Un sitio lento 🙂
  • Chrome

Paso 1 – Identificar la causa

Lo primero es identificar dónde esta nuestro cuello de botella y atacar ese punto, para esto haremos uso de nuestra primer herramienta: Pingdom – https://tools.pingdom.com/ 

En el primer campo pondremos la url de nuestro sitio, en el segundo definimos desde donde se haran las pruebas, aqui practicamente no nos importa mucho la opción siempre y cuando en cada prueba al mismo sitio seleccionemos la misma ubicación, de lo contrario tendremos factores externos afectando nuestras métricas. Algunas personas sugieren seleccionar la ubicación mas cercana a tu servidor/datacenter para que no aumente el tiempo por la distancia, otros que el mas cercano a donde estan tus usuarios para tener una idea de como lo perciben ellos y otros mas dicen que el mas lejano para ver el peor de los casos, todos ellos, estan equivocados, lo que buscamos es constancia simplemente en todas nuestras pruebas. Mas adelante explicare cómo evaluar la percepción del usuario respecto a su ubicación.

Damos click a “start test” y despues de un momento tendremos un resumen similar a este:

El cual, a pesar de darnos muchos datos, no nos da la información que buscamos aun, el unico métrico que tomaremos por lo pronto sera  el “load time” y eso con mucho criterio pues depende de cientos de factores que luego explicaré. Lo mas importante en este momento está un poco mas abajo y algo escondido, en lo que es se llama “HAR” (HTTP Archive) o “Waterfall report”, el cual nos dice como se esta comportando realmente el sitio:

El primer elemento siempre sera la página “base”, la cual manda llamar todo lo demas: incluir css, js, tags de terceros, imagenes, etc. Este primer elemento, es todo lo que se ejecuta del lado del servidor, una vez cargado este archivo, el usuario podría estar viendo “algo” en lo que cargamos el resto del sitio, tener este elemento en un tiempo de carga bajo es clave para dar una percepción de sitio rápido, no obstante, en este caso, tarda .5 segundos, un poco menos del 20% de nuestro tiempo total, ergo, no hay valor en enfocarnos en el codigo del lado de servidor (contenido dinámico) por ahora.

Entonces, si el contenido dinámico no es el problema, nuestro siguiente candidato será el contenido estático (CSS/JS/Imagenes), si buscamos la siguiente tabla en nuestro reporte:

Veremos que el 92.5% del contenido de la página está compuesto por imágenes y el total de nuestro sitio está en 16.92 Megabytes, los cuales fueron transferidos en 2.68 segundos, dándonos una tasa de transferencia de 50Mbits/segundo para el que realizó la prueba (pingdom). Esta velocidad es demasiado alta para el usuario promedio, en los hogares el promedio andará en 10Mbits/s y en movil 3-4Mbits/s, asi que los 2.68s que reporta pingdom, para un usuario comun, seran de 12-18 segundos (fueron 18 en mi dispositivo móvil con 4G) dependiendo de su conexión (esta es una de las razones por las que el tiempo que nos reporta pingdom no es representativo de la experiencia de usuario).

Si regresamos al reporte de Waterfall, ordenamos los archivos por tamaño (en order descendente), veremos que las primeras 10 imágenes juntan mas de 10MB, si optimizamos esas imágenes, tendremos el mayor beneficio.

Paso 2 – Optimizar imágenes

Existen muchas opciones para optimizar el tamaño de las imágenes, la primera seria redimensionarlas: empecemos por investigar en dónde se está usando la imagen, y qué dimensiones tiene el contenedor:

En mi caso, la primer imagen está siendo usada en un contenedor de 242×242 pixeles y la imagen tiene unas dimensiones de 1500×1500, asi que tomaré esas imágenes y las redimensionare a 242×242, una vez hecho esto, ejecuto de nuevo la prueba en pingdom para ver qué tanto mejoramos:

Nuestra total se fue a un poco menos de la mitad, repetimos el proceso con 5 imágenes mas y:

Ahora estamos en 5.77 MB, será mucho mas rápido descargar esto y también se vera un menor consumo de bandwidth en la factura del hosting.

Conclusión

1 – El tiempo de carga al final de las optimizaciones, segun pingdom fue de 2.04 segundos, como ya vimos este número no es exactamente lo que el usuario experimentará, para eso usaremos otras herramientas (analizadas en otro post). Este sitio en móvil pasó de 18 segundos a 4 segundos lo cual para el usuario se transformó de una experiencia frustrante a algo “aceptable”.

2 – Hay muchas optimizaciones adicionales que se pueden hacer a las imágenes (smushing, lazy loading, etc), sin embargo hay que reprioritizar y pivotear nuestra estrategia de optimización constantemente, el impacto que tuvieron las primeras 15 imágenes en nuestro tiempo de carga, no lo tendrán las siguientes 15, en ese momento tenemos que ir de nuevo al primer paso de identificar nuestro nuevo cuello de botella y solucionarlo.