Que es el Web Performance Optimization (WPO) – Importancia para tu Web

Web Performance Optimization 1

Tabla de contenidos

En el lenguaje del marketing online te encuentras una serie de términos asociados a elementos de gran importancia para el desarrollo de tu página web, por ejemplo, las el WPO (Web Performance Optimization)  o su significado en español: Optimización del Tiempo de carga de la web. Es similar al  SEO y te puede ayudar a mejorar el tiempo de carga de tu página web cuando el tráfico es mayor.

Es por eso que hemos diseñado el siguiente post para que comprendas que el WPO te genera beneficios en áreas importantes como la experiencia de usuario, ventas y reducción de costes operativos…

Web Performance Optimization

Qué es el WPO

Puedo buscar una definición de Web Perfomance Optimization y encontraré algunas muy populares, sin embargo en resumen el WPO se trata de un modo de optimizar que se basa en el análisis y propuesta de cambios para mejorar la velocidad de carga de tu sitio web. Esto quiere decir que los usuarios/visitantes deben invertir menos tiempo para acceder a tu sitio web.

Importancia del WPO

El Web Performance Optimization es muy importante porque colabora en mejorar la experiencia del usuario en muchos aspectos. Una serie de acciones de WPO garantiza una mejora en la velocidad de carga y de esa manera facilita la navegación de tus clientes en tu tienda online. En resumen aplicar WPO influye en el éxito de tu página web.

Como aplicar el WPO en mi web

El Web Performance Optimization engloba una gran variedad de acciones que puedes aplicar tanto en tu página web como en el servidor, con el fin de mejorar la forma en la que estas se cargan, la forma de aplicarlo depende del proyecto que quieres desarrollar porque cada uno tiene sus propias características y utiliza recursos diferentes… por lo tanto también tendrá necesidades y carencias propias que habrá que corregir con distintas acciones:

1) Optimiza las imágenes: Cuando te hablo de optimizar imágenes te recomiendo centrarte en estos 3 aspectos:

  •  Dimensionar las imágenes: La imagen nunca debería de ocupar más tamaño del que el usuario verá. Así que, si el tamaño en el que se va a ver es de 150x150px… pues habrá que guardarla en ese tamaño y no sobredimensionarla.  Optimizar el tamaño de las imágenes debería de ser uno de los primeros aspectos a cuidar en el WPO.
  • La resolución: De lo que se trata es de adaptar las imágenes a la resolución del dispositivo en el que se verá. La máxima resolución por la que te puedes guiar es la de en un monitor (72ppp), así que, salvo que publiques un documento que tengas la intención de que se imprima con alta calidad deberías de ajustar siempre este parámetro antes de utilizar una imagen en la web.
  • El formato adecuado: No es lo mismo utilizar una imagen en jpg que en PNG8 o PNG24. Depende del tipo de imagen y de las características de la misma tendremos que escoger el formato adecuado que mejor se adapte a la nitidez y peso de la imagen.

2) Cuida mucho el TTFB: El TTFB (o Time To First Byte) no es más que el tiempo que tarda en llegar el primer byte al navegador del usuario cuando este solicita una URL determinada. Este es un factor especialmente importante cuando te preocupas por aplicar SEO (…que debería de ser siempre)…A Google lo que le importa no es la velocidad, es el TTFB

3) Usar la cache del navegador: Cuando visitas una página web por primera vez el navegador tendrá que descargarse todos los recursos de la misma. Eso lleva su tiempo (que debería ser lo menor posible).

Sin embargo, cuando visitas una segunda (o tercera) página en ese mismo site, la caché del navegador evitará que este tenga que cargar ciertos elementos comunes a todo el site de nuevo (como por ejemplo el logotipo). Estos elementos estáticos se descargarán una sola vez, leyéndolos después de la caché a no ser que cambien.

