Optimización de una web

Por regla general, queremos que las páginas de nuestra web se sirvan deprisa principalmente para que la experiencia de usuario sea satisfactoria. Una web lenta hará que nuestros lectores o posibles compradores abandonen nuestra web.

En esta primera serie sobre optimización web, asumo que estamos corriendo nuestros servicios web en un servidor Apache con MySQL. Intentaré en los ejemplos  ser lo más general posible. En este primer capítulo cubriremos generalidades de que se puede optimizar en nuestra web.

Lo primero indicar que si tenemos un hosting compartido, no vamos a poder cambiar apenas de la configuración de nuestro servidor web. Este artículo está dirigido a personas que tengan un VPS, un servidor virtual, cloud, o dedicado y que puedan modificar la configuración de su servidor web.

Algunos clientes nos contactan diciendo que su “web va lenta” pero la mayoría de las veces definir que es lento y que no lo es, es como siempre algo subjetivo.

En general para una página ligera, con no muchas imagenes algo entre 2-4 segundos se considera dentro de lo aceptable. Si hablamos de una tienda virtual, bastante cargada, puede andar en el entorno de 5-7 segundos. A mi nunca me ha gustado ser muy categorico en mis aseveraciones y por tanto los números que doy son orientativos.

Cuando hablamos de este tiempo de carga, hablamos del tiempo total desde que se hace la petición en el navegador hasta que se ha terminado totalmente la carga del ultimo archivo que recibe el navegador. Esto no tiene nada que ver con la sensación general de que la página sea lenta o rápida y a veces se da la paradoja de que una página que parece rápida puede tardar bastantes segundos en terminar de descargar todos los archivos que necesita.

Para poder entender esto hay que entender que cuando un navegador pide a un servidor web que le muestre una página, el navegador esta descargando varios ficheros a la vez, desde ficheros html, imagenes, videos, css, javascript, etc. De como esté diseñada la web, tendremos una sensación mayor o menor de que la página es lenta.

En este artículo no voy a entrar en como realizar un mejor diseño web para que la carga mejore, sino en que podemos cambiar en nuestro servidor web para que con el diseño existente, los tiempos de carga mejoren.

Lo primero que recomiendo siempre que hace uno una optimización es tomar una base de referencia, baseline o como lo queramos llamar. Básicamente ver de donde partimos en la situación actual.

Para eso es muy conveniente poder usar herramientas de medición, que nos permitan ver lo lenta que es nuestra web y nos de información de que podemos cambiar.

Podemos instalar herramientas en nuestros equipos para realizar mediciones, pero existen herramientas online que nos van a proporcionar una información menos sesgada y más uniforme de como está siendo la carga de nuestra página.

Principalmente utilizo tres páginas web, pero existen muchas más:

http://tools.pingdom.com/

http://www.webpagetest.org/

http://gtmetrix.com/

En general me gusta observar que resultados dan todas las páginas porque los resultados son complementarios.

Por ejemplo si ponemos nuestra web en tools.pingdom.com nos mostrará la siguiente información:

 pingdom1

Nos dice que en 61 peticiones el tiempo de carga medio ha sido de 6.60 segundos y que el tamaño total de la página son 436,8 kb. En general este es bastante tiempo para una página que no descarga apenas medio mega.

Si desplegamos más abajo la información que nos proporciona simplemente posando nuestro ratón encima, obtendremos la siguiente información

pingdom2

Esto nos indica que del tiempo total, tardó 264 ms en resolver el nombre de la web a su IP correspondiente, 402 ms en conectarse al servidor y que estuvo 3.88 segundos esperando a que el servidor le mandará algún dato y que tardó 41 ms en mandarle 5.6 kB que es fichero que hemos pulsado con el ratón.

Como podemos ver los tiempos son bastante razonables salvo el tiempo de espera, en el que el servidor estará generando el fichero que le tiene que enviar al navegador (un fichero html generado por PHP p.ej.).

Ahora podemos utilizar la información que nos proporciona www.webpagetest.org

webpagetest1

Mi recomendación es que elijamos una ubicación lo más cercana posible a donde estén la mayoría de nuestros lectores, si están en Europa, no tiene sentido hacer el test desde los EEUU, los resultados van a variar bastante.

