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?

 

[separator style_type=»double» top_margin=»» bottom_margin=»» sep_color=»#1e73be» border_size=»» icon=»fa-commenting-o» icon_circle=»» icon_circle_color=»#ffffff» width=»» alignment=»center» class=»» id=»»]


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:

[checklist icon=»fa-check» iconcolor=»#ffffff» circle=»» circlecolor=»#1e73be» size=»15px» class=»» id=»»][li_item icon=»»]Page Load Time: Es la velocidad de carga de la página, medida en segundos, desde la ubicación marcada.[/li_item][li_item icon=»»]Total Page Size: Se trata del tamaño o peso total en kb o Mb de la URL que estamos analizando.[/li_item][li_item icon=»»]Requests: Nos indican el número de mensajes de aviso o atención que debemos tener en cuenta.[/li_item][/checklist]

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.

[piopialo vcboxed=»1″]Mega #Tutorial: GTMetrix y la velocidad de carga web por @danibocardo[/piopialo]

#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.

[separator style_type=»double» top_margin=»» bottom_margin=»» sep_color=»#1e73be» border_size=»» icon=»fa-microphone» icon_circle=»» icon_circle_color=»» width=»» alignment=»center» class=»» id=»»]


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: [social_links icons_boxed=»» icons_boxed_radius=»» icon_colors=»#AA0000″ box_colors=»» tooltip_placement=»» rss=»» facebook=»https://www.facebook.com/danibocardogutierrez/» twitter=»https://twitter.com/danibocardo» instagram=»» dribbble=»» google=»https://plus.google.com/u/0/+DanielBocardoGutierrez» linkedin=»https://www.linkedin.com/in/danielbocardogutierrez» blogger=»» tumblr=»» reddit=»» yahoo=»» deviantart=»» vimeo=»» youtube=»» pinterest=»» digg=»» flickr=»» forrst=»» myspace=»» skype=»» paypal=»» dropbox=»» soundcloud=»» vk=»» email=»» show_custom=»no» alignment=»center» class=»» id=»»]