mobile-checker

Mobile Checker

Evalúa qué tan bien funciona tu página de reservas en un teléfono, con una puntuación de 100, usando la misma rúbrica fija cada vez, y devuelve una lista de correcciones ordenadas por los puntos que cada una recupera. Sin instalaciones ni código: tú das el enlace de la página, algunas capturas de pantalla del teléfono y los números de la herramienta gratuita PageSpeed Insights de Google. Úsalo antes de enviar anuncios o correos electrónicos a una página, después de un rediseño, o cuando las llamas reservadas caen y la mayoría de tus visitantes usan teléfonos. Funciona con cualquier página que termine en una llamada reservada: una página de aterrizaje, una página de video de ventas (VSL), una página de solicitud o la página de inicio de tu sitio principal. Una página alojada por tu herramienta de calendario no se evalúa por sí sola; se verifica como la ruta de reserva de la página que enlaza a ella.

Antes de empezar

1. Busca un archivo de Contexto de Negocio en este proyecto o chat. Si existe, léelo primero y extrae: el enlace de la página de reservas, la oferta que vende la página, lo que debería decir el botón principal, la herramienta de calendario o reservas, el creador de páginas, quién edita la página (tú o un desarrollador), de dónde vienen los visitantes (anuncios, Instagram, LinkedIn, correo electrónico) y la proporción de visitantes en móvil si se conoce.
2. Si ya tienes el enlace y la búsqueda web o la obtención web está activada, abre la página tú mismo antes de preguntar nada (Paso 3). Así sabrás si aún necesitas el código fuente de la página.
3. Pregunta solo por lo que aún falte. Pon cada pregunta en un mensaje, cada una con una breve razón de por qué la necesitas. Nunca pidas más de esto:
   • El enlace de la página en vivo. Para que puedas leer la página, y para que PageSpeed pruebe la página real, no una vista previa del editor. Si el enlace es una página alojada por la herramienta de calendario, pide la página que envía personas a ella. Si no hay ninguna, consulta "Páginas de calendario alojadas" en el Paso 6.
   • El modelo de teléfono usado para las capturas de pantalla. El ancho de pantalla cambia cómo se ajusta el texto y qué tan grande es realmente un botón.
   • La acción principal. Qué botón cuenta como "reservar", si la página tiene más de uno.
   • Capturas de pantalla del teléfono. Capturas normales, no una sola captura larga. Si un mensaje no las admite todas, envía la página en el primer mensaje y el resto en un segundo. a. Primera pantalla: exactamente como se carga, sin desplazamiento, con la barra del navegador visible. Una imagen. b. Página completa: desplázate una pantalla a la vez y toma una captura normal cada vez, de modo que aproximadamente una quinta parte de cada pantalla se muestre nuevamente en la parte superior de la siguiente. Máximo unas 12 por mensaje; si la página es más larga, envía el resto en el siguiente mensaje. Opcional, solo para leer las palabras: el PDF "Página completa" de Safari en iPhone o la "Captura de desplazamiento" de Android. c. Ruta de reserva: toca el botón principal y captura cada paso hasta el botón de Confirmación final, máximo unos 5. Detente ahí. Solo envía si aceptas que una reserva real active tus píxeles de anuncios (Meta y Google lo cuentan como un lead o una llamada programada), agregue un contacto y una etapa en el pipeline del CRM, y active tus mensajes de texto y correos electrónicos de confirmación, alertas del equipo y cualquier llamada de un configurador o agente de IA. Cancelar puede entonces iniciar secuencias de no presentación o cancelación. Si envías: elige un horario con 2 o más semanas de antelación, usa un nombre o correo marcado como PRUEBA, informa a tu equipo primero y cancela justo después. d. Ventanas emergentes: cualquier ventana emergente que abra la página, tomada mientras está abierta. e. Navegador en la aplicación: envíate el enlace de la página en un DM de Instagram (o ábrelo desde tu biografía o un anuncio) y recorre la ruta de reserva dentro del navegador integrado de Instagram o Facebook. Captura cualquier paso que se vea o funcione diferente a Safari o Chrome. La mayor parte del tráfico social llega aquí, y es donde las páginas de reservas fallan con más frecuencia.
   • Números de PageSpeed, 2 capturas de pantalla. Busca "PageSpeed Insights", pega el enlace en vivo, elige Móvil, ejecútalo. Captura la sección de laboratorio ("Diagnostica problemas de rendimiento"), no los datos de usuario real en la parte superior: la puntuación de Rendimiento, LCP, CLS, TBT, la puntuación de Accesibilidad, y los nombres de los elementos fallidos en Rendimiento, Accesibilidad y Mejores Prácticas, con su "Ahorro estimado".
   • Código fuente de la página, solo si no pudiste leer la página tú mismo. En una computadora: abre la página, haz clic derecho, elige Ver código fuente, guárdalo y súbelo como un archivo .txt. No lo pegues en el chat: el código fuente de los creadores de páginas puede superar 1 MB. Si aún no tienes el enlace, enumera este elemento como opcional ("si no puedo leer tu página desde el enlace, esto ahorra una segunda ronda").
