DevTools: auditoría desktop vs mobile

Contenido del curso

Introducción

Elementos y Estilos

Mobile Simulation

JavaScript

Network

Performance

18
Optimización de animaciones con Performance DevTools
12:54 min

Audits

Cierre

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:33

DevTools: auditoría desktop vs mobile

Curso de Debugging con Chrome DevTools

Clase 20 de 22

Clase 20 / 22

Recursos

Saber cómo auditar un sitio web desde la perspectiva de escritorio te permite detectar cuellos de botella y construir una estrategia clara de mejora. Con las herramientas integradas en el navegador puedes obtener métricas reales de rendimiento, accesibilidad, SEO y buenas prácticas sin necesidad de software adicional.

¿Cómo se ejecuta una auditoría en modo desktop desde DevTools?

El proceso comienza abriendo DevTools y seleccionando la opción de desktop en lugar de mobile [00:28]. Se recomienda dejar marcadas todas las categorías de análisis —performance, accesibilidad, buenas prácticas, SEO y Progressive Web App— para tener una radiografía completa del proyecto.

Antes de lanzar la auditoría es fundamental liberar el caché del navegador [00:48]. Para hacerlo, mantén presionado el botón de recarga y elige la opción que vacía el caché. Esto evita que datos almacenados previamente generen un bias en los resultados y garantiza que la página se cargue como si fuera la primera visita de un usuario.

Una vez configurado, se corre la auditoría y DevTools comienza a medir distintos aspectos del sitio. A diferencia del modo mobile, en desktop no se abre un emulador; la prueba se ejecuta directamente en la resolución de pantalla actual.

¿Qué revelan los resultados de dos proyectos diferentes?

En el primer proyecto analizado los porcentajes son bastante altos [01:12]:

SEO al cien por ciento, sin problemas detectados.
Es una Progressive Web App tanto en mobile como en desktop; una vez que un sitio cumple los requisitos, lo es en ambas plataformas.
Best practices y accesibilidad con puntuaciones elevadas, aunque con un detalle de contraste de fondo que persiste desde la auditoría móvil [01:50].
Performance mejoró ligeramente respecto a mobile.

El segundo proyecto muestra un panorama distinto [02:22]:

No es una Progressive Web App y, por la misma lógica, tampoco lo era en mobile.
El SEO bajó respecto a la versión móvil.
Accesibilidad y performance subieron en desktop.
Las áreas de oportunidad pasaron de seis en mobile a tres en desktop [02:50].

Un hallazgo relevante es que el logotipo del segundo proyecto ocupa demasiado tiempo de carga inicial, lo que provoca que el usuario no pueda interactuar con la plataforma hasta pasados ocho segundos [03:05]. Este dato corresponde al concepto de Time to Interactive, una métrica crítica de performance que mide cuánto tarda la página en responder a las acciones del usuario.

¿Cómo priorizar las áreas de oportunidad?

Cada categoría despliega un listado detallado de mejoras posibles. La estrategia recomendada es ordenar esas oportunidades por esfuerzo versus impacto [03:20]:

Identificar qué correcciones requieren menos trabajo y resolverlas primero.
Reservar las de mayor complejidad para etapas posteriores.
Si una corrección en desktop soluciona también el problema en mobile, conviene priorizarla.

¿Para qué sirve esta auditoría en un contexto profesional?

Este ejercicio tiene aplicaciones directas en escenarios reales [03:55]:

Consultoría: cuando un cliente pide ayuda para mejorar su página pero no sabe qué falla, la auditoría ofrece un diagnóstico objetivo.
Equipos internos: permite definir las siguientes tareas prioritarias y justificar decisiones técnicas con datos concretos.
Performance crítico: si existen problemas evidentes de rendimiento, sabrás exactamente por dónde comenzar.

¿Qué es una Progressive Web App y por qué importa?

Una Progressive Web App (PWA) es un sitio que cumple una lista de buenas prácticas para ofrecer una experiencia superior al usuario [04:35]. No implica aprender tecnologías completamente nuevas, sino cubrir requisitos como carga rápida, funcionamiento offline y capacidad de instalación en el dispositivo. Cuando un proyecto cumple esos criterios, se convierte en PWA de forma automática en cualquier plataforma.

Si tu proyecto aún no es una PWA, la auditoría de DevTools muestra exactamente qué requisitos faltan y cuáles ya se cumplen, lo que facilita trazar un plan de acción concreto.

¿Has encontrado cuellos de botella inesperados al auditar tus proyectos? Comparte tu experiencia y las estrategias que mejor te han funcionado.