Skip to content

15 correcciones críticas a realizar en el sitio web antes de lanzar una aplicación móvil

Su mercado objetivo se ha vuelto móvil. Los usuarios móviles pasan hasta un 12% de su tiempo navegando en su dispositivo, lo que equivale a 87 horas al mes o 1.044 horas al año en su teléfono; el 90% de ese tiempo lo dedican a utilizar aplicaciones móviles.

Es por eso que tener una aplicación móvil puede ser tan valioso para su negocio. No es de extrañar que todo el mundo parezca estar subiéndose al carro. Incluso el 67% de las pequeñas empresas tienen ahora una aplicación móvil.

El problema es que muchas aplicaciones son extensiones horribles de sitios web ya de por sí malos. Si bien es posible que sienta la necesidad de sumergirse directamente en el desarrollo de la suya propia y correr hacia el mercado, es un gran error. Las aplicaciones móviles son una puerta de entrada a su sitio. Por lo tanto, tratar de implementarlas sin una optimización crítica del sitio web puede tener un impacto directo en la cantidad de tiempo y dinero que se necesita para crear la aplicación.

Aquí hay 15 ajustes del sitio web que usted debe hacer antes de considerar una aplicación móvil.

Optimización de velocidad

La velocidad es fundamental para la experiencia del usuario. Lo que significa que si quieres que tu sitio web y tu aplicación móvil proporcionen una gran experiencia de usuario, lo primero que tienes que hacer es optimizar la velocidad de tu sitio.

Aquí están los ajustes que necesitas hacer, para hacerlo:

1. Minify

La minimización reduce el tamaño del contenido CSS, JavaScript y HTML de su sitio web. Funciona eliminando cualquier código innecesario del sitio web, como por ejemplo:

  • Código innecesario en su JavaScript;
  • Espacios no utilizados en su CSS;
  • Saltos de línea innecesarios en su HTML.

Si usas WordPress, hay muchos plugins disponibles que se encargarán de este proceso por ti, incluyendo Fast Velocity Minify y Autoptimize.

2. Comprimir

La compresión de texto también puede aumentar la velocidad, especialmente en sitios web con mucho texto, como los blogs. La mayoría de las Redes de Entrega de Contenido soportan el envío de archivos comprimidos para que pueda configurar la compresión predeterminada a través de una herramienta como Gzip.

Si no aloja su propio sitio web, puede utilizar Comprobar la compresión GZIP para ver si la compresión ya está configurada. Si no lo es, la forma más fácil de instalarlo es a través de un plugin como W3 Total Cache, WP Super Cache o WP Rocket.

3. Maximizar el almacenamiento en caché

El almacenamiento en caché HTTP es cuando un navegador almacena copias de los recursos para que se pueda volver a acceder a ellos más rápidamente. Mediante una cabecera de caché HTTP, puede definir cuándo, cómo y durante cuánto tiempo debe almacenarse en caché una respuesta.

Puede configurar su servidor para que adjunte el encabezado del HTTP Cache-Control y lo modifique durante cuánto tiempo desea que se almacenen los datos en caché. Una manera de hacer esto es añadir el encabezado directamente en su código.

Aquí hay un ejemplo de un encabezado PHP con una configuración de Cache-Control de máxima edad igual a 84.600 segundos (1 día):

cabecera ($0027Cache-Control: max-age=84600$0027)

Al establecer un encabezado de caducidad de máxima edad, se asegurará de que los visitantes que repiten no se ralentizan en el acceso a los recursos que descargaron antes. Intente almacenar en caché tantos recursos como sea posible durante el período de tiempo más largo posible. A continuación, proporcione tokens de validación para una revalidación eficaz de los recursos que se actualizaron.

4. Reducir el tiempo de carga de JavaScript

JavaScript puede causar retrasos, especialmente si tiene paquetes grandes. En un teléfono móvil medio, el procesamiento de estos paquetes puede llevar de 5 a 10 veces más tiempo que en un ordenador de sobremesa. Puedes combatir esto con la división de código.

La división de código rompe sus paquetes de JavaScript en pedazos para entregarlos más rápido y sólo cuando los usuarios lo necesiten. Se puede aplicar a nivel de ruta o de componente con herramientas como React, Parcel y Webpack.

