Skip to content

10 maneras de diseñar su sitio web para la velocidad móvil

¿Ha realizado una prueba de velocidad móvil últimamente? ¿Cómo se clasifica su sitio web? Un sitio web lento puede alejar a los usuarios móviles. Lo ideal es que tu diseño se cargue con la misma rapidez para los usuarios 3G en los teléfonos que para los usuarios de escritorio en Wi-Fi. (Esa es una pregunta bastante grande, pero hay cosas que puedes hacer para que suceda.)

Primero, pruebe la velocidad de su móvil. Y luego utilice estos consejos para mejorar su rendimiento y mantener a más usuarios en su sitio por más tiempo.

1. Optimizar imágenes

Uno de los mayores problemas con la velocidad del sitio web es el tamaño de la imagen. Las imágenes pueden representar la mayor parte de los datos descargados en una página y al formatear y guardar las imágenes de la manera correcta, se puede reducir seriamente el número de bytes necesarios para servir esta información.

La forma más fácil de optimizar las imágenes es trabajar con ellas antes de cargarlas. Recorte las imágenes al tamaño necesario y guárdelas para la web antes de añadirlas a su sistema de gestión de contenidos. A continuación, comprima las imágenes para conseguir que el tamaño del archivo sea lo más pequeño posible.

Tenemos un gran resumen de las mejores herramientas de compresión de imágenes aquí. Pueden ayudarle a optimizar sus imágenes antes de subirlas.

2. El Hosting Importa

El plan de alojamiento más barato no es adecuado para todos los sitios web. El alojamiento lento es un problema a menudo oculto y es común en sitios web que han crecido constantemente con el tiempo, pero no han mejorado sus planes de alojamiento.

Para asegurarse de que su plan de alojamiento está construido para la velocidad, opte por una opción de servidor dedicado. Si necesita algo un poco más económico, la siguiente mejor opción es el alojamiento VPS, donde ha compartido el alojamiento con recursos de servidores dedicados.

Luego, piense en asesinos de carga como el contenido de vídeo. Aloje esos archivos utilizando herramientas externas cuando sea posible. Servicios como YouTube son perfectos para esto. Esencialmente, se enlaza a estos archivos en sus ubicaciones nativas en lugar de agregarlos a los archivos de su sitio.

3. Preste atención a JS

JavaScript activa muchos de los efectos y cosas geniales que suceden en los sitios web. No hay mucha manera de evitarlo.

Tenga cuidado con el uso de JavaScript y no ralentizará su sitio web para los usuarios móviles.

  • Ponga JavaScript en la parte inferior de los archivos: Los navegadores no cargarán otros elementos mientras se esté cargando JavaScript. Resuelva este problema moviendo los scripts JS al final de la página cuando pueda. De esta manera, el contenido HTML se muestra primero y puede utilizar una pista visual para que los usuarios sepan que vienen más datos si es necesario.
  • Optimizar y minimizar: Los archivos más pequeños se cargan más rápido. No olvides que esto también se aplica al código.
  • Utilice JavaScript asincrónico: Opte por la carga asíncrona en JS hasta después del primer render para todos los elementos no críticos. Esto permite que los scripts se carguen al mismo tiempo en lugar de uno por uno.

4. Usar Lazy Loading

Lógicamente, tiene sentido cargar el contenido de arriba a abajo, ¿verdad?

La carga perezosa permite que el contenido de la pantalla se cargue primero y luego se cargue todo lo demás. (A Google le gusta esta opción cuando se trata de velocidad y optimización de motores de búsqueda.)

Hay muchos plugins de WordPress que pueden ayudarte a hacer esto que son simples y bastante ligeros. Intente algo como Lazy Load o WP Rocket.

5. Uso del almacenamiento en caché

De Google: “El almacenamiento en caché permite que un navegador almacene los archivos que se solicitan con frecuencia en el dispositivo del usuario durante un período de tiempo determinado. Cuando el almacenamiento en caché está habilitado, la carga de páginas posteriores puede ser más eficiente”.

