ecomyseoMi herramienta preferida para realizar pruebas de velocidad, ver cuantos ficheros y llamadas esta realizando una pagina web o en este caso una tienda online, es la gratuita http://www.webpagetest.org/
¿Pero como funciona?, ¿que podemos aprender de esta herramienta?, ¿como podemos aprovechar toda la información que nos da? y ¿como podemos entenderla para mejorar nuestra web?.
En esta entrada usaremos la opción de “advanced Testing” y veremos algunos resultados de paginas y tiendas online, optimizadas y sin optimizar para ver como entendiendo los resultados vamos a mejorar la velocidad de la web.
Por el principio, opciones generales de la herramienta
- Enter a website url : Aquí pondremos la url completa que queremos que nos haga las pruebas
- Test location : Tenemos la opción de elegir un país y un servidor para realiar las pruebas, en estos momentos no hay ninguno en España por lo que podemos elegir cualquier pais
- Browser : Sabemos que en todos los exploradores se ve la misma pagina, pero podemos realizar pruebas como si estuviéramos usando otros exploradores, se recomienda probar Chrome o firefox
- Test Settings : Quieres saber como va a cargar las paginas según la velocidad de Internet?, puedes elegir diferentes velocidades y veras resultados diferentes, hoy en dia la mayoria de ADSL son mayores a FIOS 20/5 Mbps , para hacer pruebas genéricas elegiremos esta opción
- Number of test to Run : Cuantas pruebas quieres hacer? se recomiendan 2 o 3 para un resultado cercano al real
- Repeat View : Siempre en todas las pruebas activaremos “first view and Repeat View”, de esta manera veremos si el modulo de cache esta funcionando correctamente.
- Capture Video : Mejor desactivar esta opción, no nos ayuda tener un video de como se carga la pagina.
- Keep test private : Recomendamos que la prueba sea privada y que solo los que tengan acceso a la url de la prueba lo puedan ver.
Una vez hemos añadido la url de prueba vamos a ver los resultados.
Lo primero que vemos son los cuadros que informan de First byte, cache, si la información que envia la pagina esta comprimida, si las imagenes estan optimizadas y si estamos usando un servidor CN, la puntuación A es la mayor y mejor, F la menor y mala
- First Byte Time : Esto no depende de nosotros, depende del servidor que tenemos contratado. no debería ser mayor a 1.5 segundos
- Keep-alive Enabled : Comprueba que todas las llamadas son correctas
- Compress Transfer : ¿Nuestro servidor comprime la información que envía y por lo tanto la web ocupara menos?
- Compress Images : ¿Las imágenes están comprimidas y optimizadas?
- Cache static content : ¿ El servidor esta usando la cache y funciona correctamente ?
- Effective use of CDN : Tenemos contratado un servidor CDN, se recomienda cuando vamos a dar servicios a países que no sean el país donde tenemos contratado nuestro hospedaje.
Tiempo empleado en la carga de la pagina web, incluyendo el First byte, render de la pagina y terminado
- First view : Tiempo que tarda en cargar la pagina la primera vez que se visita, incluye informacion de Tiempo total “load time”, First byte, Cuando empieza a verse datos “Start Render”, velocidad de indice , Cuando podemos interactuar con la pagina “first interactive”
- Repeat View : Muestra la misma información pero cuando realiza la prueba por segunda vez, usado la cache del servidor y de la tienda online.
Como podemos ver, el tiempo de esta pagina es de 5.3 segundos la primera vez que se visita y 2.8 las siguientes veces, usando un modulo de cache podemos hacer que la web este preparada siempre para que todos los usuarios tengan la velocidad como si anteriormente ya hubieran visitado la pagina web
Otros ejemplos
Bueno ya tenemos la información principal de nuestra tienda online cuanto tiempo tarda en cargar en pruebas y cuanto tiempo tarda en segundas visitas, ahora vamos a ver y aprovechar la informacion detallada que os muestra la herramienta Webpagetest
Vamos a la información detallada y lo que vemos es un gráfico como este, donde nos muestra los ficheros que lee y el tiempo usado para cada fichero.
Lo primero que vemos es la cantidad de ficheros que tiene nuestra tienda online
Estos ficheros pueden ser
- CSS : Ficheros de diseño y estilo de la tienda online
- Huge IT Lightbox : ficheros javascript
- Ficheros JPG, PNG, GIF : Imagenes y fotos tanto del diseño como de los productos de nuestra tienda online.
- woff y woff2 : Tipos de letra
- Enlaces externos : Enlaces de google analytics, tag manager, chat y otras llamadas externas que tenemos en la tienda, es de gran importancia tener en cuenta estas llamadas externas, pueden hacer que nuestra pagina se ralentice por culpa de servidores externos.
Vamos a ver como podemos mejorar nuestra tienda online y hacer que tarde menos en cargar.
Vemos que alguno de los ficheros tarda mas de lo normal comparando con los demas
Una imagen PNG, esta tardando 1.7 segundos en cargar , esto es raro viendo que las demás están tardando una media de 450ms
Vamos a ver que nos dice WebpageTest de este fichero
Vemos que el fichero esta ocupando 700Kb, no es mucho, no deberia tardar mas de 1 segundo en cargar, pero el tamaño recomendado para las imágenes es de 400kb o 500kb maximo, por lo que debemos optimizar esta imagen.
Enlaces externos nuestros grandes enemigos y que no podemos evitar tenerlos.
Enlaces externos de google, facebook, chat , fuentes y otros recolectores de información, toda la información posible es buena, recolección de datos es importante, pero debemos repasar todos los ficheros externos para ver que ninguno de ellos esta haciendo que nuestra web funcione lenta, en el siguiente ejemplo podemos ver que cerca de 2 segundos son usados por estos enlaces externos, haciendo que nuestra web tarde 2 segundos mas que si no se usaran.
También podemos ver si nuestro servidor esta ofreciendo el protocolo Http2 o esta ofreciendo el Http
Usa protocolo Http, vemos que la carga de los ficheros es correlativa, detras de uno se va cargando el siguiente con una pequeña diferencia de tiempo
Usa protocolo http2, Vemos que los ficheros se cargan al mismo tiempo haciendo que el tiempo se reduzca
ecomyseo
