Creación Web Imprescindibles

Cómo testear nuestra web en distintas conexiones móviles

Descubre cómo probar cómodamente tu web/blog en distintos dispositivos y con distintas velocidades de conexión usando las herramientas de Google Chrome.

En este post con vídeo te cuento cómo usar Google Chrome para testear tu web o blog en distintos dispositivos y (lo chulo) en distintas velocidades de conexión.

¡Hola Cara-Cola! Anta, fíjate tú, acabo de caer en por qué Coca-Cola puso el guión en medio, jajajajaja. Claro, porque no es lo mismo si te digo “caracola” que si te digo “cara cola”. ¿Verdad? Eso sí, las dos con mucho cariño, ¡no te vayas a enfadar que me pongo triste!

Va, al post. Por cierto, hoy sí o sí (joer como me enrollo) que escribo un post cortito porque acabo de escribir otro (que he regalado) y grabar un vídeo (el de aquí arriba) así que estoy cansadito. ¿Vamos?

Preparar para móviles no es solo hacer Responsive

¿Cuántas veces habrás oído lo de que hoy en día tu web o blog tenía que ser móvil o estabas perdiendo visitantes?. Seguro que un montón. ¿Y sobre el diseño responsive? Otro capazo de veces. De hecho yo mismo hice una serie de posts hablando sobre ello (jijiji):

¿Sabes qué? Que en la mayoría de los casos, cuando nos preocupamos de “la movilidad de nuestra web” solemos pensar exclusivamente en cómo se verá en distintas resoluciones de pantalla y vamos corriendo a juguetear con la ventana del navegador, ensanchándola y reduciéndola para ver cómo responde nuestro diseño adaptativo (es la mejor traducción de responsive).

Por otro lado, también nos inundan con información acerca de lo importante que es la velocidad de carga para el posicionamiento y la respuesta de usuario. Y entonces vamos y le damos a actualizar 5 o 6 veces con la súper conexión de 50 Mb que le hemos crackeado a la vecina (nooooo mal-thinker! Yo no!). ¿Si o no?

Pero, respóndeme sinceramente (que yo luego se si me dices la verdad o no …): ¿cuántas veces te has planteado o preocupado sobre cómo de rápida carga tu web o blog en una conexión móvil lenta?. Sip, un montón de veces, como yo.

 

Testear distintos dispositivos y velocidades de conexión con Chrome.

Ahora seguro que te picará la curiosidad, ¿verdad? ¿Estas haciendo una lista de sitios a los que ir con tu móvil, con más y menos cobertura, para probar tu blog? Pues no es necesario porque Google Chrome ahora permite limitar el ancho de banda de conexión para probar la velocidad de carga. Que chuli, ¿verdad?

Para que no quede un post muy largo, te recomiendo que veas el vídeo donde te explico cómo hacerlo, verás que sencillo es.

Sólo tienes que abrir la ventanita de herramientas para desarrolladores (o darle al botón derecho e “Inspeccionar elemento”) y activar el iconcito del móvil para que te aparezca la barra de selección de dispositivo y conexión (toma! Un pareado!).

 

Chrome mobile tools

Bonus Tip: Carga diferida y ejecución asíncrona

Bueno, ya para terminar (que no quiero que te pierdas la gala de Gran Hermano de esta noche … que se las trae…) permíteme contarte dos truquitos para mejorar la carga de tu blog en móviles con conexión lenta.

Dos plugins para acelerar la carga de tu blog - piopíalo    

Powered by Vcgs-Toolbox

Por norma general, lo que suele retrasar la carga (e impacientar al usuario) son las imágenes y la ejecución de algunos Javascript que, hasta que no terminan, no te muestran el contenido. El truco consiste en cargar (y mostrar) el contenido textual lo antes posible y luego ejecutar los javascript y cargar las imágenes poco a poco, consiguiendo que el usuario tenga disponible material para entretenerse mientras acaba la carga.

Para ello, y sin profundizar mucho, tenemos dos plugins maravillosos para WordPress:

  • Advanced Lazy Load. Este plugin se encarga de retrasar la carga de las imágenes que quedan fuera de la pantalla (lo que no estás viendo en este momento) para ir cargándolas conforme hagas scroll. De esta forma la carga es mucho más rápida y no aburrimos al usuario.
  • Asynchronous Javascript. Este plugin nos pone muy fácil conseguir que los javascript se ejecuten en modo asíncrono (es decir, después de que cargue la página) y así mejorar la velocidad de carga. Mola mucho.
