8 pasos clave para optimizar la velocidad de carga de tus páginas web

No hay nada que arruine más a un sitio que una mala experiencia de carga. De hecho, el retraso de un segundo podía reducir la satisfacción de un cliente hasta en un 16%, por eso asegurarte de que tu web carga rápidamente es crucial para tu negocio. 

Optimizar la velocidad de tu sitio ayudará a mejorar la experiencia de tus clientes y aumentará tu tasa de conversión.

No importa el tamaño de tu empresa: si tienes un sitio web en internet y quieres aparecer en los primeros lugares de los buscadores, la velocidad de carga de tu web es un factor importante, especialmente para las tiendas de comercio electrónico que por lo regular suelen ser mercados saturados. Para que conozcas el tema a profundidad, comencemos con lo básico.

¿Por qué importa la velocidad de un sitio web?

La velocidad de tu sitio web es tan importante para la experiencia del usuario que hasta Google comenzó a incluirla como uno de sus factores de clasificación. Ahora, incluso en estrategias de SEO, una velocidad de carga web baja podría permitir que otro sitio, tal vez tu competencia, se te adelante en una página de resultados de motor de búsqueda crucial. 

Acelerar la velocidad de tu web es importante tanto para los usuarios como para tu negocio, ya que un sitio web lento afectará la experiencia del usuario y por lo tanto te hará perder clientes. 

El tiempo de espera de carga puede ser la diferencia entre una buena venta o un carrito de compra abandonado. Uno de cada cuatro visitantes abandonaría el sitio web si el tiempo de carga tarda más de cuatro segundos. Además, una alta tasa de rebote indicaría a los buscadores que tu sitio web no tiene contenido útil y relevante para los usuarios, por lo que lo posicionará cada vez más abajo en las clasificaciones de resultados.

¿Cómo medir la velocidad de carga de una página web?

Si quieres obtener información sobre el tiempo de carga de tu sitio web, puedes usar la herramienta gratuita de Google: PageSpeeds Insights. Con ella puedes obtener una calificación de tu sitio en una escala de cero a 100. Aquí hay un ejemplo rápido de un informe que presenta esta herramienta después de buscar «google.com»

El informe parece limpio y sencillo, pero si no eres la persona más conocedora de la tecnología, puede ser un poco difícil entender lo que significan algunas de las sugerencias aquí escritas. 

Si bien las palabras usadas pueden parecer intimidantes, muchas de las sugerencias de PageSpeed Insights también son simples de descifrar, incluso si no eres un desarrollador web. 

Para ayudarte a mejorar la experiencia del usuario y abordar los tiempos de carga lentos, a continuación te presentamos una guía con ocho pasos para optimizar la velocidad de carga de tu web. Además explicaremos por qué es importante cada paso y te daremos una idea de cómo hacerlo, también te informaremos si es necesario pedir la ayuda de un experto en tecnología.

1. Determina si estás rezagado y dónde

Muchos CMS tienen herramientas integradas u opciones de complementos que pueden ayudarte a descubrir por qué todo tu sitio web o una página en particular tienen un tiempo de carga lento. Antes de tomar cualquier medida para corregir el tiempo de carga de tu sitio web, te aconsejamos utilizar las herramientas que mencionaremos más adelante para obtener una comprensión básica de tu situación actual. Esto te ayudará a reducir los pasos reales que debes seguir para mejorar el tiempo de carga de tu sitio web.

2. Comprime tus imágenes

Las imágenes grandes son una de las causas más comunes de que sea lenta la velocidad de carga de tu web. Hay muchas opiniones diferentes sobre el tamaño de archivo óptimo. Si bien algunos dicen que debes apuntar a los archivos de menos de 200 KB, el blog de Shopify sugiere que sean a menos de 70 KB. Por su parte, los desarrolladores de Google sugieren ir lo más pequeño posible antes de perder nitidez. 

Para reducir el tamaño de tus imágenes sin perder calidad, te sugerimos que comprimas los archivos con un software en línea gratuito como Squoosh.app o Compress.io; también puedes utilizar Photoshop. 

Antes de cargar una imagen, utiliza Photoshop u otro software de edición para recortar o ajustar el tamaño o la resolución exacta que aparecerá en el sitio web. 

El tamaño de tu pantalla no es el mismo que el tamaño de tu archivo. Recuerda que el tamaño de visualización es simplemente la dimensión de una imagen en tu sitio web.

