Categor铆as: Consejos SEO

Mega Tutorial: GTMetrix y la Velocidad de Carga de tu Sitio Web

S铆guele en:

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.

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.

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 鈥渆ntregue鈥 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.

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.

#2.2.2. YSlow Score

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

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 (@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:

Est茅 art铆culo fue modificado el 5 abril, 2017 12:21 pm

Webpositer

En el Blog de Webpositer tienes las 煤ltimas novedades sobre Posicionamiento Web SEO, Marketing Online, Redes Sociales, as铆 como Tutoriales y Entrevistas.

Disqus Comments Loading...
Compartir
Publicado por
Webpositer

Art铆culos recientes

  • Consejos SEO
  • V铆deo Consejos

C贸mo utilizar Twitter en tu empresa como herramienta para impulsar tu negocio y ganar seguidores gratis

Con una audiencia de 6 millones de usuarios activos en Espa帽a, la inmersi贸n en Twitter por parte de las empresas…

14 junio, 2019 12:45 am
  • Noticias

#SEOplus19: Todo listo para el evento SEO del a帽o

驴Listo para participar en la batalla SEO m谩s alucinante donde las tropas del White, Black y Grey Hat SEO lancen…

5 junio, 2019 7:18 am
  • Consejos SEO
  • V铆deo Consejos

Tutorial sobre SEMrush en espa帽ol: Aprende a estudiar a tu competencia como un SEO profesional

Descubre en este tutorial sobre SEMrush c贸mo empezar a utilizar la herramienta SEO imprescindible para el an谩lisis de la competencia.…

24 mayo, 2019 9:39 am
  • Consejos SEO
  • V铆deo Consejos

C贸mo hacer fichas de producto atrapaventas para sumar clientes a tu tienda online

驴Quieres potenciar las ventas en tu e-commerce? Descubre las 10 claves para hacer fichas de producto de tu tienda online…

17 mayo, 2019 11:00 am

Utilizamos cookies propias y de terceros para analizar tus h谩bitos de navegaci贸n, obtener informaci贸n estad铆stica, mostrar publicidad personalizada e interactuar en redes sociales. Si contin煤as navegando consideramos que aceptas su uso. M谩s informaci贸n, en nuestra Pol铆tica de cookies: https://www.webpositer.com/privacidad-cookies.html