4. No te detengas. Puntúa lo que la evidencia que tengas pueda probar, marca el resto como No verificado y nombra la única entrada faltante que agregaría más puntos a la verificación. Sin los números de PageSpeed, 55 puntos quedan sin verificar, así que pide esos primero.

Cómo funciona

Trabaja los pasos en orden. Palabras claras en todo momento: define un término técnico una vez, la primera vez que lo uses.

Paso 1. Establece el tamaño del teléfono

La rúbrica está diseñada para un teléfono pequeño: 375 por 812 píxeles CSS. Un píxel CSS es la unidad con la que se construyen las páginas web; una captura de pantalla de teléfono tiene de 2 a 3.5 píxeles reales por píxel CSS.

Teléfono	Ancho CSS
iPhone SE, 12 mini, 13 mini	375
iPhone 12 y más nuevos, estándar y Pro	390 a 402
iPhone Plus, Air y Pro Max	420 a 440
La mayoría de los teléfonos Android	360 a 412

• Escala = ancho de la captura en píxeles dividido por el ancho CSS (generalmente 3 en un iPhone). Cualquier longitud en la captura dividida por la escala da píxeles CSS.
• Una pantalla = 812 píxeles CSS en todos los teléfonos. En un iPhone 3x, eso son 2436 píxeles de captura. Una captura real muestra menos página que eso porque las barras del navegador ocupan espacio: a ojo, una captura es aproximadamente de 0.8 a 0.9 pantallas. Usa 812 para E2, E5 y cada conteo de pantallas, para que las puntuaciones se comparen entre teléfonos y ejecuciones.
• Posiciones: apila las capturas superpuestas emparejando la tira repetida, suma la nueva altura de página que cada una muestra en píxeles CSS desde la parte superior de la página (justo debajo de la barra de direcciones) y divide por 812 para obtener pantallas. Etiquétalo como Est. a menos que lo hayas medido con código.
• Columna de texto (C) = el ancho de una línea completa de texto del cuerpo, en píxeles CSS. Mídela; si no puedes, usa el ancho CSS del teléfono menos 40.
• Los teléfonos anchos ajustan el texto en menos líneas que el teléfono de rúbrica de 375 px. Cuando un titular o párrafo esté justo en el límite de líneas en un teléfono ancho, cuéntalo como una línea de más.
• Si la ejecución de código está activada, abre las capturas en ella para medir tamaños de píxeles. Si no, juzga a ojo y etiqueta la línea como Est.

Paso 2. Lee los números de velocidad (secciones A, B, C y la línea D10)

Usa los números de laboratorio móvil de PageSpeed. Explícalos en palabras claras:

• LCP (Largest Contentful Paint): cuándo termina de mostrarse la cosa más grande en la primera pantalla (imagen principal, póster de video o titular).
• CLS (Cumulative Layout Shift): cuánto salta la página mientras se carga. Un salto que mueve el botón de debajo de un pulgar pierde reservas.
• TBT (Total Blocking Time): cuánto tiempo está la página demasiado ocupada para reaccionar a un toque. Reemplaza a INP, la medida de Google de respuesta al toque.

PageSpeed varía unos puntos entre ejecuciones. Si un número está dentro de 3 puntos (o 0.3 s) de una línea de puntuación, dímelo en la columna de Evidencia y pide tres ejecuciones en la revisión, usando la del medio. "Se registraron errores del navegador en la consola" en Mejores Prácticas significa que D10 falla. Siempre prueba la página en vivo, nunca una vista previa del editor: las vistas previas fallan en las comprobaciones de compresión y caché que el host real pasa. Conserva los "Ahorros estimados" de PageSpeed para cada elemento fallido; establecen el orden del trabajo de velocidad en el Paso 7.

Paso 3. Lee el código fuente de la página

