Las computadoras de escritorio tienen mejores procesadores y, a menudo, ofrecen velocidades de conexión a Internet más confiables que los dispositivos móviles en la red de datos de un operador. Esto significa que cargar sitios en dispositivos móviles suele ser un poco más lento que en una computadora de escritorio, incluso si el sitio está optimizado para dispositivos móviles.
La velocidad de la página (o la velocidad de carga de tu sitio web) es un aspecto importante de la optimización de motores de búsqueda (SEO) para dispositivos móviles. El rendimiento del sitio web afecta no solo las clasificaciones de búsqueda, sino también la experiencia móvil del usuario. Optimizar la velocidad de carga de páginas en dispositivos móviles implica abordar las solicitudes de ida y vuelta, el bloqueo de renderizado, la carga diferida, la compresión, el almacenamiento en caché y las opciones de código HTML de Accelerated Mobile Pages (AMP-HTML).
Sigue leyendo para aprender más sobre cómo construir un sitio web que cargue rápidamente en dispositivos móviles.
Cómo aumentar la velocidad de carga de tu página en 7 pasos: consejos para que tu sitio web sea más rápido
Aunque las pautas para dispositivos móviles de Google se enfocan mucho en el diseño y la usabilidad aptos para dispositivos móviles, la velocidad del sitio importa para el SEO móvil por varias razones. La velocidad de la página es parte de los indicadores web esenciales de Google, que son factores de clasificación cruciales que miden la experiencia del usuario en tu sitio web.
Google tiene un tiempo limitado para rastrear cada sitio, y que los sitios se carguen más rápido incentiva a Google a rastrear más páginas web. Esto significa que mejorar el tiempo de carga de tu página puede facilitar un descubrimiento y una indexación más rápidos de nuevas páginas y contenido, así como un rastreo exhaustivo de las páginas más profundas del sitio.
Aunque tu posición se mantenga igual en cada página, el número total de páginas que pueden posicionarse aumenta, lo que a menudo impacta el tráfico orgánico total, especialmente para términos de cola larga.
Además de las consideraciones del crawl budget, la velocidad y el tiempo de respuesta para dispositivos móviles también tienen un impacto desde la perspectiva de un usuario real, lo que a menudo se refleja en altas tasas de rebote. En última instancia, un sitio web lento hace que la gente quiera irse.
Al optimizar la carga y el rendimiento de tu sitio web móvil, el objetivo siempre debe ser considerar el peor escenario de carga en dispositivos móviles, por encima de cualquier otra métrica de rendimiento del sitio.
Haz una prueba de velocidad del sitio web y optimiza el rendimiento de tu sitio web para asegurarte de que estás proporcionando al mayor número de usuarios móviles posible la página más rápida posible. Incluso a medida que las redes móviles se vuelven más rápidas, lo ideal es cargar una página en menos de 3 segundos o, según las recomendaciones de Google, en menos de 1 o 2.
Pero los navegadores móviles interpretan y cargan las páginas de manera diferente a los navegadores de escritorio. En términos simples, los navegadores de escritorio son mejores para cargar páginas con muchas solicitudes pequeñas, mientras que los navegadores móviles son mejores para cargar páginas con menos solicitudes más organizadas, incluso si son un poco más grandes.
La cantidad de elementos que deben obtenerse del servidor para cargar una página se denomina solicitudes de ida y vuelta o RTR. Una parte importante de optimizar y mejorar la velocidad de carga de las páginas móviles es minimizar las RTR.
Puedes imaginar las RTR como idas al supermercado para buscar ingredientes y completar una receta. Si necesitas 4 cebollas, no harás un viaje separado para cada una; sería mejor conseguirlas todas de una vez, y aún mejor si pudieras obtener las 4 cebollas y algunos de los otros ingredientes en el mismo viaje. Si las 4 cebollas estuvieran en un paquete con otros ingredientes como pimientos, champiñones y apio, todos necesarios para la receta, entonces sería aún mejor.
Aquí tienes algunas recomendaciones para optimizar la velocidad de tus sitios móviles:
1. Identifica las páginas con RTR excesivas.
La minimización de las RTR comienza con la concienciación. Muchas páginas tendrán más de 100 RTR por página cuando en realidad deberías esforzarte por tener menos de 50.
A menudo, los desarrolladores o profesionales de SEO que revisan todas las solicitudes en una página descubren que algunos de los elementos solicitados faltan (404) y nadie se ha dado cuenta. Aun así, el navegador tarda en hacer la solicitud y regresa sin nada, por lo que estas páginas deberían eliminarse o arreglarse inmediatamente.
También deberías arreglar los activos que se han movido y arrojan una respuesta 301 o 302. Estas respuestas significan que el navegador tuvo que ir a un lugar, luego seguir otro conjunto de instrucciones para ir a otro lugar para obtener el recurso, pero cada nueva ubicación toma más tiempo.
Es como ir a una tienda de comestibles solo para que te digan que no tienen lo que necesitas, pero puedes conseguirlo en otra tienda más adelante. Peor aún, si hay una cadena de redirecciones, es como ir a la segunda tienda de comestibles solo para descubrir que también dejaron de tener el artículo, y ahora debes intentar con una tercera.
2. Combina archivos donde sea posible.
El siguiente paso para un sitio web optimizado es combinar archivos (como JavaScript y CSS) donde puedas. Por ejemplo, si una página utiliza 10 hojas de estilo (archivos CSS) que podrían combinarse en una sola, deberías hacerlo. De manera similar, si estás usando varios archivos JavaScript que podrían combinarse en uno, hazlo también.
Trata de pensar en las cosas a nivel del sitio y de la plantilla. Deberías tener un archivo JavaScript para todo el sitio que esté presente en cada página del sitio, y un archivo JavaScript específico para cada plantilla de página del sitio. Lo mismo puedes hacer con CSS. Asegurarse de que estos archivos también se referencian siempre con el mismo nombre de archivo y la misma ubicación también ayudará a que se almacenen en la caché correctamente.
3. Optimiza el orden de renderizado.
Después de eliminar y consolidar para reducir el número total de RTR, lo siguiente que puedes hacer es ajustar el orden en que se solicitan las cosas para que sea más rápido.
De la misma manera que hay pasos que deben completarse en una receta antes de que otros puedan comenzar, hay un cierto orden que un navegador móvil seguirá y que debes respetar al construir una página.
Siguiendo con el ejemplo de la tienda de comestibles, si tu receta requiere que algo se marine durante 2 días, es importante conseguir primero los elementos necesarios para el adobo, de modo que pueda comenzar mientras adquieres el resto de los ingredientes y no después.
Trasladando esta analogía al mundo de la web, el adobo es como un bloqueador de render, porque nada más puede ocurrir en el proceso de cocción hasta que esté hecho. Solo puedes prepararte para los siguientes pasos en el proceso de cocción obteniendo los ingredientes mientras las cosas se marinan.
Esto es como el renderizado de ruta crítica, en el que se priorizan los elementos críticos, como la etiqueta head, el contenido de la página y el diseño básico de la página primero, y se retrasan los elementos que son menos críticos, especialmente si van a retrasar la carga de los elementos más críticos. Esto puede mejorar drásticamente la experiencia de carga para los usuarios y darles la confianza de que el resto de la página se cargará rápidamente. También les da activos para empezar a evaluar mientras se produce el proceso de carga.
4. Crea una estrategia de carga de la página.
Dado que los motores de búsqueda emulan a los usuarios humanos, experimentan las páginas de forma muy similar a la tuya. Lo mejor que puedes hacer para ordenar las solicitudes de velocidad del sitio es saber qué es lo más importante para la experiencia del usuario y del bot en los primeros segundos que están en la página.
Por lo general, esta es la información en la etiqueta head y el texto e imágenes en la página. Por lo general, las personas tardan unos segundos en interactuar con cualquier elemento interactivo del sitio, por lo que la mayoría del JavaScript no necesita cargarse inicialmente.
En su lugar, las representaciones visuales de JavaScript, como cuadros o expansores adicionales, pueden cargarse como marcadores de posición antes de que se necesite JavaScript. El JavaScript es especialmente lento y engorroso de cargar. Para garantizar que la carga de JavaScript no ralentice tanto la experiencia que los usuarios y los bots se queden mirando una página en blanco durante mucho tiempo, lo ideal es cargar algo para que los usuarios miren y luego cargar el JavaScript en segundo plano, mientras los usuarios miran la página.
Después de JavaScript, los videos y las imágenes son lo siguiente que más tarda en cargarse. Los videos y las imágenes que están en la parte baja de la página no deben entorpecer la experiencia en la parte superior de la página, donde los usuarios y los bots suelen empezar. Este concepto de retrasar la carga de contenido que no es visible se llama "lazy-loading". Puede lograrse de varias maneras (diferida, asíncrona y con la etiqueta meta de lazy-loading de Google).
La mejor herramienta para encontrar oportunidades de lazy-loading de imágenes es Google PageSpeed Insights. Para optimizar imágenes, también puedes usar la etiqueta de imagen Lazy-load de Google, pero hasta ahora, esto solo se respetará en los navegadores Chrome para dispositivos móviles y de escritorio (aunque esto podría expandirse en el futuro). Con cualquier método, deberías usar la herramienta de inspección de URL en Google Search Console para verificar que los elementos que se cargan de forma diferida sean visibles en la representación de la página de la herramienta y en el código HTML renderizado.
5. Comprime todo lo que puedas.
Después de minimizar y priorizar la RTR para cada plantilla de página, comprime lo que puedas. La compresión te ayuda a aumentar la velocidad de la página al ahorrar ancho de banda. La compresión Gzip es una manera de comprimir archivos, y se puede configurar en la mayoría de los servidores, pero hay otras opciones disponibles.
También se puede someter la mayor parte del código a un proceso de minificación que reduce el tamaño del archivo final de transferencia. Sin embargo, es difícil comprimir imágenes con estos métodos. Puedes usar la página de Revisar el rendimiento en WebPageTest.org para encontrar la lista completa de verificación de optimización, que muestra todos los recursos en la página, si están comprimidos con gzip y su nivel de compresión.
Para la compresión de imágenes, en lugar de comprimirlas y minimizarlas, es importante que el diseñador las entregue al desarrollador en el formato más comprimido posible, reduciendo los archivos de imagen. Esencialmente, tienen que hacer que el tamaño del archivo final sea lo más pequeño posible sin comprometer la apariencia de la imagen.
Por lo general, las fotos deben guardarse como archivos JPG y los íconos e ilustraciones deben guardarse como archivos GIF. Para que las imágenes grandes se vean bien en computadoras de pantalla completa, sin ralentizar las pequeñas pantallas de los dispositivos móviles, considera usar el protocolo de imágenes adaptativas o un servidor de imágenes como el de Fastly para enviar dinámicamente una versión previamente a escala de la imagen a pantallas más pequeñas.
6. Guarda en caché las páginas correctas en el momento adecuado.
El siguiente paso es ayudar a los navegadores y a los bots a identificar lo que se puede reutilizar y lo que debe obtenerse de nuevo cada vez con el almacenamiento en caché del navegador, una funcionalidad que puede configurarse de diferentes maneras, una de ellas a través de las CDN (redes de entrega de contenidos).
La mayoría de los elementos de un sitio, especialmente los que no cambian más de una vez a la semana o comparten información en tiempo real, como las noticias, el tiempo o los resultados deportivos, pueden almacenar en caché la mayor parte de los elementos de sus páginas hasta un año. El almacenamiento en caché significa que cuando los usuarios visitan una página, los navegadores buscan localmente en su memoria para ver si ya tienen un archivo que se necesita para construir una página.
Esto ahorra las solicitudes de ida y vuelta y mejora el tiempo de carga. Los bots de los motores de búsqueda siempre ven una página como si nunca la hubieran visto antes, por lo que no utilizan el almacenamiento en caché activo, pero pueden detectar cuándo se está utilizando el caché y pueden usarlo para estimar el tiempo de carga de una página.
Lo importante que debes entender sobre el almacenamiento en caché es que se basa en los nombres de los archivos y su ubicación en el servidor. Por lo tanto, si utilizas un archivo en muchas páginas, como un logotipo, siempre haz referencia a él con el mismo nombre de archivo y URL, incluso si existe en varios lugares en tu servidor.
Esto puede usarse en tu beneficio porque significa que solo tienes que actualizar el nombre de archivo de un elemento y su referencia en el HTML para obtener una nueva versión del elemento en la caché. Por ejemplo, si realizas un ajuste en tu logotipo, al cambiar simplemente el nombre del archivo de "logo a "logov2", la nueva versión se almacenará en caché y la versión anterior se olvidará.
De esta manera, cuando permites que algo se almacene en caché durante un año, no estás diciendo que no vas a cambiar el elemento durante el año, sino que si lo haces, harás referencia al elemento actualizado o nuevo con un nuevo nombre de archivo.
Las opciones de la caché pueden ser un poco complicadas, así que lo mejor es pensar en ellas como si fuera un alimento que puede caducar. Algunos alimentos caducan más rápido que otros, por lo que debes hacer saber al navegador qué cosas se estropean y hay que tirarlas rápidamente, y cuáles pueden permanecer en la estantería durante un tiempo de forma segura, sin necesidad de reemplazarlas.
Puedes utilizar una herramienta como WebPageTest.org para comprender dónde se encuentran las oportunidades. Lo importante es entender que aquí no se establece una caducidad ni una edad máxima para que el elemento exista en la caché. Por lo tanto, el navegador simplemente asumirá que debe ser recuperado cada vez, ya que el almacenamiento en caché del navegador no puede ocurrir a menos que se especifiquen estos detalles.
Dado que las opciones de la caché le indican al navegador cuándo un elemento es demasiado antiguo para ser utilizado, a veces se le llama "vida útil de la caché" o "vida útil de frescura". Si algo supera su tiempo de frescura o de vida en caché, se debe completar el viaje de ida y vuelta al servidor para obtener una versión actualizada. Si los artículos aparecen como "caducados", significa que han superado su vida útil de frescura y, tanto en la analogía de la tienda de comestibles como en la del navegador, deben ser reemplazados la próxima vez que se necesiten.
De la misma manera que no es útil tener estantes llenos de alimentos caducados, no es útil tener una memoria caché llena de contenido web caducado. A la inversa, también es ineficiente tirar comestibles (archivos) que todavía son perfectamente utilizables. Cuando asignes tiempos de vida útil de caché a tus archivos, es útil pensar en esto y también considerar las consecuencias de ser generoso con el tiempo de vida útil de caché.
Si haces un cambio menor en tu logotipo, no será el fin del mundo si el logotipo anterior aún se muestra, por lo que puedes mantener ese tiempo de vida del almacenamiento en caché largo, especialmente si planeas ser diligente al actualizar los nombres de los archivos cuando hagas cambios. Con diferentes nombres de archivo, no hay preocupación de que se muestre el logotipo antiguo.
7. Crea Accelerated Mobile Pages (AMP).
Todo esto puede parecer complicado y por eso Google creó una solución más sencilla para optimizar la velocidad de carga de la página. Accelerated Mobile Pages, o AMP, es un subconjunto de código HTML que sigue pautas mucho más estrictas sobre lo que se puede incluir. El objetivo es que la mayoría de las páginas tengan un tiempo de carga de 1 segundo en el móvil, lo que generalmente se consigue. AMP permite a Google tomar el control de la mayor parte de las cosas difíciles al almacenar en caché y configurar el proceso de carga y la mayoría de los elementos descritos anteriormente para que esté lo más optimizado posible.
En algunos casos, las empresas crean nuevas páginas AMP y las enlazan desde páginas existentes en el sitio a través de la etiqueta head. Esto le indica a Google que debe servir la página AMP cuando la persona que la solicita se encuentra en un dispositivo móvil o con una conexión lenta. En otros casos, puedes reemplazar sus páginas existentes (o sus páginas móviles existentes, si tienen sitios separados) con páginas AMP. Esto se denomina “Canonical AMP” o “AMP canonical”.
Google prefiere este método porque las páginas AMP son extremadamente fáciles de rastrear, renderizar, indexar y clasificar para Google. Sin embargo, es posible que a las empresas no les guste, porque las limitaciones y los requisitos de AMP pueden hacer que las páginas sean un poco austeras. AMP también puede complicar o limitar el seguimiento y las pruebas que puedes realizar en las páginas de escritorio, por lo que esta es otra razón por la que algunas personas lo evitan.
Los sitios que son válidos para AMP cumplen con todas las reglas y directrices de AMP, y, a su vez, Google muestra un pequeño rayo gris junto a ellos en los resultados móviles. Es más probable que Google los incluya en carruseles especiales de resultados que tienden a aparecer en la parte superior de una página.
Esto está muy bien, pero si ser válido para AMP va a causar demasiados problemas a tu sitio web, está bien utilizar el código AMP sin ser válido para AMP. Deberías usar AMP código HTML cuando puedas, sin preocuparte por seguir todas las reglas. Seguirás beneficiándote de la velocidad de AMP código HTML y AMP JavaScript, lo cual no está nada mal considerando que es gratuito.
Recuerda que la velocidad tiene un impacto directo en la interacción y la conversión, pero probablemente también ayude con la profundidad de rastreo y otros aspectos de la eficiencia de rastreo.
Los navegadores móviles funcionan de manera distinta a los de escritorio. También tienen procesadores más lentos y conexiones menos confiables. Estos factores hacen que sea crucial revisar el tiempo de carga de las páginas de tu sitio desde la perspectiva más desfavorable en dispositivos móviles para identificar oportunidades reales de mejora.
Redactado por Cindy Krum para Mailchimp. Cindy es una experta en funciones de SEO móvil.
Conclusiones clave
- Las velocidades de carga más rápidas mejoran el crawl budget de Google y ayudan a indexar más páginas de tu sitio para obtener un mejor tráfico orgánico en general.
- Los usuarios de dispositivos móviles quieren que las páginas se carguen en menos de 3 segundos, y las velocidades lentas llevan a altas tasas de rebote que afectan negativamente tu clasificación.
- Los navegadores móviles funcionan de manera diferente a los de escritorio, así que reducir la cantidad de solicitudes al servidor es fundamental para optimizar la velocidad en dispositivos móviles.
- La velocidad de la página afecta directamente las métricas web esenciales de Google, que ahora son factores de clasificación vitales para la indexación mobile-first.