Manejar la Devtools para SEO

He creado esta publicación para remarcar los puntos más importantes de la primera SEOminada que celebramos.

Para enterarte bien de cómo usar la DevTools puede ser muy relevante que entiendas cómo funciona una web, incluso conocimientos básicos de HTML, CSS y JavaScript, de esta forma te será mucho más sencillo entender la utilidad de la consola.

Interpretación del Navegador

Cuando el Servidor ha procesado toda la información posible, este le devuelve al navegador archivos en formatos que pueda entender, como HTML, CSS, JavaScript, XML o demás multimedia.

Una vez llegan esos archivos al navegador desde el que estamos queriendo ver la web, se procesa el JavaScript y se renderiza, haciendo que sea un código distinto el código que llega originalmente a nuestro navegador, del DOM resultante. Las webs modernas están vivas y suelen cambiar el contenido en tiempo real de forma dinámica.

Recordemos que:

• El HTML marca la estructura de la web.
• EL CSS modifica y configura el aspecto visual de los elementos HTML.
• El JavaScript es el lenguaje de programación que es capaz de procesar un navegador, y por tanto es el que automatiza y realiza cambios y configuraciones en tiempo real durante la navegación del usuario.

Podríamos decir que la Devtools es una lupa que nos permite observar que está ocurriendo en nuestro navegador cuando le llega la información de la web. Incluso nos permite enviar peticiones con información falsa al servidor, o cambiar el contenido de la web en vivo (solo visible por nosotros en nuestro navegador). Cuestión que ayuda mucho a la programación o a saber como quedaría cualquier cambio en nuestra web.

Abrir la consola de Chrome

Como he comentado, la consola visualiza que está ocurriendo en tu navegador para que se acaba visualizando lo que ves. Por tanto, las extensiones, que suelen ser bloques de JS pueden afectar en tu resultado final. Así que te recomiendo que siempre que quieras auditar cualquier proyecto con la DevTools, lo hagas desde modo incógnito.

Puedes hacer click derecho en cualquier punto de la web y darle a inspeccionar elementos.

Atajos de teclado:

Abrir la consola de Chrome:

CTRL + Shift + i

Abrir el inspector de elementos directamente, para seleccionar un elemento de la web. Con el hacha levantada.

CRTL + Shift + c

Ejecutar cualquier función dentro de la consola. Algo bastante útil si no quieres estar navegando por toda la interfaz para encontrar algo:

CRTL + Shift + p

Si no escribes ninguna función en concreto, te saldrán todas las opciones que puedes tener dentro de la consola.

Para los especiales que usan Mac y les asusta la tecla CTRL, es lo mismo pero usando la tecla Cmd, el bicho este --> ⌘

Como ejemplo y como prueba, te recomiendo abrir la consola (ctrl + shift + i) y abrir en panel de ejecutar (ctrl + shift + p) y escribir "español", de esta forma puedes cambiar la Devtools para que esté en tu idioma (que entiendo que si estás aventurándote a leer este post, es porque algo de español sabes).

Elementos

El código que se muestra en Elementos es el resultante cuando actúa JavaScript, te permite seleccionar los elementos y modificarlos.

Con esta opción se pueden añadir elementos de CSS, eliminar o modificar cualquier etiqueta de HTML, ver los márgenes y la disposición del código.

Puedes hacer trucos como modificar el valor del atributo type para que no sea password y ver la contraseña.

Un uso útil de esto para auditar el SEO podría ser por ejemplo detectar data-nosnippet en ciertos elementos.

Dimensiones

Puedes darle al botón de dimensiones (arriba a la izquierda) para emular como funciona un dispositivo móvil. Recuerda recargar la web por si está configurada como Adaptive.

Red

Es una de las funciones más interesantes dentro de la consola. Permite ver el orden de los archivos que se han descargado cuando se accede a una URL, comprobar si se tiene en caché, el tiempo que ha tardado, los encabezados http, su protocolo y básicamente todo.

Desde red, gracias a la muestra de cascada, permite comprobar la efectividad de técnicas de WPO como las precargas o las cargas diferidas.

La Tabla consiste en:

• Cascada: Orden en el que se descargan los archivos.
• Tamaño: (caché de disco) ya está en caché para refrescar Control + F5 (caché: memoria especial almacenada en el navegador para que no se descargue todo cada vez. Se va renovando).
• Protocolo: Clic derecho opciones de encabezado ->protocolo . h2 es http2 y h3 es http3
• Tipo: que tipo de archivo (extensión) es.
• Iniciador: En que línea se esta utilizando este archivo. Si le haces clic te dice más o menos en qué línea está. (Los archivos que apuntan hacia él)
• Tamaño: Lo que pesa dicho elemento.
• Hora: El tiempo que ha tardado en descargarse el archivo.
• Cascada: El orden en el que se han descargado y procesado los archivos, y en cuanto tiempo.

