Web Performance Optimization la velocidad de un site

In Desarrollo web

A partir de un segundo y medio una web es lenta. Cuánto más rápido va un sitio mejor. Estas son las máximas de la WPO (Web Performance Optimization) o la optimización de la conectividad de redes, servidores web y los diferentes elementos que tienen un sitio web, desde el HTML hasta el JavaScript, pasando por los CSS o la cantidad de peticiones a servidores DNS para que la velocidad sea un elemento diferenciador.

Si una página tarda dos segundos en cargar cualquier persona la califica como una web lenta, es mecánico, cerebral, propio del ser humano. Está demostrado que la carga veloz de sitios web aumenta la satisfacción de los usuarios y por tanto su lealtad. Además la WPO está ligada a un intento de ecologismo de la web, reducir al máximo el consumo de energía de un sitio web y de este modo su impacto ambiental. Importante tenerlo en cuenta al crear o implementar sitios web.

Algunos datos que ilustran la importancia de la WPO:

  • 0,1 segundos de retraso implican una pérdida del 1% de los ingresos de Amazon.
  • AOL hizo una revisión del número de páginas vistas en diferentes webs y concluyó que aquellos que funcionan rápido tienen unas 7-8 páginas vistas por usuario y que las lentas tan sólo 3-4 páginas vistas por usuario.
  • Si Facebook va 0,5 segundos más lento de lo habitual  provoca una caída de tráfico del 3%; 1 segundo provoca una caída del 6%.
  • Google sufre una caída de 0,59% de las búsquedas por usuario si presenta un retraso de  0,4 segundos. 0,5 segundos más en cargar implica un 25% menos de búsquedas.
  • Entre los usuarios, el 14% cambia de tienda online si la página tarda en cargar y el 40% abandona una página que tarda más de 3 segundos en cargar.
Para conseguir mejoras en nuestro site enmarcadas en la WPO se ha de trabajar en : conectividad, contenidos,  imágenes, cookies, CSS, JavaScript, HTML, servidores y dispositivos.
El objetivo de la Web Performance Optimization es reducir al máximo el tiempo de descarga de tu web. Cuántas menos peticiones HTTP se realicen menor será el tiempo de descarga. En algunos casos se consume más tráfico en la petición de la información que en la transferencia de la información en si.
Una técnica WPO sería combinar varios CSS y JavaScript en uno. Normalmente los JavaScript y los CSS se encuentran en puntos de la página como la cabecera <head>, así que cuando la web comienza a descargarse, en paralelo también lo hacen estos elementos CSS o JS pudiendo causar bloqueos.
Para que funcione todo más rápido, es mejor tener un único fichero .JS o .CSS de un tamaño. Aún reducimos más si los combinamos haciendo uso de HttpCombiner1: la idea de combinar todos los scripts en un bloque, y los CSS en otro. De esta forma tendríamos algo tal que:

<script type=”text/javascript”
src=”HttpCombiner.ashx?s=scripts&t=text/javascript&v=1″></script>

Igual con las hojas de estilo:

<link type=”text/css” rel=”stylesheet”
href=”HttpCombiner.ashx?s=css&t=text/css&v=1″></link>

Para ello usaremos un fichero de configuración (web.config) que será similar a este:

<appSettings>
<add key=”scripts” value=”js/jquery.js, js/jDate.js, js/jQuery.Core.js,
js/jQuery.Delegate.js, js/jQuery.Validation.js”/>
<add key=”css” value=”css/Theme.css, css/Common.css, css/grid.css”/>
</appSettings>

Otro método es la combinación de imágenes o icónos en CSS Sprites.

En muchas ocasiones las webs tienen iconos que se van repitiendo en las diferentes páginas que la componen. Esta cantidad de iconos puede producir el efecto de un exceso de peticiones y, por ello, un número elevado de conexiones inútiles. Una buena solución es la de integrar varias imágenes en una imagen única. Esta imagen, que suele ser un PNG8, contiene una cantidad de imágenes pequeñas suficiente para no tener un tamaño excesivo y con una única imagen poder gestionar todos los elementos desde el CSS. Este sistema, conocido como CSS Sprites permite que carguemos una única URL (que se usará en distintas zonas de la página) de forma rápida y con una única petición HTTP.

Además de estos consejos referidos al código, en la WPO se ha de tener en cuenta la red de distribución de contenidos ( CDN ), el responsive desing, la tenencia de un buen soporte, un hosting en servidores que garanticen que tu web nunca se caerá,  y un campo infinito de mejoras que has de investigar.

Algunas herramientas que te ayudarán en esta investigación son:

  • Boomerang, es un código JavaScript que te permite medir el rendimiento de las páginas
  • Google mod_pagespeed. Un módulo para Apache 2 que lleva la configuración por defecto dediversas opciones (compresión, agrupar CSS y JS…).
  • Google Page Speed es una herramienta que se puede instalar en Mozilla Firefox junto al
    añadido Firebug y también en Google Chrome y permite revisar una serie de elementos de
    WPO.
  • Httperf es una herramienta de Hewlett-Packard que permite hacer peticiones de estrés a los servidores y ver cómo se comportan.
page speed google

Esperamos haber plantado un semilla de curiosidad para que os plantéis la creación de sitios o la mejorar a partir de la WPO. Los usuarios estarán más satisfechos, la conversión aumentará, tu web será más rápida y el gasto de energía se minimizará. WPO o todos felices ¿no creéis?

Contacta con la agencia

Mobile Sliding Menu