WPO – Cómo mejorar el rendimiento web

El comportamiento cuando hacemos una búsqueda de cualquier término en Internet está muy estudiado. Si al pulsar un link de la página de resultados, la página no carga en un tiempo razonable, descartamos este resultado y pasamos a otro. Esto es un hecho comprobado.

Por si fuera poco esta motivación, Google premia a aquellas webs con mejor rendimiento con una mejor posición SEO.

La experiencia del usuario también mejora considerablemente cuando la navegación por el sitio web es más rápida y no hay retardos tras nuestros clicks. Lo que mejora su percepción de calidad y confianza en nuestro sitio.

Todos estos aspectos hacen que sea necesario prestar atención especialmente al WPO (Web Perfomance Optimization) y la mejora del tiempo de carga de un sitio web para mejorar la conversión de las visitas.

Pero…¿Cómo optimizamos el rendimiento web?

Lo primero que debemos hacer es determinar la velocidad actual de nuestra web. Para ello existen multitud de herramientas que nos permiten realizar un análisis bastante completo sobre el tiempo de carga. Desde Idento os recomendamos PageSpeed. Se trata de una herramienta muy completa de la mano del propio Google que nos ofrece un análisis muy completo e incluso se atreve a darnos un resumen de sugerencias de posibles optimizaciones que deberíamos realizar.

Cada página es un mundo, está claro, y cada una requerirá una serie de acciones distintas y adaptadas al caso concreto. También se dará el caso que alguna de estas acciones sea inviable o incompatible o no aplicable. Pero cuanto más cerca estemos de ese caso idílico, el resultado será mucho mejor.

El WPO (Web Performance Optimization) se encarga de analizar y proponer cambios para optimizar la velocidad de carga de una web. Y entre otras cosas consiste en aplicar herramientas de este tipo, para hacer un primer análisis del sitio web. Pero este tipo de informes va un poco más allá y debe dejarnos claras las acciones que debemos aplicar, una por una, paso a paso. Además, debe proporcionarnos única y exclusivamente aquellas acciones que sean aplicables al tipo de web sobre el que se trabaja.

Para los que no quieran invertir en un buen análisis, dejamos a continuación una serie de recomendaciones generales que van a ayudar a incrementar la velocidad en la mayoría de los casos. En general, podemos decir que se trata de reducir el número de conexiones entre el servidor y el navegador, y reducir al máximo la cantidad de información que haga falta transferir.

Hosting

Escoger un buen hosting es algo fundamental. Si nuestro público objetivo se encuentra en España, es áltamente recomendable que los servidores en los que se aloje la web se encuentren también en España.

De esta forma se minimiza el tiempo de conexión entre el cliente (el navegador) y el servidor (el hosting).

Optimiza el tamaño de tus imágenes

Imágenes, las justas. Cuantas menos imágenes tenga tu sitio web, menos peticiones contra el servidor, y menos información tendrá que descargar el navegador para “pintar” tu web. Las que pongas, procura que su tamaño (el peso en KBs, no hablo de las dimensiones ancho y alto) sea el mínimo imprescindible para que la imagen se vea con calidad.

Usa Sprites para las imágenes

Todas las imágenes que formen parte de la estructura del sitio web, como iconos, fondos, botones, etc. conviene montarlas utilizando un sprite. Esto es, componer todas esas imágenes dentro de una sola. El uso de sprites mejora el WPO al reducir el número de conexiones al servidor. Podéis componerlos a mano, o utilizar alguna de las miles de herramientas disponibles.

Activa la compresión

En la mayoría de servidores web (como Apache) es posible activar la compresión GZIP de toda transmisión que realice. ¿Qué creéis que es más rápido?
– descargar 10MBs de datos que se puedan “pintar” de inmediato
– comprimir en el servidor esos 10MBs a 1MBs, descargarlo, y que el navegador lo descomprima para pintarlo.

En general, la segunda opción es mejor y mejora el WPO (Web Performance Optimization). Salvo para el caso de ficheros MUY pequeños, en los que la compresión entorpece más que ayuda. Por lo que es una opción más que recomendable.

Para activar esto, se hace uso del módulo de Apache llamado mod_deflate. Que en general se encuentra habilitado y por tanto disponible en la mayoría de servicios de Hosting.

Comprime JS y CSS

La compresión de ficheros JS y CSS es otro de los aspectos que influyen en el WPO. Esto es un ejemplo de un trozo de código CSS:

body {
background-color:rgb(255,255,255);
font-family: Arial;
border-bottom:2px solid black;
min-height: 2000px;
}

p {
text-align: justify;
}

Este código resulta práctico así organizado para el desarrollo, pues la estructura queda muy clara, pero es 100% equivalente a :

body{background-color:#fff;font-family:Arial;border-bottom:2px solid #000;min-height:2000px}p{text-align:justify}

Con esta sencilla operación ya podemos reducir el tamaño de los ficheros. Resulta realmente sorprendente cuánto puede llegar a variar el tamaño de un fichero con un cambio tan nimio.

Exprime la caché

Aprovecha el módulo mod_expires de Apache y añade una recomendación a los navegadores para que cacheen (almacenen en local) durante muuuuuuuucho tiempo tus ficheros estáticos que no van a cambiar. De esta forma, sólo se los descargarán una vez y para las siguientes conexiones ya dispondrán de estos recursos en local y por tanto, no será necesario volver a descargarlos. Gracias a este módulo puedes llegar a afinar qué elementos cachear y cuanto tiempo.

Aquí podéis ver los detalles de este módulo: http://httpd.apache.org/docs/2.2/mod/mod_expires.html

Utiliza un CDN

CDN – Content Delivery Network. Se trata de un servicio complementario al hosting, y similar a este. En un CDN podemos alojar única y exclusivamente ficheros estáticos, es decir, ficheros CSS, JS, e imágenes. Este tipo de hostings nos garantizan una entrega de estos ficheros en tiempo récord al navegador. Un ejemplo de CDN es Amazon S3. Además este tipo de servicios suelen tener opciones para replicar sus contenidos a lo largo y ancho del mundo, de forma que nos garantizan que los recursos estáticos que pidan los usuarios sean servidos siempre por un servidor cercano a ellos (esto es ideal para sitios web con público internacional).

Cada cosa en su sitio: CSS al principio y JS al final

Para que el navegador tenga la información mínima necesaria para empezar a “pintar” la web en pantalla, es altamente recomendable seguir esta norma. Si el CSS está al principio, una vez que tenga cargado el HTML de la web y los CSS, el navegador es capaz de empezar a “renderizar” o “pintar” la web en pantalla. Los ficheros javascript añaden funcionalidades adicionales (en la mayoría de los casos) cuya carga puede retrasarse al renderizado de la web. Para ello además, conviene estudiar el atributo “defer” de las etiquetas script, para asegurar que los scripts cargan en el momento adecuado sin demorar el pintado de la página en el navegador.

Conclusión

Esto son algunas pinceladas de lo que una buena Web Performance Optimization (WPO) debería incluir. Con sólo aplicar estos cambios podéis conseguir una reducción en el tiempo de carga de hasta un 70%. Hay muchas más cosas por analizar, estudiar e implementar, pero con esto ya tenéis deberes y sabéis por dónde empezar a trabajar, y por qué es necesario.

Espero os sea de ayuda esta pequeña guía/resumen y podáis activar el “Turbo Boost” en vuestro sitio web. Y para cualquier duda, siempre podéis contactar con #MichaelKnight que todos sabemos que era un experto en el “Turbo Boost” 🙂