El tamaño de tu archivo es el tamaño de la imagen real que cargaste. Si tienes un archivo grande y un tamaño de pantalla pequeño, el archivo grande tarda el mismo tiempo en cargarse en una pantalla gigante. Por el contrario, si cargas un archivo pequeño y lo presentas en un tamaño de pantalla pequeño, se cargará rápidamente.

Una buena regla general es recortar la imagen al tamaño exacto de visualización que aparecerá en tu página; luego, comprimir el archivo de imagen para que ocupe menos espacio de almacenamiento.

Por ejemplo, si tu CMS tiene la capacidad de recortar o redimensionar automáticamente una imagen a 500 px por 300 px, aún deberás recortarla al tamaño exacto de manera manual antes de cargarla. Incluso si no ves ninguna imagen gigante en la página, el archivo de imagen grande que cargaste aún podría estar contribuyendo a una desaceleración importante debido al peso que tiene.

3. Reduce o minimiza tu código HTML, CSS y JavaScript

CSS, HTML y JavaScript pueden contener mucho código adicional, redundante y completamente inútil. De manera similar a las imágenes, esos datos pueden ralentizar tu página.

Para evitar esto, los desarrolladores de Google sugieren minimizar el código. La minimización reduce el código al eliminar notas, espacios inútiles y otros elementos no necesarios en el código que podrían haber surgido en el proceso de creación o actualización la página.

4. Elimina los elementos que bloquean el renderizado

A veces, una página se codificará para cargar elementos menos importantes, como una barra lateral o un banner, antes del contenido principal. Prioriza el código para que tu contenido principal sea lo primero en la mitad superior. 

Una vez que sepas dónde están estos elementos, puedes utilizar esta guía rápida para aprender a eliminarlos. 

5. Acelera la velocidad de tu versión móvil

En 2019 el 80% de los usuarios utilizó un dispositivo móvil para buscar en internet. Por ello Google recompensa a los sitios optimizados para dispositivos móviles en sus clasificaciones de resultados de búsqueda, además de dar puntuación de velocidad de página y hasta una clasificación más alta si tu sitio móvil se carga rápidamente.

PageSpeed Insights puede mostrarte la puntuación de tu sitio móvil. Después de buscar tu URL y ver el informe, puedes alternar entre las pestañas de Móvil y Ordenador para ver las puntuaciones individuales para cada formato. 

Si te estás quedando atrás, intenta optimizar lo que el visitante ve en tu sitio móvil. Oculta o minimiza los elementos del sitio de ordenador, como fotos o cuadros de texto adicionales que pueden ser innecesarios en una pantalla pequeña.

Los servicios como AMP (Accelerated Mobile Pages) pueden guiarte para la creación de páginas web simplificadas que se cargan rápidamente y se ajustan automáticamente para adaptarse a diferentes tamaños de navegador o dispositivos. 

6. Evita o minimiza los redireccionamientos de páginas

Una redirección se presenta cuando un visitante hace clic o escribe un enlace y luego se le dirige automáticamente a una o más ubicaciones antes de llegar a la página web deseada. Debido a que esto puede quitarle un tiempo valioso a la velocidad de tu página, solo debes usar redireccionamientos cuando sea absolutamente necesario. 

Un ejemplo de esto podría ser durante el cambio de marca de una empresa o sitio web. En este caso, puedes aprender a crear redireccionamientos 301 compatibles con SEO que te ayudarán a utilizar el redireccionamiento con menos efectos negativos para la velocidad de carga de páginas o tu sitio web en general. 

7. Mejora los tiempos de respuesta de tu servidor

Google sugiere tener un tiempo de respuesta del servidor de menos de 2.000 milisegundos. Un servidor lento se puede deber a varias cosas, incluido el host de tu sitio web.

Abordar un servidor rezagado puede ser un poco más técnico que los últimos pasos. Hay guías para combatir el error 504 (relacionado con la carga del servidor) que te brindarán algunos consejos útiles sobre el diagnóstico y la resolución de problemas que pueden deberse a la respuesta de tu servidor. 

Si tu sitio web utiliza servidores de una empresa anfitriona, como GoDaddy, ponerte en contacto con un representante experto también podría ayudarte a determinar y resolver el problema. 

8. Utiliza una red de distribución de contenido

