Velocidad de la Web y cómo mejorar la Experiencia de Usuario
La velocidad de carga de una web es un factor muy importante para el SEO. Si bien hay muchos aspectos en los que centrarse para acelerar las páginas, cuatro destacan como elementos clave a tener en cuenta. Son los siguientes:
{index}
Medidas básicas
- Optimizar imágenes: el formato más optimizado al que puede convertir sus imágenes hoy en día es Webp. Múltiples complementos de WordPress pueden hacer esto para todas las imágenes, y algunas de las mejores son complementos premium que debemos pagar. Un complemento para probar en WordPress es Smush Pro. Este plugin puede revisar todos los archivos y comprimirlos, así como hacerlo con nuevas imágenes. También puedes usar una herramienta web gratuita como Compressor.io. Nos centramos en WordPress por ser el CMS más popular, pero esto sirve también para Joomla!, Drupal o Grav, por ejemplo.
Si bien hay otros complementos y formas de comprimir sus imágenes sin Webp, no ofrecen la misma relación de compresión mientras conservan la más alta calidad. Si no puedes usar Webp, te recomendamos usar JPG para fotos y PNG para archivos en los que no desees perder calidad al comprimirlos. Eso sí, el formato PNG es bastante más pesado.
Una de las formas más fáciles de optimizar imágenes es redimensionarlas al ancho que se mostrarán en la página. Si, por ejemplo, una imagen se mostrará a 800 px, no uses un archivo de imagen de 2000 px, cambia su tamaño a 800 px. Esto se puede hacer con Adobe Photoshop u otros programas de edición de imágenes como GIMP, que es gratuito.
- Minify HTML, CSS y JavaScript: los sitios web suelen cargar una gran cantidad de archivos JavaScript y CSS que pueden saturar el navegador web. Para combatir esto, hay complementos de WordPress que pueden hacer el trabajo de minificar su código por ti. Esto da como resultado tiempos de carga más rápidos porque se reducen factores como nombres largos de variables y funciones.
- Usa una red de entrega de contenido -Contente Delivery Network- (CDN): los CDN son una excelente manera de acelerar nuestro sitio. Almacenan copias de archivos de nuestro sitio web en servidores de todo el mundo para que cuando un usuario solicite un archivo, lo redirija a la ubicación más cercana. Es posible que desees probar el más popular de los CDN, Cloudflare, el cual utiliza Elche Se Mueve. Para configurarlo, deberás cambiar tus DNSs para usar el de CloudFlare, así que ten listo tu registrador de dominios.
- Usa el almacenamiento en caché del navegador: el almacenamiento en caché del navegador puede ser una gran herramienta, pero a veces es un arma de doble filo. Si está configurado correctamente, el usuario puede ver páginas en tu sitio sin tener que volver a descargar todos los archivos. Sin embargo, al permitir que los archivos se almacenen en caché en la computadora del usuario, se puede dar el caso fácilimente que se cargue una versión sin actualizar.
Si estás utilizando WordPress, puedes habilitar fácilmente el almacenamiento en caché utilizando el plugin W3 Total Cache. Simplemente navega a Caché de página en Configuración general para habilitarlo. Si no estás usando WordPress, puede habilitar el almacenamiento en caché en tu archivo .htaccess si estás usando Apache. El almacenamiento en caché puede acelerar el rendimiento hasta 10 veces.
¿Por qué la velocidad del sitio es importante para el SEO?
No todos los factores de clasificación son aspectos de nuestro sitio que podemos controlar con fines de mejorar el SEO. Por ejemplo, no podemos controlar cuántos vínculos de retroceso tenemos. Depende de los propietarios de sitios web si quieren darnos un enlace. Sin embargo, la velocidad de la página es un factor sobre el que tenemos control total.
De nosotros depende comprimir las imágenes, utilizar un CDN, configurar la caché y minimizar recursos para que nuestro sitio se cargue más rápido. Disponer de una web así nos beneficia de múltiples manera. En primer lugar, es menos probable que el usuario desista si nuestra web se carga rápidamente, porque si es lenta, se irá antes de que empiece a verse parte del contenido.
Y lo peor es que Google y otros motores de búsqueda miden activamente la tasa de rebote de nuestra página. Por lo tanto, si puedes mejorar tus tiempos de carga, te harás un favor, no solo porque los usuarios te visitarán, sino que será crucial para el SEO, ya que mejorará el posicionamiento en los motores de búsqueda.
La velocidad de la página es un factor de clasificación
La velocidad de la página es un factor importante para los motores de búsqueda como Google. Si nuestro sitio tarda demasiado en cargarse, los usuarios lo abandonarán y los motores de búsqueda lo detectarán. Este es el caso de las versiones móviles y de escritorio de nuestro sitio web. Ambos necesitan cargarse rápidamente.
Cuando demasiadas personas abandonan nuestro sitio, los motores de búsqueda ajustarán sus rangos en consecuencia. Lo ven de forma simple, los usuarios tienen dificultades para ver el contenido de nuestra página, independientemente de que sea información útil y relevante. Las dos anteriores son muy importantes para el SEO, pero de nada sirven si nadie los ve.
Cómo la baja velocidad de carga nos afecta negativamente
Los usuarios esperan que un sitio web se cargue en no más de dos segundos, incluso menos. Si tarda tres segundos, tienden a comenzar a abandonar las páginas. Además, cuando nuestro sitio tarda demasiado en cargar, los compradores optan, en su mayoría, por no volver más tarde a realizar la compra. Además, este tipo de experiencias también se suelen comentar con los amigos, con el fin de no recomendar el sitio.
La investigación de Akamai revela que un retraso de dos segundos en el tiempo de carga de la página aumenta la tasa de rebote en más del 100%. Un retraso de un segundo en la velocidad de la página podría costarnos un 7% en ventas.
Cómo verificar la velocidad de nuestra página
¿Quieres ver cómo funciona tu sitio web? Aquí hay algunas herramientas para ayudarte.
- Page Speed Insights: esta es la herramienta de Google. Nos dan una puntuación del rendimiento de nuestro sitio en dispositivos móviles y escritorio, junto con una serie de recomendaciones sobre lo que podemos hacer para mejorar la velocidad de nuestro sitio. Hay tres áreas para prestar atención a los datos de laboratorio, oportunidades y diagnósticos.
Los datos de laboratorio muestran información como la primera carga satisfactoria y el índice de velocidad. Aquí es donde se presentan las estadísticas sobre nuestro sitio. En oportunidades, verás áreas donde puedes mejorar la velocidad de tu página junto con un ahorro de tiempo estimado. Un ejemplo de lo que verás aquí es evitar las cadenas de redireccionamiento. En diagnósticos, verás sugerencias adicionales, como reducir el impacto del código de terceros.
- WebPageTest.org: con esta herramienta, puedes ingresar tu sitio web y elegir una ubicación de servidor de prueba y un dispositivo desde el cual cargar la página. Están un poco desactualizados con los dispositivos móviles. Puedes elegir la velocidad de tu conexión si deseas ver cuánto tiempo tarda tu sitio en cargarse en dispositivos móviles o de escritorio.
Elige 3G o 4G también en velocidad de conexión en configuraciones avanzadas para ver cuánto tiempo tardará tu sitio en cargarse en dispositivos móviles. Calificarán tu web en múltiples aspectos que incluyen el tiempo hasta el primer byte, la compresión de imágenes, el almacenamiento en caché de contenido estático y el uso de CDN. Ejecutan la prueba 3 veces, por lo que se te da una representación precisa de tu tiempo de carga.
- GT Metrix: esta herramienta te permite cambiar la ubicación, el navegador y otras opciones solo si has iniciado sesión. Te dan una puntuación general, junto con el tiempo de carga total y el tamaño de la página. También nos calificarán en múltiples aspectos accionables, como diferir el análisis de Javascript y el factor «Minify». Esta herramienta es muy potente.
- Pingdom: con Pingdom, también puedes elegir una ubicación para probar. Pingdom califica tu sitio en una escala de 0 a 100. También proporcionan el tamaño de página, el tiempo de carga y las solicitudes. Haz una lista de áreas de esta utilidad donde puedes mejorar el rendimiento de tu página, como comprimir contenido con gzip y usar dominios sin cookies. También muestran una línea de tiempo de cuánto tiempo se tarda en cargar cada recurso en tu sitio.
Con estas cuatro herramientas de análisis de velocidad, tendrás una idea más clara de lo que estás haciendo y en qué aspectos debes mejorar para aumentar la velocidad de tu sitio. Cuanto más lenta sea la carga, más frustración transmites a los usuarios y menos posibilidades de alcanzar un buen ranking, pues el SEO se verá afectdo. Es importante hacer caso a las recomendaciones de estas herramientas, sea cual sea la que decidas utilizar.
Por qué la velocidad de la página es importante para la búsqueda local
Con Google clasificando los negocios locales más arriba para mostrar con más frecuencia las empresas más cercanas, ¿qué mejor momento para trabajar en la velocidad de la página que cuando estás tan cerca de estar en la posición número uno para obtener excelentes resultados en búsquedas locales? Puedes pensar, ¿por qué necesito trabajar en la velocidad de la página cuando Google ya está colocando mi sitio en una posición más alta para las búsquedas locales? La respuesta es que se estarías perdiendo una excelente oportunidad para otros negocios. Esto es SEO.
La velocidad de la página es algo de lo que tienes control total, entonces, ¿por qué no aprovechar una oportunidad de destacar y obtener, si es el caso, más ingresos? Con un sitio rápido tanto en dispositivos móviles como de escritorio, es más probable que los usuarios realicen una compra en tu web.
Cómo aumentar la velocidad de tu página para móvil
Aumentar la velocidad de tu página para dispositivos móviles es similar si lo extrapolamos a la versión de escritorio, pero hay varios cambios que debemos implementar para garantizar un tiempo de carga más veloz.
- Utiliza HTTP/2. HTTP/2 se está convirtiendo en el nuevo estándar, gracias a una compresión, priorización y carga de datos más eficientes. HTTP/2 carga más rápido y de manera más eficiente. Con HTTP/2, todo se carga a la vez . Eso es crucial cuando se considera la poca paciencia que los usuarios tienen al usar un dispositivo móvil. Ten en cuenta que HTTP/3 está en camino y se lanzará en breve. HTTP/3 aumentará drásticamente los tiempos de carga que serán más rápidos que con el actual.
- Ofrece una experiencia diferente en la navegación móvil con respecto a la de escritorio. El diseño responsive siginfica algo más que cambiar el contenido de tu web. Debe ofrecer una experiencia distinta para el usuario que solo utiliza el móvil para navegar. Incluir un menú «hamburger» que se expande al pinchar en lugar de ocupar un espacio valioso en el que se muestra todo el menú. Se trata de ofrecer un sitio que es una versión reducida de la de escritorio, con el fin de mejora la experiencia de usuario -UX-.
Los usuarios móviles saben lo que buscan cuando visitan un sitio. Y eso no incluye anuncios e imágenes abrumadoras que ocupan toda la pantalla. Haz que tu contenido se cargue correctamente para los usuarios móviles, y verás un aumento en la fidelización y las clasificaciones.
Otras recomendaciones para mejorar la velocidad de la página
- Minimiza las solicitudes HTTP: cuantas menos solicitudes haga tu sitio, más rápido será. Esto se debe a que el protocolo HTTP debe seguir varios pasos para iniciar la transferencia de los archivos.
El primer paso para reducir las solicitudes HTTP es darse cuenta de cuántos está haciendo tu página. Puedes averiguarlo usando las herramientas de desarrollador de Chrome. Haz clic derecho en tu página y presiona inspeccionar, luego pincha en Red para ver cuántas solicitudes estás haciendo. Puedes reducir el número de solicitudes combinando archivos como JavaScript y CSS.
- Carga JavaScript y CSS de forma asincrónica: cargar tus archivos de forma asincrónica significa que no se bloquearán cuando intentes cargarlos. Por lo general, los archivos JavaScript y CSS están bloqueados y solo pueden cargarse uno a la vez. Cargarlos todos al mismo tiempo aumentará drásticamente la velocidad de la página. Si estás utilizando WordPress, prueba el complemento WP Rocket para que lo haga automáticamente.
- Aplazar la carga de JavaScript: cargar archivos de JavaScript antes de que se cargue el resto de la página significa que el contenido no se puede mostrar hasta que se ejecuten los archivos de JavaScript. Si colocas tu JavaScript en la parte inferior de tu página, puedes evitarlo. También puedes usar WP Rocket en WordPress para hacer esto.
- Alojamiento web rápido y seguro: el alojamiento de tu sitio web -Hosting- es uno de los factores más críticos en la rapidez con que se cargará una página. Si te encuentras con un hosting lento, como un servidor compartido con miles de cuentas, un servidor VPS con poca velocidad de CPU o un servidor dedicado lento, es ser hora de actualizar.
- Compresión Gzip: es posible que ya estés comprimiendo imágenes en tu sitio, pero ¿también estás comprimiendo el código? Al habilitar la compresión Gzip, puedes comprimir los archivos HTML, CSS y JavaScript para obtener mejoras adicionales en la velocidad de la página.
Verifica tu servidor web, o si estás utilizando WordPress, verifica tus complementos para ver si tienes habilitado Gzip. Tanto WP Rocket como W3 Total Cache son compatibles con Gzip en el CMS más popular. Si no estás usando WordPress, pero sí Apache, edita su archivo .htaccess para usar Gzip. La mayoría de los navegadores modernos también admiten Gzip, lo que lo convierte en una excelente opción de uso.
- Usa proveedores de alojamiento externos: al usar un proveedor de alojamiento externo, puedes reducir el uso de ancho de banda para archivos grandes y entregarlos a velocidades más altas incluso durante los períodos de mayor tráfico. No solo eso, sino que hace que las copias de seguridad ocupen más espacio y podrían dificultar la restauración de una de ellas.
Una opción popular para alojar archivos es Amazon. También puedes alojar archivos de video en YouTube o Vimeo. Una de las ventajas más importantes de YouTube es que una vez que las personas vean tu video, comenzarán a mostrarse al resto de la audiencia de la plataforma, que será como publicidad gratuita para tu sitio. Vimeo es otra opción que tiene un reproductor con un diseño más minimalista y podrá servir tus videos incluso si tienen una demanda significativa.
- Optimiza CSS: si estás repitiendo estilos CSS en elementos de tu sitio, es posible que debas utilizar un archivo CSS que reduzca la redundancia. Es mejor agrupar todo el CSS en un solo archivo para reducir los tiempos de carga del servidor.
Imagen: Depositphotos.com
- Contenido de carga diferida: al priorizar el contenido que se carga por encima del «pliegue», que es lo que un usuario ve por primera vez cuando va a nuestra página, puedes reducir los tiempos de descarga. Debido a que carga el contenido debajo de este cuando un usuario se desplaza hacia abajo, reducirás el tiempo que lleva cargar la página. Una forma de diferir el contenido es utilizar WP Rocket (si estás usando WordPress). Simplemente abre la página del complemento WP Rocket y, en la pestaña Básico, selecciona imágenes de carga diferida.
- Reduce la cantidad de complementos: si estás utilizando WordPress, es fácil comenzar a utilizar decenas de complementos con todas las características que te permiten personalizar tu sitio. Sin embargo, hay una desventaja en eso. Permitir demasiados complementos hará que se cargue mucho más código en tu sitio web, lo que aumentará la carga del servidor y los tiempos de respuesta. Esto es extrapolable a cualquier CMS.
Una forma de determinar qué complementos deben activarse o desactivarse en tu sitio es deshabilitarlos selectivamente de uno en uno y usar una herramienta de prueba de velocidad de página para ver qué mejoras se pueden hacer. Verifica si alguno de tus complementos se superpone en la funcionalidad. Esa es otra forma de determinar cuáles han de eliminarse.
- Reduce las redirecciones : las cadenas largas de redireccionamiento pueden ralentizar el tiempo de carga de tu sitio. Esto se debe a que el navegador necesita realizar múltiples solicitudes para llegar finalmente a la página que está solicitando.
- Actualiza WordPress -o el CMS que utilices-: si estás utilizando WordPress, querrás mantenerlo actualizado con la última versión. Hacerlo no solo podría ofrecer mejoras de rendimiento sino que también corrige errores y problemas de seguridad.
- Optimiza los procesos en segundo plano: Igualmente con un CMS y si tienes copias de seguridad programadas, estos procesos requieren muchos recursos. Pueden ralentizar drásticamente tu sitio, especialmente si ocupa muchos GB. Para reducir el impacto de esto, programa copias de seguridad en horas con un pico más reducido y cuando tu servidor tenga una carga menor.
- Optimiza las publicaciones de blog para mostrar extractos: en WordPress, el valor predeterminado para tu página de blog es mostrar los artículos completos. Al entrar en la configuración puedes cambiarlo solo para mostrar un resumen. Esto reducirá el tamaño de la página y aumentará la velocidad de la página, además de generar más visitas a diferentes páginas de tu blog, lo que puede significar más ingresos si estás mostrando anuncios.
- Divide los comentarios en páginas: ¿alguna vez has estado en un sitio que cargaba cientos o miles de comentarios en una página? Esa es una mala elección porque la mayoría de la gente no los lee todos, y lleva tiempo cargarlos, amén de ralentizar el navegador. Al entrar en la configuración, puedes habilitar dividir los comentarios en varias páginas en WordPress. Esto hará que se cargue más rápido y no abrumará al usuario.
- Elige un tema optimizado para la velocidad : algunos temas en WordPress están repletos de diseños sofisticados, CSS y JavaScript. Al elegir el tema adecuado para tu sitio, puede tener un impacto sustancial en la velocidad de carga de tu página. Obviamente esto redunda en un diseño más anodino, pero si estás comenzando no es un problema serio.
- Instala complementos más rápidos: al reemplazar complementos que se cargan más lentamente, puedes acelerar el rendimiento con WordPress. Algunos complementos están repletos de características y código innecesario. Recomendamos buscar los que ofrezcan las mismas funciones pero que sean más compactos y estén mejor escritos.
- Divide las publicaciones largas del blog en varias páginas: las publicaciones de formato largo tienden a ocupar un lugar destacado en los motores de búsqueda. Sin embargo, pueden estar ralentizando tu sitio. WordPress ofrece una solución fácil para esto. Simplemente agregue «Nextpage» en el lugar donde deseas dividir el artículo, lo que hará que se separe en varias partes.
- Optimiza la base de datos: Si tu sitio ya tiene una «edad» puede contener cosas innecesarias, como publicaciones en la papelera y etiquetas no utilizadas. Afortunadamente, hay un complemento que puede limpiar este tipo de cosas. Simplemente instala WP Sweep para optimizar tu base de datos con un solo clic. Si eres más experto, siempre puedes acceder a PhpMyAdmin y ejecutar los comandos necesarios, además de borrar manualmente.
- Limita las revisiones de publicaciones: múltiples revisiones de publicaciones pueden pesar en cualquier base de datos. Si solo deseas incluir los últimos cuatro cambios para cada publicación, simplemente agrega esta línea a wp-config.php:
define( 'WP_POST_REVISIONS', 4 );ahora descartarás las revisiones si hay más de 4. - Bloquea hotlinking: si tienes un sitio web con mucho tráfico, existe la posibilidad de que los usuarios comiencen a robarte contenido y lo carguen directamente desde sus servidores. Para evitar esto, si estás usando Apache, puedes editar su archivo .htaccess solo para permitir tu referencia.
- Usa un firewall de nivel DNS: ya mencionamos el uso de Cloudflare como CDN, pero también pueden actuar como firewall si configuras su DNS para usarlo. Esto puede bloquear los intentos de fuerza bruta para hackear tu sitio, lo que de otro modo también pesaría el servidor.
- Actualizar PHP: además de actualizar WordPress, Joomla! o Drupal, hacer lo mismo con PHP también podría ofrecer mejoras de rendimiento adicionales. La versión más reciente de PHP está optimizada para ejecutarse más rápido y tener un mejor rendimiento. Aunque puedes estar acostumbrado a usar tu versión actual de PHP y puede ser difícil actualizarlo, hacerlo beneficiará a tu sitio.