Si la obtención web o la búsqueda web está activada, abre el enlace de la página y lee el HTML. Muchos creadores de páginas dibujan la página con JavaScript, por lo que una obtención puede devolver principalmente scripts. Luego usa el código fuente subido si lo hay; si no, apóyate en las capturas de pantalla y marca las líneas solo HTML como No verificado. Si el código fuente tiene más de aproximadamente 150 KB y la ejecución de código está activada, búscalo para los elementos a continuación en lugar de leerlo todo. Si la ejecución de código está desactivada y el archivo es demasiado grande para leerlo completo, verifica lo que puedas y marca el resto como No verificado.

Busca estos elementos y anota la línea a la que alimenta cada uno:

• La etiqueta viewport: width=device-width (D1) y viewport-fit=cover (D6).
• Cada img: tiene width y height, o una relación de aspecto CSS (D5). ¿La imagen principal es un img real o un fondo CSS? ¿Está configurada incorrectamente con loading="lazy"? (trabajo de velocidad)
• Cada iframe: loading="lazy" y una altura establecida de 300 px o más (D5, E6). iframes de YouTube o Vimeo presentes al cargar, o una miniatura que carga el reproductor al tocar (D7).
• Etiquetas video con autoplay pero sin muted (D7).
• En el CSS: safe-area-inset (D6), prefers-reduced-motion y :focus-visible (D9), y el font-size del texto del cuerpo, párrafos, etiquetas y leyendas (D4). Las hojas de estilo externas pueden no llegar; si no puedes ver el CSS, marca esas líneas como No verificado.
• Campos de formulario visibles: cuenta input (no oculto), select, textarea (E6).
• Destinos en competencia (E3): enlaces a otra oferta, un producto o pago diferente, o un perfil social, y si la página tiene un menú de navegación.
• Scripts en el head sin async o defer. Clasifícalos en dos grupos: widgets de chat, mapas de calor y grabadores de sesión (estos pueden esperar), y píxeles de anuncios, etiquetas de conversión y análisis (estos se cargan al llegar) (trabajo de velocidad).

Para buscar en un archivo grande, busca: viewport, <img, <iframe, <video, <input, <select, <textarea, safe-area, prefers-reduced-motion, focus-visible, font-size, <a href, <nav, y las etiquetas <script dentro de <head>.

Paso 4. Lee las capturas de pantalla

Primero verifica lo que recibiste. Si recibes una sola captura más alta de 3 pantallas (un PDF de página completa o una captura de desplazamiento), no leas las posiciones desde ella. Si la ejecución de código está activada, córtala en mosaicos de altura de pantalla y mira cada uno. Si está desactivada, pide capturas superpuestas y, mientras tanto, marca las líneas que necesitan posiciones (D3, D4, E2, E4, E5, E7) como No verificado. Aún puedes leer las palabras y las etiquetas de los botones desde ella.

Recorre la página de arriba a abajo:

• Primera pantalla (E1): encuentra el primer botón de reserva que esté en la página misma, no en el encabezado y no en una barra fija. Júzgalo en la primera captura real: completamente visible sin pasar el desplazamiento. Si está cortado solo por la barra del navegador pero su parte inferior aún está dentro de 812 píxeles CSS desde la parte superior de la página, también pasa; agrega el hallazgo Extra "oculto en tu teléfono por la barra del navegador".
• Desplazamiento lateral (D2): contenido cortado en el borde derecho, una barra de desplazamiento horizontal o una página que se vea alejada. Pide al usuario que intente deslizar hacia los lados.
• Objetivos táctiles (D3): cada enlace y botón en la página misma, incluidos los enlaces del pie de página, pero no los botones dentro de un calendario incrustado (Paso 5). 44 píxeles CSS es aproximadamente una novena parte del ancho de pantalla; 24 px es aproximadamente una decimosexta parte. Los enlaces de texto en pies de página y los enlaces "privacidad" o "términos" en línea son las fallas habituales.
• Tamaño del texto (D4): si el CSS dio tamaños de fuente, úsalos; eso es exacto. Solo a partir de capturas de pantalla, cuenta los caracteres (letras, espacios y puntuación) en una línea de ancho completo de texto del cuerpo y compara con la columna de texto C:
  • Aproximadamente C/8 caracteres o menos: 16 px o más, pasa.
  • Más de aproximadamente C/7.3: menos de 16 px, falla.
  • Más de aproximadamente C/6.2: cerca o menos de 12 px.
  • En un teléfono de 375 (C alrededor de 335): 42 o menos pasa, 46 o más falla, 54 o más está cerca de 12. De 43 a 45 es difícil de determinar a partir de una imagen: deja esa mitad de D4 como No verificado y pide el CSS.
  • Verifica también la letra pequeña: etiquetas, leyendas, subtexto de botones, fechas. Etiqueta cada resultado de captura como Est.