5. Optimizar imágenes

Las imágenes son importantes para la participación del usuario, pero lo último que quieres es que reduzcan la velocidad de la experiencia del usuario. Afortunadamente, hay muchas herramientas en el mercado que le ayudarán a comprimir y optimizar sus imágenes.

Aquí hay un número de opciones para elegir:

Herramientas de optimización únicas:

  • ImageOptim
  • XNConvertir

Optimización automatizada:

  • Flujo de imágenes
  • Imagemin
  • Pulgar

Hosting y optimización:

  • Akamai
  • Cloudinario
  • Rápidamente

6. Formatear contenido animado

El formato GIF es popular para las animaciones, pero en realidad nunca fue concebido como una plataforma de animación. Al cambiar a un formato de vídeo más adecuado, puede reducir en gran medida el tamaño del archivo y acelerar los tiempos de página.

Puedes usar la herramienta FFmpeg para convertir GIFs de animación en archivos mp4. También puede utilizar la herramienta Effective Type API para identificar anchos de banda lentos y convertir automáticamente las imágenes animadas a JPEG mucho más pequeños. Aunque elimina parte de la experiencia del usuario, es mejor que que el sitio no se cargue o funcione de forma irrazonablemente lenta.

7. Reducir Plugins

WordPress tiene más de 54.000 plugins. Aunque es la plataforma más grande del mercado, incluso las opciones de la competencia ofrecen miles de plugins. Hay plugins para prácticamente cualquier cosa que pueda imaginar en estos días – plugins de comercio electrónico como BigCommerce para WordPress, plugins de marketing por correo electrónico como Mailchimp, y plugins de optimización de la tasa de conversión como OptinMonster. Muchos de ellos añaden una valiosa funcionalidad.

El problema es que demasiados plugins pueden ralentizar la velocidad de su sitio. Primero, asegúrate de que no tienes nada instalado que no estés usando. A continuación, desinstale los plugins de los servicios que pueda integrar con su sitio web a través de otros medios. Google Analytics es un buen ejemplo. No hay razón para usar un plugin para esta integración cuando puede hacerlo con una clave de API.

Por último, si todavía tiene muchos plugins, busque algunas soluciones “todo en uno” que puedan sustituir a un puñado de plugins de nicho. Por ejemplo, no utilice plugins separados para la minificación, compresión y almacenamiento en caché cuando haya una solución para las tres. Sin embargo, realice su diligencia debida ya que algunos plugins todo-en-uno como Jetpack ralentizan su sitio más que ningún otro.

¿Cuántos plugins son demasiados? He aquí una regla general:

  • No más de cinco si ha compartido o presupuestado alojamiento en nube;
  • No más de 20 si utiliza alojamiento en nube, alojamiento VPS o un servidor dedicado.

8. Usar AMP

Accelerated Mobile Pages (AMP) se refiere a un lenguaje de programación web de código abierto que entrega contenido estático instantáneamente a los dispositivos móviles. Se trata básicamente de una versión reducida y reducida de HTML creada específicamente para acelerar las páginas web no interactivas en dispositivos móviles.

Debido a que es una versión desmontada, usted puede cambiar alguna funcionalidad por esta velocidad rápida. He aquí dos posibles inconvenientes a tener en cuenta:

  • JavaScript está limitado a una biblioteca AMP disponible;
  • La funcionalidad de carga perezosa está habilitada (las imágenes se cargan a medida que se desplaza hacia abajo hasta ellas);
  • La generación de clientes potenciales puede verse afectada, ya que AMP a menudo elimina los formularios de inclusión voluntaria.

Por otro lado, una de las mayores ventajas (aparte de la velocidad mejorada) es que la indexación de Google para móviles tiende a promover las páginas AMP en los resultados de búsqueda. Hay muchos plugins para habilitar AMP, incluyendo AMP, AMP para WP – Accelerated Mobile Pages, y AMP WP – Google AMP For WordPress.

9. Redireccionar direcciones y enlaces rotos

Los redireccionamientos y enlaces rotos pueden matar su experiencia de usuario, así como reducir la velocidad de su sitio.

Redirecciona

