Aumenta la velocidad de tu web y Google te amará: WPO

Seguimos con otro post de invitado, que de maravilla me va, entre la resaca del eShow y varios proyectos, no sé de dónde sacar el tiempo estos días.

Tenías ganas de tratar este tema, pero al ser de un perfil un poco técnico lo he ido posponiendo. Y quien mejor que Óscar Recio, que ha trabajado mucho tiempo conmigo en Trilogi y actualmente Project Manager en Hiberus, para tratar el tema.  Gracias colega!

 Un excelente artículo para aprender a mejorar el tiempo de carga de tu página web, blog o tienda on-line. Vamos a ello:

En muchas ocasiones me he encontrado con proyectos que no eran tan rápidos como a uno le gustaría y que se deben tomar una serie de decisiones para no tirar por tierra todo el trabajo realizado. Para eso se suelen seguir una serie de pasos para mejorar el tiempo de respuesta y mantener a nuestro cliente en el sitio web.

 ¿Qué es el WPO?

 

El Web Perfomance Optimization, en español Optimización del rendimiento web, son un conjunto de técnicas o metodologías que se aplican a los sitios web posteriormente a su realización y que nos ayudan a mejorar nuestro ranking en los buscadores. Aunque desde 1993 se está intentando mejorar la velocidad de carga de los sitios web, no fue hasta 2004 estandarizado por Steve Sounders.

 ¿Pero esto es importante para mí?

 

Esta es la pregunta que quizás te estés haciendo ahora  así que te daré unos cuantos datos para que veas que WPO es importante para ti.

• Cada segundo de retraso en la carga de la página:
  • 7% menos de conversión.
  • 11% menos de páginas vistas.
  • 16% menos en la satisfacción del cliente.
  • 6% menos de confianza en el sitio.
  • Yahoo: Una subida de 400ms les hizo perder 5-9% de su tráfico.
  • Amazón: Si su tiempo de carga aumentara 1 segundo se estima que perdería 1.6 billones $ al año.

¿Cómo podemos saber si estamos optimizados?

 

Tenemos varias herramientas que nos dan toda la información que necesitamos para  actuar en consecuencia, os dejo unas cuantas:

• Web Page Test: http://www.webpagetest.org/
• YSlow: http://developer.yahoo.com/yslow/
• Google Page Speed: https://developers.google.com/speed/pagespeed/

 

Si los resultados no son muy buenos os estaréis preguntando cómo podríamos mejorar el WPO de nuestra web para funcione lo más rápido posible.

Dependiendo de la fuente disponemos de unas buenas praxis para llevar a cabo nuestra meta, que no es más que mejorar la velocidad de nuestro sitio.

Steve Sounders hace mención a 28 pasos para optimizar el rendimiento de nuestra web. Yahoo en este caso tiene una lista de 35 buenas prácticas divididas en 7 categorias y Google lanzó una iniciativa para proveer a los desarrolladores herramientas para poder medir y mejorar así el rendimiento.

 ¿Cómo mejorar el tiempo de carga de mi pagina web?

 

Algunos de los puntos comentados son técnicos, y será mejor dejar a los especialistas que los realicen.

• Habilitar Compresión GZIP

 

De esta manera enviamos el contenido comprimido al navegador del usuario.

• Especificar caché de navegador

Definimos el tiempo de expiración de los archivos estáticos para que el navegador no deba recargar estos ficheros y los descargue de caché.

• Comprimir imágenes

Debemos optimizar las imágenes para que tengan un peso adecuado e información indiferente para el usuario (Datos exif).

• Habilitar Keep-Alive

El servidor permitirá más conexiones por segundo a nuestra web.

• Combinar CSS y Javascript (cada uno por separado)

Sería óptimo disponer tan sólo de un CSS y JS para todo nuestro site, ya que es más rápido cargar un único fichero con más peso que 20 con menos peso.

 

 Prioridad Media/Baja:

 

• Minimizar CSS y Javascript

Podemos conseguir dejar los ficheros CSS y JS en una sola línea para que ocupen unos cuantos kb’s menos y carguen de esta manera más rápido. (Es interesante que se guarden los originales para futuros cambios)

• Sprite de imágenes estáticas

Unificamos todas las imágenes de la web en una sola imagen para descargar un único archivo.

• Subdominios para los ficheros estáticos

Al tener subdominios o incluso dominios diferentes para nuestras imágenes, js, css, etc conseguimos que se puedan realizar más peticiones a la vez y la carga sea menor.

Si decides poner estas técnicas en práctica verás que la velocidad de tu web mejora considerablemente. Mi recomendación es que las realices en varias fases y utilices las herramientas que te he comentado antes para analizar en cuanto estamos mejorando nuestra velocidad.

• Bonus

 Además de estas técnicas podemos utilizar sistemas de caché que nos ayudarán a mejorar la velocidad aún más como pueden ser Varnish,memcached, apc, etc.

Estos sistemas cachean las páginas en nuestro propio servidor y cuando se realiza una petición a una página en concreto si previamente está cacheada será servida desde una “foto” que se realizó en el momento de cacheo evitando de esta manera que el sitio web deba realizar las operaciones pertinentes para servir dicha página.

Para WordPress disponemos de algunos Plugins que nos vendrán muy bien. Podréis encontrarlos aquí: http://wordpress.org/plugins/search.php?q=cache.

Aunque si me dejáis recomendaros uno que ha funcionado muy bien en los proyectos que en los que he estado involucrado, sin duda es: W3 Total Caché (https://wordpress.org/plugins/w3-total-cache/ ).

Espero que hayas tomado conciencia y te pongas manos a la obra para que tu sitio responda lo más rápido posible.

Si te ha gustado, compártelo!

Derechos de imagen: http://www.photaki.es/