Rendimiento para móvil | Cómo hacer que un sitio funcione bien para dispositivos móviles

¿Por qué es importante el rendimiento en dispositivos móviles?

La web se está volviendo móvil. Según Statista, el 51 % de las visitas a páginas web en todo el mundo se realizan desde dispositivos móviles. En algunas regiones, como Asia y África, el porcentaje es mucho mayor. En todos los casos, este porcentaje crece cada año de forma constante.

Los principales motores de búsqueda son conscientes de esta tendencia, por este motivo, dan prioridad a los sitios con tiempos de carga rápidos para móviles. Los usuarios de dispositivos móviles pueden tener un ancho de banda limitado, pero aún así quieren encontrar información rápidamente. Estos usuarios suelen tener menos paciencia, lo que se traduce en una alta tasa de rebote de los sitios de carga lenta. ("Tasa de rebote" es el porcentaje de visitantes de un sitio web que lo abandonan tras ver una sola página).

Google y otras autoridades en materia de velocidad de sitios han determinado que el tiempo máximo de carga de un sitio móvil debe ser de unos tres segundos. Después de tres segundos, la retención de los usuarios disminuye de forma drástica. Los motores de búsqueda "castigarán" a los sitios que se carguen lento al colocarlos más abajo en los resultados de búsqueda, sobre todo para los usuarios de dispositivos móviles.

Un límite de tiempo de carga de tres segundos para una conexión móvil no es muy indulgente, pero hay estrategias probadas para mantener bajos los tiempos de carga en dispositivos móviles.

Cómo mejorar el rendimiento de los dispositivos móviles

Hay una serie de factores que afectan al rendimiento de los dispositivos móvil, por lo que una serie de estrategias y buenas prácticas pueden mejorar los tiempos de carga.

Minimizar el tamaño y el número de archivos

Para garantizar un tiempo de carga más rápido, todos los archivos del sitio web deben hacerse lo más pequeños que sea posible. Las imágenes suelen ser los archivos más grandes que se solicitan, y estas pueden hacerse más pequeñas mediante el uso de optimizadores de imágenes o convirtiéndolas a un formato de imagen menos pesado, como el SVG.

Los archivos HTML, JavaScript y CSS también pueden hacerse más pequeños mediante la minificación. Minificación del código significa quitar todos los espacios en blanco y los comentarios del código, y reestructurarlo de la forma más compacta posible. Esto reducirá el tamaño del archivo al mínimo. Aunque esto hace que el código sea prácticamente ilegible para un ser humano, un navegador web podrá seguir ejecutando el código sin problemas.

Además de crear archivos de menor tamaño, hay que mantener el número total de archivos al mínimo. Cada archivo adicional necesario para cargar un sitio web supone una solicitud y una respuesta adicionales, y estos viajes de ida y vuelta contribuyen al tiempo de carga. Los sitios con múltiples archivos JavaScript y CSS deben consolidar todo el código JavaScript en un solo archivo, y hacer lo mismo con el CSS. Para las páginas que requieren muy poco JavaScript o CSS, el uso de estilos en línea* puede mejorar de forma significativa los tiempos de carga.

*Es habitual que los desarrolladores web escriban código HTML, JavaScript y CSS en archivos diferentes. Mediante el uso de una técnica llamada "estilos en línea", un desarrollador puede escribir su código JavaScript y/o CSS en el mismo archivo que su HTML.

Recursos de caché en el perímetro

Normalmente, cuando un usuario visita un sitio web, el dispositivo del usuario tiene que comunicarse con el servidor web para obtener los archivos del sitio. Si el servidor web está en San Francisco y el usuario está en Berkeley (a 16 km de distancia), debería ir bastante rápido. ¿Pero qué sucede si el usuario está en Tokio (a 8000 km.)? Eso significa que cada solicitud y respuesta tendrá que viajar miles de kilómetros, añadiendo un retraso significativo a la carga del sitio web.

Una forma habitual de mitigar este problema es con el uso de una Red de entrega de contenido (CDN). Una CDN global almacena en caché el contenido en el perímetro de la red. Esto significa que la CDN tiene servidores de caché situados en centros de datos de todo el mundo. Cualquier persona con acceso a Internet nunca llega a estar demasiado lejos de un centro de datos. Estos servidores de centros de datos pueden comunicarse con los servidores web de origen para almacenar en caché los datos del sitio web, de modo que los usuarios que visiten un sitio web que utilice la CDN puedan obtener los archivos del sitio web desde su centro de datos local. Esto garantiza un tiempo rápido de solicitud-respuesta para los usuarios, independientemente de su ubicación.

Llamadas de la API de la caché

Las llamadas de la API son solicitudes HTTP para obtener datos de recursos externos. Por ejemplo, un sitio de reseñas de películas como Rotten Tomatoes puede hacer llamadas de la API a un servicio de venta de entradas como Fandango, para que los usuarios que navegan por Rotten Tomatoes puedan ver los horarios de las películas en su zona. Aunque las llamadas de la API pueden ayudar a crear una experiencia sólida y reducir el trabajo redundante, también crean nuevas solicitudes HTTP, que pueden ralentizar los tiempos de carga.

Las llamadas de la API se pueden almacenar en caché para minimizar estas solicitudes HTTP adicionales. En nuestro ejemplo de los horarios de proyección de películas, Rotten Tomatoes solo necesita conseguir los horarios de las películas de Los Ángeles una vez al día. Pueden configurar su sitio para almacenar en caché esta llamada de la API una vez al día. De esta manera, si 10 000 usuarios de Los Ángeles visitan Rotten Tomatoes cada día, solo el primero de esos usuarios tendrá que esperar a la llamada de la API de Fandango.

Priorizar el contenido visible

Lo que un usuario ve inmediatamente después de cargar una página web suele ser la punta del iceberg; debe desplazarse hacia abajo para ver el resto de la página. El contenido que aparece en la pantalla del usuario antes de que se produzca el desplazamiento se denomina "primer pantallazo". Los desarrolladores web deben escribir el código de forma que el contenido de la parte superior de la página se cargue siempre en primer lugar. Una técnica para conseguirlo es la denominada carga diferida, que consiste en cargar dinámicamente el contenido de la parte inferior de la página a medida que el usuario se desplaza por ella.

Evitar las redirecciones

Por diversos motivos, algunos sitios web crean redirecciones en las cargas de página. Por ejemplo, las redirecciones 301 se utilizan habitualmente en los sitios web que cambian de nombre o de marca. Esta práctica debe evitarse siempre que sea posible, ya que las redirecciones consumen un tiempo de carga valioso.

Resumen

A medida que la navegación en dispositivos móviles se apodera de la web, cada vez es más importante tener un sitio para móvil de alto rendimiento. Los sitios para móviles rápidos se ven recompensados con un mayor compromiso y una mejora de las tasas de conversión, además de un impulso de SEO. Los propietarios de los sitios web deberían poner en práctica algunas o todas las estrategias descritas anteriormente para obtener estos beneficios.