Usar la caché del navegador ayudará a tu página web desde muchos puntos de vista:

  • Mejora la velocidad de carga: si no se tienen que volver a descargar ciertos elementos de la web el tiempo de descarga se reduce.
  • Reduce los costes de servidor: Si en cada visita se hacen menos peticiones al hosting, obviamente se estará usando menos el servidor y esto ayudará a reducir sus costes.
  • Experiencia de usuario: Cuanto más rápido se le sirva la página a un usuario mayor será su satisfacción. No hay nada más molesto que estar navegando desde un dispositivo móvil y que las páginas se ralenticen un montón.

4) Minificar y combinar el CSS y el JS: Los archivos CSS y Java Script son los responsables de gran parte del peso de las páginas web (sobre todo los JS). Estos ficheros, en realidad, no son más que ficheros de texto y como tales incluyen espacios y saltos de línea.

Y no te preocupes, estos espacios y saltos de línea no son realmente necesarios para mostrar la página. Los incluyen los programadores para poder interpretar el código con las limitaciones propias del ser humano.

5) Controla la carga de CSS y JS: Ordenar la carga de estos componentes no reducirá el tiempo total de carga, pero puede mejorar mucho la experiencia de usuario.

6) Habilitar el Gzip o Deflat: La compresión de los archivos de la web antes de transmitirlos debería ser siempre una prioridad en cualquier auditoría de Web Performance Optimization (WPO) por tres razones:

  • Es muy sencilla de implementar
  • Supone un ahorro de transferencia de entre un 50% y un 70%
  • Reduce de forma importante el tiempo de carga en la mayoría de los casos.
que es el wpo

Para implementar cualquiera de los dos tipos de compresión tan solo tienes que asegurar que el módulo correspondiente esté activado en el servidor y añadir unas líneas al fichero .htaccess del directorio raíz en el que se encuentra tu página web.

7) Escoge bien el hosting:  Un hosting barato te puede salir caro, por eso te aconsejamos que contrates un buen proveedor de hosting, recuerda esto puede ser  una de las mejores inversiones para mejorar el rendimiento de tu página web. Si desconoces que es hosting y dominio visita nuestro artículo.

También toma en cuenta que si tu público objetivo se encuentra geolocalizado en una zona concreta lo lógico es que el hosting que contrates también esté en esa zona.

 8) Utilizar CDNs para el contenido estático: No te preocupes, la lista de acciones para implementar WPO ya está por culminar. Si ya tienes un buen hosting asegúrate de contar con un buen CDN (Content Delivery Network – Red de Distribución de Contenidos)

Si no utilizas un CDN y tus usuarios se encuentran distribuidos por todo el mundo, el servidor será el encargado de servir tus páginas a todo el mundo. Evidentemente esto hará que la velocidad de carga sea muy distinta en la misma ciudad en la que tienes alojada la página que en la otra punta del mundo.

Utilizando un CDN consigues reducir el tiempo en el que la página llegará a distintos puntos y además reduces la carga del servidor.

9) ¿De verdad necesitas ese iFrame?: Los iFrame introducen contenidos embebidos de otras webs, así que, tal vez debas plantearte la utilidad real de algunos iFrames como los botones sociales o el tan popular cuadro con el botón «me gusta» de Facebook.

10) No te centres en la home: Es uno de los errores más comunes cuando comienzas a preocuparte por la velocidad de carga. De pronto acudes a infinidad de herramientas que miden la carga e intentas mejorar la puntuación… pero la página que analizas es la del dominio: la home. Olvídate de esto y analiza las landing pages e intenta que cada una  esté preparada para una carga super-rápida.

Cada artículo de tu blog, cada ficha de producto en tu ecommerce son incluso más importantes que la propia home, pues si una visita llega a esas páginas (ya sea a través de un resultado de búsqueda, un anuncio pagado o un enlace en otra web) muchas veces será una visita mucho más cualificada y que busca algo mucho más concreto que el que aterriza en la home.