Una red de entrega de contenido (CDN por sus siglas en inglés) es un grupo de servidores distribuidos globalmente que pueden almacenar un caché del navegador de tu sitio web y cargarlo rápidamente para visitantes de todo el mundo. Cuando alguien de un lugar geográfico lejano visita tu sitio web, las páginas se cargarán desde servidores CDN cercanos al visitante, en lugar de tu propio servidor.

¿Por qué usarías esto? Porque los visitantes que están lejos de tu servidor pueden incurrir en tiempos de carga de páginas más largos. Por ejemplo, si tus servidores están ubicados en Ciudad de México, un visitante español vería una velocidad de sitio web más lenta que alguien en un lugar cercano, como Guadalajara. 

Debido a tus ubicaciones globales, los servidores CDN evitan este problema y aumentan la velocidad del sitio para los visitantes internacionales. 

Si has creado tu sitio con un CMS como el de HubSpot, es posible que ya se ejecute en un CDN. GoDaddy y Squarespace son otros ejemplos de software de gestión de contenido que ofrecen un servicio CDN. Los usuarios de WordPress también pueden configurar una serie de complementos gratuitos, como CDN Enabler. 

Si crees que no tienes un CDN, algunos proveedores de CDN son Amazon CloudFront, Cloudflare y AT&T Content Delivery Network. 

5 herramientas que te ayudan a conocer la velocidad de carga de tu sitio

Más allá del proceso, cómo medir la velocidad de carga de una página web, es algo que puedes mejorar gracias a herramientas online. Con la lista de las siguientes cinco herramientas, podrás conocer la velocidad de tu sitio y lograrás optimizar los tiempos de carga de una manera más sencilla.

Estas herramientas pueden brindarte un resumen rápido de otros detalles relacionados con la velocidad de tu sitio web y te permitirán tener una comprensión sólida de tu situación actual; intenta usar algunas de estas herramientas y compara los resultados que obtienes. 

1. PageSpeed Insights

PageSpeed Insights de Google, que destacamos anteriormente, podría ser una de tus mejores guías (especialmente si tu objetivo es lograr una puntuación de alta velocidad de página para Google en específico). Esta herramienta te proporciona datos sobre el rendimiento real de tus páginas, ya sea en dispositivos móviles y ordenadores. También da consejos para mejorar: incluye un informe de experiencia de usuario de Chrome que te muestra información del rendimiento real de cada página. 

2. Website Grader

Esta herramienta te ayuda a realizar un seguimiento de las clasificaciones en los motores de búsqueda de tus palabras clave importantes, así como rastrear tu sitio web en busca de errores y problemas de contenido. Califica tu sitio web en segundos y te ayuda a optimizarlo de manera gratuita. Website Grader ha sido desarrollado por HubSpot para ayudar a cualquier persona con su sitio web a evaluar su eficacia con el fin de atraer a una audiencia de compradores interesados y relevantes. 

3. GTM Metrix

GTM Metrix te ayuda a ver cómo funciona tu sitio y te permitirá descubrir las oportunidades de optimización para mejorar su velocidad. Te dará un desglose del rendimiento y un informe resumido sobre su rendimiento. Puedes probar cómo funciona tu página web en diferentes horarios y configurar una alerta para recibir notificaciones cuando tu página tenga un rendimiento inferior. Con GTM Metrix puedes visualizar cómo se carga tu página en más de 20 opciones de diferentes dispositivos y en otros países. 

4. KeyCDN Website Speed Test

Esta herramienta te permite ver qué tan rápido de carga tu página en diferentes países. Con ella puedes solucionar problemas de CDN, probar y medir el rendimiento de cualquier página HTML con un desglose del tamaño del contenido y del tipo de carga. Además te da un informe completo con el que puedes visualizar en dónde se pueden realizar mejoras. 

5. Pingdom

Pingdom te ayuda a supervisar el rendimiento de tu sitio web y obtener información instantánea para que puedas tomar las decisiones correctas y optimizar de manera adecuada tu sitio y mejorar la experiencia del usuario. Con ella puedes analizar la velocidad de tu sitio web y enterarte cuándo y por qué es lento para que soluciones los problemas de manera inmediata. Esta herramienta también te ayuda a comprender la manera en la que tus visitantes experimentan tu sitio web según el navegador, el dispositivo o su ubicación geográfica. 

Apóyate en estas herramientas, en los consejos que te comentamos antes para optimizar tu sitio web y en el trabajo de especialistas. Verás que con ello lograrás alcanzar la puntuación que necesitas para vencer a tu competencia.