webpagetest2

Lo primero en lo que nos vamos a fijar es que el tiempo de respuesta que indica esta web varía. No debemos ser muy quisquillosos con este tema, porque cada test puede variar. Pero estos resultados nos pueden permitir ver tendencias, una vez que hayamos realizado optimizaciones y ver que realmente estamos mejorando.

Uno de los datos más importantes y que en muchos foros insisten es el First Byte. Este es el tiempo que tarda el servidor en empezar a mandar información al navegador. Todo lo que sea por encima de 1-2 segundos, es anormalmente lento. Puede ser debido a que el servidor esté lejos del cliente, o que tenga algún cuello de botella.

Una pista nos la da la parte derecha de la página, donde nos gradua los resultados de nuestro test

webpagetest3

Como podemos ver en general la puntuación es alta para el dato First Byte Time, ya que está por debajo de 1 segundo.También nos da buena nota en:

  • Keep alive. Esta es una característica que se puede activar fácilmente en Apache con KeepAlive on. Se puede tunear indicandole los segundos de timeout, algo en torno a 500 ms está bien. Fundamentalmente lo que indica este parámetro es el tiempo que vamos a permitir que una conexión establecida entre nuestro navegador y el servidor se mantenga con “vida”. La razón es que en general establecer una conexión es costoso en tiempo (DNS, conexión real al servidor, que el servidor web reciba la petición, etc) y si puedes ahorrar esos segundos en la siguiente transmisión de ficheros, al final ahorras bastante tiempo. Aquí, como en la F1, cada milisegundo es vital.
  • Compress transfer. Este es otro de los errores típicos cuando se deja el Apache con la configuración por defecto. En general todos los datos que se descargan del servidor pueden estar comprimidos con lo que ahorramos ancho de banda y milisegundos valiosos. Aquí entraría la activación del modulo de Apache mod_gzip y mod_deflate, que se pueden activar también en el .htaccess.
  • Compress images. Las imagenes se pueden comprimir y eliminar datos redudantes como los metadatos. Existen páginas web que te permiten comprimir las imagenes que les subes o con Prestashop también lo puedes hacer. Si no tienes conocimientos para hacerlo o no quieres complicarte la vida, Google ha creado un modulo de Apache que hace esto al vuelo sin intervención ninguna. El modulo se llama mod_pagespeed, y aunque puede dar algún problema con las caches, en general funciona muy bien.
  • Use Progressive JPEGs. En este aspecto nos ha suspendido. Existen dos tipos de formatos JPEGs, uno es progresivo y permite que la carga es gradual, lo que permite hacer una previsualización de la imagen antes de su carga definitiva.
  • Cache static. En está parte es la información que el servidor le envía al navegador sobre lo que puede mantener en su caché. Los navegadores guardan una copia de los archivos que descargas de manera local, de manera que en la siguiente vez que entremos en dicha web, no descargará esos archivos en caso de que estemos dentro del tiempo de no expiración de ese archivo. El servidor le puede indicar p.ej. que en principio las imagenes no expiren en unas horas o un día y que no las vuelva a descargar hasta que pase ese tiempo. Esto se maneja dentro del modulo mod_expire y se puede poner en el .htaccess definiendo por cada tipo de archivo cuanto tiempo queremos que use la copia local.
  • Use of CDN. Los CDNs (o Content Distribution Network) lo que permite es mantener una copia de un archivo (generalmente imagenes que son más pesadas) en otro servidor más próximo al cliente. Esto no es configurable en nuestro servidor web, pero algunas herramientas como WordPress permiten de una manera transparente configurar un CDN. Existen servicios gratuitos como CloudFlare u otros de pago. O puedes crearte tu propia red de servidores en otras ubicaciones.

En el próximo capítulo veremos qué otras cosas podemos mejorar para que el tiempo de espera mejore y el servidor web tardé menos en generar las webs.

1 comentario en “Optimización de una web”

  1. Guauuu!! Que mundo de posibilidades completamente ajeno a mi! Jajajajaja

    Cuando pueda realmente entender esto me sentiré como diox, verídico!

    Mientras tanto tiraré de profesionales como vosotros para solucionar todas mis dudas!

    Gracias por compartir!

    Chu!

Responder a Caro chan Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio