Cómo Medir la Velocidad de Carga de tu Sitio Web y Hacerlo Más Rápido
Medir la Velocidad de Carga de tu Sitio Web

Medir la velocidad de carga de de tu sitio web, blog o ecommerce es algo que necesitas hacer sí o sí. ¿El motivo? Google penaliza a los sitios web que tardan mucho en cargar.

Así, un elemento clave que se trabaja en una estrategia SEO es el tiempo de carga de un sitio web, esto es, el tiempo que pasa desde que la persona pone la URL de un sitio en el navegador y la web se carga por completo.

Existen diferentes herramientas para medir el tiempo de carga de un sitio web. Mi consejo es que uses varias y contrastes los resultados obtenidos.

Esto te dará una idea mucho más clara de dónde están los problemas y de cómo solucionarlos.


Cómo medir la velocidad de carga de un sitio web

A la hora de medir la velocidad de carga de una web, blog o ecommerce, tenemos diferentes herramientas disponibles.

Estas son mis tres herramientas favoritas:

En el vídeo de esta semana te enseño cómo utilizar estas herramientas para medir la velocidad de carga de un sitio web:

Para más vídeos como este, no te olvides de suscribirte a mi canal de Youtube.


Optimizar la velocidad de carga de un sitio web

Optimizar el tiempo de carga de una web o blog no es solo importante cara a SEO, sino también cara al usuario al que nos dirigimos.

Aquí tienes algunos datos:

  • Las estadísticas demuestran que 3 de cada 4 personas abandonan un sitio web si este tarda más de 5 segundos en cargar.
  • Google tiene en cuenta la velocidad de carga de un sitio web a la hora de mostrarla o no entre los primeros resultados.
  • Si un sitio web tarda mucho en cargar, esto causa una mala experiencia de usuario, lo que daña nuestra marca y reputación.

Tal y como puedes ver, es de vital importancia que tu sitio web, blog o ecommerce cargue lo más rápido posible.


Cómo acelerar la velocidad de carga de un sitio web

Si no eres programador web, lo mejor que puedes hacer es contratar un profesional. Si lo deseas, puedes ponerte en contacto conmigo y hablamos.

En caso de tener conocimientos avanzados de desarrollo web, estas son las pautas que has de tener en cuenta para acelerar la velocidad de carga de un sitio web.

1. Comprimir los archivos con Gzip

Es necesario comprimir los archivos HTML, CSS y JavaScript, ya que esto aumenta notablemente la velocidad de carga.

Recuerda que no hay que comprimir las imágenes ni archivos pdf, ya que, de por sí, estos ya vienen comprimidos, con lo que una nueva compresión puede aumentar el tamaño del archivo final.

El motivo por el que preferentemente se ha de utilizar Gzip, es que actualmente es el método de compresión más popular y eficiente, a la vez que gratuito.

Asimismo, todos los navegadores modernos lo conocen y utilizan, por lo que su uso está muy extendido.

2. Reducir el número de peticiones http

Cada uno de los archivos que forman parte de una página web se carga con una petición http.

Así, cada imagen, hoja de estilos, fuente externa, etc. es una petición http.

Esto significa que si cargamos muchos recursos en una sola página, esto genere muchas peticiones http, haciendo que el sitio web vaya más lento.

Estas son algunas de las cosas que puedes hacer para reducir el número de peticiones http:

  • Combinar las hojas de estilo CSS en una sola.
  • Combinar los archivos de JavaScript en un sólo archivo.
  • Utilizar sprites de CSS o font icons.
  • Usar menos fuentes externas, como Google Fonts.
  • Cargar solo las imágenes necesarias para garantizar una buena experiencia de usuario.
  • Ir con cuidado a la hora de cargar código externo, como el likebox de Facebook

3. Optimiza el tamaño de las imágenes

La mayoría de sitios web que tienen problemas de carga, los tienen aquí. Y es que muchas personas, por desconocimiento, suben imágenes que pesan demasiado.

4. Minimiza el código web

Es recomendable minimizar el html, css y JavaScript de un sitio web. Igualmente, ten presente que, en alguna ocasión, el sitio web puede dejar de funcionar tras minimizarlo.

Es por este motivo, que te recomiendo minimizar cada uno de estos archivos de modo independiente y hacer tests para ver que no se plantea ningún problema.

5. Añadir un Expires Header

Lo que hace un expires header es fijar el tiempo que ha de pasar hasta que el cliente necesite de nuevo descargar un contenido de nuestra web.