Cuando haces click en uno de los archivos:

• Encabezados: Permite visualizar los distintos encabezados HTTP.
• Vista previa: Permite saber como se visualiza dicho archivo (por sí mismo, sin la combinación con el resto de archivos)
• Respuesta: El código del archivo, los paréntesis de abajo te permite desminificar el código.
• Iniciador: Te permite saber que archivos inicia dicho elemento (apuntando hacia otros)
• Tiempos: Permite examinar mejor el tiempo que tardó dicho archivo.

Desarrollo más distintas opciones dentro de red:

Limitar la conexión

Limitar la conexión te permite emular ser un usuario con peor conexión a internet. Esto te puede ayudar a ver la experiencia del usuario y a ver como funciona una web a cámara lenta.

Inhabilitar caché

Desde red o desde el panel de condiciones de red se puede inhabilitar el caché para que se refresquen todos los archivos de nuevo y ver cambios.

Cuando el caché está habilitado y está bien configurado en la web se vería así.

Código de respuesta y protocolo

Desde el listado en cascada se pueden analizar los códigos de respuesta de cada archivo y la versión de HTTP.

Importante: La versión de HTTP no aparece por defecto. (Click derecho > Opciones de encabezado > Protocolo)

Analizar el x-robots

Si haces Click en cualquiera de los archivos que se descargan en tu ordenador, tienes la opción de examinar los encabezados, incluyendo si tienen la x-robots:

Panel de la consola

El panel de la consola se puede mostrar desde los 3 puntos de arriba a la derecha o con el ctrl + Shift + P (consola), este muestra opciones de lo más interesante.

Consola

Te permite leer los mensajes y alertas de JavaScript e incluso insertarlo para ver que efectos se producen.

Condiciones de Red

Te permite limitar la conexión de red o inhabilitar el caché (al igual que en el panel de red), pero además te permite modificar o "simular" un user-agent alternativo e incluso aceptar o rechazar distintos métodos de compresión web como deflate, gzip o brotli para hacer pruebas del content-encoding.

Renderizado

Te permite visualizar de color verde los cambios que se van produciendo en el DOM durante el visualizado de la web.

Sensores

Te permite cambiar geográficamente el lugar de origen que se manda en las peticiones. Ojo que esto no es lo mismo que un VPN.

Fuentes

Nos permite ver desde qué dominios se carga cada archivo y qué archivos se están utilizando en nuestra web.

Desde ahí podemos obtener todos y cada uno de los recursos que visualizamos en la web, con el orden y URL correspondiente.

Aplicaciones

Principalmente es para cuestiones de la memoria como Cookies o Tokens (para contraseñas)

Tokens

Los tokens es lo que nos permite tener acceso a una cuenta dentro de una web sin necesidad de iniciar sesión por medio de usuario y contraseña. Se guarda ese token en tu navegador, y es lo que te permite acceder haciendo que la web sepa que tú eres tú.

Cookies

Desde el panel de Cookies se permite revisar las Cookies que te introduce la web y si estas cumplen con la normativa.

memoria y grabadora

Aunque Memoria tiene tiempo, aconsejo combinarla con la función nueva de grabación.

Esto nos permite realizar una emulación del Customer Journey y repetirla exactamente igual para hacer distintas pruebas de rendimiento, y comprobar si las implementaciones que hacemos de WPO como caché, precargas y cargas diferidas son realmente efectivas.

Esta sería la única forma efectiva de comprobar si esto mejora la experiencia "en laboratorio".

Estas funciones para entenderlo son más complejas de explicar en un simple post. Solicítalo para las próximas SEOminadas, pide información para formación SEO en tu empresa, o accede a nuestro máster de SEO para saber más.

Lighthouse

Esta herramienta te permite encontrar formas de mejorar la velocidad en tu web. Es más completa que la de Google Insights y además te permite hacerlo en proyectos en desarrollo o la versión local.

Otras funciones interesantes

Hay funciones que están menos a la vista, pero que nos pueden ayudar en nuestro trabajo.

Deshabilitar JavaScript

Si hacemos ctrl + Shift + p y ponemos JavaScript, podemos deshabilitarlo y comprobar como se comporta la página sin cargar el js de la web.

Capturas de pantalla

Puedes hacer una captura de pantalla de toda la página sin necesidad de usar ninguna extensión.

Bibliografía

• También conocida por mi como "la infumable", la documentación oficial de Chrome.
• Las valiosísimas publicaciones de Addy Osmani , líder del equipo de ingenieros de Chrome, a quien te recomiendo seguir.