• Titulares (E4): cuenta las líneas en el titular principal (H1) y en el encabezado de sección más largo (H2).
• Prueba social (E5): dónde comienza la primera fila de logotipos, testimonio, resultado de cliente o reseña, en pantallas desde arriba.
• Botones (E2, E3): enumera cada botón de reserva con su posición en pantallas y su redacción exacta. Anota cualquier barra fija. Mide la brecha más grande entre botones, incluida la brecha desde el último botón hasta el final de la página.
• Salidas (E3): anota cualquier menú, iconos sociales y enlaces a otras ofertas, productos o pagos.
• Párrafos (E7): cuenta los párrafos que superan las 6 líneas, de todos los párrafos.

Paso 5. Recorre la ruta de reserva

A partir de las capturas de pantalla de los toques, primero en Safari o Chrome, luego en el navegador integrado:

• Cuenta los campos del formulario en pantalla antes de que aparezcan los horarios del calendario (E6). Un formulario dividido en pasos cuenta su paso más largo.
• Los objetivos táctiles pequeños dentro del calendario (ranuras de tiempo, celdas de día, flechas de mes) no puntúan, porque el propietario de la página no puede cambiar su tamaño. Enuméralos en Hallazgos extra con una solución a nivel de herramienta: activa el diseño móvil de la herramienta de calendario o enlaza a su página de reservas alojada en lugar de incrustarla.
• Para cualquier ventana emergente: ¿se ajusta al ancho de la pantalla, tiene un botón de cierre claro y la página detrás permanece quieta? Pide al usuario que intente desplazarse detrás de la ventana emergente abierta (D8).
• Navegador integrado: compara cada paso con Safari o Chrome. Fallos comunes: el calendario incrustado se carga en blanco, una ventana emergente o nueva pestaña está bloqueada, el inicio de sesión de Google es rechazado, una redirección se queda atascada. Cualquier falla va arriba bajo Ruta de reserva, por ejemplo "ROTO en el navegador integrado de Instagram: calendario en blanco". No agrega puntos y no cambia ninguna línea.
• Anota cualquier otra cosa que rompa la reserva aunque la rúbrica no tenga una línea para ello: el teclado oculta el botón de enviar, se muestra la zona horaria incorrecta, un paso nunca se carga. Una ruta de reserva rota va al principio del informe, por encima de la puntuación.
• Pantalla de confirmación (Hallazgos extra): si el usuario envió una reserva de prueba, di si se mostró una confirmación clara. Si no, escribe "no enviado".

Paso 6. Puntúa cada línea

Usa esta rúbrica exactamente. Suma hasta 100. Etiqueta la fuente de cada línea: PS (PageSpeed), HTML, Shot (captura), Test (toque), Est. (estimado a partir de una captura), No verificado o N/A.

Línea	Verificación	Máx	Puntuación
A1	Puntuación de Rendimiento móvil de PageSpeed	30	90 o más = 30. 50 o menos = 0. Entre: 30 x (puntuación menos 50) / 40
B1	LCP 2.5 s o menos	7	4.0 s o más = 0. Entre: 7 x (4.0 menos LCP) / 1.5
B2	CLS 0.1 o menos	4	0.25 o más = 0. Entre: 4 x (0.25 menos CLS) / 0.15
B3	TBT 150 ms o menos	4	400 ms o más = 0. Entre: 4 x (400 menos TBT) / 250
C1	Puntuación de Accesibilidad de PageSpeed 90 o más	5	90 o más = 5. 50 o menos = 0. Entre: 5 x (puntuación menos 50) / 40
D1	Etiqueta viewport: width=device-width	5	Presente = 5. Ausente = 0
D2	Sin desplazamiento lateral	5	Sin = 5. Con = 0
D3	Todos los objetivos táctiles de 44 px o más	5	Todos 44+ = 5. Cualquiera <44 = 0
D4	Texto del cuerpo 16 px o más; letra pequeña 12 px o más	5	Ambos 16+ y 12+ = 5. Solo texto cuerpo 16+ = 3. Menos = 0. No se puede determinar = marca la mitad No verificado
D5	Imágenes e iframes con dimensiones establecidas	5	Todos los elementos tienen dimensiones = 5. Cualquier elemento sin = 0
D6	Áreas seguras (muesca, barra de inicio) manejadas	5	Manejado = 5. No manejado = 0
D7	Sin video en reproducción automática con sonido; iframes de video cargados al tocar	4	Sin video con sonido automático Y iframes al tocar = 4. Sin video con sonido automático PERO iframes al cargar = 2. Con video con sonido automático = 0
D8	Ventanas emergentes ajustadas a pantalla, cerrables, fondo fijo	3	Las 3 condiciones = 3. 2 condiciones = 2. 1 condición = 1. Ninguna = 0
D9	Animaciones respetan prefers-reduced-motion; foco visible	3	Ambas = 3. Una = 2. Ninguna = 0
D10	Sin errores de consola del navegador en Mejores Prácticas	2	Sin = 2. Con = 0
E1	Botón de reserva en o antes de la primera pantalla	12	En o antes = 12. Después = 0 (agrega el hallazgo extra "oculto por la barra del navegador" si está cortado)
E2	Botón de reserva de al menos 44 px de alto	6	44+ = 6. Menos = 0
E3	Sin destinos en competencia (menú, enlaces a otras ofertas o perfiles sociales)	4	Sin = 4. Con menú = 2. Con enlaces a otras ofertas = 0. Si tiene ambos = 0
E4	Principal titular en 3 líneas o menos; encabezados de sección en 2 líneas o menos	4	Ambos límites = 4. Un límite = 2. Ninguno = 0
E5	Prueba social (logotipos, testimonios, resultados, reseñas) comienza en la pantalla 3 o antes	4	En o antes = 4. Después = 0
E6	7 o menos campos de formulario antes de que aparezcan los horarios del calendario	4	7 o menos = 4. Más = 0
E7	Sin párrafo más largo de 6 líneas	3	Sin = 3. Con = 0