En otras palabras, el expires header le indica al navegador que utilice el contenido de su caché hasta la fecha marcada.

La principal preocupación que existe en el uso de expires headers era que si se actualiza el contenido.

Por ejemplo, los usuarios que visiten nuestra web no verán los resultados actualizados, pues el navegador cargará los resultados que tiene en la caché.

En mi caso, utilizo el plugin de pago WP Rocket tanto en mis sitios web como en los de mis clientes.

Este plugin te facilita enormemente el trabajo, ya que lo configuras todo desde su panel de control y, en caso necesario, puedes borrar la caché de una página en concreto o de todo el sitio web.

6. Evita los redireccionamientos

Hay ocasiones en que es imprescindible hacer redireccionamientos, pero evítalo siempre que sea posible.

El motivo es que cuando el navegador encuentra un redireccionamiento, tiene que hacer el seguimiento, con lo que la página web correspondiente tarda más en cargar.

Siempre es mejor un redireccionamiento 301 a una página de error 404. Este último caso puede afectar al SEO, con lo que mejor redirigir. Pero si lo puedes evitar, mejor.

7. CSS en el header y JS en el footer

En el caso de las hojas de estilo, es recomendable que se carguen todas en el header del sitio web, esto es, dentro de las etiquetas…del html.

En el caso de los archivos JavaScript (JS), es recomendable que, en la medida de lo posible, se carguen en el footer, esto es, en la parte inferior del html.

El motivo es que si el archivo JS no es asíncrono, esto paraliza la carga del resto del sitio web, dando problemas.

Hay excepciones, como es el caso de Google Analytics, en el que el JS se coloca en el header. Esto es porque es un JS asíncrono, esto es, se carga paralelamente al resto de la página web.

8. No uses CSS y JS inline

En la medida de lo posble, es mejor que el CSS y el JS se cargue en los archivos correspondientes y no se escriba inline en el html.

El motivo principal es que los archivos CSS y JavaScript pueden ser guardados por la caché del navegador, con lo que la segunda vez que se visita la web, no hace falta volver a descargarlos.

Asimismo, reducimos el tamaño del archivo HTML y evitamos el código redundante, esto es, repetido en varias páginas web.

9. Borra los scripts que no necesitas

Cuando se utilizan plantillas de WordPress, muchas veces se cargan archivos de JS que no utilizamos.

En este caso, es hablar con el desarrollador para ver cómo podemos desactivar los archivos que no necesitamos.

Lo mismo sucede cuando cargamos muchos plugins o extensiones, puede ser que algunos de ellos carguen los mismos archivos, haciendo que el sitio web vaya más lento.

Aquí hay que eliminar archivos JavaScript duplicados y borrar los que, por el motivo que sea, no necesitas.

10. Usa AMP para los blogs

AMP es una tecnología que hace que los blogs carguen mucho más rápido en dispositivos móviles.

Esto no es solo importante cara al tiempo de carga, sino también para SEO, ya que Google premia los blogs que usan AMP.

Así, si tu sitio web incluye un blog, necesitas optimizarlo para AMP.

11. Reduce la latencia

La latencia es el tiempo que tardan los datos en viajar desde el servidor al navegador del usuario.

Así, si el alojamiento está en Estados Unidos, pero los clientes están en España, existirá una latencia importante, afectando a la velocidad de carga.

Esto se puede solucionar de dos maneras:

  1. Trasladar el servidor al país donde se encuentran la mayoría de clientes.
  2. Usar un Content Delivery Network (CDN) que replique los datos en servidores distribuidos alrededor del mundo.

Existen CDNs gratuitos, pero no te los recomiendo. En caso de usar esta opción, mi recomendación es que uses un CDN de calidad, como MaxCDN.

Otras opciones

Existen más soluciones para optimizar el tiempo de carga, como el uso de eTags, reducir el número de búsquedas DNS y elementos del DOM, entre otras.

Sin embargo, con la lista que te he mencionado tienes garantizado un sitio web que cargue como un cohete 🙂


Acelera la velocidad de carga de tu web

Deseo que este artículo te haya servido tanto para tomar conciencia de la importancia del tiempo de carga de tu sitio web, como para saber los puntos básicos a tener en cuenta.

Recuerda que si necesitas ayuda con la optimización de tu sitio web, puedes contactarme y hablamos. Mis presupuestos son siempre a medida, con lo que no dudes en escribirme.

0 Comentarios

Contesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Inicia Sesión con tu Usuario y Contraseña

¿Olvidó sus datos?