Usted querrá minimizar los redireccionamientos tanto como sea posible, ya que impactan la velocidad de la página e incluso el tiempo total de carga de su sitio. El retraso tiende a ser aún más notorio cuando los usuarios están en dispositivos móviles.

Puede utilizar una herramienta gratuita como Screaming Frog para comprobar si hay redirecciones en su sitio web. Una vez que haya encontrado algunos, elimine los que no sean necesarios y realice cambios en los que deban actualizarse.

Si tiene un sitio seguro, también puede utilizar HSTS para eliminar la redirección SSL.

Enlaces rotos

Afortunadamente, también hay herramientas gratuitas que puedes usar para encontrar y reparar enlaces rotos en tu sitio web. Dos ejemplos son:

  • Verificador de enlaces rotos
  • Xenu

Una vez que identifique los enlaces rotos, puede actualizarlos con la URL correcta o eliminar el enlace.

Ambas comprobaciones deben ser parte de la rutina de la gestión de su sitio web, ya que los redireccionamientos y los enlaces rotos pueden volver a aparecer con el tiempo.

10. Prueba continua

Hemos cubierto nueve métodos importantes para optimizar la velocidad de su página antes de introducir una aplicación móvil. Aunque esto debería aumentar significativamente el rendimiento de su sitio web, aún podría tener más oportunidades de mejora.

Hay cientos de herramientas para probar la velocidad de la página web y la preparación para móviles, pero el mejor lugar para empezar es con la herramienta PageSpeed Insights de Google.

Le dará una puntuación actual de la velocidad de la página tanto para las versiones de escritorio como para móviles de su sitio y le hará sugerencias específicas sobre cómo puede mejorar.

El siguiente paso es utilizar Test My Site para analizar más a fondo la velocidad y la amabilidad de la página móvil.

Todo lo que tiene que hacer es introducir la URL de su sitio web, y éste escaneará su sitio y lo evaluará. También puede obtener un informe gratuito con consejos de optimización a cambio de enviar su correo electrónico.

La velocidad del sitio también proporciona enormes beneficios de SEO. Además de escribir contenido de alta calidad y formato largo y obtener vínculos de retroceso, la velocidad del sitio tiene un gran impacto en el aumento del tráfico del sitio web.

A principios de 2019, llevé a cabo un estudio de caso personal en el que escribí tantos artículos como pude en 15 días. En ese tiempo, recibí 247 backlinks y un aumento del 372% en el tráfico orgánico.

Sin embargo, esto palidece en comparación con el impacto que la velocidad del sitio ha tenido en mi tráfico móvil. Al aumentar la velocidad de mi móvil de 33 a más de 75 en el mismo periodo de tiempo, vi que mi ranking de móviles aumentaba un 1,775% según los datos de Google Analytics.

Optimización de la interfaz de usuario

La velocidad puede estar en la cima de la jerarquía de UX, pero no es el único factor. Hay otros componentes a considerar, tales como:

  1. Qué fácil es encontrar lo que está buscando;
  2. Qué tan bien se ajusta el sitio a la pantalla de su teléfono móvil;
  3. Qué fácil de usar;
  4. Qué atractivo se ve.

Puede utilizar los siguientes ajustes del sitio para agilizar y maximizar la interfaz de usuario.

11. Simplifique su estructura

Su sitio web debe ser intuitivo y fácil de navegar para los usuarios, especialmente cuando están tratando de hacerlo en la pequeña pantalla de un dispositivo móvil.

Asegúrese de que sus jerarquías estén optimizadas y de que no tenga más de un nivel de contenido anidado. La estructura ideal de su sitio debe verse así:

  1. Página de inicio
  2. Categorías (o secciones)
  3. Subcategorías (sólo para sitios más grandes)
  4. Páginas y mensajes individuales

Enfóquese en lo que sus usuarios están buscando típicamente y trace los caminos comunes que tomarán. A continuación, puede organizar las categorías en una jerarquía que tenga más sentido para su público.

También debe utilizar el software de la base de conocimientos para crear un recurso o base de conocimientos central para cualquier usuario que busque respuestas a preguntas comunes.

Se trata de la modificación de diseño más sencilla que puede hacer y que tiene un impacto duradero tanto en el escritorio como en el uso móvil.

12. Enfoque en el diseño de contenido

