Cuando hablamos de Web Performance Optimization estamos utilizando el acrónimo de Web Performance Optimization, y esto no es, ni más ni menos, que el conjunto de técnicas que utilizamos para conseguir mejorar la forma en que nuestras web se cargan, hacerlas más rápidas, menos pesadas y más efectivas.
En este artículo veremos los motivos por los que hacer WPO, los aspectos que pueden influir en que nuestra web sea más lenta y veremos también algunos consejos y herramientas que nos ayudarán a corregir esto y conseguir que la carga de nuestras páginas web sea un «visto y no visto»
Una estrategia de Web Performance Optimization para cada página
El Web Performance Optimization engloba muchas… muchísimas acciones que se pueden llevar a cabo, tanto en nuestra página web como en el servidor, con el fin de mejorar la forma en la que nuestras páginas web se cargan.
Algunas de estas acciones serán realmente sencillas de implementar, pero otras serán más complejas o requerirán ciertos conocimientos técnicos.
Puede, por lo tanto, que te plantees si llevar a cabo estos esfuerzos merece realmente la pena y si mejorará lo que realmente importa: la rentabilidad de tu proyecto.
Mi respuesta a esta cuestión es clara: mejorar elWeb Performance Optimization de tu web es siempre una decisión acertada
…pero todo en su justa medida y priorizando en aquellas acciones que mayor beneficio puedan aportar a tu página en particular.
Y es que hay está el truco: en priorizar. Cada proyecto 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 incluidas en nuestra estrategia de Web Performance Optimization.
¿Por qué hacer WPO?
Lo cierto es que en cuanto empieces a hacer Web Performance Optimization verás que se producen un montón de «beneficios colaterales» en el comportamiento de los usuarios de tu web. En Analytics, por ejemplo, empezarás a ver como las páginas vista aumentan rápidamente.
A continuación te muestro algunas de las razones y los beneficios más destacables que obtendrás al hacer Web Performance Optimization.
Pero por si eres uno de esos escépticos, que todavía no tienen claro que preocuparse por el WPO siempre vale la pena, aquí tienes algunas de las razones y beneficios que tiene optimizar el proceso de carga de tu web:
1) Mejora la experiencia de usuario
100 milisegundos: Ese es el tiempo que el lóbulo occipital de nuestro cerebro guarda la información visual que recibe de los ojos. Esto quiere decir que:
- Por debajo de 0,1 segundos tendremos la ilusión de que algo es ‘instantaneo’ (salvo el ColaCao)
- Durante 1 segundo que hagamos esperar a nuestros usuarios habrá ‘reseteado’ hasta 10 veces esa memoria visual.
- En 4 segundos la sensación de abandono es importante.
- En 6 segundos, como podrás suponer ya no hay nadie en tu web.
Con esta impaciencia en nuestro ADN no es de extrañar que estemos tan obsesionados con todos los productos que se nos anuncian como «más rápidos» (ya sean coches, conexiones a internet o comida). Efectivamente, la velocidad es una de las características que más venden.
Peor aún: nos hemos acostumbrado a consumir información tan rápidamente que nuestra paciencia ha disminuido y dónde antes nos parecía que esperar 3 segundos era aceptable ahora nos parece una eternidad.
Por otra parte, a menudo se nos llena la boca de frases como
Haz SEO pensando en el usuario y no pensando en los motores de búsqueda
…y eso está bien, pero si cuidamos esto mucho cuando hablamos de hacer un contenido ¿por qué luego no nos centramos en el usuario que tiene que descargarse la web, por ejemplo, desde un dispositivo con 3G y poca cobertura?… Pues eso: el usuario importa también en este aspecto.
2) WPO no es SEO, pero lo mejora
Vamos a dejarlo claro desde el principio: WPO no es parte del SEO, pero tiene mucho que ver con los resultados que obtengamos en nuestro posicionamiento orgánico.
La velocidad de carga es un factor de posicionamiento
Ningún SEO debería descuidar este aspecto que, en ocasiones es el que marca la diferencia con otras webs con las que competimos en las SERPs. La velocidad de carga es desde hace tiempo, uno de los factores que influyen en el posicionamiento de nuestra página.
Más velocidad de carga = más páginas indexadas
Pero además de ser un factor importante que forma parte del algoritmo de Google tenemos que tener en cuenta que cuanto más lenta sea nuestra página peor se indexará. Si tu sitio web es lento las arañas de Google conseguirán rastrear menos páginas de tu site en el mismo tiempo y seguramente le acabarán dedicando menos tiempo al rastreo de tu web.
3) El WPO hace Adwords más barato
Si haces SEM lo tienes que tener claro: la velocidad de carga irá directamente a tu bolsillo.
El Quality Score de Adwords es la manera que Google tiene de medir la calidad de tus anuncios e influye directamente en el CPC (coste por clic) que pagarás.
El Quality Score dependerá de la calidad de la landing a la que dirija un anuncio, y en este sentido influyen dos aspectos:
- La relevancia de la landing con el anuncio. Importantísimo… pero no es lo que nos ocupa.
- La velocidad de carga de la landing.
Por lo tanto, reducir la velocidad de la carga en nuestra web ayudará también al SEM haciendo que aumente nuestro Quality Score y se reduzcan nuestros costes.
4) Ahorramos costes de servidor
Los servicios de hosting que contratamos incluyen a menudo una tarifa por transferencia de datos, por lo que cuidar el tamaño de las páginas web de nuestro sitio así como mejorar la forma en la que estas se cargan puede reducir enormemente la transferencia de datos desde nuestro hosting y reducir así los costes de este servicio.
Algunos consejos para mejorar la velocidad
Ahora que ya tenemos claro qué es el WPO y cómo nos puede ayudar a conseguir los objetivos de nuestro proyecto online, vamos a ver algunos trucos y acciones que podremos implementar en la mayoría de proyectos.
1) Optimiza las imágenes
Las imágenes imágenes suelen suponer una gran parte del tamaño de nuestra web, pero además son uno de los elementos más comunes que provocan la sobrecarga de peso en nuestra web.
Así que cuando se trata de aligerar peso para aumentar la velocidad de carga lo primero a lo que deberíamos atender es a la optimización de estos elementos.
Cuando hablamos de optimizar imágenes nos tendremos que centrar en 3 aspectos:
1.1) Dimensionar las imágenes
Si vamos a mostrar una imagen en un tamaño de 150px x 150px tenemos que tener claro que no vamos a conseguir más calidad de imagen por el hecho de utilizar una imagen más grande o con más resolución.
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.
Las imágenes suelen ser los elementos más pesados de nuestras páginas y, por lo tanto, son uno de los primeros recursos en los que hemos de fijarnos para optimizar la velocidad de carga de una web.
1.2) La resolución
De lo que se trata de de adaptar las imágenes a la resolución del dispositivo en el que se verá. Más allá de esta densidad de píxeles el usuario no notará mejoría en la imagen, pero esta aumentará enormemente de tamaño.
Así que, salvo que estemos publicando un documento que tengamos la intención de que se imprima con alta calidad deberíamos de ajustar siempre este parámetro antes de utilizar una imagen en la web.
1.3) 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.
Para mejorar este aspecto te recomiendo que le eches un vistazo a este artículo que publiqué hace algún tiempo sobre los formatos de imagen para utilizar en las páginas web
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 nos preocupamos del SEO (…que debería de ser siempre)
En un experimento realizado por Moz, en el que analizaron más de 100.000 páginas web se llegó a la conclusión de que el TTFB es el parámetro que Google está teniendo en cuenta para formar parte de su algoritmo. No influyen ni el tiempo de carga total ni otras características que influyen en el proceso de carga.
¿Por qué es esto así? Bueno… en principio parece que porque es lo más facilmente ‘medible’. Otros aspectos como el tiempo de carga dependerán mucho de variables externas difíciles de controlar.
¿Es lo adecuado? Ni de lejos (es mi opinión)… pero es lo que hay. Así que deberías saber que puedes mejorar el TTFB de tu web cuidando 3 aspectos:
2.1) Mantén el servidor poco sobrecargado
Si tienes el hosting ‘hasta los topes’ no estarás ayudando a que este sirva el primer byte rápidamente. Le faltarán recursos.
2..2) Reduce la latencia
La latencia no es más que el tiempo que tarda la información en viajar por la red desde el servidor hasta el dispositivo de destino.
2.3) Optimiza la base de datos
Una base de datos sin optimizar será menos eficiente y tardará más en procesar las solicitudes. Optimizar frecuentemente la base de datos del CMS es una tarea sencilla y que puede mejorar enormemente 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 nuestra 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. Esto es, obviamente lo que nos importa cuando hablamos deWeb Performance Optimization.
- Reduce los costes de servidor: Si en cada visita se hacen menos peticiones al hosting, obviamente estaremos usando menos el servidor y esto nos ayudará a reducir sus costes.
- Experiencia de usuario: Que no te quepa la menor duda de que cuanto más rápido se le sirva la página a un usuario mayor será sus 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.
¿Cómo activar la caché de navegador?
En la mayoría de CMSs podrás hacerlo desde la propia configuración o bien con algún sencillo plugin. Pero también lo puedes hacer directamente añadiendo unas líneas a tu fichero .htaccess (que al final es lo que estos ‘añadidos’ harán… pero de una forma mas amigable)
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 600 seconds"
ExpiresByType image/x-icon "access plus 604800 seconds"
ExpiresByType image/jpg "access plus 604800 seconds"
ExpiresByType image/jpeg "access plus 604800 seconds"
ExpiresByType image/png "access plus 604800 seconds"
ExpiresByType image/gif "access plus 604800 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 7200 seconds"
ExpiresByType application/xhtml+xml "access plus 7200 seconds"
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\\.(ico|jpeg|jpg|png|gif|swf|css|js)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
<FilesMatch "\\.(x?html?|php)$">
Header set Cache-Control "max-age=7200, private, must-revalidate"
</FilesMatch>
</IfModule> Fíjate que se debe especificar siempre el tiempo de duración de la caché. En este caso una semana (604800 segundos) para los archivos estáticos y un par de horas (7200 segundos) para los archivos html y php.
Esto es importante, pues si no especificamos la caducidad de la cache el navegador los cargará cada vez… con lo cual no estaremos utilizando la cache realmente.
4) Minificar y combinar el CSS y el JS
Los archivos CSS y Java Script son los reponsables de gran parte del peso de nuestras 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 linea.
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. (Sí… los programadores también son seres humanos 😉 )
4.1) Minificar
El proceso de minificación no es más que eliminar esos caracteres innecesarios consiguiendo así una reducción del peso de la página que en ocasiones es muy considerable.
Este proceso lo podemos llevar a cabo nosotros mismos, utilizando herramientas como CSS Compressor, Java Script Minifier (entre otras), con las que generaremos el fichero minificado que luego subiremos al servidor.
Pero también podemos utilizar plugins o extensiones para el CMS que utilicemos. En WordPress, por ejemplo da muy buen resultado WP Minify.
4.2) Combinar ficheros
Lo normal es tener muchos ficheros CSS y JS en nuestras webs. Que si un fichero para el estilo de la barra de navegación, otro para ese plugin tan chulo que acabamos de instalar… y lo mismo ocurre con los ficheros de JavaScript. Es normal y es una forma de mantenerlo todo organizado de una forma lógica.
Sin embargo, esto hace que cuando se carga la página se produzcan muchas peticiones al servidor (una por fichero)… y esto indudablemente retrasará la carga total de la página.
Combinar ficheros no es más que eso: incluir el contenido de varios ficheros en uno solo.
De lo que se trata es de pasar de algo así:
<link rel="stylesheet" href="style.css" media="all"> <link rel="stylesheet" href="nav.css" media="all"> <link rel="stylesheet" href="plugin1.css" media="all"> <link rel="stylesheet" href="plugin2.css" media="all"> <link rel="stylesheet" href="banner.css" media="all">
A esto otro, en dónde llamamos a solo un fichero que combina el contenido de los anteriores ordenados consecutivamente:
<link rel="stylesheet" href="main.css" media="all">
y si hablamos de JS la cosa no cambiará mucho. Se trata de pasar de todo esto:
<script src="nav.js"></script> <script src="plugin1.js"></script> <script src="componente.js"></script> <script src="plugin2.js"></script>
a esto:
<script src="main.js"></script>
Cuando hablamos de combinar archivos tenemos que tener muy en cuenta una cosa: el orden.
Es importante cargar los CSS y JS en el orden adecuado para asegurar que la página se muestre correctamente.
Yo te aconsejaría que antes de combinar estos archivos hicieses un back up por si cuando los combinas algo (o todo) dejase de funcionar.
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.
El CSS al principio
Siempre que sea posible deberíamos colocar la carga de los archivos CSS en la cabecera, justo antes de la etiqueta </head>
Lo que conseguiremos así es que los estilos de la página se carguen lo antes posible y no se perciba la carga de una web sin estilos a la que tiene que esperar para que ‘coja forma’.
CSS con <link> en vez de @import
Existen dos formas de cargar los ficheros de estilos CSS: mediante la etiqueta <link> en el código HTML o utilizando la directiva @import en uno de los ficheros CSS (o dentro de una etiqueta <style>)
<link rel="stylesheet" href="style.css" media="all" />
@import url('style.css'); La primera es siempre la mejor opción, pues @import hace imposible que los ficheros se carguen en paralelo y por lo tanto será siempre más lenta.
El JS al final
Con el JavaScript ocurre exactamente al contrario que con el CSS. El JS es conveniente cargarlo al final de la página, justo antes de la etiqueta </body>
Cuando el navegador encuentra un fichero JavaScrip detiene el proceso de carga mientras este se descarga. Luego lo ejecuta y sigue con el proceso de carga.
Si posponemos esta carga conseguiremos que se carguen primero todos los demás elementos de la página y el código del JS se ejecute después, mientras el usuario ya está utilizando la página.
Carga asíncrona
En ocasiones no será posible cargar el JS al final del documento. En estas ocasiones lo óptimo será realizar la carga de forma asíncrona. Esto es, en paralelo a la carga del resto de los componentes.
Así, conseguiremos el fichero JS no detenga la carga.
La forma de hacer que el javascript se cargue de forma asíncrona es mediante el atribuo async añadido en la etiqueta que llama al fichero.
<script async type="text/javascript" src="script.js" ></script>
[alert-note]Cuídado con las cargas de JS de forma asíncrona. Los ficheros que se cargan de esta forma se ejecutarán en cuanto terminen de cargarse, sin que podamos determinar su orden de carga y/o ejecución.[/alert-note]
Esto va a provocar que si, por ejemplo, alguno de los archivos que estamos llamando de forma asíncrona utilizan jQuery y este todavía no se ha cargado cuando se ejecuten, se produzca un error.
La solución pasa por cargar el jQuery en la cabecera (antes del elemento </head>). De esta forma estaremos haciendo la web un poquito más lenta, pero sin errores.
6) Habilitar el Gzip o Deflate
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.
¿Cómo funciona la compresión?
De lo que se trata es de que toda la información que se va a transmitir se comprima en el servidor antes de ser enviada. Así, transmitimos ficheros mucho más pequeños aumentando la velocidad de carga de la web.
Una vez recibidos el navegador los descomprime y los interpreta.
Cómo implementar la compresión de los archivos: Gzip o Deflate
Para comprimir los archivos antes de enviarlos podremos habilitar la compresión Gzip o Deflate. Ambos son tipos de compresión y, aunque hay opiniones para todo, lo cierto es que sus ratios de compresión son muy similares y la facilidad de implementarlos también.
Para implementar cualquiera de los dos tipos de compresión tan solo tenemos que asegurarnos de 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 nuestra web.
En el caso de Gzip debemos añadir esto:
<IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file\.(html?|css|js|phpl)$ mod_gzip_item_include handler^cgi-script$ mod_gzip_item_include mime^text/.* mod_gzip_item_include mime^application/x-javascript.* mod_gzip_item_exclude mime^image/.* mod_gzip_item_exclude rspheader^Content-Encoding:.*gzip.* </IfModule>
Y en el caso de Deflate esto otro:
<IfModule mod_deflate.c>
<filesMatch "\.(js|css|html|php)$">
SetOutputFilter DEFLATE
</filesMatch>
</IfModule>
7) Escoge bien el hosting
Un superhosting, superpotente, con muchísimos recursos, con discos superrápidos y un condensador de fluzo por si tengo que volver al pasado a recuperar una copia de seguridad en 0,001 segundos… obviamente eso todo te va a asegurar una velocidad de transferencia mejor que un hosting compartido alojado en un disco duro lento y cargado hasta la bandera.
El primero, obviamente, será más costoso. El segundo, en cambio, supondrá poco dinero (…pero seguramente al final te saldrá más caro)
Así, escoger un buen proveedor de hosting será una de las mejores inversiones que puedes hacer para mejorar el rendimiento de nuestra web. Para no equivocarte en la elección te aconsejo que le eches un vistazo a como lo han hecho Miguel Angel Florido para escoger su VPS o Rubén Alonso para elegir el hosting compartido que mejor rendimiento le ofrecía.
… sin embargo, a pesar de que un buen hosting puede mejorar el rendimiento de tu website, esto no es hacer WPO. La O de WPO significa optimización y eso no lo es.
Geolocalización de tu target
A pesar de esto, desde el punto del WPO (Web Performance Optimization) si hay algo que si deberías de tener en cuenta cuando contrates este servicio. Pregúntate: ¿Dónde está geolocalizado tu target?
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.
¿Recuerdas cuando hablábamos de ‘latencia’? Pues eso, precisamente es lo que conseguirás acercándote físicamente a tus usuarios: reducir la latencia.
Así conseguirás mejorar el TTFB y de paso el SEO de tus páginas.
8) Utilizar CDNs para el contenido estático
¿Ya tienes un buen hosting? De acuerdo. Pues ahora recuerda que
[Tweet «el mejor amigo de un buen hosting es un buen CDN»]
¿Qué es un CDN?
CDN es el acrónimo de Content Delivery Network… y hace referencia a eso precisamente: 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.
Ahora imagínate que tienes varios servidores distribuidos a lo largo del planeta que replican el contenido estático de tu página web… y que cuando alguien solicite tu página desde un punto alejado de tu hosting estos archivos se le sirvan desde el punto más cercano al usuario: así es como funciona un CDN.
¿Que ventajas tiene un CDN?
Pues las 2 ventajas más importantes son:
1) Aumenta la velocidad de carga: El usuario tendrá que esperar mucho menos a recibir la página web.
2) Reduce la transferencia de tu servidor: Todos esos datos envía el CDN al usuario no son transferencia de tu servicio de hosting… por lo tanto te ahorrarás pasta en esto.
9) ¿De verdad necesitas ese iFrame?
Los iFrame introducen contenidos embebidos de otras webs.
Algunos iFrame de los más utilizados son los de YouTube o SlideShare (por ejemplo). Pueden ser realmente útiles, pues nos permiten enriquecer enormemente el contenido de nuestra web.
Sin embargo, tenemos que tener en cuenta que cada iFrame es como una página web anidada en nuestra propia web. Cada iFrame cargará su propio html, css, js…
Así que, tal vez habría que plantearse 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
Me pregunto si tal vez debería haber empezado por este truco (que no acción) que te ayudará a centrarte en lo que de verdad importa para obtener conversiones en tu proyecto: tus landing pages.
Es uno de los errores más comunes cuando alguien se empieza a preocupar por la velocidad de carga. De pronto acude a infinidad de herramientas que miden la carga he intentan mejorar la puntuación… pero la página que analizan es la del dominio: la home.
En realidad tus usuarios no siempre entran por esa página. Lo que hay que intentar es que cada landing 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.
Dedícale atención al WPO de todo el sitio web, pero sobre todo a aquellas páginas de aterrizaje claves por las que sabes que la gente llega a tu site.
¿Cómo medir la velocidad de carga?
Pero de nada sirve saber cómo optimizar si primero no sabemos que es lo que falla en nuestro caso concreto.
Afortunadamente tenemos a nuestro alcance gran cantidad de herramientas que nos ayudarán a medir, no solo la velocidad de carga, sino también la influencia de cada recurso de nuestra web en este proceso.
Algunas nos dan incluso una pequeña guía de como solucionar cada aspecto que debemos mejorar.
Antes de recomendarte las que considero más completas déjame decirte un par de cosas que será bueno que tengas en cuenta a la hora de medir el rendimiento de tu web:
- No te limites a una sola medición: el rendimiento de una página web puede variar de un momento a otro. Son muchos los factores que pueden influir en el rendimiento en un momento dado (carga del servidor, peticiones atendidas en un momento dado,…) Lo ideal es que realices varias mediciones en momentos distintos para hacerte una idea más fiable de como está funcionando una pagina.
- No te obsesiones con la nota: Como te decía al principio de este artículo cada página tiene sus propias características. En ocasiones corregir alguna de las indicaciones que nos ofrecen estas herramientas puede ser incluso más perjudicial para la experiencia de usuario que dejarlo tal y como está. Valora siempre cada indicación teniendo en cuenta los cambios que requiere implementarla y los beneficios reales que obtendrás de esta mejora.
Algunas herramientas para medir la velocidad
Yslow!
Yslow es la herramienta que nos proporciona Yahoo! para realizar una auditoría de lo que ellos consideran que son los aspectos más importantes que debemos cuidar para conseguir un proceso de carga realmente eficaz.
Podemos instalar Yslow como plugin o extensión en prácticamente todos los navegadores y ejecutándolo realizará un análisis tras el cual nos dará una nota sobre 100, pero también nos indicará en que medida tenemos optimizado cada uno de los parámetros que consideran importantes y las medidas que debemos llevar a cabo para mejorarlos.
Page Speed
El objetivo y el funcionamiento de Page Speed es similar al de Yslow, pero en esta ocasión estamos hablando de la herramienta que nos proporciona Google para realizar una auditoría del WPO de la página.
La puntuación de Page Speed se basa en parámetros diferentes a los que considera Yslow, por lo que es conveniente no centrarse en uno u otro, sino que lo ideal será revisar ambos.
GTmetrix
GTmetrix es una herramienta realmente útil desde el momento en que nos proporciona en un solo lugar los análisis de Page Speed e Yslow incluyendo sus puntuaciones (en %, de A a F y con códigos de colores) y recomendaciones.
Pero no solo eso, sino que GTmetrix nos muestra además el timeline representando gráficamente del proceso de carga. En este podrás ver que procesos son los que ralentizan la página y realizar las acciones necesarias para corregirlo.
Existen versiones de pago de esta herramienta que te permitirán almacenar datos e incluso generar informes con marca blanca. Pero para realizar tus propias mediciones la versión gratuita es realmente completa.
Web Page Test
Web Page Test es una de mis herramientas favoritas tanto por la amplia información que facilita como por las enormes posibilidades de configurar el test.
Las opciones avanzadas de configuración permiten especificar lugar, navegador, tipo de conexión, …y hasta si queremos realizar varios tests sobre una página.
Otro punto fuerte de Web Page Test es la forma en la que resume la carga de la web. Por una parte muestra una puntuación de A a F con códigos de colores de los aspectos generales más importantes. Pero por otra muestra una tabla con los valores de parámetros importantísimos tanto en la primera visita como en una segunda (donde interviene la caché)
Los informes detallados también son de los más completos. En cuanto a análisis nada tienen que envidiarle a cualquiera de las otras herramientas.
Pingdom Website Speed Test
Pingdom nos permite hacer un análisis escogiendo de entre 6 ubicaciones geográficas distintas.
El resumen del resultado nos mostrará una nota sobre 100 así como el número de peticiones, tiempo de carga y tamaño de la página.
Al igual que GTmetrix nos muestra el proceso de carga en formato cascada «waterfall», pero también nos ofrece el detalle de los parámetros que influyen en la nota así como un análisis de la página y algo realmente interesante: un histórico de mediciones sobre la página.
Existen muchas más herramientas para monitorizar el rendimiento de nuestra web, pero estas son mis favoritas.
También hay muchos (muchísimos) más aspectos que pueden influir en el proceso de carga, pero estos son, en mi opinión, algunos de los que suelen necesitar una atención especial en la mayoría de las páginas.
¿Añadirías algún aspecto más a la lista de imprescindibles? ¿Tienes una herramienta preferida distinta para monitorizar el Web Performance Optimization de tu página?
