Que debes saber para hacer más rápida tu Web y tener mejor SEO

Lo que realmente debes saber para hacer más rápida tu web y tener mejor SEO

Hacer más rápida tu Web es realmente importante ya que mejora sustancialmente la experiencia del usuario cualitativamente hablando, y aunque recientemente se cuestiona si es un factor a considerar para el SEO, la mayoría acordamos de que si. Si no has leído este post sobre si afecta o no la velocidad de carga de mi web a mi SEO, te lo recomiendo.

Ahora bien, la velocidad de carga de una Web es un tema sumamente complejo por lo que muchos sitios y personas se dedican a hablar de una forma vaga y simple de “Minificar CSS”, “Minificar JS”, “uso de sprites”, “uso de CDN”, “compresión GZIP”, “compresión de imágenes” etc. y si bien esto tiene mucho que ver, no lo es todo, y si no se comprende porque y para que mucho menos se puede mejorar y es muy probable que los cambios que hagas en lugar de mejorar la experiencia del usuario la empeore, y es por eso que he decidido escribir al respecto (digo, intentaré abordar los detalles).

Lo que intento explicar es que este es un tema que merece mas de un libro de estudio, y podría considerarse una rama de estudio especializada, así que aunque el tema es bastante amplio y tiene mucho donde cortar, intentaré hacer un resumen adecuado de cada factor, el porqué y el cómo para que sea más comprensible que acciones tomar para hacer más rápida la velocidad de carga de tu web.

Por esta razón he decidido crear una serie de varios posts que hablen al respecto para que no sea cansado de leer ni complicado de escribir. He dividido los temas de la siguiente manera:

La lista no es definitiva y pueda que cambie en el camino, pero es ilustrativa a lo que se va a abordar, así que espero que pueda cumplirles.

Herramientas a usar

En esta primera entrega hablaremos de las herramientas que usaremos para medir y mejorar la velocidad de carga de tú Web.

Un detalle a tener en cuenta para hacer un mejor trabajo es que la página sea probada desde un dispositivo móvil, aunque no obligatorio (recuerda el tema de Mobile First). De mi lado, yo realizaré las pruebas desde un celular con Android, así que si los pasos aquí descritos no se apegan a tú hardware, te recomiendo buscar al respecto como lograrlo ó en su defecto, realizar las pruebas sin el dispositivo móvil. Para esto vamos a usar Google Chrome y developer tools (herramientas para desarrolladores).

  1. Descarga e instala en tu computadora el navegador Google Chrome Canary ya que tiene integrado las ultimas y las mejores herramientas de desarrollo.
  2. Instala en tu móvil Google Chrome Beta (ojo, tiene que ser la versión BETA)

Depuración de forma remota usando Chrome Canary y Google Beta

Depurar de forma remota - Hacer más rápida tu Web

Primero debes activar la depuración por USB en tu celular, esto se puede hacer de diferentes maneras asi que no puedo cubrir todas las opciones y será parte de tu tarea investigar como se hace en tu móvil. Por lo general se realizar yendo a Configuración, Acerca del dispositivo, y hacer clic 7 veces en “Numero de compilación”. Acá te dejo este enlace donde explican como activar el modo de Depuración USB en Android.

Si ya lograste activar la depuración USB, ahora debes abrir Chrome Canary en la computadora, y ve a la opcion “Chrome Inspect” escribiendo en la barra de navegación (si!, ahí donde pones las URL’s manualmente) y escribe lo siguiente: chrome://inspect y presionas [ENTER]. Deberías ver algo similar a esto: (si no esta marcada la casilla “Discover USB devices”, marcala)

Google Chrome Canary - Opción Inspect

  • Ahora asegúrate de abrir el sitio que vas a depurar en tu celular y conecta con el cable USB tu celular a la computadora o laptop.
  • Confirma que deseas permitir la depuración USB.
  • Regresa a tu equipo de desarrollo y podrás ver una lista de los dispositivos conectados y las pestañas que están abiertas en dicho dispositivo. Como nota adicional, desde ahí puedes abrir nuevas pestañas, recargar contenido, cerrar pestañas, etc. y deberías ver algo así:
    Chrome Inspector de dispositivos
  • Lo que nos interesa es que también puedes inspeccionar las páginas que estas navegando desde el celular, haz la prueba.
    Chrome Inspect Tabs
  • Finalmente, otra opción que vale la pena conocer es “Screencast” ya que muestra por un lado la pantalla de tu celular y por el otro la depuración. Para usarla, mira en la esquina superior derecha de las herramientas de depuración de Chrome Canary en tu computadora, hay un icono algo así screencast icon, has clic sobre él
    Ubicación del ícono de Screencast
    y deberías ver algo similar a esto:
    screencast

Con screencast podrás manejar el contenido del celular desde la computadora, es decir, en la pantalla que muestra la página que depuras en tu celular en las herramientas de depuración si haces un clic en algún enlace, es como si lo hicieras en el móvil. Muy útil realmente.

¿Como se usaran estas herramientas de depuración en esta serie de posts?

Sencillo, abres en tu celular la página web que quieres depurar, y en las herramientas de desarrollador en tu computadora, inspeccionas el código y buscas la pestaña (tab) llamada Timeline y es aquí donde se hará casi todo el trabajo. Luego, puedes usar screencast para previsualizar las cosas y navegar sin necesidad de usar el celular. El timeline se ve algo así:

Timeline

Recuerda que estas sólo son las herramientas para empezar el camino a hacer más rápida tu Web, asi que armate de paciencia que el resultado va a ser sorprendente.

Esto es todo para esta entrega, espero que te sea útil. Si quieres que te avise cuando escriba la siguiente parte o algo nuevo, puedes suscribirte aquí:

No olvides agregarte en el grupo [button color=”success” size=”” type=”squared” target=”false” link=”https://www.facebook.com/groups/HablemosDeSEO.ninja”]Hablemos de SEO[/button] en Facebook


Recuerda que puedes encontrar mas info, tips, comentar, preguntar en los siguientes grupos en Facebook:

[button color=”primary” size=”” type=”” target=”false” link=”https://www.facebook.com/groups/desarrolladores.elsalvador”]Desarrolladores PHP El Salvador[/button][button color=”danger” size=”” type=”” target=”false” link=”https://www.facebook.com/groups/HablemosDeSEO/”]Hablemos de SEO[/button][button color=”info” size=”” type=”” target=”false” link=”https://www.facebook.com/groups/freeit”]Soy de IT y Soy Libre[/button][button color=”warning” size=”” type=”” target=”false” link=”https://www.facebook.com/groups/html5yhtml51/”]HTML5 y 5.1 de Verdad[/button]

Comentarios

Comenta