Diseñar tu contenido alrededor del móvil puede ser un poco más complicado, pero es crucial para una experiencia móvil exitosa. Un mal diseño de sitio web puede matar el contenido de su aplicación.

La conclusión es que usted necesita que su contenido brille con la menor cantidad de distracciones posible. Para ello, es posible que tenga que eliminar elementos como tablas, gráficos y otros elementos torpes que no se traducen bien a la pantalla pequeña.

También debe eliminar funciones como encabezados, pies de página, menús y barras laterales para que se puedan ocultar o contraer en pantallas más pequeñas. Deshabilite cualquier efecto hover para su contenido ya que muchos dispositivos móviles no tienen esta funcionalidad.

Tampoco querrás usar demasiado texto. Puedes reducir el texto utilizando herramientas como los objetivos y las audiencias de Grammarly para ayudarte a crear una copia más concisa que esté en el punto. O, mejor aún, concéntrate en sustituir el texto por más contenido de vídeo para maximizar tu experiencia móvil.

13. Reducir Banners y Sliders

Los deslizadores han sido populares durante un tiempo, pero la gente suele añadir 5-6 imágenes de alta calidad a un deslizador, lo que aumenta el tiempo total de carga de su sitio web. Además, los estudios muestran que los deslizadores molestan a los usuarios y reducen la visibilidad, especialmente en los móviles.

Los banners pueden dar lugar a problemas similares, especialmente si tienen texto incrustado en la imagen. Si actualmente tienes algún banner con texto, deberías renderizar el texto con HTML y CSS en lugar de incrustarlo en la imagen. Esto hará que sea más flexible y más fácil de ver en una pantalla más pequeña.

14. Optimizar formularios y puntos táctiles

Si su sitio web tiene formularios, preste atención a los tipos de campo, longitudes y etiquetas. Todo debe ser claramente visible en cualquier dispositivo. Habilite la funcionalidad para que si un usuario toca un campo para introducir información, la vista se acerque al lugar correcto.

Compruebe si tiene tipos de campo que requieran un teclado o una pantalla táctil diferente, como un código postal, un número de teléfono o una firma electrónica. Si es así, debe configurar el campo para que active el teclado correcto cuando pulse sobre él, para que los usuarios no tengan que cambiar manualmente.

Asegúrese de que todos los puntos y botones táctiles sean visibles y lo suficientemente grandes como para tocarlos fácilmente con un dedo en una pantalla pequeña. La recomendación estándar es que deben tener un tamaño aproximado de 48 x 48 ppp. Coloque el texto dentro de los botones en lugar de encima o debajo de ellos para facilitar su identificación.

15. Agilizar el proceso de pago

Si usted dirige un sitio web de comercio electrónico, este último ajuste es para usted.

Cerca de la mitad de todo el tráfico de ecommerce viene de dispositivos móviles, pero cuando se trata de comprar más gente todavía lo hacen en sus escritorios. Esto se debe probablemente a que todo el flujo de pedidos, pagos y pagos no está optimizado adecuadamente para los dispositivos móviles.

Para identificar dónde necesita mejorar su proceso, siga todos los pasos a través de múltiples dispositivos y tamaños de pantalla e identifique los puntos débiles. El tema puede ser algo que ya hemos cubierto, como la difícil navegación por los formularios o los puntos de contacto demasiado pequeños.

Sin embargo, incluso con estos optimizados, si necesita muchos datos, puede ser doloroso tener que introducirlos todos desde un dispositivo móvil.

Puede remediar esto de una de las siguientes maneras:

  1. Permitir a los usuarios crear perfiles que guarden y rellenen previamente la información de pago, incluida la dirección de envío y el número de tarjeta de crédito
  2. .

  3. Integre con otras pasarelas de pago, como PayPal, que no les exigirá que vuelvan a escribir su información.

Conclusión

Las pantallas de los teléfonos son cada vez más grandes y las tabletas cada vez más sofisticadas, por lo que no es de extrañar que una mayor parte de su audiencia se conecte e interactúe a través de un dispositivo móvil.

Una aplicación móvil puede ser una gran manera de comprometerse aún más con sus usuarios. Pero sólo si primero optimizas tu sitio web para asegurar una experiencia de usuario sin problemas.