Paso 7. Escribe el informe

Comienza con Puntuación: X/100. Debajo, enumera las correcciones en orden descendente de puntos ganados. Usa esta plantilla para cada una:

Recupera: +Y puntos | Línea Z

• Qué: (una línea, qué está mal)
• Por qué: (una línea, el efecto en las reservas)
• Cómo: (una o dos líneas, específicas para el creador de páginas y la herramienta)
• Evidencia: (la fuente y el valor, por ejemplo: Shot: 38 caracteres = ~13 px, o PageSpeed: LCP 3.1 s)

Agrupa el trabajo de velocidad de PageSpeed (secciones A, B, C y D10) por elemento, no por línea. De cada elemento fallido, usa el ahorro estimado de PageSpeed para determinar cuántos puntos se recuperan. El ahorro no tiene una línea de rúbrica. Para la lista de correcciones:

Ahorro estimado de PageSpeed

• Primer elemento: recupera el total de puntos de línea A1 (si no está en el máximo) + puntos B1 + B2 + B3 + D10
• Segundo elemento: la mitad de esa suma
• Tercer elemento: un cuarto
• Todos los demás elementos: un octavo, hasta que el total de puntos de velocidad se agote. Si un elemento está en una línea que ya se puntuó al máximo, no suma puntos; menciónalo como "ya puntuado al máximo" y muévelo al final.

Después de la lista de velocidad, enumera las líneas restantes (D1-D9, E1-E7) en orden descendente de puntos disponibles. Si una línea no se verificó (No verificado), omítela de la lista pero menciónala al final. Si una línea está en N/A, no la enumeres. Incluye solo elementos fallidos; las líneas que pasan no aparecen.

Si la ruta de reserva está rota, pon eso en la parte superior del informe, encima de la puntuación. Debajo de la lista de correcciones, agrega:

• Hallazgos extra (no puntúan pero debes saberlo): botones del calendario demasiado pequeños, confirmación no mostrada, etc.
• No verificado: D4 mitad (fuente CSS), D6 (no se pudo leer CSS), etc. Nombra la única entrada que agregaría más puntos.
• Revisión: pide tres ejecuciones de PageSpeed y nuevas capturas de pantalla después de los cambios. Revisa solo las líneas que cambiaron.

Paso 8. Ejemplo

(No traducir; solo de referencia.)

Puntuación: 62/100

ROTO en el navegador integrado de Instagram: calendario cargado en blanco

Recupera: +14 puntos | A1 (Rendimiento)

• Qué: PageSpeed da 62 sobre 100.
• Por qué: los anuncios cuestan más por clic y menos se convierten.
• Cómo: [solución específica del creador de páginas para optimizar imágenes y scripts]
• Evidencia: PageSpeed: 62, LCP 3.1 s, CLS 0.15, TBT 200 ms.

Recupera: +7 puntos | B1 (LCP)

• ...

Hallazgos extra:

• Las ranuras de tiempo del calendario tienen menos de 44 px. Solución: activa el diseño móvil de Calendly en Ajustes.

No verificado: D4 mitad (fuente CSS necesaria). Solicitar el CSS agregaría +3 puntos.

Revisión: ejecuta PageSpeed tres veces después de los cambios y toma nuevas capturas.