Tutorial GTMetrix - Velocidad de carga web

Por Daniel Bocardo, de danielbocardo.com

La velocidad de carga es algo elemental cuando pensamos en términos de posicionamiento SEO de nuestra página web o blog. De hecho, debemos estar muy atentos a este parámetro en nuestro sitio web y contemplar todos los caminos disponibles para mejorarla.

Mi blog fue creado con la intenci√≥n de ayudarte a que mejores tu proyecto online, sobre todo en cuanto a posicionamiento web. Por este motivo, hoy te traigo un Mega Tutorial sobre GTMetrix, una herramienta muy completa y f√°cil de usar para analizar la velocidad de carga de tu web. ¬ŅComenzamos?

 


1 – Entrando a GTMetrix

Para hacer este an√°lisis, lo primero que debes hacer naturalmente es entrar en la herramienta.

Para ello, ingresa en su web www.gtmetrix.com. En su landing page encontrarás un espacio para introducir la URL que escojas de tu web y así comenzar a analizarla.

Esto es lo que todo el mundo suele hacer por defecto, pero yo te daré algunos consejos y trucos para que los resultados que muestre esta herramienta sean lo más fiables y reales posibles.

Si al entrar has procedido como casi todo el mundo (has introducido tu URL y has dado clic en “Analyze”), ver√°s c√≥mo en el transcurso del an√°lisis te informa que el an√°lisis lo realiza desde Vancouver (Canad√°) y mide la velocidad de carga en el navegador Firefox, que viene por defecto.

Inicio GTMetrix

Como comprender√°s, si tu web est√° situada en Espa√Īa, no tiene mucho sentido que este estudio se realice desde Vancouver (Canad√°), que est√° en la otra punta del mundo.

Para que el an√°lisis sea lo m√°s confiable posible, primero que nada debemos loguearnos con nuestro correo y contrase√Īa. En caso de que a√ļn no est√©is registrados, ten√©is que ir arriba a la derecha, donde pone “Sign up”. All√≠ te registras y, cuando te logueas y vuelves a la “home” de la herramienta, podr√°s ver que tienes la opci√≥n de analizar tu web desde¬†Londres, por ejemplo.

Obviamente, al encontrarnos geográficamente más cerca de Londres, el análisis será bastante más fiable. Aquí también podemos elegir con qué navegador queremos realizar la comprobación, algo que también es una gran ventaja.

Herramienta SEO para velocidad de carga web

2 РInterpretación de los Resultados

#2.1. Page Details

En este apartado, GTMetrix nos da detalles sobre los elementos principales que considera relevantes para la velocidad de carga de la p√°gina, dentro de los cuales destacaremos 3:

  • Page Load Time: Es la velocidad de carga de la p√°gina, medida en segundos, desde la ubicaci√≥n marcada.
  • Total Page Size: Se trata del tama√Īo o peso total en kb o Mb de la URL que estamos analizando.
  • Requests: Nos indican el n√ļmero de mensajes de aviso o atenci√≥n que debemos tener en cuenta.

Page Load Time

Este apartado nos habla de la velocidad de carga pura y dura de nuestra web. Seguro habrás notado que, al realizar el análisis desde Londres, se ha reducido esta métrica con respecto a la que te daba cuando lo medías desde Vancouver.

Amén de esto, para que nuestro análisis sea todo lo más fiable y real posible, siempre recomiendo realizar 4 o 5 análisis iguales y sacar la media de estos resultados.

Para volver a realizar un nuevo test de esta URL, no es necesario volver atr√°s en el navegador, sino simplemente hacer clic en la opci√≥n “Re-Test” que encontrar√°s a la derecha.

¬°Bien! Ahora que tenemos nuestra media de velocidades de carga, viene la pregunta del mill√≥n: ¬ŅC√≥mo sabemos si nuestra web es r√°pida o lenta?

Personalmente creo que una velocidad de carga √≥ptima debe encontrarse como m√°ximo en torno a los 2 o 3 segundos de carga. Ahora bien, seg√ļn los expertos, una web hoy en d√≠a no debe tardar, bajo ning√ļn concepto, m√°s de 6 segundos en cargar.

En el caso de que pasaran m√°s de 6 segundos, deber√≠amos acudir a un dise√Īador web profesional o Consultor SEO especialista para que nos solucione este problema.