Con estos dos plugins conseguirás mejorar mucho la velocidad de carga de tu web en conexiones lentas - piopíalo    . Ahora bien, primero haz pruebas porque es posible que no sean compatibles con tu Theme. ¡Ten cuidadito!

¡Y ya está! Por fin un post cortito (más corto de lo normal). ¿Qué te ha parecido? ¿Conocías estos problemas y soluciones? ¿Utilizas algún plugin distinto para darles solución? ¿Habías probado la funcionalidad de Chrome? ¿Piensas ver la gala de Gran Hermano? ¡Cuenta please!

¿Qué te ha parecido este artículo?

¡Espero que te haya gustado! ¿Me permites pedirte un favorcito?

1. Participa con tu comentario

Los comentarios son el alma de este blog. Aquí se premia la participación y la comunidad es lo más. ¡Prueba!

Dejar un comentario

2. ¡No olvides compartirlo!

Se llama generosidad: si algo te gusta y puedes compartirlo, ¿por qué no hacerlo?

¡Millones de gracias! Te lo agradezco un montonazo, de verdad.

Acerca del autor

Víctor Campuzano

Growth Hacker no soy, pero lo vivo. De mi blog no vivo, pero aquí si que soy como soy. Marketing Digital, Creatividad y Blogging con pasión y desenfado.

Hazte notar. ¡Participa!

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

9 comentarios

  • Eso en el caso que lo más importante de tu web sea el texto. Hay algunas en que es mucho más importante la imagen (este ya es un comentario de nivel… voy aprendiendo)
    Pero ya escribiste un artículo sobre el tema, si mal no recuerdo…
    Un abrazo con mis alitas coloreadas.
    Por cierto, ahora te voto para los Bitácoras 🙂

    • Hola #Bolboreta!!

      Vaya nivelazo que vas cogiendo, ¿no? Aunque es cierto lo que dices, el plugin LazyLoad también consigue un efecto agradable cuando la web es muy visual, porque carga las fotos justo cuando pasan al área visible de la pantalla.

      Por otro lado … ¡muchas gracias por ese voto!

      Abracicos..

  • Supongo que ya te habrán dicho que no se ve el vídeo del principio.

    Si admites sugerencias, sería interesante que hicieras pruebas para ver si tu caja de herramientas es compatible con los plugins que comentas en tus blog.

    Así podrías añadir una frase como: Testeado en combate virtual 🙂

    • Jajajajajaja. Si que tienes razón. Lo de que no se ve el vídeo, primera noticia porque a mi si que se me ve. ¿Tal vez tu pantalla roedora?

      Saludines!

  • […] una prueba sobre cómo se vería la web con una conexión 3G (usando el método que te comenté en mi post anterior) y el resultado es que el vídeo comienza a reproducirse en apenas 1 segundo. […]

Uso de cookies

Esta web utiliza cookies propias y de terceros, como Google Analytics, para optimizar su navegación y realizar tareas de análisis y las pertenecientes a WordPress. Advierto que si continuas navegando, aceptas su uso. Puede cambiar la configuración, desactivarlas u obtener más información.

ACEPTAR
Aviso de cookies
Growth Hacking

¡Muchísimas gracias por comentar!

Has hecho algo muy grande, que lo sepas. Te estoy tan agradecido que me gustaría ofrecerte un regalo: un ebook sobre "Growth Hacking para impulsar rápidamente tu proyecto". Bueno, y algunas cositas extra que descubrirás si te suscribes. ¿Me aceptarías en tu buzón? Porfi, porfi, porfi...

Rellena este formulario y empieza a disfrutar de regalos...








¡Perfecto! Te has suscrito correctamente

Víctor Campuzano

¡Ey que te mola mi blog ¿eh?!

He detectado que has visto más de 3 páginas en esta sesión y, digo yo... ¿Te está molando? Si es así, suscríbete y recibirás cada nuevo post en tu buzón, regalos exclusivos, contenido privado.. ¡Lo más de mi! ¿Quieres? ¿Si? ¡Bien!

Rellena este formulario y empieza a disfrutar de regalos...








¡Perfecto! Te has suscrito correctamente