6 consejos para optimizar la velocidad de carga de tu página web y 4 herramientas para la medición

El tiempo de carga es una parte muy importante del rendimiento de un sitio web. Este medidor determina qué tan rápido las personas pueden acceder a la información en una web. Si las personas tienen problemas para acceder a la información de un sitio web, perderán el interés y se irán a otro lado. Por lo tanto, es esencial reducir el tiempo de procesamiento de las páginas web y minimizar el tiempo que tarda un usuario en interactuar con la página web.

Sered es una empresa de venta de hostings y dominios, que además, ayuda a sus clientes a mejorar el tiempo de carga y la optimización de los Core Web Vitals para obtener un mayor resultado de éxito con sus páginas webs. Para profundizar un poco más en este tema, hemos contactado con ellos para que nos dieran más información de este tema y de algún caso práctico que pudiesen compartir.

Nos hablaron de un caso, en el que trabajaron recientemente y con el que después de una serie de implementaciones, consiguieron reducir la velocidad de carga de 3.7 segundos a 815 milisegundos.

Cómo trabajar la velocidad de carga de una web (Case Study)

Entre las implementaciones realizadas, destacaron la instalación del plugin LiteSpeed Caché, con una configuración básica, que integra minificación en HTML y optimización de imágenes cargadas. Además, trasladaron el sitio web a uno de sus alojamiento de alto rendimiento, los cuales cuentan con discos de SSD NVMe, servidor con LiteSpeed y configuración optimizada para el máximo rendimiento en WordPress.

A pesar de que el rendimiento del sitio haya mejorado considerablemente con la implementación de soluciones, es un sitio que aún no está del todo actualizado, así que aún existe margen de mejora. Sin embargo, se ha llegado a una buena puntuación de rendimiento a nivel usuario, pasando de un 36% a un 90%.

Otra de las métricas importantes para medir el rendimiento es el FCP (First Contentful Paint, o primer despliegue de contenido). El FCP es el tiempo que tarda en aparecer el primer contenido de la web que se muestra al usuario. En el primer test, esta métrica se situaba en los 3.3 segundos, mientras que en el segundo, tras implementar el plugin y el resto de mejoras, llegó a los 443 milisegundos.

Por qué es tan importante la velocidad de carga en tu sitio web

La velocidad de carga es uno de los elementos clave que se relacionan con el éxito de una web. Y eso es porque, cuando la velocidad de carga es buena, afecta positivamente a una serie de aspectos, en los que influye de manera negativa en caso de que dicho tiempo aumente.

Algunos de esos aspectos son el posicionamiento SEO, ya que una velocidad lenta puede conllevar que Google no indexe el contenido; la tasa de conversión, que disminuye a medida que aumenta el tiempo de carga; o el retorno de la inversión, porque cuanto más tiempo tarda en mostrarse un contenido, menos gente esperará a que cargue.

4 herramientas con las que medir el tiempo de carga

Existen multitud de herramientas para medir el tiempo de carga de tu web. Todas ellas, además del tiempo de carga de la web, muestran las implementaciones necesarias para solventar los problemas. Las más utilizadas son:

1. Google PageSpeed Insights

Esta herramienta se sirve de los propios datos de Google para mostrar la información necesaria.

2. GTmetrix

GTmetrix se basa en los datos de Lighthouse para aportar la información solicitada por el usuario.

3. Pingdom

Pingdom coge los datos del propio PageSpeed, pero cuenta con la gran ventaja de que su interfaz de usuario es mucho más intuitiva y fácil de interpretar que la herramienta de Google.

4. Webpagetest

Webpagetest es una herramienta gratuita que toma los datos de la extensión Lighthouse.

6 consejos para optimizar la velocidad de carga de tu página web

Si, después de hacer un test de velocidad, la herramienta arroja resultados negativos, puedes aplicar cualquiera de estos consejos para mejorar la web:

1. Utiliza un plugin de caché

Para sitios web de WordPress, es recomendable instalar un plugin de caché, que han sido creados con el objetivo de mejorar el rendimiento web.

Estos plugins ofrecen cargas más rápidas del sitio web, almacenando información para no tener que cargarla cada vez que el usuario quiera navegar en dicha web.

Entre ellos, nos gustaría destacar LiteSpeed Caché, el plugin que utilizan en el hosting ssd de Sered y que nos han recomendado.

2. Optimiza las imágenes

Hay varias técnicas para optimizar las imágenes en un sitio web:

Comprime las imágenes antes de subirlas o elige un plugin que las comprima directamente; es más recomendable la primera opción, ya que si estamos intentando reducir el tiempo de carga, un plugin prescindible puede causar el efecto contrario.
Haz la carga de imágenes en el tamaño en el que se vayan a ver: no subas imágenes en tamaños más grandes, ya que esto puede hacer que el tiempo de carga aumente.
Utiliza png solo para los archivos en los que sea necesario, ya que estas imágenes tienen un peso muy superior al formato jpg, y utilizarlas ralentiza notablemente la carga.

3. Minificación. Reduce los códigos de tu web

La técnica de la minificación es muy sencilla de implementar. Consiste en eliminar los caracteres innecesarios en el código HTML, tanto en CSS como en JavaScript. Estos caracteres pueden ser espacios, saltos de línea, sangrías o comentarios. En definitiva, los caracteres que son prescindibles para que el código se interprete correctamente.

4. Pospón la carga de elementos

Con la función de carga diferida, existe la posibilidad de ir mostrando la página a medida que el usuario solicita la información.

Al acceder a la web, solo se carga lo que el usuario está viendo, y el resto se mostrará de manera progresiva con la navegación, priorizando la experiencia de usuario y evitando que la web tenga que cargar desde el inicio a cada clic.

5. Elimina los redireccionamientos múltiples

Un redireccionamiento múltiple se produce cuando se hace una redirección sobre una página que estaba recibiendo otras. Algo así:

A → B; cuando B → C, se produce un redireccionamiento múltiple de la siguiente manera: A → B→C.

Esto hace que el servidor tenga que enviar una respuesta y esta solicite otra url diferente: con ello, el tiempo se duplica.

Para solventar este problema, hay que evitar ese paso intermedio, de manera que la redirección que dejemos sea A→C.

6. Desactiva los plugins que no utilizas y limita las TPA

Tener instalados muchos plugins en tu sitio hace que el servidor lo quiera cargar todo. Por eso es imprescindible limitar el uso de plugins, hacer un cribado de los que utilizas y los que no, y desactivar estos últimos.

Las TPA son fragmentos de páginas externas, tales como mapas o el feed de Instagram. Para insertarlos en la web, se utilizan iFrames, así que a efectos de carga, se tiene que mostrar tanto tu web como la insertada en el iFrame, y por ello tarda más.

En definitiva, los test de velocidad son herramientas muy importantes para determinar si hay algo que estamos haciendo mal. Es clave identificar el problema y comenzar a aplicar las soluciones necesarias para solventarlo.

Si te han quedado dudas, quieres mejorar el tiempo de carga y no sabes cómo implementar las soluciones que te hemos dado, puedes ponerte en contacto con Sered.