La velocidad de carga de un sitio web es un parámetro técnico crítico para la optimización en buscadores. El rendimiento óptimo de su plataforma en línea aumenta el compromiso, ayuda a retener a los usuarios y logra más conversiones. Por lo tanto, una de las principales tareas del webmaster es garantizar una carga rápida del sitio y minimizar la tasa de rebote. Aquí te contamos qué significa la velocidad de carga del sitio, por qué puede ser lenta y cómo puedes solucionarlo.
¿Qué es la velocidad de carga de un sitio?
La velocidad de carga de un sitio es el tiempo que los usuarios tienen que esperar antes de que el sitio se abra completamente con todas sus imágenes, formularios, banners, etc.
¿Por qué necesitamos que un sitio se abra rápidamente?
Un sitio de baja velocidad no ocupará posiciones altas en las búsquedas.
La carga rápida reduce la carga del servidor.
Cuanto más rápido se cargue la página, más conversiones habrá.
¿Cómo calculo la velocidad de carga de mi sitio?
Puede comprobar este parámetro utilizando el servicio en línea PageSpeed Insights. Es rápido y gratuito. El algoritmo Lighthouse permite definir el rendimiento de un recurso en línea visto por usuarios reales de dispositivos móviles y de escritorio. Una calificación de Google per se no afecta a nada en PageSpeed Insights. Sin embargo, el servicio muestra directamente al webmaster qué problemas deben solucionarse y ofrece recomendaciones para acelerar el sitio.
Muchos otros servicios comprueban este parámetro, pero a diferencia de ellos, PageSpeed Insights muestra el tiempo de respuesta del servidor con la mayor precisión posible.
El tiempo de respuesta del servidor puede variar en función de la carga actual. Te recomendamos que realices varias mediciones y te centres en el valor medio. Nota: el servicio de Google almacena en caché el resultado durante 30 segundos, por lo que las mediciones deben realizarse en intervalos de al menos 30 segundos.
Si encuentras fluctuaciones significativas, te recomendamos que cambies de servicio de alojamiento. Si tu proveedor está ahorrando en hardware, esto puede aumentar el tiempo de carga entre 100 y 150 ms. Hoy en día, muchos proveedores de alojamiento ofrecen un periodo de prueba durante el cual puede probar el sitio gratuitamente.
Así podrá definir el tiempo de respuesta del servidor utilizando las herramientas del navegador. Abra la pestaña «Red» (método abreviado de teclado para un inicio rápido: Ctrl+Mayús+I) y vuelva a cargar la página después de haber vaciado la caché del navegador; allí también se muestra el tiempo de carga del archivo html.
Indicadores de velocidad de carga del sitio
El rendimiento del sitio se evalúa utilizando las siguientes métricas:
Tiempo hasta el primer byte (TTFB) – tiempo de respuesta del servidor.
Muestra el tiempo transcurrido entre el envío de la solicitud y la recepción de los primeros datos por parte del navegador. Google exige que este valor no supere los 200 ms.
First Contentful Paint (FCP) – tiempo de renderización de la página.
Esto muestra el lapso de tiempo para el primer contenido (contornos de páginas e imágenes) que se muestra en el monitor. No debe superar los 1,8 segundos.
Largest Contentful Paint (LCP) – tiempo de renderizado del contenido principal.
Es el periodo de tiempo durante el cual el elemento más grande (vídeo, foto, fragmento de texto) se muestra en el área visible de la página. Tasa de LCP – hasta 2,5 seg. Nota: cuando un sitio se inicia desde dispositivos móviles o de escritorio, el elemento más grande de la página será diferente. El usuario puede acceder al sitio a través de un enlace de anclaje y llegar inmediatamente a la mitad de la página y, en cada caso, la velocidad será diferente.
Causas de la lentitud de carga de un sitio web y cómo resolverlas
- El código no está «limpio»: ésta es una de las causas más comunes del bajo rendimiento de los recursos web. Los espacios de más y las líneas vacías, los estilos integrados y los comentarios de más, así como otros signos de codificación «sucia», pueden provocar una hinchazón de la hoja de estilo del sitio.
Cómo solucionarlo: minimizando el código, eliminando los elementos innecesarios y comprimiendo. Siempre que sea posible, utilice una sola hoja de estilo CSS. Al reducir el tamaño del archivo, se puede mejorar el tiempo de carga general y aumentar la eficacia de la optimización para los motores de búsqueda. Se pueden utilizar herramientas en línea para minimizar el código. Si el sitio fue creado con WordPress u otro constructor popular, puede utilizar plugins y extensiones especiales para minimizar el código.
- No hay una compresión Gzip configurada que permita comprimir los archivos de forma que se puedan recuperar sin pérdidas.
Cómo podemos solucionar esto: Habilitar la compresión de recursos de texto (JS, CSS, HTML) escribiendo Gzip en el archivo .htaccess. A diferencia de otros formatos de compresión, este método está disponible en la mayoría de los navegadores. Es fácil de configurar y ofrece una relación óptima entre el grado y la velocidad de compresión.
- Las imágenes pesan mucho. Para las fotos se suele utilizar el formato JPEG, para las imágenes con transparencia – PNG. Al mismo tiempo, las imágenes GIF y JPEG pesan mucho más que las PNG e impiden que el sitio se cargue con rapidez. Es mejor evitar el uso de imágenes TIFF.
Cómo solucionarlo: Compruebe qué formatos de imagen son compatibles con la mayoría de navegadores. Revise las imágenes, logotipos, fotos y GIF del sitio y deje sólo las más ligeras. Elementos como los iconos pueden renderizarse directamente en formato SVG en los navegadores. Incluso en Full HD no se verán borrosos y hasta con un peso de 1 kB se visualizan perfectamente en la pantalla. Puedes optimizar automáticamente las imágenes utilizando plugins especiales.
- La caché no está configurada. La velocidad de carga del sitio será más lenta si el navegador no recarga todos los archivos CSS, elementos flash, gráficos y JS al volver a entrar en un sitio, sino que recupera la información de su caché.
Cómo solucionarlo: configurando correctamente la cabecera HTTP Expires y añadiendo el módulo mod_expires al archivo .htaccess del directorio raíz del sitio. En las líneas «años»/»mes»/»semanas»/»días»/»horas»/»minutos»/»segundos», establezca el tiempo de almacenamiento de la caché. Le recomendamos que conserve copias temporales de páginas, estilos y scripts durante varios meses.
- Se utilizan redireccionamientos. Si el sitio se ha trasladado a una nueva dirección, la página da una redirección 301 o 302 y sólo entonces se abre la URL deseada. Esto puede llevar 20 o 30 segundos, que el usuario no querrá esperar.
Cómo solucionarlo: escaneando los sitios con una URL obsoleta mediante un rastreador y sustituyéndola por una nueva dirección. Las redirecciones se encuentran con mayor frecuencia en el encabezado, pie de página o barra lateral del sitio.
- Muchas peticiones HTTP. El exceso de peticiones se debe a la variedad de archivos CSS, JS e imágenes. Para mostrarlos, el navegador realiza varias peticiones para cada archivo. Esto provoca que la página tarde mucho en cargarse.
Cómo podemos solucionar esto: de nuevo minimizando el código y las imágenes. Utiliza sprites para reducir el número de peticiones HTTP. Conectar LazyLoad: esta función permite cargar la imagen a medida que el usuario se desplaza por la página, no inmediatamente.
- No se utiliza CDN. Content Delivery Network – una red de entrega de contenidos que permite entregar recursos estáticos al usuario utilizando menos tiempo de carga. La CDN almacena archivos en caché y los carga desde servidores situados en distintas regiones.
¿Cómo podemos solucionar esto? Conectar CDN, entonces los usuarios accederán al servidor de caché más cercano en la red de entrega de contenidos. Esto puede reducir el tiempo de carga del sitio de un par de minutos a un par de segundos.
- Imágenes de alta calidad Las imágenes de calidad Full HD se cargan 3 veces más que las de 1000*1000px, pero la diferencia de calidad no se notará en los dispositivos de sobremesa o móviles. Las imágenes que no se cargan completamente estropean la visual e irritan a los visitantes.
Cómo podemos solucionar esto: probar diferentes formatos de imagen, comprimir al peso óptimo de menos de 1MB.
- Los archivos CSS se encuentran al final de la página. Si los archivos CSS están al final, la página se abre en fragmentos, en lugar de hacerlo gradualmente. Esto se debe a que los navegadores rara vez redibujan los elementos que cambian de estilo después de la carga.
Cómo solucionarlo: si coloca los archivos CSS en la «cabecera» del sitio, los bloques se mostrarán en una secuencia lógica: – logotipo, título, descripción, navegación, información básica.
10.Problemas con JavaScript. Los plugins JS y jQuery permiten «mejorar» fácilmente una página con contenido dinámico. Sin embargo, su uso incorrecto afecta negativamente al rendimiento del sitio. Se necesita tiempo para cargar y ejecutar JS y jQuery necesita tiempo y varias llamadas a la API para la visualización de datos. Por lo tanto, el sitio tardará mucho en cargarse.
Cómo solucionarlo: audite los scripts JS y deje sólo los que necesite, asegúrese de su carga asíncrona. Prueba también servicios que te permitan utilizar un solo script para todas las herramientas, como Segment o Google Tag Manager.
P.D. Un buen rendimiento hace que un sitio sea fácil de usar, lo que significa que «gusta» más a los motores de búsqueda. No ignore este indicador técnico, contrólelo regularmente y optimice la velocidad de carga del sitio de todas las formas posibles. Es una forma directa de aumentar el tráfico del sitio y los ingresos por monetización con publicidad push o de otras formas.