Habilitar el almacenamiento en caché es una de las opciones más recomendadas para aumentar la velocidad de la página. Los usuarios se lo agradecerán.

6. Reducir las redirecciones

¿Sabe cuántos redireccionamientos hay en su sitio web? Aunque los redireccionamientos pueden ser útiles por varias razones, ralentizarán su sitio. El mejor consejo cuando se trata de redirigir es eliminar los innecesarios.

El que más velocidad consume es el 301 redireccionado, que hace que los usuarios pasen de una página obsoleta a una nueva versión. Piensa en tu contenido y si esta acción sigue siendo necesaria. Una auditoría de reorientación podría estar en orden.

Varvy$0027s Redirect Mapper puede ayudarle a averiguar por dónde empezar.

7. Probar páginas móviles aceleradas

Accelerated Mobile Pages es una imitación de Google de código abierto que está diseñada para crear páginas que se cargan rápidamente en dispositivos móviles.

Crear versiones AMP de las páginas de destino para hacer el mejor uso de la tecnología. Estas páginas utilizan el formato HTML AMP y JavaScript AMP y es una solución ideal para sitios web que hacen mucha publicidad en línea o que envían usuarios a lugares específicos.

La gran ventaja es que las páginas AMP se cargan casi instantáneamente. La desventaja es que es un poco más de trabajo en la parte de atrás.

Hay mucha información sobre el proyecto AMP disponible.

8. Eliminar Retardos de Grifo

¿Alguna vez has notado que hay un pequeño retraso entre el momento en que tocas algo y el momento en que se produce la acción en un dispositivo móvil? Este retardo fue diseñado originalmente para facilitar a los dispositivos el reconocimiento de un doble toque. (Esa función es bastante obsoleta.)

Aquí está el arreglo. Sólo ponlo en el encabezado de la página.

De Jake Archibald de Google sobre el simple cambio: "La diferencia de rendimiento es enorme! Tener una interfaz de usuario que responde instantáneamente significa que el usuario puede presionar rápidamente cada botón con confianza, en lugar de hacer una pausa y esperar una respuesta".

9. Considere las aplicaciones Web progresivas

Si tiene un sitio web con mucho contenido interactivo y funciones dinámicas, una aplicación web progresiva puede ser la solución.

Los PWAs son sitios web que funcionan como aplicaciones (pero sin la descarga).

Lo bueno de los PWAs es que son buscables como los sitios web, no requieren instalación o actualización. También tienden a trabajar fuera de línea y permiten notificaciones push y son súper rápidos debido al método de almacenamiento en caché utilizado.

La parte difícil es que esta es una opción sólo para desarrolladores y no para un constructor de sitios web principiante. Pero definitivamente vale la pena investigar si su sitio web requiere contenido que siempre está cambiando y no es tan rápido como debería ser.

¿No está convencido? Juega con algunas interesantes aplicaciones Web progresivas.

10. Eliminar todos esos plugins

Los plugins tienen mucho valor en la creación de la funcionalidad del sitio web. Pero debido a que son tan fáciles de encontrar e instalar, muchos sitios web tienen una tonelada de plugins sin usar ejecutándose en segundo plano.

Eso es añadir peso y código al diseño. Eso es más cosas que el usuario tiene que descargar antes de ver el diseño. Y está ralentizando su sitio web.

Cuando se trata de plugins, sólo mantén lo que necesitas y lo que realmente estás usando. Desactivar y borrar todo lo demás. Luego asegúrese de mantener los plugins actualizados. Los plugins obsoletos, no soportados o mal configurados son asesinos de velocidad.

Piense en los plugins que hacen lo mismo - lea las descripciones y la documentación con actualizaciones - y deshágase de las redundancias aquí.

Finalmente, deshazte de los plugins para las cosas que puedes hacer manualmente (instalaciones de fuentes, inserción de etiquetas de encabezado, análisis, etc.).