Descubra los problemas de rendimiento más comunes que ralentizan los sitios móviles y, a continuación, aprenda las mejores prácticas para la optimización móvil.
Este artículo fue publicado originalmente en el sitio SiteSpect. Se ha revisado ligeramente para ConsejoTecnologico.com.
Los dispositivos móviles representan una parte significativa y creciente de todo el tráfico de Internet (15% según el último informe de Mary Meeker sobre Tendencias de Internet. Claramente, tener un sitio móvil es importante, pero también tiene que ser rápido y funcional para poder ofrecer la mejor y más agradable experiencia de uso posible.
Entonces, ¿cuáles son algunos de los problemas de rendimiento más comunes que ralentizan a los sitios móviles?
- Hacer demasiadas peticiones HTTP. El tiempo de conexión y la latencia son dos de los factores principales en el rendimiento del sitio móvil y están directamente relacionados con el número de solicitudes. A medida que aumenta el número de peticiones HTTP realizadas para diferentes componentes (imágenes, scripts, hojas de estilo, etc.), también aumenta el tiempo que tarda el sitio web en cargarse en un dispositivo móvil.
- Las imágenes son grandes y no están optimizadas para el tamaño de la pantalla del dispositivo del visitante. Las imágenes más grandes generalmente significan tamaños de archivo más grandes. Como resultado, el navegador móvil tardará más tiempo en mostrar las imágenes correctamente. Las imágenes deben servirse según el tipo de dispositivo del visitante y deben tener el tamaño adecuado para el tamaño de la pantalla de ese dispositivo. La compresión de imágenes es naturalmente importante tanto para la web como para el móvil, especialmente cuando un dispositivo móvil utiliza una conexión celular 3G o 4G.
- Los redireccionamientos ocupan un valioso tiempo de carga. Según Nicholas Zakaz de Yahoo!, los redireccionamientos consumen el 40% del tiempo para cargar una página. Los redireccionamientos del lado del cliente que utilizan JavaScript son especialmente costosos, ya que la página móvil primero tendrá que ser renderizada en el navegador del visitante, y luego redirigida a la nueva página y cargada dentro del navegador una y otra vez.
- JavaScript externo inhibe el rendimiento. Como ha dicho Bryan McQuade, del equipo Page Speed de Google, «los JavaScript externos cargados al principio del documento (por ejemplo, en el <head>) son asesinos del rendimiento, y son especialmente caros en los móviles debido a los mayores tiempos de viaje de ida y vuelta asociados a las redes móviles».
- Cargar toda la página lleva tiempo y crea una mala experiencia de usuario. La carga de toda la página de un sitio móvil puede consumir una cantidad significativa de tiempo extra y aumentar el número de solicitudes que hacen que la experiencia general del usuario sea deficiente. Por ejemplo, si tiene una galería de imágenes en la sección inferior de una página y un visitante de un smartphone no verá inmediatamente la galería en su dispositivo, esto hará que todo lo demás en la página se cargue más lentamente como resultado de la carga de toda la página al mismo tiempo.
Hay una serie de mejores prácticas para la optimización móvil para abordar cada uno de estos cinco desafíos y para asegurar que su sitio móvil esté cargando lo más rápido posible. El objetivo final debería ser cargar la versión móvil de apage en un segundo, ya que es cuando los visitantes empiezan a perder la atención a su sitio. Para empezar, mida el rendimiento de su sitio web móvil y luego pase a la lista de sugerencias que aparece a continuación para reducir los tiempos de respuesta de los móviles lo más cerca posible de un segundo.
- Eliminar peticiones HTTP. Esto es crucial para el rendimiento de la web móvil, pero ¿cómo eliminar estas solicitudes sin eliminar las características y la funcionalidad? El spriting de imágenes es un ejemplo que elimina las peticiones HTTP individuales como resultado de la concatenación de imágenes en una sola imagen. Puede hacer lo mismo con las hojas de estilo y los archivos JavaScript, pero la investigación de Google sugiere que los navegadores modernos funcionan mejor sin la concatenación de CSS y JavaScript. Otro enfoque es la inserción de imágenes pequeñas, CSS o JavaScript en la página HTML. Independientemente del enfoque que adopte, le recomiendo que pruebe estas optimizaciones A/B, ya que tendrán un impacto diferente en diferentes páginas, navegadores y dispositivos. A continuación, segmente por dispositivo y observe el impacto de las pruebas por tipo de dispositivo y navegador en sus optimizaciones para centrarse realmente en las mejoras de rendimiento específicas para los segmentos principales de su audiencia.
- Reduzca el tamaño de la imagen comprimiendo las imágenes y asegúrese de que está utilizando el formato web óptimo. Algunos formatos comunes que generalmente producen tamaños de imagen pequeños son JPG, PNG y, en algunos casos, GIF. Además, las versiones móviles de los navegadores Chrome y Firefox soportan un nuevo formato de imagen llamado WebP que generalmente tiene tamaños de archivo mucho más pequeños.
- Utilice redirecciones del lado del servidor para que los cambios de página sean más eficientes para el usuario final. Esto puede requerir cambios en la estructura de su URL y debe ser discutido con el personal interno de TI antes de realizar cualquier cambio.
- Minimice la cantidad de JavaScript externo y scripts de terceros en su sitio. Asegúrese de que cualquier contenido JavaScript se cargue de forma asíncrona para que el navegador no se vea impedido de procesar otros contenidos estáticos. Además, si tiene JavaScript que sólo se aplica a la versión de escritorio de su sitio en sus páginas móviles, asegúrese de eliminarlo.
- Cargue el contenido que el usuario verá «sobre el pliegue» de inmediato. Cargue de forma perezosa cualquier contenido adicional hasta que sea necesario. Por ejemplo, para una galería de imágenes, es posible que pueda cargar sólo las imágenes actuales, anteriores y siguientes y luego cargar las imágenes restantes de forma perezosa para optimizar el rendimiento. Además, hay muchos casos en los que se puede utilizar CSS3 en lugar de imágenes.
Tenga en cuenta estas mejores prácticas a medida que optimiza su sitio móvil y, lo que es más importante, pruebe A/B cada cambio para obtener una comprensión basada en datos de lo que funciona para sus visitantes. Las métricas reales de Monitoreo del Usuario (RUM) le permitirán medir información crucial basada en el tiempo, como la cantidad de tiempo que un visitante permanece en su página móvil.
Jeffrey Vocell es el Gerente de Marketing de Productos de SiteSpect, donde es responsable de la estrategia y la comunicación de los mensajes de productos. Antes de SiteSpect, Vocell cofundó Trendslide, una empresa de análisis de negocio móvil. Es licenciado en Administración de Empresas y Liderazgo por el Danish Webster College.