Total Page Size

Esta métrica nos indica, lisa y llanamente, el peso de nuestra URL.

Es recomendable que no supere 1Mb de peso, ya que cuanto m√°s peso tenga la web, m√°s tardar√° en cargar.

La cantidad de kb o Mb que tengas en tu web depender√° del n√ļmero de elementos que tengas subidos en esa p√°gina o de las entradas que tengas en tu sitio.

En la mayoría de los casos, los elementos encargados de aumentar el peso son las imágenes o vídeos que tengas subidos en la URL.

Por ello, siempre es recomendable optimizar lo mayor posible las im√°genes que subas, haciendo que pesen lo menos posible, y sin que pierdan calidad.

Requests

Como hemos dicho anteriormente, los requests son los mensajes de advertencia que nos da la herramienta.

Se tratan de mensajes que nos indican que debemos actuar para mejorar alg√ļn aspecto de la web o simplemente para advertirnos de algo que no funciona del todo bien.

Generalmente no es necesario que actuemos sobre la totalidad de estas advertencias, pero sí ante las que veremos más adelante.

Mega #Tutorial: GTMetrix y la velocidad de carga web por @danibocardo - Comp√°rtelo en Twitter con un Click

Powered by Vcgs-Toolbox

#2.2. Performance Scores

Pagespeed Score

Este factor es una especie de nota o calificación final que la herramienta le asigna a nuestra URL.

¬ŅRecuerdas cuando en el colegio nos daban las notas, y estas iban en funci√≥n de las letras incluidas de la A a la F…? ¬ŅQu√© viejos somos, verdad?

Pues GTMetrix procede de la misma forma. La A sería un sobresaliente, con su tanto por ciento de optimización ideal que te asigne, y la calificación abarca hasta la F.

Esta √ļltima ser√° obviamente una se√Īal de que tendr√°s que trabajar duro en tu web para mejorar su velocidad de carga.

Y, ¬Ņen funci√≥n de qu√© aspectos la herramienta otorga esta nota?

Si te fijas un poco más abajo, en esta nota tienes una serie de recomendaciones pertenecientes a la categoría de Pagespeed Score.

Vamos a repasar los mensajes m√°s importantes a los que atender si quieres mejorar tu velocidad de carga:

‚áí Combine Images Using CSS Sprites

En esta opci√≥n encontrar√°s una serie de URLs de cada imagen que GTMetrix te recomienda mejorar. Se puede dar el caso de que tengas un men√ļ desplegable en la cabecera o header de tu web, con todos los men√ļs disponibles y cada men√ļ con una imagen o icono representativo.

En este caso, al estar todos en la cabecera, se cargar√°n en cada una de las URLs de la web.

Dicho de otra manera, cada vez que intentes acceder a una URL de tu sitio, el servidor tendr√° que cargar cada imagen una a una. A su vez, cada una realizar√° una llamada al servidor para que le ‚Äúentregue‚ÄĚ esa imagen.

Esto lo podemos optimizar de dos maneras, mediante la instalación o de un plugin o de un código CSS que implementaremos en la hoja de estilos.

Si no tienes conocimientos suficientes sobre CSS, te recomiendo que instales el plugin asociado a este problema.

Esto lleva consigo el inconveniente de que es un plugin m√°s que tendr√° que cargar la web a la hora de abrir la URL elegida.

Para solucionarlo de esta forma, existen diferentes plugins. Simplemente con escribir en el buscador “combine images using css sprites plugin wordpress” podr√°s encontrarlos e instalarlos con facilidad.
Sólo es cuestión de ir haciendo pruebas e ir viendo si nos compensa instalar un plugin adicional.

En caso de que nos atrevamos a generar este código CSS, la manera de proceder es muy sencilla. Existe una herramienta llamada CSS Sprites Generator con la que, si subimos todas las imágenes que queremos combinar, generaremos automáticamente un código CSS.

‚áí Defer Parsing of JavaScript

Este es un problema muy com√ļn que aparece entre las recomendaciones de GTMetrix.

Se trata de un concepto m√°s abstracto que tiene que ver con la carga de los Javascript que se activan en nuestro sitio web y que nos avisan de que se est√°n produciendo bloqueos en la carga general de la p√°gina.

