La importancia de la velocidad de carga en el SEO.
La velocidad de carga web es el tiempo que tarda en cargar o visualizar la web en el navegador del usuario, según Google, cuanto menos tiempo demore en cargar una página, mejor será el posicionamiento SEO de la misma. Desde hace algún tiempo ya Google agregó este factor en su algoritmo para medir el posicionamiento de un sitio web en su buscador.
Además, es un factor SEO cada vez más importante, ya que mejora la indexabilidad, la tasa de rebote, la conversión de los visitantes en lead (clientes potenciales) y en las campañas de pago por clic. En los negocios online el tiempo es un valor muy apreciado. Se dice que el 40% de los visitantes cierran una web si tarda más de 2 segundos en cargar.
Factores que afectan a la velocidad de carga de una página
- EL HOSTING: el principal factor que afecta al tiempo de carga web es el hosting (sitio donde tienes alojado el servidor de tu web). El hosting determina el tiempo de respuesta, la velocidad del disco duro que está instalado y el sistema operativo de la web. Nosotros te aconsejamos que contrates un hosting de calidad y de pago. Los gratuitos son bastante limitados en el espacio y en las aplicaciones que ofrecen (streaming, descargas de programas, intranets, ancho de banda…). Un hosting de calidad te recomendamos que esté alojado en el mismo país y que te ofrezca un buen servicio de atención para resolver incidencias. Estos aspectos deben ser los más importantes a la hora de elegir su contratación.
- LA PROGRAMACIÓN: este factor, junto con la elección del hosting, es el más importante. Una web bien programada y optimizada, sobre todo en temas de diseño, afecta de manera enorme a un mejor tiempo de carga de una web. Es imprescindible, si quieres tener tu página bien posicionada que cuides realmente bien estos detalles.
- LA RED: tu centro de datos debe tener contratada una red de alta velocidad y calidad. El operador ADSL o la velocidad de Internet con la que trabajan tus clientes o visitantes, lógicamente, también influye en el tiempo de carga de una web pero este factor escapa completamente de tu control.
Trucos para mejorar la velocidad de tu sitio web
Ya debes haber probado tu sitio con estas herramientas, ¿verdad? Y es posible que no hayas logrado una puntuación muy satisfactoria.
Pero no tienes que desesperarte: una puntuación de 100/100 en estas herramientas no debería ser una obsesión, ¿sabes por qué?
Porque existen algunas limitaciones. PageSpeed Insights, por ejemplo, realiza el análisis basado en una conexión 3G y en un servidor con una ubicación desconocida. Estos factores pueden proporcionar una visión diferente de la realidad de tus visitantes.
Además, optimizar todos los elementos del sitio para alcanzar el puntaje máximo puede ser imposible, ya que hay muchas variables involucradas. Y, a menudo, mejorar un punto puede dañar a otro, por lo que, pensando en la experiencia del usuario, puede ser mejor dejarlo como está.
1. Habilitar la compresión Gzip
Gzip es un formato de compresión de archivos para el sitio web. Es decir, reduce el tamaño de los archivos enviados por el servidor y el tiempo de transferencia, con tasas de compresión de hasta 90% en archivos más grandes.
Esta es una de las medidas más eficientes para reducir el tiempo de carga de la página.
Todos los navegadores actuales admiten este formato y procesan la compresión automáticamente cuando el usuario entra a un sitio web.
Solo necesitas asegurarte de que el servidor esté configurado para hacer que los archivos comprimidos estén disponibles cuando el usuario lo solicite.
2. Reduce el tamaño de las imágenes
Las imágenes tienen un gran impacto en el peso y la carga de un sitio web. Según HTTP Archive, en mayo de 2019, representaban más de la mitad de los bytes de un sitio web.
Optimizarlos, entonces, puede ser uno de los primeros pasos para mejorar la velocidad del sitio web.
Comencemos reduciendo el tamaño. Para esto, puedes usar un plugin de optimización de imagen para WordPress, como Optimus y Tinypng.
Estas aplicaciones reducen los kilobytes de las imágenes (sin perder calidad) y eliminan toda la información superflua que los programas de edición pueden guardar con el archivo.
3. Utiliza formatos de última generación para las imágenes
Otra acción importante para optimizar las imágenes es utilizar los formatos de archivo más actualizados, como JPEG 2000, JPEG XR y WebP.
Tienden a tener una mejor compresión mientras mantienen la calidad en comparación con JPEG y PNG. Esto reduce el consumo de datos móviles y acelera la carga.
4. Carga las imágenes en el tamaño que serán utilizadas
Si vas a utilizar una imagen en tamaño 313 × 235, por ejemplo, ¿por qué incluirla en el sitio web en tamaño 640 × 480?
¿Sabías que dejar que el sitio haga este cambio de tamaño a través de HTTP o CSS puede retrasar la carga? Además, la imagen ocupará más espacio innecesariamente, ya que se utilizará en un tamaño más pequeño.
Por lo tanto, guarda la imagen en las dimensiones que será usada en el sitio web evitando, de esa forma, que el servidor pierda tiempo con el cambio de tamaño y espacio con una imagen que podría ser más clara.
5. Pospón la carga de imágenes fuera de pantalla
Incluso las imágenes que no aparecen en la pantalla afectan el tiempo de carga de las páginas, lo interesante es que es posible posponer la carga a medida que el navegante se desplaza por la página, ¿lo sabías?
Esto significa que el desarrollador utiliza la función de carga diferida para imágenes ocultas en la pantalla. Por lo tanto, estas solo se cargan en el caso de que el usuario las alcance con el desplazamiento.
Esta característica se puede configurar con los complementos de WordPress: Lazy Load o Lazy Load de WP Rocket. Ambas opciones son muy simples de usar.
6. Reduce HTML, CSS y Javascript
Cuando un desarrollador crea los códigos para un sitio web, es común incluir saltos de línea, espacios en blanco y comentarios. Esa información no influye en el contenido que ve el usuario, pero está ocupando espacio y puede aumentar el tiempo de carga.
Por lo tanto, las herramientas generalmente recomiendan la eliminación de estos caracteres superfluos. Esto es lo que se hace al «minificar» los códigos HTML, CSS y Javascript, para que sean más ligeros.
Pero no tienes que hacer todo este trabajo código por código, ¿de acuerdo? Hay aplicaciones gratuitas para eso, como W3 Total Cache y Autoptimize. Pero, incluso utilizando una aplicación confiable, siempre es importante mantener una copia de seguridad de tus archivos.
7. Elimina las funciones que impiden la representación
El bloqueo de procesamiento es un problema recurrente cuando se trata de acelerar la carga de la página. Sin embargo, es un tema un poco más complejo, así que vamos a explicarlo mejor ahora.
En general, los códigos Javascript y CSS obligan a los navegadores a retrasar la lectura de las páginas HTML, de modo que se muestren a los usuarios con estilos definidos. Después de todo, nadie desea que las páginas pierdan todo el atractivo visual, ¿no es verdad?
Sin embargo, esto puede ser un problema cuando dificulta la carga de páginas con contenido que el usuario no ve. Esto significa que JavaScript y CSS retrasan innecesariamente el sitio al bloquear el contenido que está «debajo del pliegue», es decir, que el usuario aún no ha visto.
Para resolver esto, puedes determinar que los recursos de JavaScript y CSS se carguen de forma asincrónica. Por lo tanto, es posible mostrar rápidamente el contenido principal y posponer la carga de elementos innecesarios para la experiencia del usuario.
Esto se puede hacer, por ejemplo, con el complemento Async Javascript (solo para Javascript) o el Speed Booster Pack (para Javascript y CSS).
8. Evita redireccionamientos múltiples
A menudo, la redirección es necesaria para que el usuario no caiga en una página inexistente en el sitio. Por cierto, esta es una de las recomendaciones de SEO para no frustrar al visitante y mostrarle al motor de búsqueda cuál es la página principal que debe indexarse.
Sin embargo, demasiados redireccionamientos sobrecargan el servidor. Activan un ciclo de solicitud adicional y retrasan la carga.
Digamos que para acceder a la versión móvil de tu sitio web hay dos redirecciones:
- de «site.com» a «www.site.com»;
- de «www.site.com» a «m.site.com».
Este es un ejemplo que puede retrasar la carga. Pero si usas una página con diseño responsivo, no hay necesidad de redirigir, ya que la página se adapta a la pantalla del usuario. Por lo tanto, la recomendación es usar páginas responsivas.
Además, un plugin como SEO Redirection puede identificar redirecciones innecesarias para que las elimines.
9. Aprovecha la memoria caché del navegador
La memoria caché del navegador se utiliza para almacenar el contenido del sitio web en el dispositivo del usuario, de modo que se carguen más rápidamente en la próxima visita.
Sin embargo, si el contenido no se almacena en caché o el tiempo de almacenamiento ha expirado, las páginas tardarán más en cargarse.
El servidor debe realizar la solicitud de los navegadores para mantener estos archivos guardados. Esta solicitud generalmente es automática. Pero, si no es así, debes incluir un archivo para forzar el uso de la memoria caché.
Pero, por supuesto, no tienes que hacerlo manualmente: los complementos W3 Total Cache y WP Fastest Cache lo hacen por ti.