diseño web

10 puntos clave del diseño web enfocado a la velocidad mobile

Velocidad web mobile

¿Has realizado una prueba de velocidad móvil últimamente? ¿Cómo se posiciona tu sitio web? Un sitio web lento puede dar la espalda a los usuarios móviles. Lo ideal es que el 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.

Primero, prueba la velocidad móvil, y luego utiliza estos consejos para mejorar el rendimiento web y mantener a más usuarios en el 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 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 páginas 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 hosting VPS, donde ha compartido hosting con recursos de servidores dedicados.

Luego, piense en asesinos de carga como el contenido de vídeo. Aloje esos archivos usando 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. Presta atención al JS

JavaScript activa muchos de los efectos y cosas geniales que suceden en los diferentes tipos de diseño web. No hay mucha manera de evitarlo.

Tenga cuidado con el uso de JavaScript y no ralentizará su website 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.
  • Utiliza JavaScript asíncrono: 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.

Retrasar carga de imágenes

4. Usar Lazy Load

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 un montón de plugins de WordPress que pueden ayudarle a hacer esto que son simples y bastante ligeros. Intente algo como Lazy Load o WP Rocket.

5. Hacer uso de la 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 se habilita el almacenamiento en caché, la carga de páginas subsiguientes puede ser más eficiente”.

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

6. Reduce los redireccionamientos

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

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.

7. Prueba las páginas móviles aceleradas AMP

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 web 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 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 disponible sobre el proyecto AMP.

8. Eliminar esperas al clicar

¿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.

<meta name="viewport" content="width=device-width">

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”.

Diseño web móvil rápido

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 sin conexión 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.

10. Borrar 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 necesites y lo que 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.).

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s