Hola 👋!!
Después de algún tiempo sin pasarme por aquí he vuelto para contarte cosas que pueden ayudarte a saber más sobre las páginas web. Y es que una de las cosas más importantes en tu página web es la velocidad de carga, ¿por qué? porque por norma general las personas tenemos prisa, nuestro tiempo es muy importante y queremos las cosas rápido y cuanto antes mejor.
Y no es que lo diga yo. Piensa en lo siguiente: ¿cuántas veces has estado buscando algo que te hacía falta por internet y como la página tardaba tanto en cargar te has ido a “otra cosa mariposa”?
No solamente tú lo vives en primera persona, es que hay estudios de Google que dicen que el 53% de los usuarios abandona una página web si tarda más de tres segundos en cargar.
Y cuando un usuario abandona tu página web sin haber interactuado en ella, se le llama rebote y es muy negativo si lo que intentas es posicionarte y conseguir visibilidad. De ahí que sea tan importante optimizar la velocidad de carga de tu web.
Por eso hoy te quería hablar de tres herramientas que te permiten hacer un test de velocidad gratuito a tu web. Voy a describir cada una de las herramientas sin meterme en detalles técnicos para que te resulte fácil entenderlo.
Y también te daré algunos consejos básicos para poder mejorar la velocidad de carga.
Tres Herramientas para medir la velocidad de carga de tu web
Velocidad de carga de tu web con PageSpeed Insights de Google
Esta Herramienta de Google diagnostica problemas de rendimiento y te da consejos para poder solucionarlos y mejorar así la velocidad de carga de tu web.
Si quieres saber la puntuación de una web, al entrar indica la dirección de la página y pincha en Analizar.
Una vez que ejecuta el análisis de rendimiento nos da una puntuación tanto para móvil como para ordenador que te muestro en las siguientes imágenes:
- Velocidad de carga para móvil:
- Velocidad de carga para ordenador:
Aprovecho para explicarte las métricas que puedes ver en el detalle de la evaluación, porque puede ser que no te estés enterando de nada 😊:
- FCP o First Contentful Paint: traducido literal sería «Primera Pintura del Contenido». Esta métrica mide la velocidad de carga percibida por el usuario o la rapidez con la que se carga el contenido de la página ya sea texto o imágenes. Para una buena experiencia de usuario se recomienda que sea de 1,8 segundos o menor y si está por encima de 3 segundos necesita mejorar.
- FID o First Input Delay: podríamos traducirlo por el «Retraso de la Primera Entrada» y mide la capacidad de respuesta de la carga, es decir, el tiempo desde que un usuario interactúa con la página (por ejemplo pincha un botón) hasta que la página da respuesta a esa acción. Una buena puntuación de esta métrica sería de 100 milisegundos y si está por encima de 300 milisegundos necesita mejorar.
- LCP o Largest Contentful Paint: esta métrica se traduciría como «Despliegue de contenido más extenso» y mide el tiempo que tarda en cargarse el elemento de contenido más grande dentro de la primera ventana de la web. Para que el usuario perciba una buena experiencia esta métrica debe ser de 2,5 segundos o menor y cuando supera los 4 segundos, necesita mejorar.
- CLS o Cumulative Layout Shift: significa «Cambio Acumulativo del Diseño» y mide la estabilidad visual de la web o la frecuencia con la que los usuarios experimentan cambios de diseño inesperados. La puntuación que da Google a esta métrica actualizada el 2 de junio de 2021 es de «Ventana de sesión máxima con un intervalo de 1 segundo, con un límite de 5 segundos».
Y más abajo nos da el detalle de estas métricas y en las oportunidades nos ofrece un listado de mejora que tiene la web:
Además si pinchamos en cada flechita de las líneas de oportunidades y diagnósticos nos da información sobre cómo podemos mejorar cada caso en concreto:
Decirte que no te obsesiones con las puntuaciones ya que no es necesario tener una puntuación de 100 o cercana a 100 para que la página funcione bien. Estas son unas métricas que ha determinado google como mejoras que puedes implementar en tu web, pero no es determinante para que tu página funcione bien. Por lo que tómalo como una orientación para saber cómo los usuarios experimentan el uso de tu web según google y para saber qué puntuación considera google que tiene tu web en base a todas las métricas analizadas.
Velocidad de carga de tu web con GTMetrix
GTMetrix es una herramienta que al igual que PageSpeed Insights realiza una prueba de rendimiento de tu web y te proporciona una evaluación del rendimiento general de la página, basándose también en las métricas de Google Lighthouse.
En primer lugar realiza una puntuación con letras siendo la A la mejor puntuación y después proporciona dos porcentajes, cuyo detalle se puede ver en la tabla inferior y que comento más adelante.
En segundo lugar realiza una puntuación en base a las “Web Vitals” que son una serie de métricas que Google ha estandarizado para medir la experiencia de usuario.
Para ver la descripción de las métricas tenemos que dirigirnos a la tabla inmediatamente inferior donde vamos a ver las tres primeras pestañas de «Summary», «Performance» y «Structure».
En la tabla nos ofrece, en «Summary», un resumen de la visualización de la velocidad, con el detalle del tiempo que tardan cada una de las métricas que hemos comentado anteriormente, «First Contentful Paint», «Largest Contentful Paint», y otras métricas como «Time to Interactive» (tiempo de interactividad), «Onload Time» (tiempo de carga) y «Fully Loaded Time» (tiempo de carga completa).
Y en el apartado de «Top Issues» describe los problemas principales en caso de que los haya, y en cada una de las filas podemos desplegar y pinchar en el botón «Learn how to improve this» donde te lleva a otra página con consejos de mejora.
En la pestaña de «Performance» nos ofrece un detalle de las Métricas de Rendimiento. Y además de las que hemos visto en la herramienta de PageSpeed Insights, GTmetrix añade las métricas de «Speed Index», «Time to Interactive» y «Total Blocking Time». Si situamos el cursor encima de los símbolos de interrogación nos da el límite de segundos a partir del cual la experiencia de ususario no sería buena.
Y en la parte inferior nos da información sobre los Tiempos del Navegador («Browser Timings»), como Tiempo de Redirección, Tiempo al Primer Bite, Tiempo de carga del contenido DOM, Duración de la Conexión al Servidor, Primera Muestra de la página, Tiempo de Carga, Tiempo que tarda el servidor en generar la respuesta inicial (Backend Duration), Tiempo interactivo DOM y Tiempo de Carga Completa, que aunque ya no tienen tanta importancia como los «Web Vitals», si mejoramos estos últimos también mejoraremos por consiguiente los tiempos de navegación.
Pasamos a la pestaña «Structure» o Estructura donde nos ofrece información más técnica y más concreta de las mejoras que podemos implementar en la web ya que nos detalla todos los problemas específicos que ha obtenido de la web.
Al igual que te comentaba con la herramienta de PageSpeed Insights, las métricas nos ofrecen indicadores de cómo está percibiendo el usuario la velocidad de la web, pero no hay que tener una puntuación «A» para que la página funcione bien. La pega de esta herramienta es que no te deja elegir una ubicación geográfica, si no que viene por defecto. Además si haces el test una segunda vez puede que te de una puntuación diferente, así que lo dicho, no te obsesiones con las puntuaciones.
Velocidad de carga con Pingdom Tools
Esta es la que más me gusta porque además de dejarte elegir la localización desde donde se va a hacer el test, es muy sencilla de entender y de usar.
Una vez dentro de la página de Pingdom Tools tienes que introducir tu dirección en la URL, elegir el servidor desde donde quieres que se realice el test, yo suelo elegir el de Frankfurt o el de Londres por cercanía y pinchar en «Start Test».
Cuando termina de realizar el test da unos resultados en la parte inmediata inferior, entre los que destaco el tamaño de la página (Page size) y el tiempo que tarda en cargar la página web (Load time), luego le da una puntuación con letra y número (Performance grade) y el número de peticiones (Requests) que son las solicitudes que se hacen al servidor para permitir el acceso a la información de la web, cuanto menor sea el número mejor.
La parte de «Improve page performance» es la parte técnica donde podemos ver los detalles de optimización de la página para un mayor rendimiento, pero ahí no entraré porque no es la parte que nos interesa. Quédate con el tiempo de carga que es la parte que nos afecta y a la que estamos dando prioridad en este post. Y ahora bien, has sacado tu resultado pero no tienes idea de cómo puedes mejorar la velocidad de tu web, pues déjame que te de algunos consejos.
Cuatro consejos básicos para mejorar la velocidad de carga de tu web
Como estás viendo a lo largo de todo este post la velocidad con la que carga tu web es un aspecto fundamental tanto para la experiencia de usuario, como para el posicionamiento en Google, por eso quiero darte unos consejos básicos para que puedas mejorarla.
1. Reduce el tamaño de las imágenes
Uno de los problemas principales que encuentro en las páginas web y que ralentiza la carga es el tamaño de las imágenes, si subes tus imágenes sin optimizarlas estás añadiendo un peso elevado a tu web.
Existen páginas gratuitas donde poder reducir el tamaño de tus imágenes, por lo que no hay excusas para no hacerlo. Por ejemplo Tinypng te permite comprimir imágenes en formato WebP, PNG o JPEG.
Una página también gratuita es Iloveimg que te permite convertir las imágenes de varios formatos a jpeg, recortar, redimensionar y comprimir la imagen además de otras opciones.
Y otra opción que te dejo aquí es Photopea un editor avanzado de imágenes en línea gratuito y que te permite experimentar opciones como las que tiene Photoshop. Si quieres resultados más avanzados te la recomiendo, no descarto hacer próximamente un manual para que puedas utilizarla 😊.
2. Redimensiona las imágenes
Subir las imágenes en un tamaño en el que no se va a utilizar también puede retrasar la carga de la web, ya que el servidor perderá tiempo con el cambio de tamaño y además la web se subirá en un tamaño más grande y ocupará más espacio innecesariamente.
Te pongo un ejemplo, si el espacio dedicado a la imagen es de 400 x 300, no subas la imagen con un tamaño de 800 x 900.
Para redimensionar la imágen puedes usar Iloveimg o Photopea y para saber si la imagen está bien redimensionada puedes instalar la extensión de Google Chrome de Pic Info que te indica la dimesión usada por la web y la dimensión actual, que es la dimensión con la que se ha subido la imagen.
3. Pospón la carga de imágenes que no aparecen en la pantalla
Esta es una técnica que se conoce como Lazy Loading y siginifica «retrasar la carga», en este caso de las imágenes para que el solamente se carguen las imágenes que el usuario ve en la pantalla, las imágenes que haya en secciones posteriores se cargarán solamente cuando el usuario baje a esa sección.
Esto nos ayuda mucho con la experiencia de usuario y la velocidad de carga ya que el consumo de recursos es menor.
Existen plugins como Lazy Load de WP Rocket que te permite implementar esta función.
4. Asegúrate que la velocidad de tu servidor es óptima
Es importante saber dónde está alojada tu web, no es lo mismo circular por una autopista en la que no hay tráfico que circular por una autopista abarrotada. Es por ello que quiero hablarte de las diferencias entre un hosting compartido y un servidor VPS.
Un hosting compartido, como bien dice la palabra es un alojamiento dentro de un servidor donde compartes recursos con otros usuarios, ¿qué ocurre cuando compartes recursos?, que en determinados momentos puede ocurrir que el resto de sitios tengan muchas peticiones de entrada y el acceso a tu web se pueda ralentizar. Las ventajas del hosting compartido es que es más económico.
En cuanto al servidor VPS optimizado es un alojamiento dentro de un servidor con unos recursos específicamente asignados para ti, esto quiere decir que el consumo de recursos de otros usuarios no van a afectar a los recursos que hay asignados para ti, digamos que es una partición de un servidor que es unícamente tuya y todos los recursos que hay dentro de ese espacio están destinados a tu disposición. El precio es más elevado en este caso, pero merce la pena si lo que buscas es un buen rendimiendo de tu página web.
Esto es todo por hoy, espero que te haya sido de utilidad y que puedas aprovechar estos consejos para que tu página tarde menos en cargar y los usuarios quieran quedarse a navegar por ella. Y si quieres saber como optimizar tu web al completo para posicionarte en primera página de Google, contacta conmigo y lograremos juntos atraer a todos esos clientes que están buscando tu ayuda y que estás dejando escapar por no estar visible.
Te espero en el siguiente post 😉