Est√° relacionado con animaciones implementadas en tu URL, como por ejemplo sliders o im√°genes que aparecen y desaparecen en diferentes intervalos de tiempo.

Para solucionar estos bloqueos, te recomiendo utilizar plugins como Javascript Async, que soluciona por completo este bloqueo.

Si lo prefieres, y siempre bajo la supervisi√≥n de alguien que est√© especializado en el dise√Īo de p√°ginas web, tambi√©n puedes implementar una etiqueta html “async” dentro de las l√≠neas de c√≥digo Javascript de la web.

Te decía que recomiendo en este caso instalar un plugin porque, en caso de insertar este atributo en un lugar incorrecto, puedes incluso empeorar las funcionalidades de la página.

‚áí Serve Scaled Images

Esta recomendaci√≥n tiene que ver con el tama√Īo de escalado que tienen las im√°genes de la URL que estamos analizando.

En muchas ocasiones, se puede dar el caso de que subas una imagen a tu biblioteca de medios que sea mucho mayor del tama√Īo que realmente se va a mostrar en la web.

Esto puede ocurrir debido a varios factores como, por ejemplo, que tu plantilla se reduzca por defecto o que t√ļ mismo le hayas indicado que deba mostrarla en un tama√Īo determinado.

Para ello, te recomiendo dos herramientas muy sencillas con las que podrás subir tus imágenes de manera exacta a como quieres que  se muestren.

Una de ellas es Page Ruler, una extensión de Google Chrome que te permitirá medir el ancho y alto de la zona de tu post o página donde quieres insertar la imagen.

Herramienta Page Ruler

La otra es Webresizer, una web donde podr√°s subir tu imagen en tama√Īo original e indicarle el tama√Īo que quieres que tenga. La herramienta reescala la imagen, y luego puedes descargarla en¬†tu disco duro para as√≠ subirla finalmente en el tama√Īo adecuado.

Weresizer

#2.2.2. YSlow Score

Ylow

Esta es otra de las formas que tiene GTMetrix de medir la velocidad de la URL dentro de la franja de Performance Scores.

YSlow Score nos indica el rendimiento que ofrece nuestra web en base a 34 aspectos relativos a Javascript, im√°genes, servidor y cookies (entre otros).

La función más importante de esta herramienta es la optimización de las imágenes.

Si bien ya sabes cómo hacerlo en conjunto con otras herramientas, existen otros aspectos a tener en cuenta, aspectos que tienen más que ver con el hosting que tengas contratado y con la manera en que tu navegador interpreta al almacenamiento de las cookies.

#2.2.3. Waterfall

Waterwall

En esta opción puedes ver gráficamente y en forma de cascada en qué recursos invierte tu URL el tiempo total de carga.

Leyendo estos datos de forma gráfica, puedes hacerte una idea sobre qué hacer en primer lugar.

Esta información la puedes descargar en formato HAR para ocuparte de ella más tarde (sobre todo si no deseas verla en pantalla en ese momento).

En el navegador Google Chrome dispones de varias herramientas (como, por ejemplo, Developer Tools) que te permiten exportar cómodamente todos estos datos.

3. Conclusiones

Como puedes comprobar, GTMetrix es una herramienta gratuita que ofrece información muy detallada para el análisis pormenorizado de la velocidad de carga de tu página web.

Lo bueno de esto es que podrás realizar un diagnóstico con todas las URLs de tu sitio web, y así resolver los conflictos que pueda tener.

Es comprensible que haya algunos aspectos que no identifiques al visualizar los resultados, ya que algunos son m√°s bien conceptos propios de desarrolladores inform√°ticos que de profesionales del sector del Marketing Online.

Aun así, siempre que quieras podrás consultar esta guía y mejorar el SEO de tu web.

Personalmente, ha sido un placer poder acercarte un poco esta herramienta. Solo me queda despedirme. Un saludo y hasta la próxima.



Autor Invitado

Daniel Bocardo, consultor SEODaniel Bocardo (@danibocardo)

Consultor de Marketing Online especializado en SEO y analítica web. Blogger en danielbocardo.com y empresario enamorado de las Redes Sociales.

Síguele en:

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando…