Prueba o test de velocidad de una página web

¿Por qué una página web tarda en cargar o es lenta?

In Wordpress by José Luis Martínez11 Comments

Tiempo de Lectura: 10 minutos

Si como desarrollador, programador o webmaster de un website o e-commerce empresarial, creamos una página web que tarda en cargar o es lenta, ¿debemos preocuparnos? Rotundamente sí. La velocidad de carga de una web afecta a muchas más cosas de las que pudiéramos pensar en un primer momento:

Una web rápida y ligera:

  • Proporcionará una experiencia de uso satisfactoria.
  • Google nos premiará y mejorará nuestro posicionamiento.
  • Nuestra página se mostrará a más usuarios/clientes.
  • Recibiremos más visitas.
  • Venderemos más productos/servicios.

Una web lenta y pesada:

  • Afectará a nuestra reputación como empresa.
  • Google nos penalizará y empeorará nuestro posicionamiento.
  • Nuestra página se mostrará a menos usuarios/clientes.
  • Recibiremos menos visitas.
  • Venderemos menos productos/servicios.

Como podemos imaginar, la velocidad de nuestra web es algo crucial. En este artículo vamos a ver las causas más frecuentes de lentitud de un website y cómo solucionarlas.

La velocidad de carga de una web influye mucho en la experiencia de usuario

Tengo un hosting súper rápido

En artículos anteriores, hemos visto que la velocidad del hosting, afecta en gran medida a la rapidez de carga de una página web. Pero ésto no es suficiente para asegurar una gran experiencia de uso. A menudo vemos casos donde, aún teniendo un hosting de gran rendimiento, la velocidad de carga de la web sigue siendo lenta.

Vamos a ampliar la perspectiva y ver otras causas por las que una página web tarda en cargar o es lenta. No pretendemos hacer una guía técnica, para eso ya están las de Google, si no dar una recopilación de principios y buenas prácticas que evitarán que cometamos errores al desarrollar un website.

¿Por qué mi web es lenta?

Las causas más probables y frecuentes son:

  1. Ocupa demasiado.
  2. Carga recursos de terceros que crean esperas.
  3. Tiene demasiados Plugins.

Una página web no es nada más que un conjunto de líneas HTML, enlaces a páginas de estilos CSS y referencias a scripts que cargan código adicional. El navegador comienza a leer línea por línea y construye o renderiza la página. Dependiendo de la sección donde se ubiquen los elementos a cargar (Head, Body, Footer), tendrán una mayor o menor prioridad.

El objetivo es mostrar al usuario lo antes posible un contenido visualmente apto.

Con esto en mente, si planteamos prioridades y optimizamos los recursos, no debemos tener problemas de rendimiento. Veamos cómo hacerlo.

El tamaño de una página web

En los inicios de Internet, el tamaño de las páginas web era de unas pocas decenas de KB pues las conexiones a Internet de la época no daban para más. Los vetustos módems de 28.000 baudios a duras penas cargaban 4 KB/s.

Internet antigua navegador Netscape

Hoy en día el tamaño promedio de una página son de aproximadamente 2 MB. Está claro que las velocidades de acceso son muy superiores, pero no podemos excedernos, pues todo elemento contribuye a hacer más lenta la carga de una página y los usuarios actuales demandan mucha rapidez.

¿Cómo reducir el tamaño de una página web?

Si ordenamos de mayor a menor importancia:

  1. Habilitar la compresión.
  2. Optimizar las Imágenes.
  3. Minificar el código.

1. Habilitar la compresión

Los servidores de Internet disponen de una opción para comprimir el contenido que se le envía al cliente: la compresión GZIP  y la más reciente Brotli. Todos los navegadores modernos son compatibles con ellas. Habilitarlas puede suponer una reducción de hasta el 90% en la transferencia de información, lo que reduce de manera significativa el tiempo de descarga de los recursos del website y acelera la carga de la página.

Herramienta-> comprueba si tu web dispone de compresión en este enlace

2. Optimizar Imágenes

Una parte importante del tamaño de una web son las imágenes que lleva incrustadas. Se pueden ahorrar muchos KB adoptando una política de optimización de imágenes:

  • Tener claro el ancho máximo en píxeles que tiene nuestro website o área donde va a aparecer una imagen. Ejemplo: en la web de PRORED el ancho máximo es de 1400px. Por tanto, las imágenes más grandes, las que ocupan todo el ancho disponible, deben tener como máximo esos 1400 píxeles. Hacerlas más grandes no tendría sentido (lo de la resolución Retina es para otro artículo) y desperdiciará preciosos KB.
  • El formato de la imagen es importante:
    • Para fotografías usaremos JPG con una compresión del 50%-60%.
    • Para imágenes prediseñadas o vectoriales usaremos PNG o GIF  y ajustaremos los colores a 128 o 64.

Guía-> hazte un experto en optimizar imágenes con esta guía de Google

3. Minificar el código

Es un proceso por el cual se compacta el código al extremo, eliminando lo innecesario y facilitando el procesado por parte de los navegadores. Lo puedes apreciar visualmente en esta imagen:

Comparativa de código minificado y sin minificar

Herramienta-> Minificador gratuito online

Muchas gracias a Karen Ferrer por su aportación.

Optimizar la carga de  recursos de terceros

Una parte importante del tiempo de carga de una página web se consume en la espera a contenido de terceros.

Cuando una navegador comienza a descargar y componer la página web, se topa con instrucciones que le ordenan cargar elementos fuera del propio código HTML de la página, por ejemplo:

  • Javascript que ejecuta código.
  • Fuentes de letra adicionales.
  • Bibliotecas de código como jQuery.
  • Hojas de estilos CSS externas.

Ejemplo de código en Javascript

La estrategia para mejorar el tiempo de respuesta, es decir, dar la impresión de que la web carga más rápido de lo que en realidad lo hace, es:

  • Si el Javascript es pequeño, insertarlo directamente en el código HTML para evitar realizar una solicitud externa.
  • Cargar los archivos de fuente adicionales o recursos Javascript externos de manera asíncrona, con el uso de atributos async o defer.
  • Si las hojas CSS son pequeñas, insertarlas directamente en el HTML.
  • Si el CSS es muy grande, cargar una parte directamente y retrasar la carga del resto cuando la mitad de la página ya se haya cargado.

Limitar el uso de plugins

En WordPress es habitual el uso de plugins. Su uso complementa el website con nuevas funciones y diseños, pero claramente, son un arma de doble filo:

  • Su eficiencia de carga depende de la pericia del programador. Hay plugins ligeros y con un diseño inteligente, otros son tremendamente pesados, con una carga de consultas a la base de datos elevada y penalizan mucho el tiempo de respuesta del sitio.
  • A medida que el número de plugins aumenta, el tiempo de carga y esperas lo hará también, pues cada plugin añade nuevo código y consultas a la base de datos.
  • Si no tenemos cuidado, podemos estar duplicando la carga de bibliotecas como jQuery o archivos de tipos de letra. Incluso pueden existir incompatibilidades entre ellos.
  • Evita instalar plugins para probarlos. Pueden alterar la base de datos de WordPress y hacerla menos eficiente aunque los desinstales posteriormente.

Plugins en wordpress un arma de doble filo

Nuestras recomendaciones sobre plugins

  • Utiliza un entorno de pruebas o test para mantener el de producción lo más limpio y optimizado posible.
  • Instala los Plugins que sean absolutamente necesarios para la funcionalidad de tu web. No cargues un mapa de Google por hacer bonito, no muestres un slider por agregar algo animado, evita los popups que causan rechazo por parte del usuario y causan problemas de visibilidad en dispositivos móviles…
  • Si necesitas áreas complejas como foros y portales de usuario, utiliza un subdominio para ellos y redirecciona desde tu rápida web principal: foro.tudominio.com. Si además se encarga otro servidor de él, mejor que mejor, porque evitaras sobrecargar el de la página principal.
  • Si te planteas un blog lleno de widgets sociales, herramientas de búsqueda, plantilla de tema especial… usa también un subdominio/servidor diferente: blog.tudominio.com
  • Busca y paga un buen plugin de caché, que te permita optimizar al máximo tu website. Pruébalo primero en el entorno de test.
  • En general piensa siempre en una web ligera y simple antes que compleja y recargada.

Herramientas para comprobar la velocidad de una web

Las mejores herramientas para testear tu página web son 3:

  • La consola de desarrollador de Google Chrome o Mozilla Firefox: úsala para detectar fallos de carga de Javascript, revisar los CSS que usa tu web, conocer todos los recursos externos que utiliza, ver un gráfico de rendimiento de red/carga. Es de un valor incalculable para un programador web.
  • Google Page Speed Insights: te permitirá conocer de un vistazo el grado de optimización y la velocidad de respuesta de tu servidor web. Incluso te proporcionará los recursos optimizados como imágenes, código minificado y css.
  • GTmetrix: parecida a la de Google pero te dará más datos e incluso puedes llevar un seguimiento temporal.

Y no te olvides de:

  • Hacer pruebas de rendimiento real con dispositivos móviles y conexiones de datos 3G o 4G.
  • Comprobar las páginas landing más frecuentes de tu web, normalmente los clientes llegan por ellas, no por tu página home.
  • Hacer pruebas en horas de mucho tráfico, como por ejemplo, después de cenar.
Escrito por

José Luis Martínez

LinkedIN