En este nuevo artículo de nuestra agencia de marketing digital en Málaga, repasaremos a grandes rasgos las DevTools de Google Chrome y cómo pueden ayudar a mejorar la velocidad de tu página web y, a su vez, a mejorar su posicionamiento en Google.
El navegador Google Chrome nos ofrece herramientas totalmente gratuitas para realizar una auditoría del WPO de nuestra web. Si contamos con los conocimientos necesarios para interpretar la información que estas herramientas nos proporcionan, podremos mejorar significativamente nuestro posicionamiento.
¿Qué es el WPO?
El WPO (Web Performance Optimization) hace referencia a todas las acciones que realizamos para mejorar el rendimiento de una web. En términos de rendimiento, nos referimos al tiempo de carga y a la rapidez con la que se muestran los recursos al usuario que navega por la página, es decir, el renderizado.
Para esto, Google nos ofrece lo que en el sector del SEO se conoce como las DevTools de Google Chrome. Estas herramientas nos proporcionan datos importantes sobre nuestra página web, pero ¿cómo funcionan realmente?
Cuando un usuario quiere entrar en una web, su navegador realiza una petición al servidor, y el servidor le devuelve un conjunto de archivos para renderizar la web. Una vez que el navegador ha obtenido y configurado todos los archivos necesarios, podemos analizarlos a través de las herramientas de desarrollador de Google Chrome.
¿Cómo abrir la consola de desarrollador de Google Chrome?
Para abrir la consola de desarrollador de Google Chrome, sigue estos pasos:
- Hacer clic derecho: Haz clic con el botón derecho en la página web que deseas examinar y selecciona “Inspeccionar”.
- Atajo de teclado:
- Windows/Linux: Pulsa Ctrl + Shift + I.
- Mac: Pulsa Cmd + Option + I.
Es recomendable realizar estos análisis en modo incógnito para evitar interferencias de extensiones de navegador que podrían ser detectadas como archivos de JavaScript.
¿Cómo usar la consola de Google Chrome?
Una vez abierta la consola de Google, verás un menú con varias pestañas, cada una con una utilidad específica para el análisis. A continuación, describimos algunas de las más importantes:
Elementos
En la pestaña de elementos, aparecerá el código HTML de la URL y su CSS asociado una vez que ha cargado el JavaScript correspondiente. Podrás modificar ambos como si fuera un documento de texto y aparecerá tal y como lo sobrescribas, lo cual es muy útil para realizar cambios en la web
Pero te preguntarás: ¿Esta parte tiene alguna utilidad a nivel de WPO (Web Performance Optimization) o de posicionamiento? La respuesta es un sí rotundo.
La gran utilidad de esta pestaña es que nos indica lo que Google lee de la URL en una primera instancia, incluyendo sus elementos y sus atributos. Por ejemplo, si encontráramos algún atributo llamado data-nosnippet en algunos de los elementos, estaríamos indicando a Google que no queremos que indexe dicho elemento. Por lo que, si estamos teniendo algún problema con algún elemento específico, este es el lugar para analizarlo.
Otro de los errores más comunes es que, si hay un texto que no aparece en el código hasta que se hace clic en un botón (por ejemplo, un desplegable), Google no procesará esta información inicialmente ya que primero se debe ejecutar el JavaScript necesario.
Una de las grandes utilidades más usada de la pestaña de elementos es que puedes verificar la adaptabilidad de la web a diferentes tamaños de pantalla, lo cual es crucial para el SEO móvil. Esto puedes realizarlo a través del botón que aparece en la parte superior izquierda, el cual muestra un portátil y un móvil.
En resumen, la pestaña de elementos es fundamental para entender y optimizar cómo Google y otros motores de búsqueda ven e interactúan con nuestra web, así como para asegurarnos de que nuestra página sea amigable con dispositivos móviles.
Red
Uno de los aspectos más interesantes del análisis WPO en chrome developer tools, es lo que nos ofrece la pestaña de Red. Si haces clic en esta pestaña, verás los archivos que se descargan en la URL seleccionada y en qué orden se están descargando. Una vez dentro de la pestaña, recarga la página seleccionada o presiona Ctrl + F5 para ver los archivos descargados y su orden.
La información proporcionada por esta pestaña es valiosa porque puedes ver qué se está descargando primero, cuánto tiempo tarda y cuál es su tamaño. Esto permite optimizar el orden de carga y el peso de los archivos. Además, al hacer clic en cada elemento, puedes obtener más información detallada. Puedes configurar el análisis para mostrar los datos más relevantes de cada archivo, como el protocolo utilizado, lo cual es importante para identificar archivos que se descargan externamente y optimizar su carga.
Fuentes
Este apartado muestra de manera esquemática los archivos utilizados para cargar la URL y los dominios desde los cuales se descargan. Aquí puedes ver si estás descargando recursos desde dominios externos, como fuentes de Google, y considerar descargarlos en tu propio dominio para mejorar la velocidad de carga. Esto es especialmente útil si la descarga del recurso desde tu dominio ofrece una mejora significativa en la velocidad.
Grabadora
La grabadora permite simular la navegación de un usuario en la web y analizar el rendimiento durante esta navegación. Puedes crear una nueva grabación, simular la navegación del usuario y analizar el rendimiento para identificar ineficiencias. Los pasos son sencillos: inicia una nueva grabación, simula la navegación del usuario y, al finalizar, analiza los resultados. Esto es útil para identificar problemas de rendimiento específicos y optimizar la experiencia del usuario.
Lighthouse
Lighthouse es una herramienta integrada en las DevTools de Chrome que proporciona una puntuación de la página web, similar a PageSpeed Insights, pero más detallada. Permite realizar análisis tanto en sitios en producción como en proyectos en desarrollo. Además de proporcionar una puntuación, Lighthouse ofrece recomendaciones específicas para mejorar el rendimiento y la experiencia del usuario. Es una herramienta más completa que PageSpeed Insights porque entra en más detalles y permite realizar pruebas en proyectos aún no publicados.
Otros ejemplos de uso práctico de las Chrome developer tools en WPO
A continuación, desde nuestra agencia de posicionamiento SEO en Málaga, te mostramos otros ejemplos prácticos de cómo las Chrome developer tools pueden ayudarte en el análisis de WPO, consideremos algunos ejemplos prácticos:
Optimización de la carga de recursos
Supongamos que notas que tu página web tarda en cargar debido a la gran cantidad de imágenes. Utilizando la pestaña de Red, puedes identificar qué imágenes están tardando más en cargar y considerar optimizarlas o cargarlas de manera diferida. Además, puedes ver si hay recursos que se están cargando desde dominios externos y considerar alojarlos en tu propio servidor para mejorar la velocidad de carga.
Minimización de archivos CSS y JavaScript
En la pestaña de Fuentes, puedes ver todos los archivos CSS y JavaScript que se están cargando. Si identificas archivos innecesarios o demasiado grandes, puedes optar por minificarlos o combinarlos para reducir el número de peticiones HTTP y mejorar el tiempo de carga. También es posible que sea más eficiente descargar algunos de los recursos que estás solicitando a dominios externos y que la carga se realice a partir de tu propio servidor.
Análisis de la experiencia del usuario
Utilizando la grabadora, puedes simular la navegación de un usuario típico en tu sitio web y analizar cómo se comporta la página en términos de tiempo de carga y rendimiento. Si encuentras que ciertas páginas o recursos están ralentizando la experiencia del usuario, puedes tomar medidas para optimizarlos como por ejemplo hacer que cargue una URLo ciertos elementos antes de hacer click.
Conclusión
Las herramientas de desarrollador de Google Chrome o DevTools, son esenciales para cualquier profesional de SEO que busque mejorar el rendimiento y el posicionamiento de sus páginas web. Estas herramientas proporcionan información detallada y valiosa que, bien interpretada y aplicada, puede llevar a una mejora significativa en la velocidad y eficiencia de una web. Desde la optimización de la carga de recursos hasta el análisis detallado de la experiencia del usuario, las DevTools de Google Chrome ofrecen una gama completa de funcionalidades para el análisis de WPO.
Utilizar estas herramientas de manera efectiva puede marcar una gran diferencia en la capacidad de una web para competir en los resultados de búsqueda de Google, mejorar la experiencia del usuario y, en última instancia, aumentar la conversión y la retención de los visitantes.
Esperemos que este artículo sobre las DevTools de Google Chrome y cómo pueden ayudar a mejorar la velocidad de tu página web, te hay sido de interés, te recordamos que puede continuar leyendo nuestro blog, puede que te interese nuestro último artículo sobre Cómo diseñar tus posts con Canva para Instagram.
