Los valores son estimaciones y pueden variar. La puntuación del rendimiento se calcula directamente a partir de estas métricas.Ver calculadora.
0–49 50–89 90–100
Métricas
First Contentful Paint
6,8 s
El primer renderizado con contenido indica el momento en el que se renderiza el primer texto o la primera imagen. Más información sobre la métrica Primer renderizado con contenido
Renderizado del mayor elemento con contenido
13,3 s
El renderizado del mayor elemento con contenido indica el tiempo que se tarda en dibujar el texto o la imagen de mayor tamaño. Más información sobre la métrica Renderizado del mayor elemento con contenido
Total Blocking Time
1220 ms
Suma de los periodos, en milisegundos, entre FCP y Time to Interactive cuando la duración de la tarea excede los 50 ms. Más información sobre la métrica Total Blocking Time
Cambios de diseño acumulados
0.136
Los cambios de diseño acumulados miden el movimiento de los elementos visibles dentro del viewport. Más información sobre la métrica Cambios de diseño acumulados
Speed Index
8,1 s
Speed Index indica la rapidez con la que se puede ver el contenido de una página. Más información sobre la métrica Speed Index
Mostrar auditorías relacionadas con:
Oportunidades
Oportunidad
Ahorro estimado
Usa formatos de vídeo para incluir contenido animado 3,45s
Usa formatos de vídeo para incluir contenido animado
3,45s
Los GIFs de gran tamaño no son eficientes para mostrar contenido animado. Para usar menos bytes de la red, te recomendamos que utilices los formatos de vídeo MPEG4 o WebM para incluir animaciones y los formatos PNG o WebP para añadir imágenes estáticas en lugar del formato GIF. Más información sobre formatos de vídeo eficientesLCP
URL | Tamaño del recurso | Ahorro potencial |
---|---|---|
localhost Propio | 912,4 KiB | 666,0 KiB |
/dobetterweb/lighthouse-rotating.gif (localhost) | 912,4 KiB | 666,0 KiB |
Habilita la compresión de texto 2,40s
Habilita la compresión de texto
2,40s
Los recursos de texto se deberían publicar comprimidos (gzip, deflate o brotli) para minimizar el total de bytes de la red. Más información sobre la compresión de textoFCPLCP
URL | Tamaño de la transferencia | Ahorro potencial |
---|---|---|
localhost Propio | 179,4 KiB | 143,0 KiB |
…third_party/aggressive-promise-polyfill.js (localhost) | 162,4 KiB | 131,7 KiB |
/dobetterweb/dbw_tester.html (localhost) | 17,0 KiB | 11,4 KiB |
Minifica los recursos JavaScript 1,20s
Minifica los recursos JavaScript
1,20s
Si minificas los archivos de JavaScript, se puede reducir el tamaño de la carga útil y el tiempo de análisis de la secuencia de comandos. Consulta cómo minificar JavaScriptFCPLCP
URL | Tamaño de la transferencia | Ahorro potencial |
---|---|---|
localhost Propio | 162,6 KiB | 81,6 KiB |
…third_party/aggressive-promise-polyfill.js (localhost) | 162,6 KiB | 81,6 KiB |
Reduce el contenido JavaScript que no se use 0,75s
Reduce el contenido JavaScript que no se use
0,75s
Reduce el contenido JavaScript que no se use y retrasa la carga de secuencias de comandos hasta que se necesiten. Así, se reducirán los bytes consumidos por la actividad de red. Consulta cómo reducir el contenido de JavaScript que no se useLCP
URL | Tamaño de la transferencia | Ahorro potencial |
---|---|---|
localhost Propio | 162,6 KiB | 42,5 KiB |
…third_party/aggressive-promise-polyfill.js (localhost) | 162,6 KiB | 42,5 KiB |
Google CDN cdn | 29,6 KiB | 21,0 KiB |
…2.1.1/jquery.min.js (ajax.googleapis.com) | 29,6 KiB | 21,0 KiB |
Publica imágenes con formatos de próxima generación 0,45s
Publica imágenes con formatos de próxima generación
0,45s
Los formatos como WebP y AVIF suelen comprimir mejor las imágenes que los formatos PNG o JPEG, lo que hace que se descarguen más rápido y consuman menos datos. Más información sobre formatos de imagen modernos
URL | Tamaño del recurso | Ahorro potencial | |
---|---|---|---|
localhost Propio | 144,3 KiB | 76,0 KiB | |
/dobetterweb/lighthouse-480x318.jpg?iar1 (localhost) | 24,0 KiB | 12,7 KiB | |
body > img <img src="lighthouse-480x318.jpg?isr1" width="400" height="360" style="position: absolute;"> | /dobetterweb/lighthouse-480x318.jpg?isr1 (localhost) | 24,0 KiB | 12,7 KiB |
/dobetterweb/lighthouse-480x318.jpg?isr2 (localhost) | 24,0 KiB | 12,7 KiB | |
/dobetterweb/lighthouse-480x318.jpg?isr3 (localhost) | 24,0 KiB | 12,7 KiB | |
/dobetterweb/lighthouse-480x318.jpg (localhost) | 24,0 KiB | 12,7 KiB | |
/dobetterweb/lighthouse-480x318.jpg?iar2 (localhost) | 24,0 KiB | 12,7 KiB |
Evita usar JavaScript antiguo en navegadores modernos 0,45s
Evita usar JavaScript antiguo en navegadores modernos
0,45s
Los polyfills y los transforms permiten que los navegadores antiguos utilicen las nuevas funciones de JavaScript. Sin embargo, muchos de estos polyfills y transforms no son necesarios para los navegadores modernos. Para tu JavaScript empaquetado, adopta una estrategia moderna de implementación de secuencias de comandos usando la detección de funciones module/nomodule para reducir la cantidad de código que se envía a los navegadores modernos sin perder la compatibilidad con los navegadores antiguos. Consulta cómo utilizar JavaScript modernoTBT
URL | Ahorro potencial | |
---|---|---|
localhost Propio | 26,0 KiB | |
…third_party/aggressive-promise-polyfill.js (localhost) | 26,0 KiB | |
Object.defineProperty | ||
Object.defineProperties |
Diagnósticos
No usa listeners pasivos para mejorar el desplazamiento
Se recomienda que los procesadores de eventos táctiles y de la rueda sean
passive
para mejorar el desplazamiento de tu página. Más información sobre cómo adoptar procesadores de eventos pasivosFuente |
---|
localhost Propio |
/dobetterweb/dbw_tester.html:312:5 (localhost) |
Evitar document.write()
document.write()
Las secuencias de comandos externas inyectadas dinámicamente mediante
document.write()
pueden retrasar la carga de la página varias decenas de segundos en conexiones lentas. Consulta cómo evitar el elemento document.write()Fuente |
---|
localhost Propio |
/dobetterweb/dbw_tester.html:279:11 (localhost) |
/dobetterweb/dbw_tester.html:280:11 (localhost) |
/dobetterweb/dbw_tester.html:281:11 (localhost) |
Los elementos de imagen no tienen width
y height
explícitos
width
y height
explícitos En los elementos de imagen, especifica un ancho y una altura explícitos para reducir los cambios de diseño y mejorar el CLS. Consulta cómo configurar las dimensiones de una imagenCLS
URL | |
---|---|
localhost Propio | |
body > img <img src="blob:http://localhost:10200/8081f274-a0c6-440f-a9cc-be826a0e01d5"> | blob:http://localhost:10200/8081f274-a0c6-440f-a9cc-be826a0e01d5 |
body > img <img src="filesystem:http://localhost:10200/temporary/empty-0.30045073591260474.png"> | filesystem:http://localhost:10200/temporary/empty-0.30045073591260474.png |
La página ha impedido la restauración de la caché de páginas completas 2 motivos del error
Muchos desplazamientos consisten en volver a una página anterior o regresar a una página posterior. La caché de páginas completas (bfcache) puede acelerar estos desplazamientos de regreso. Más información sobre la caché de páginas completas
Motivo del error | Tipo de error |
---|---|
La página tiene un controlador de descarga en el marco principal. | Se puede solucionar |
/dobetterweb/dbw_tester.html (localhost) | |
Error interno. | No se puede solucionar |
/dobetterweb/dbw_tester.html (localhost) |
Publica recursos estáticos con una política de caché eficaz Se han encontrado 19 recursos
Una duración en caché más larga puede aumentar el número de visitas repetidas a tu página. Más información sobre las políticas de caché eficaces
URL | Tiempo de vida en caché | Tamaño de la transferencia |
---|---|---|
localhost Propio | 1339 KiB | |
/dobetterweb/lighthouse-rotating.gif (localhost) | None | 913 KiB |
…third_party/aggressive-promise-polyfill.js (localhost) | None | 163 KiB |
None | 110 KiB | |
/dobetterweb/lighthouse-480x318.jpg (localhost) | None | 24 KiB |
/dobetterweb/lighthouse-480x318.jpg?iar1 (localhost) | None | 24 KiB |
/dobetterweb/lighthouse-480x318.jpg?iar2 (localhost) | None | 24 KiB |
/dobetterweb/lighthouse-480x318.jpg?isr1 (localhost) | None | 24 KiB |
/dobetterweb/lighthouse-480x318.jpg?isr2 (localhost) | None | 24 KiB |
/dobetterweb/lighthouse-480x318.jpg?isr3 (localhost) | None | 24 KiB |
None | 1 KiB | |
/dobetterweb/dbw_tester.js (localhost) | None | 1 KiB |
/dobetterweb/dbw_tester.css?delay=100 (localhost) | None | 1 KiB |
None | 1 KiB | |
/dobetterweb/dbw_tester.css?delay=2200 (localhost) | None | 1 KiB |
None | 1 KiB | |
None | 1 KiB | |
None | 1 KiB | |
/dobetterweb/empty_module.js?delay=500 (localhost) | None | 0 KiB |
/dobetterweb/empty.css (localhost) | None | 0 KiB |
Minimiza el trabajo del hilo principal 2,2 s
Te recomendamos que reduzcas el tiempo de análisis, compilación y ejecución de JavaScript. Para ello, puedes utilizar cargas útiles de JavaScript más pequeñas. Consulta cómo minimizar el trabajo del hilo principalTBT
Categoría | Duración |
---|---|
Script Evaluation | 1343 ms |
Rendering | 327 ms |
Other | 323 ms |
Style & Layout | 201 ms |
Parse HTML & CSS | 31 ms |
Script Parsing & Compilation | 17 ms |
Reduce el tiempo de ejecución de JavaScript 1,3 s
Te recomendamos que reduzcas el tiempo de análisis, compilación y ejecución de JavaScript. Para ello, puedes utilizar cargas útiles de JavaScript más pequeñas. Consulta cómo reducir el tiempo de ejecución de JavaScriptTBT
URL | Tiempo de CPU total | Evaluación de la secuencia de comandos | Análisis de la secuencia de comandos |
---|---|---|---|
localhost Propio | 2046 ms | 1289 ms | 12 ms |
/dobetterweb/dbw_tester.html (localhost) | 1946 ms | 1196 ms | 6 ms |
…third_party/aggressive-promise-polyfill.js (localhost) | 100 ms | 94 ms | 6 ms |
No atribuible | 147 ms | 22 ms | 1 ms |
Unattributable | 147 ms | 22 ms | 1 ms |
Evita encadenar solicitudes críticas Se han encontrado 12 cadenas
Las cadenas de solicitud crítica que se muestran a continuación indican qué recursos son de alta prioridad. Te recomendamos que reduzcas la longitud de las cadenas, disminuyas el tamaño de los recursos o pospongas la descarga de recursos innecesarios para mejorar la carga de la página. Consulta cómo evitar encadenar solicitudes críticasFCPLCP
Latencia de ruta crítica máxima: 7690,092 ms
Navegación inicial
/dobetterweb/dbw_tester.html
(localhost)
/dobetterweb/dbw_tester.css?delay=100
- 571,262 ms, 0,88 KiB (localhost)
/dobetterweb/unknown404.css?delay=200
- 580,235 ms, 0,20 KiB (localhost)
/dobetterweb/dbw_tester.css?delay=2200
- 2206,004 ms, 0,88 KiB (localhost)
- 583,974 ms, 1,16 KiB
- 3006,202 ms, 0,88 KiB
- 3568,714 ms, 0,88 KiB
/dobetterweb/fcp-delayer.js?delay=5000
- 6104,505 ms, 0,22 KiB (localhost)
…third_party/aggressive-promise-polyfill.js
- 1451,24 ms, 162,65 KiB (localhost)
…2.1.1/jquery.min.js
- 744,97 ms, 29,63 KiB (ajax.googleapis.com)
- 823,768 ms, 0,88 KiB
/dobetterweb/dbw_tester.js
- 1143,467 ms, 1,03 KiB (localhost)
/dobetterweb/empty_module.js?delay=500
- 1150,729 ms, 0,22 KiB (localhost)
Medidas y marcas de User Timing 42 tiempos de usuario
Te recomendamos que uses la API User Timing en tu aplicación para calcular su rendimiento real durante las principales experiencias de usuario. Más información sobre las marcas de User Timings
Nombre | Tipo | Hora de inicio | Duración |
---|---|---|---|
Zone | Measure | 8054,63 ms | 2,07 ms |
Zone:ZoneAwarePromise | Measure | 8057,15 ms | 1,55 ms |
Zone:toString | Measure | 8059,54 ms | 0,16 ms |
Zone:util | Measure | 8060,21 ms | 0,09 ms |
Zone:legacy | Measure | 8060,34 ms | 11,16 ms |
Zone:defineProperty | Measure | 8061,00 ms | 0,40 ms |
Zone:registerElement | Measure | 8061,40 ms | 0,10 ms |
Zone:EventTargetLegacy | Measure | 8061,50 ms | 10,00 ms |
Zone:queueMicrotask | Measure | 8071,48 ms | 0,42 ms |
Zone:timers | Measure | 8071,97 ms | 0,43 ms |
Zone:requestAnimationFrame | Measure | 8072,43 ms | 0,07 ms |
Zone:blocking | Measure | 8073,06 ms | 0,14 ms |
Zone:EventTarget | Measure | 8073,15 ms | 0,75 ms |
Zone:MutationObserver | Measure | 8073,85 ms | 0,75 ms |
Zone:IntersectionObserver | Measure | 8074,66 ms | 0,94 ms |
Zone:FileReader | Measure | 8075,61 ms | 0,79 ms |
Zone:on_property | Measure | 8076,60 ms | 58,49 ms |
Zone:customElements | Measure | 8135,11 ms | 0,79 ms |
Zone:XHR | Measure | 8135,85 ms | 0,85 ms |
Zone:geolocation | Measure | 8136,73 ms | 0,47 ms |
Zone:PromiseRejectionEvent | Measure | 8137,22 ms | 0,48 ms |
Zone | Mark | 8055,21 ms | |
Zone:ZoneAwarePromise | Mark | 8057,15 ms | |
Zone:toString | Mark | 8059,55 ms | |
Zone:util | Mark | 8060,23 ms | |
Zone:legacy | Mark | 8060,35 ms | |
Zone:defineProperty | Mark | 8061,00 ms | |
Zone:registerElement | Mark | 8061,40 ms | |
Zone:EventTargetLegacy | Mark | 8061,50 ms | |
Zone:queueMicrotask | Mark | 8071,48 ms | |
Zone:timers | Mark | 8071,97 ms | |
Zone:requestAnimationFrame | Mark | 8072,44 ms | |
Zone:blocking | Mark | 8073,07 ms | |
Zone:EventTarget | Mark | 8073,15 ms | |
Zone:MutationObserver | Mark | 8073,85 ms | |
Zone:IntersectionObserver | Mark | 8075,07 ms | |
Zone:FileReader | Mark | 8075,61 ms | |
Zone:on_property | Mark | 8076,61 ms | |
Zone:customElements | Mark | 8135,11 ms | |
Zone:XHR | Mark | 8135,86 ms | |
Zone:geolocation | Mark | 8136,74 ms | |
Zone:PromiseRejectionEvent | Mark | 8137,23 ms |
Reduce el número de solicitudes y el tamaño de las transferencias 25 solicitudes • 1403 KiB
Para definir la cantidad y el tamaño de los recursos de la página, añade un archivo budget.json. Más información sobre los límites de rendimiento
Tipo de recurso | Solicitudes | Tamaño de la transferencia |
---|---|---|
Total | 25,0 | 1403,5 KiB |
Imagen | 8,0 | 1168,3 KiB |
Secuencia de comandos | 5,0 | 193,7 KiB |
Otros | 2,0 | 17,4 KiB |
Documento | 1,0 | 17,2 KiB |
Hoja de estilo | 9,0 | 6,9 KiB |
Contenido multimedia | 0,0 | 0,0 KiB |
Fuente | 0,0 | 0,0 KiB |
Recursos externos | 1,0 | 29,6 KiB |
Renderizado del mayor elemento con contenido 13.320 ms
Este es el mayor elemento con contenido renderizado en el viewport. Más información sobre el renderizado del mayor elemento con contenidoLCP
Elemento |
---|
Do better web tester page <h2 id="toppy" style="background-image:url('');"> |
Fase | Porcentaje de LCP | Tiempos |
---|---|---|
TTFB | 4% | 570 ms |
Retraso de carga | 77% | 10.280 ms |
Tiempo de carga | 15% | 2050 ms |
Retraso de renderizado | 3% | 420 ms |
Evitar cambios de diseño importantes 5 elementos encontrados
Estos elementos DOM son los que más contribuyen al CLS de la página. Descubre cómo mejorar el CLSCLS
Elemento | Contribución al CLS |
---|---|
Do better web tester page
Hi there! <div> | 0,054 |
body > object#5934a <object id="5934a"> | 0,035 |
body > object#5934b <object id="5934b"> | 0,035 |
touchmove section <section id="touchmove-section"> | 0,007 |
body > img <img loading="lazy" src="lighthouse-480x318.jpg?iar2" width="120" height="80"> | 0,004 |
Evita tareas largas del hilo principal 2 tareas largas encontradas
Enumera las tareas más largas del hilo principal, lo que es útil para identificar las que más contribuyen a la latencia. Consulta cómo evitar tareas largas del hilo principalTBT
URL | Hora de inicio | Duración |
---|---|---|
localhost Propio | 1321 ms | |
/dobetterweb/dbw_tester.html (localhost) | 6846 ms | 1175 ms |
…third_party/aggressive-promise-polyfill.js (localhost) | 8045 ms | 146 ms |
Evita las animaciones no compuestas 1 elemento animado encontrado
Las animaciones no compuestas pueden aparecer entrecortadas e incrementar el CLS. Consulta cómo evitar las animaciones no compuestasCLS
Elemento | Nombre |
---|---|
hi <div id="animated-boi"> | |
Propiedades CSS no admitidas: margin-left, height | badanim |
Auditorías aprobadas (20) Mostrar Ocultar
Auditorías aprobadas (20)
Mostrar Ocultar
Elimina los recursos que bloqueen el renderizado Ahorro potencial de 0 ms
Hay recursos que bloquean el primer renderizado de tu página. Te recomendamos que muestres los elementos de JavaScript y CSS críticos insertados y pospongas todos los que no sean esenciales. Consulta cómo eliminar recursos que bloquean el renderizadoFCPLCP
URL | Tamaño de la transferencia | Ahorro potencial |
---|---|---|
localhost Propio | 4,1 KiB | 5140 ms |
/dobetterweb/dbw_tester.css?delay=100 (localhost) | 0,9 KiB | 730 ms |
/dobetterweb/unknown404.css?delay=200 (localhost) | 0,2 KiB | 880 ms |
/dobetterweb/dbw_tester.css?delay=2200 (localhost) | 0,9 KiB | 880 ms |
0,9 KiB | 880 ms | |
/dobetterweb/dbw_tester.js (localhost) | 1,0 KiB | 880 ms |
/dobetterweb/fcp-delayer.js?delay=5000 (localhost) | 0,2 KiB | 880 ms |
Usa un tamaño adecuado para las imágenes
Muestra imágenes con un tamaño adecuado para ahorrar datos móviles y mejorar el tiempo de carga. Consulta cómo cambiar el tamaño de las imágenes
Full Size
, a no ser que las dimensiones sean las adecuadas para su uso. Más información Pospón la carga de imágenes que no aparecen en pantalla
Te recomendamos que uses la carga en diferido con imágenes ocultas y que no aparecen en pantalla una vez que todos los recursos críticos hayan terminado de cargarse para reducir el tiempo que pasa hasta que la página es interactiva. Consulta cómo posponer las imágenes que no aparecen en pantalla
Minifica los archivos CSS
Si minificas los archivos CSS, se puede reducir el tamaño de la carga útil de la red. Consulta cómo minificar archivos CSSFCPLCP
Reduce el contenido CSS que no se use
Reduce las reglas que no se usen de las hojas de estilo y retrasa las reglas CSS que no se utilicen para el contenido de la parte visible a primera vista. Así, se reducirán los bytes consumidos por la actividad de red. Consulta cómo reducir el contenido de CSS que no se useFCPLCP
Codifica las imágenes de forma eficaz
Las imágenes optimizadas se cargan más rápido y consumen menos datos móviles. Consulta cómo codificar imágenes de forma eficaz
Establece conexión previamente con los orígenes necesarios
Puedes añadir sugerencias de recursos
preconnect
o dns-prefetch
para establecer conexiones previas con orígenes importantes de terceros. Consulta cómo establecer conexión previamente con orígenes necesariosFCPLCP El tiempo de respuesta inicial del servidor fue breve El documento raíz ha tardado 570 ms
Mantén breve el tiempo de respuesta del servidor para el documento principal, puesto que todas las demás solicitudes dependen de él. Más información sobre la métrica Tiempo hasta el primer byteFCPLCP
URL | Duración |
---|---|
localhost Propio | 570 ms |
/dobetterweb/dbw_tester.html (localhost) | 570 ms |
Evita que haya varias redirecciones de página
Las redirecciones provocan retrasos adicionales antes de que la página se pueda cargar. Consulta cómo evitar las redirecciones de página.FCPLCP
Carga previamente las solicitudes clave
Te recomendamos usar
<link rel=preload>
para dar prioridad a los recursos que se solicitan más tarde al cargar la página. Consulta cómo precargar solicitudes claveFCPLCP Usa HTTP/2
HTTP/2 ofrece muchas ventajas con respecto a HTTP/1.1, como los encabezados binarios y la multiplexación. Más información sobre HTTP/2
Quita los módulos duplicados de los paquetes de JavaScript
Quita los módulos de JavaScript grandes y duplicados de los paquetes para reducir el número de bytes innecesarios que consume la actividad de red. TBT
Precargar la imagen de renderizado del mayor elemento con contenido
Si el elemento LCP se añade de forma dinámica a la página, tendrás que precargar la imagen para mejorar el LCP. Más información sobre cómo precargar los elementos LCPLCP
URL | Ahorro potencial | |
---|---|---|
localhost Propio | 0 ms | |
Do better web tester page <h2 id="toppy" style="background-image:url('');"> | 0 ms |
Evita cargas útiles de red de gran tamaño Tamaño total: 1404 KiB
Si la carga útil de la red es muy grande, los usuarios consumen más datos móviles y las páginas tardan más en cargarse. Consulta cómo reducir el tamaño de la carga útilLCP
URL | Tamaño de la transferencia |
---|---|
localhost Propio | 1331,0 KiB |
/dobetterweb/lighthouse-rotating.gif (localhost) | 912,6 KiB |
…third_party/aggressive-promise-polyfill.js (localhost) | 162,6 KiB |
110,3 KiB | |
/dobetterweb/lighthouse-480x318.jpg (localhost) | 24,2 KiB |
/dobetterweb/lighthouse-480x318.jpg?iar1 (localhost) | 24,2 KiB |
/dobetterweb/lighthouse-480x318.jpg?iar2 (localhost) | 24,2 KiB |
/dobetterweb/lighthouse-480x318.jpg?isr1 (localhost) | 24,2 KiB |
/dobetterweb/lighthouse-480x318.jpg?isr2 (localhost) | 24,2 KiB |
/dobetterweb/lighthouse-480x318.jpg?isr3 (localhost) | 24,2 KiB |
Google CDN cdn | 29,6 KiB |
…2.1.1/jquery.min.js (ajax.googleapis.com) | 29,6 KiB |
Evita un tamaño excesivo de DOM 153 elementos
Los DOM de gran tamaño aumentan el uso de memoria, hacen que los cálculos de estilo duren más y generan costosas redistribuciones del diseño. Consulta cómo evitar un tamaño de DOM excesivoTBT
Estadística | Elemento | Valor |
---|---|---|
Total de elementos DOM | 153 | |
Profundidad máxima de DOM | body > div > svg.social-facebook > title#social-facebook-5 <title id="social-facebook-5"> | 4 |
Número máximo de elementos secundarios | body > div#shadow-root-container <div id="shadow-root-container"> | 100 |
Todo el texto permanece visible mientras se carga la fuente web
Usa la función CSS
font-display
para asegurarte de que los usuarios puedan ver el texto mientras se cargan las fuentes web. Más información sobre font-display
FCPLCP Reducir el uso de código de terceros El código de un tercero ha bloqueado el hilo principal durante 0 ms
El código externo puede afectar mucho a la velocidad de carga. Limita el número de proveedores externos redundantes e intenta cargar el código externo cuando se haya completado la carga principal de tu página. Consulta cómo minimizar el impacto de tercerosTBT
Proveedor externo | Tamaño de la transferencia | Tiempo de bloqueo del hilo principal |
---|---|---|
Google CDN cdn | 30 KiB | 0 ms |
…2.1.1/jquery.min.js (ajax.googleapis.com) | 30 KiB | 0 ms |
Cargar recursos de terceros en diferido con fachadas
Algunas inserciones de terceros se pueden cargar en diferido. Puedes sustituirlas por una fachada hasta que sean necesarias. Consulta cómo posponer elementos de terceros con una fachadaTBT
La imagen del renderizado del mayor elemento con contenido no se ha cargado en diferido
Las imágenes de la parte visible a primera vista que se cargan en diferido se renderizan más tarde en el ciclo de vida de la página, lo que puede retrasar el renderizado del mayor elemento con contenido. Más información sobre la carga en diferido óptimaLCP
Contiene una etiqueta <meta name="viewport">
con width
o initial-scale
<meta name="viewport">
con width
o initial-scale
El
<meta name="viewport">
no solo optimiza tu aplicación para los tamaños de pantalla de los dispositivos móviles, sino que también evita el retraso de 300 milisegundos de las entradas del usuario. Más información sobre cómo usar la etiqueta meta de viewportTBTLímites
Tipo de recurso | Solicitudes | Tamaño de la transferencia | Por encima del límite | |
---|---|---|---|---|
Total | 25,0 | 1403,5 KiB | 15 solicitudes | 1303,5 KiB |
Imagen | 8,0 | 1168,3 KiB | 6 solicitudes | 1138,3 KiB |
Secuencia de comandos | 5,0 | 193,7 KiB | 3 solicitudes | 163,7 KiB |
Otros | 2,0 | 17,4 KiB | 12,4 KiB | |
Recursos externos | 1,0 | 29,6 KiB | 4,6 KiB | |
Documento | 1,0 | 17,2 KiB | 2,2 KiB | |
Hoja de estilo | 9,0 | 6,9 KiB | 7 solicitudes | 1,9 KiB |
Contenido multimedia | 0,0 | 0,0 KiB | ||
Fuente | 0,0 | 0,0 KiB |
Métrica | Medición | Por encima del límite |
---|---|---|
Tiempo necesario para interactuar | 8190 ms | 5290 ms |
Primer renderizado significativo | 6840 ms | 4840 ms |
First Contentful Paint | 6840 ms | 3840 ms |
Latencia potencial máxima de la primera interacción | 1180 ms | 1080 ms |
Estas comprobaciones incluyen consejos para mejorar la accesibilidad de tu aplicación web. Solo se pueden detectar un subconjunto de problemas de accesibilidad de forma automática. Por eso, te recomendamos realizar pruebas manuales.
Nombres y etiquetas
Los elementos de imagen no tienen ningún atributo [alt]
[alt]
Los elementos informativos deberían incluir textos alternativos cortos y descriptivos. Los elementos decorativos se pueden omitir usando un atributo "alt" vacío. Más información sobre el atributo
alt
Elementos con errores |
---|
body > img <img src="lighthouse-480x318.jpg?iar1" width="120" height="15"> |
body > img <img loading="lazy" src="lighthouse-480x318.jpg?iar2" width="120" height="80"> |
body > img <img src="lighthouse-480x318.jpg?isr1" width="360" height="240" style="position: absolute;"> |
body > img <img src="lighthouse-480x318.jpg?isr2" width="120" height="80" style="position: absolute;"> |
body > img <img src="lighthouse-480x318.jpg?isr3" width="360" height="240" style="image-rendering: pixelated; position: absolute;"> |
body > img <img src="http://localhost:10200/dobetterweb/lighthouse-480x318.jpg" srcset="lighthouse-480x318.jpg 2x" width="360" height="240" style="position: absolute;"> |
body > img <img src="lighthouse-rotating.gif" width="811" height="462"> |
body > img <img src="blob:http://localhost:10200/84c78bd5-a720-43b4-93e0-26591a9ff8ee"> |
body > img <img src="filesystem:http://localhost:10200/temporary/empty-0.48387978403091236.png"> |
Los elementos de formulario no tienen ninguna etiqueta asociada
Las etiquetas facilitan que las tecnologías asistenciales, como los lectores de pantalla, puedan leer los controles de los formularios de forma correcta. Más información sobre las etiquetas de elementos de formulario
Elementos con errores |
---|
body > input <input type="password" onpaste="event.preventDefault();"> |
body > input <input type="password"> |
body > input <input type="password" onpaste="return false;"> |
Los enlaces no tienen nombres reconocibles
Usar textos de enlace (y textos alternativos para las imágenes, si estas se usan como enlaces) que sean reconocibles, únicos y que se puedan seleccionar mejora la experiencia de navegación de los usuarios de lectores de pantalla. Consulta cómo hacer que los enlaces sean accesibles
Elementos con errores |
---|
body > a <a href="javascript:void(0)" target="_blank"> |
body > a <a href="mailto:inbox@email.com" target="_blank"> |
Los elementos <object>
no tienen texto alternativo
<object>
no tienen texto alternativo Los lectores de pantalla no pueden traducir contenido que no sea texto. Si añades texto alternativo a los elementos
<object>
, los lectores de pantalla podrán transmitir su significado a los usuarios. Más información sobre el texto alternativo de los elementos object
Elementos con errores |
---|
body > object#5934a <object id="5934a"> |
body > object#5934b <object id="5934b"> |
Internacionalización y localización
El elemento <html>
no tiene un atributo [lang]
<html>
no tiene un atributo [lang]
Si no se especifica ningún atributo
lang
en una página, el lector de pantalla asumirá que la página está en el idioma predeterminado que el usuario eligió al configurarlo. Si el idioma de la página es diferente del predeterminado, es posible que el lector de pantalla no lea correctamente el texto de la página. Más información sobre el atributo lang
Elementos con errores |
---|
html <html> |
Elementos adicionales que se deben comprobar manualmente (10) Mostrar Ocultar
Elementos adicionales que se deben comprobar manualmente (10)
Mostrar Ocultar
The page has a logical tab order
Tabbing through the page follows the visual layout. Users cannot focus elements that are offscreen. Learn more about logical tab ordering.
Interactive controls are keyboard focusable
Custom interactive controls are keyboard focusable and display a focus indicator. Learn how to make custom controls focusable.
Interactive elements indicate their purpose and state
Interactive elements, such as links and buttons, should indicate their state and be distinguishable from non-interactive elements. Learn how to decorate interactive elements with affordance hints.
The user's focus is directed to new content added to the page
If new content, such as a dialog, is added to the page, the user's focus is directed to it. Learn how to direct focus to new content.
User focus is not accidentally trapped in a region
A user can tab into and out of any control or region without accidentally trapping their focus. Learn how to avoid focus traps.
Custom controls have associated labels
Custom interactive controls have associated labels, provided by aria-label or aria-labelledby. Learn more about custom controls and labels.
Custom controls have ARIA roles
Custom interactive controls have appropriate ARIA roles. Learn how to add roles to custom controls.
Visual order on the page follows DOM order
DOM order matches the visual order, improving navigation for assistive technology. Learn more about DOM and visual ordering.
Offscreen content is hidden from assistive technology
Offscreen content is hidden with display: none or aria-hidden=true. Learn how to properly hide offscreen content.
HTML5 landmark elements are used to improve navigation
Landmark elements (
<main>
, <nav>
, etc.) are used to improve the keyboard navigation of the page for assistive technology. Learn more about landmark elements. Auditorías aprobadas (18) Mostrar Ocultar
Auditorías aprobadas (18)
Mostrar Ocultar
Los atributos [aria-*]
coinciden con sus funciones
[aria-*]
coinciden con sus funciones Cada
role
de ARIA admite un subconjunto determinado de atributos aria-*
. Si no coinciden, los atributos aria-*
se invalidarán. Consulta cómo asociar atributos ARIA a sus funciones [aria-hidden="true"]
no se encuentra en el documento <body>
[aria-hidden="true"]
no se encuentra en el documento <body>
Las tecnologías asistenciales, como los lectores de pantalla, funcionan de forma inestable cuando se establece
aria-hidden="true"
en el documento <body>
. Consulta cómo afecta aria-hidden
al cuerpo del documento Todos los elementos [role]
tienen los atributos [aria-*]
obligatorios
[role]
tienen los atributos [aria-*]
obligatorios Algunas funciones de ARIA incluyen atributos obligatorios que describen el estado del elemento a los lectores de pantalla. Más información sobre las funciones y los atributos obligatorios
Los valores de [role]
son válidos
[role]
son válidos Las funciones de ARIA deben tener valores válidos para realizar las funciones de accesibilidad correspondientes. Más información sobre las funciones de ARIA válidas
Los atributos [aria-*]
tienen valores válidos
[aria-*]
tienen valores válidos Las tecnologías asistenciales, como los lectores de pantalla, no pueden interpretar los atributos ARIA cuyos valores no sean válidos. Más información sobre los valores válidos de los atributos ARIA
Los atributos [aria-*]
son válidos y están bien escritos
[aria-*]
son válidos y están bien escritos Las tecnologías asistenciales, como los lectores de pantalla, no pueden interpretar los atributos ARIA con nombres no válidos. Más información sobre los atributos ARIA válidos
Los botones tienen nombres accesibles
Si un botón no tiene un nombre accesible, los lectores de pantalla lo leerán en voz alta como "botón", lo que hace que el botón no resulte útil a los usuarios que necesitan lectores de pantalla. Consulta cómo hacer que los botones sean más accesibles
Los ID de ARIA son únicos
El valor de un ID de ARIA debe ser único para evitar que las tecnologías asistenciales omitan otras instancias. Consulta cómo corregir IDs de ARIA duplicados
[user-scalable="no"]
no se utiliza en el elemento <meta name="viewport">
y el valor del atributo [maximum-scale]
no es inferior a 5.
[user-scalable="no"]
no se utiliza en el elemento <meta name="viewport">
y el valor del atributo [maximum-scale]
no es inferior a 5. Inhabilitar el zoom provoca problemas a los usuarios con baja visión que necesitan ampliar la pantalla para poder ver correctamente el contenido de las páginas web. Más información sobre la etiqueta meta de viewport
Los elementos <td>
de un elemento <table>
grande tienen al menos un encabezado de tabla.
<td>
de un elemento <table>
grande tienen al menos un encabezado de tabla. Los lectores de pantalla incluyen funciones para facilitar la navegación por las tablas. Si te aseguras de que los elementos
<td>
de una tabla grande (3 o más celdas de ancho y alto) tienen un encabezado de tabla asociado, es posible que mejore la experiencia de los usuarios de lectores de pantalla. Más información sobre los encabezados de tabla Elements with role="dialog"
or role="alertdialog"
have accessible names.
role="dialog"
or role="alertdialog"
have accessible names. ARIA dialog elements without accessible names may prevent screen readers users from discerning the purpose of these elements. Learn how to make ARIA dialog elements more accessible.
Elements with the role=text
attribute do not have focusable descendents.
role=text
attribute do not have focusable descendents. Adding
role=text
around a text node split by markup enables VoiceOver to treat it as one phrase, but the element's focusable descendents will not be announced. Learn more about the role=text
attribute. Los colores de fondo y de primer plano tienen una relación de contraste adecuada
Los textos con poco contraste resultan difíciles o imposibles de leer para muchos usuarios. Consulta cómo crear suficiente contraste de color
El documento tiene un elemento <title>
<title>
Los títulos proporcionan una idea general sobre la página a los usuarios de lectores de pantalla. Además, los usuarios de buscadores se basan principalmente en los títulos para determinar si una página es relevante para su búsqueda o no. Más información sobre los títulos de documentos
Links are distinguishable without relying on color.
Low-contrast text is difficult or impossible for many users to read. Link text that is discernible improves the experience for users with low vision. Learn how to make links distinguishable.
Las tablas usan <caption>
en lugar de celdas con el atributo [colspan]
para indicar un título.
<caption>
en lugar de celdas con el atributo [colspan]
para indicar un título. Los lectores de pantalla incluyen funciones para facilitar la navegación por las tablas. Si te aseguras de que las tablas usan el elemento de título correcto en lugar de celdas con el atributo
[colspan]
, es posible que mejore la experiencia de los usuarios de lectores de pantalla. Más información sobre títulos Los elementos de encabezado aparecen en orden secuencial descendente
Los títulos ordenados correctamente que no saltan niveles transmiten la estructura semántica de la página, lo que facilita la navegación y la comprensión para los usuarios que usan tecnologías asistenciales. Más información sobre el orden de los encabezados
El elemento <html>
tiene un atributo [xml:lang]
con el mismo idioma base que el atributo [lang]
.
<html>
tiene un atributo [xml:lang]
con el mismo idioma base que el atributo [lang]
. Si la página web no indica un idioma de forma coherente, es posible que el lector de pantalla no lea correctamente el texto de la página. Más información sobre el atributo
lang
No aplicable (33) Mostrar Ocultar
No aplicable (33)
Mostrar Ocultar
Los valores de [accesskey]
son únicos
[accesskey]
son únicos Las claves de acceso permiten a los usuarios dirigirse rápidamente a una parte concreta de la página. Para facilitar una navegación correcta, las claves de acceso deben ser únicas. Más información sobre las claves de acceso
Los elementos button
, link
y menuitem
tienen nombres accesibles
button
, link
y menuitem
tienen nombres accesibles Si un elemento no tiene un nombre accesible, los lectores de pantalla lo leen diciendo un nombre genérico, lo que hace que el elemento no resulte útil a los usuarios que necesitan lectores de pantalla. Consulta cómo hacer que los elementos de comando sean más accesibles
Los elementos [aria-hidden="true"]
no contienen ningún elemento inferior seleccionable
[aria-hidden="true"]
no contienen ningún elemento inferior seleccionable Los elementos inferiores enfocables que están dentro de un elemento
[aria-hidden="true"]
evitan que esos elementos interactivos estén disponibles para los usuarios de tecnologías asistenciales, como lectores de pantalla. Consulta cómo aria-hidden
afecta a los elementos enfocables. Los campos de entrada ARIA tienen nombres accesibles
Si un campo de entrada no tiene un nombre accesible, los lectores de pantalla lo leerán en voz alta con un nombre genérico, lo que hace que el campo no resulte útil a los usuarios que necesitan lectores de pantalla. Más información sobre las etiquetas de campos de entrada
Los elementos meter
de ARIA tienen nombres accesibles
meter
de ARIA tienen nombres accesibles Si un elemento medidor no tiene un nombre accesible, los lectores de pantalla lo leen diciendo un nombre genérico, lo que hace que no resulte útil para los usuarios que necesitan lectores de pantalla. Consulta cómo asignar un nombre a los elementos
meter
. Los elementos progressbar
de ARIA tienen nombres accesibles
progressbar
de ARIA tienen nombres accesibles Si un elemento
progressbar
no tiene un nombre accesible, los lectores de pantalla lo leen diciendo un nombre genérico, lo que hace que no resulte útil a los usuarios que necesitan lectores de pantalla. Consulta cómo etiquetar elementos progressbar
Los elementos con un [role]
ARIA que requieren que los elementos secundarios contengan un [role]
específico tienen todos los elementos secundarios necesarios.
[role]
ARIA que requieren que los elementos secundarios contengan un [role]
específico tienen todos los elementos secundarios necesarios. Algunas funciones principales de ARIA deben contener funciones secundarias específicas para llevar a cabo las funciones de accesibilidad correspondientes. Más información sobre las funciones y los elementos secundarios obligatorios
Los atributos [role]
están incluidos en los elementos principales correspondientes
[role]
están incluidos en los elementos principales correspondientes Algunas funciones secundarias de ARIA se deben incluir dentro de funciones principales concretas para poder llevar a cabo las funciones de accesibilidad correspondientes. Más información sobre las funciones de ARIA y el elemento superior obligatorio
Los campos de interruptores ARIA tienen nombres accesibles
Si un campo de interruptor no tiene un nombre accesible, los lectores de pantalla lo leerán en voz alta con un nombre genérico, lo que hace que el campo no resulte útil a los usuarios que necesitan lectores de pantalla. Más información sobre los campos de interruptores
Los elementos tooltip
de ARIA tienen nombres accesibles
tooltip
de ARIA tienen nombres accesibles Si un elemento de descripción emergente no tiene un nombre accesible, los lectores de pantalla lo leen diciendo un nombre genérico, lo que hace que no resulte útil para los usuarios que necesitan lectores de pantalla. Consulta cómo asignar un nombre a los elementos
tooltip
. Los elementos treeitem
de ARIA tienen nombres accesibles
treeitem
de ARIA tienen nombres accesibles Si un elemento
treeitem
no tiene un nombre accesible, los lectores de pantalla lo leen diciendo un nombre genérico, lo que hace que no resulte útil a los usuarios que necesitan lectores de pantalla. Más información sobre cómo etiquetar elementos treeitem
La página contiene un encabezado, un enlace de omisión o una región de punto de referencia
Incluir maneras de omitir el contenido repetitivo permite a los usuarios con teclado navegar por la página de forma más eficaz. Más información sobre cómo omitir bloques
Los elementos <dl>
contienen únicamente grupos de <dt>
y <dd>
o elementos <script>
, <template>
o <div>
ordenados correctamente.
<dl>
contienen únicamente grupos de <dt>
y <dd>
o elementos <script>
, <template>
o <div>
ordenados correctamente. Si las listas de definiciones no están bien marcadas, es posible que los lectores de pantalla las interpreten de forma confusa o imprecisa. Consulta cómo estructurar las listas de definición correctamente
Los elementos de la lista de definiciones están incluidos dentro de elementos <dl>
<dl>
Los elementos de la lista de definiciones (
<dt>
y <dd>
) deben estar incluidos en un elemento <dl>
superior para asegurarte de que los lectores de pantalla puedan leerlos en voz alta correctamente. Consulta cómo estructurar las listas de definición correctamente Los atributos [id]
de los elementos activos seleccionables son únicos
[id]
de los elementos activos seleccionables son únicos Todos los elementos seleccionables deben tener un
id
único para asegurar que son visibles para las tecnologías asistenciales. Consulta cómo corregir id
s duplicados. Ningún campo de formulario tiene varias etiquetas
Las tecnologías asistenciales, como los lectores de pantalla, pueden leer de forma confusa los campos de formulario que tienen varias etiquetas, ya que pueden usar la primera etiqueta, la última o todas. Consulta cómo utilizar las etiquetas de formularios
Los elementos <frame>
o <iframe>
tienen un título
<frame>
o <iframe>
tienen un título Los usuarios de lectores de pantalla confían en que los títulos describan el contenido de los marcos. Más información sobre los títulos de los marcos
El atributo [lang]
del elemento <html>
tiene un valor válido
[lang]
del elemento <html>
tiene un valor válido Especificar un idioma BCP 47 válido permite a los lectores de pantalla leer el texto correctamente en voz alta. Consulta cómo utilizar el atributo
lang
Los botones de entrada tienen texto reconocible.
Añadir texto reconocible y accesible a los botones de entrada puede ayudar a los usuarios de lectores de pantalla a entender la finalidad de estos botones. Más información sobre los botones de entrada
Los elementos <input type="image">
tienen texto [alt]
<input type="image">
tienen texto [alt]
Cuando se usa una imagen como botón
<input>
, resulta útil proporcionar un texto alternativo para permitir que los usuarios de lectores de pantalla entiendan cuál es la función del botón. Más información sobre añadir texto alternativo a las imágenes Las listas contienen únicamente elementos <li>
y elementos que admiten secuencias de comandos (<script>
y <template>
).
<li>
y elementos que admiten secuencias de comandos (<script>
y <template>
). Los lectores de pantalla leen las listas en voz alta de una forma concreta. Se recomienda utilizar una estructura de listas adecuada para que los lectores de pantalla puedan leer las listas de forma correcta. Más información sobre estructuras de listas adecuadas
Los elementos de lista (<li>
) están incluidos dentro de elementos superiores <ul>
, <ol>
o <menu>
<li>
) están incluidos dentro de elementos superiores <ul>
, <ol>
o <menu>
Los lectores de pantalla requieren que los elementos de lista (
<li>
) estén incluidos dentro de un elemento superior<ul>
, <ol>
o <menu>
para poder leerlos correctamente en voz alta. Más información sobre estructuras de listas adecuadas El documento no usa <meta http-equiv="refresh">
<meta http-equiv="refresh">
Los usuarios no esperan que las páginas se actualicen automáticamente. Si es así, se les volverá a dirigir a la parte superior de la página. Esto puede dar lugar a una experiencia frustrante o confusa. Más información sobre la etiqueta meta de actualización
Select elements have associated label elements.
Form elements without effective labels can create frustrating experiences for screen reader users. Learn more about the
select
element. No hay ningún elemento con un valor de [tabindex]
superior a 0
[tabindex]
superior a 0 Si el valor es superior a 0, significa que el orden de navegación es explícito. Aunque técnicamente es válido, esto suele producir experiencias frustrantes para los usuarios que necesitan usar tecnologías asistenciales. Más información sobre el atributo
tabindex
Las celdas de un elemento <table>
que usan el atributo [headers]
hacen referencia a otras celdas de la misma tabla.
<table>
que usan el atributo [headers]
hacen referencia a otras celdas de la misma tabla. Los lectores de pantalla incluyen funciones para facilitar la navegación por las tablas. Asegurarse de que las celdas
<td>
que usan el atributo [headers]
solo hacen referencia a otras celdas de la misma tabla mejora la experiencia de los usuarios de lectores de pantalla. Más información sobre el atributo headers
Los elementos <th>
y los elementos con atributos [role="columnheader"/"rowheader"]
contienen las celdas de datos que describen.
<th>
y los elementos con atributos [role="columnheader"/"rowheader"]
contienen las celdas de datos que describen. Los lectores de pantalla incluyen funciones para facilitar la navegación por las tablas. Si te aseguras de que los encabezados de las tablas siempre hagan referencia a un conjunto de celdas, puedes mejorar la experiencia de los usuarios de lectores de pantalla. Más información sobre los encabezados de tabla
Los atributos [lang]
tienen un valor válido
[lang]
tienen un valor válido Especificar un idioma BCP 47 en los elementos ayuda a asegurar que los lectores de pantalla pronuncien correctamente las palabras del texto. Consulta cómo utilizar el atributo
lang
Los elementos <video>
contienen un elemento <track>
con el atributo [kind="captions"]
<video>
contienen un elemento <track>
con el atributo [kind="captions"]
Si un vídeo tiene subtítulos, los usuarios sordos o con problemas auditivos pueden acceder a la información con más facilidad. Más información sobre los subtítulos de los vídeos
All heading elements contain content.
A heading with no content or inaccessible text prevent screen reader users from accessing information on the page's structure. Learn more about headings.
Identical links have the same purpose.
Links with the same destination should have the same description, to help users understand the link's purpose and decide whether to follow it. Learn more about identical links.
Document has a main landmark.
One main landmark helps screen reader users navigate a web page. Learn more about landmarks.
Touch targets have sufficient size and spacing.
Touch targets with sufficient size and spacing help users who may have difficulty targeting small controls activate the targets. Learn more about touch targets.
Confianza y seguridad
No usa HTTPS Se ha encontrado 1 solicitud poco segura
Todos los sitios deberían estar protegidos con el protocolo HTTPS, incluso los que no gestionen datos sensibles. Esto incluye evitar el contenido mixto, en el que algunos recursos se cargan mediante HTTP a pesar de que la solicitud inicial se haya servido mediante HTTPS. HTTPS evita que los intrusos manipulen o escuchen de forma pasiva las comunicaciones entre tu aplicación y tus usuarios. Además, es un requisito previo para poder usar HTTP/2 y las APIs de muchas plataformas web nuevas. Más información sobre HTTPS
URL poco segura | Resolución de solicitudes |
---|---|
Google CDN cdn | |
…2.1.1/jquery.min.js (ajax.googleapis.com) | Permitida |
Solicita el permiso de geolocalización al cargar la página
Los usuarios dudan o desconfían de los sitios web que solicitan su ubicación sin contexto. Como alternativa, puedes vincular la solicitud a una acción del usuario. Más información sobre el permiso de geolocalización
Fuente |
---|
localhost Propio |
/dobetterweb/dbw_tester.html:341:24 (localhost) |
/dobetterweb/dbw_tester.html:345:40 (localhost) |
Solicita el permiso de notificación al cargar la página
Los usuarios dudan o desconfían de los sitios que solicitan enviar notificaciones sin contexto. Como alternativa, puedes vincular la solicitud a los gestos de los usuarios. Más información sobre cómo obtener permiso para recibir notificaciones de forma responsable
Fuente |
---|
localhost Propio |
/dobetterweb/dbw_tester.html:351:15 (localhost) |
Asegura que la CSP sea efectiva frente a ataques XSS
Una política de seguridad de contenido (CSP) sólida reduce considerablemente el riesgo de ataques de cross-site scripting (XSS). Consulta cómo usar una CSP para prevenir XSS
Descripción | Directiva | Gravedad |
---|---|---|
No se ha encontrado ninguna CSP en el modo obligatorio | Alta |
Experiencia de usuario
Impide que los usuarios peguen texto en campos de entrada
Impedir que los usuarios peguen datos afecta negativamente a la experiencia de usuario y reduce la seguridad porque bloquea los gestores de contraseñas.Más información sobre los campos de entrada fáciles de usar
Elementos con errores |
---|
body > input <input type="password" onpaste="event.preventDefault();"> |
body > input <input type="password" onpaste="return false;"> |
Muestra imágenes con una relación de aspecto incorrecta
Las dimensiones de las imágenes mostradas deberían mantener su relación de aspecto natural. Más información sobre la relación de aspecto de imagen
URL | Relación de aspecto (mostrada) | Relación de aspecto (real) | |
---|---|---|---|
localhost Propio | |||
body > img <img src="lighthouse-1024x680.jpg?iar1" width="120" height="15"> | /dobetterweb/lighthouse-1024x680.jpg?iar1 (localhost) | 120 x 15
(8.00) | 1024 x 678
(1.51) |
body > img <img src="lighthouse-480x318.jpg?isr1" width="400" height="360" style="position: absolute;"> | /dobetterweb/lighthouse-480x318.jpg?isr1 (localhost) | 400 x 360
(1.11) | 480 x 318
(1.51) |
General
Registra un procesador unload
unload
El evento
unload
no se activa de manera fiable y esperar a que se detecte puede impedir optimizaciones del navegador, como el almacenamiento en caché de páginas completas. Usa los eventos pagehide
o visibilitychange
en su lugar. Más información sobre los procesadores de eventos de descargaFuente |
---|
localhost Propio |
/dobetterweb/dbw_tester.html:396:36 (localhost) |
Usa API obsoletas Se han encontrado 2 advertencias
Las APIs obsoletas se eliminarán del navegador en el futuro. Más información sobre las APIs obsoletas
Desactivación/Advertencia | Fuente |
---|---|
localhost Propio | |
'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead. | /dobetterweb/dbw_tester.js:14:9 (localhost) |
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. | /dobetterweb/dbw_tester.html:370:6 (localhost) |
Se han registrado errores del navegador en la consola
Los errores registrados en la consola indican que hay problemas sin resolver. Pueden proceder de solicitudes fallidas de la red y otros errores del navegador. Más información sobre estos errores en la auditoría de diagnóstico de la consola
Fuente | Descripción |
---|---|
localhost Propio | |
/dobetterweb/dbw_tester.html:56:53 (localhost) | Error: A distinctive error at http://localhost:10200/dobetterweb/dbw_tester.html:56:54 |
/dobetterweb/dbw_tester.html:59:37 (localhost) | Error: An ignored error at http://localhost:10200/dobetterweb/dbw_tester.html:59:38 |
/dobetterweb/dbw_tester.html:484:10 (localhost) | Error! Error! |
/dobetterweb/unknown404.css?delay=200:1:0 (localhost) | Failed to load resource: the server responded with a status of 404 (Not Found) |
/dobetterweb/fcp-delayer.js?delay=5000:1:0 (localhost) | Failed to load resource: the server responded with a status of 404 (Not Found) |
/favicon.ico:1:0 (localhost) | Failed to load resource: the server responded with a status of 404 (Not Found) |
/dobetterweb/unknown404.css?delay=200:1:0 (localhost) | Failed to load resource: the server responded with a status of 404 (Not Found) |
Bibliotecas de JavaScript detectadas
Todas las bibliotecas frontend de JavaScript detectadas en la página. Más información sobre esta auditoría de diagnóstico de detección de bibliotecas de JavaScript
Nombre | Versión |
---|---|
jQuery | 2.1.1 |
WordPress |
Auditorías aprobadas (5) Mostrar Ocultar
Auditorías aprobadas (5)
Mostrar Ocultar
Muestra imágenes con una resolución adecuada
Para maximizar la claridad de la imagen, las dimensiones normales de la imagen deberían ser proporcionales al tamaño de la pantalla y a la proporción de píxeles. Consulta cómo proporcionar imágenes adaptables
La página tiene el DOCTYPE de HTML
Especificar un DOCTYPE evita que el navegador cambie al modo Quirks. Más información sobre la declaración de DOCTYPE
El conjunto de caracteres está definido correctamente
Es necesario declarar una codificación de caracteres. Puedes hacerlo utilizando una etiqueta
<meta>
situada en los primeros 1024 bytes del código HTML o en el encabezado de respuesta HTTP Content-Type. Más información sobre cómo declarar la codificación de caracteres No hay ningún problema en el panel Issues
de las herramientas para desarrolladores de Chrome
Issues
de las herramientas para desarrolladores de Chrome Los problemas registrados en el panel
Issues
de las herramientas para desarrolladores de Chrome indican que hay errores sin resolver. Pueden proceder de solicitudes fallidas de red, controles de seguridad insuficientes y otros errores del navegador. Abre el panel Issues de las herramientas para desarrolladores de Chrome para obtener más información sobre cada error. La página tiene mapas de origen válidos
Los mapas de origen traducen el código minificado al código fuente original. Esto ayuda a los desarrolladores a depurar en producción. Además, Lighthouse puede proporcionar sugerencias adicionales. Plantéate desplegar mapas de origen para disfrutar de estas ventajas. Más información sobre los mapas de origen
No aplicable (1) Mostrar Ocultar
No aplicable (1)
Mostrar Ocultar
Se han precargado las fuentes con font-display: optional
font-display: optional
Precarga las fuentes
optional
para que los usuarios puedan utilizarlas en su primera visita. Más información sobre cómo precargar fuentesEstas comprobaciones aseguran que tu página siga las recomendaciones básicas sobre optimización en buscadores. Hay muchos otros factores adicionales que Lighthouse no valora aquí y que pueden afectar a tu posicionamiento en las búsquedas, como el rendimiento en las Métricas web principales. Consulta más información sobre las Directrices básicas de la Búsqueda de Google.
Prácticas recomendadas de contenido
El documento no tiene una metadescripción
Se pueden incluir metadescripciones en los resultados de búsqueda para resumir brevemente el contenido de la página. Más información sobre la metadescripción
Los elementos de imagen no tienen ningún atributo [alt]
[alt]
Los elementos informativos deberían incluir textos alternativos cortos y descriptivos. Los elementos decorativos se pueden omitir usando un atributo "alt" vacío. Más información sobre el atributo
alt
Elementos con errores |
---|
body > img <img src="lighthouse-480x318.jpg?iar1" width="120" height="15"> |
body > img <img loading="lazy" src="lighthouse-480x318.jpg?iar2" width="120" height="80"> |
body > img <img src="lighthouse-480x318.jpg?isr1" width="360" height="240" style="position: absolute;"> |
body > img <img src="lighthouse-480x318.jpg?isr2" width="120" height="80" style="position: absolute;"> |
body > img <img src="lighthouse-480x318.jpg?isr3" width="360" height="240" style="image-rendering: pixelated; position: absolute;"> |
body > img <img src="http://localhost:10200/dobetterweb/lighthouse-480x318.jpg" srcset="lighthouse-480x318.jpg 2x" width="360" height="240" style="position: absolute;"> |
body > img <img src="lighthouse-rotating.gif" width="811" height="462"> |
body > img <img src="blob:http://localhost:10200/84c78bd5-a720-43b4-93e0-26591a9ff8ee"> |
body > img <img src="filesystem:http://localhost:10200/temporary/empty-0.48387978403091236.png"> |
Rastrear e indexar
Los enlaces no son rastreables
Es posible que los buscadores usen atributos
href
en los enlaces para rastrear sitios web. Asegúrate de que el atributo href
de los elementos de ancla enlace con un destino adecuado para que se puedan descubrir más páginas del sitio. Consulta cómo hacer que los enlaces sean rastreablesEnlace no rastreable |
---|
external link <a target="_blank"> |
body > a <a href="javascript:void(0)" target="_blank"> |
Optimización para móviles
El tamaño de los elementos táctiles no es el adecuado El 0 % de los elementos táctiles tiene un tamaño adecuado
Los elementos interactivos, como los botones y enlaces, deben ser lo suficientemente grandes (48x48 px) o tener suficiente espacio alrededor para poder tocarlos con facilidad sin superponerse con otros elementos. Más información sobre los objetivos táctiles
Elemento táctil | Tamaño | Elementos superpuestos |
---|---|---|
Do something <button class="small-button"> | 200x21 | Do something else <button class="small-button"> |
Elementos adicionales que se deben comprobar manualmente (1) Mostrar Ocultar
Elementos adicionales que se deben comprobar manualmente (1)
Mostrar Ocultar
Los datos estructurados son válidos
Ejecuta la Herramienta de prueba de datos estructurados y la herramienta Structured Data Linter para validar los datos estructurados. Más información sobre los datos estructurados
Auditorías aprobadas (8) Mostrar Ocultar
Auditorías aprobadas (8)
Mostrar Ocultar
Contiene una etiqueta <meta name="viewport">
con width
o initial-scale
<meta name="viewport">
con width
o initial-scale
El
<meta name="viewport">
no solo optimiza tu aplicación para los tamaños de pantalla de los dispositivos móviles, sino que también evita el retraso de 300 milisegundos de las entradas del usuario. Más información sobre cómo usar la etiqueta meta de viewportTBT El documento tiene un elemento <title>
<title>
Los títulos proporcionan una idea general sobre la página a los usuarios de lectores de pantalla. Además, los usuarios de buscadores se basan principalmente en los títulos para determinar si una página es relevante para su búsqueda o no. Más información sobre los títulos de documentos
El código de estado HTTP de la página es válido
Es posible que las páginas con códigos de estado HTTP no válidos no estén bien indexadas. Más información sobre los códigos de estado HTTP
Los enlaces tienen texto descriptivo
El texto descriptivo de los enlaces ayuda a los buscadores a entender tu contenido. Consulta cómo hacer que los enlaces sean más accesibles
No se ha bloqueado la indexación de la página
Los buscadores no pueden incluir tus páginas en los resultados de búsqueda si no tienen permiso para rastrearlas. Más información sobre las directivas del rastreador
El documento tiene un atributo hreflang
válido
hreflang
válido Los enlaces "hreflang" indican a los buscadores qué versiones de las páginas deben incluir en los resultados de búsqueda de una zona o un idioma determinados. Más información sobre
hreflang
El documento usa tamaños de fuente legibles El 100 % del texto es legible
Las fuentes con un tamaño inferior a 12 px son demasiado pequeñas y poco legibles, lo que obliga a los visitantes que acceden con dispositivos móviles a pellizcar la pantalla para ampliarla y poder leer el texto. Intenta que más del 60 % del texto de la página tenga un tamaño igual o superior a 12 px. Más información sobre los tamaños de fuente legibles
Fuente | Selector | % de texto de página | Tamaño de fuente |
---|---|---|---|
Texto legible | 100.00% | ≥ 12px |
El documento no usa complementos
Los buscadores no pueden indexar el contenido de los complementos, y muchos dispositivos limitan el uso de complementos o no los admiten. Más información sobre cómo evitar complementos
No aplicable (2) Mostrar Ocultar
No aplicable (2)
Mostrar Ocultar
robots.txt es válido
Si el formato del archivo robots.txt no es correcto, es posible que los rastreadores no puedan interpretar cómo quieres que se rastree o indexe tu sitio web. Más información sobre robots.txt
El documento tiene un atributo rel=canonical
válido
rel=canonical
válido Los enlaces canónicos sugieren qué URL se debe mostrar en los resultados de búsqueda. Más información sobre los enlaces canónicos
Estas comprobaciones validan los aspectos de las aplicaciones web progresivas. Consulta cómo crear una buena aplicación web progresiva.
Instalabilidad
El archivo de manifiesto de la aplicación web o el service worker no cumplen los requisitos de instalación 1 motivo
Service worker es la tecnología que te permite usar en tu aplicación muchas de las funciones de las aplicaciones web progresivas, como el modo Sin conexión, poder añadirlas a la pantalla de inicio y las notificaciones push. Si el service worker y el archivo de manifiesto se implementan de forma adecuada, los navegadores pueden preguntar a los usuarios de forma proactiva si quieren añadir tu aplicación a su pantalla de inicio, lo que puede incrementar el número de interacciones. Consulta más información sobre los requisitos de instalación del archivo de manifiesto.
Motivo del error |
---|
La página no tiene ninguna URL del archivo de manifiesto <link> |
Optimizado para PWA
No se ha configurado para una pantalla de inicio personalizadaFailures: No manifest was fetched.
Failures: No manifest was fetched.
Una pantalla de inicio personalizada asegura una experiencia de calidad cuando los usuarios ejecuten tu aplicación desde sus pantallas de inicio. Más información sobre las pantallas de inicio
No establece un color personalizado en la barra de direcciones.Failures: No manifest was fetched,
No `<meta name="theme-color">` tag found.
Failures: No manifest was fetched,
No `<meta name="theme-color">` tag found.
El color de la barra de direcciones del navegador puede adaptarse a tu sitio. Más información sobre cómo personalizar los temas de la barra de direcciones
El contenido tiene el tamaño adecuado para el viewport
Si el ancho del contenido de tu aplicación no coincide con el ancho del viewport, es posible que no esté optimizada para pantallas de dispositivos móviles. Consulta cómo definir el tamaño del contenido en el viewport
Contiene una etiqueta <meta name="viewport">
con width
o initial-scale
<meta name="viewport">
con width
o initial-scale
El
<meta name="viewport">
no solo optimiza tu aplicación para los tamaños de pantalla de los dispositivos móviles, sino que también evita el retraso de 300 milisegundos de las entradas del usuario. Más información sobre cómo usar la etiqueta meta de viewportTBT El archivo de manifiesto no tiene un icono adaptableNo manifest was fetched
No manifest was fetched
Los iconos enmascarables permiten que la imagen ocupe toda su figura sin que se produzca un efecto panorámico al instalar la aplicación en un dispositivo. Más información sobre los iconos de archivo de manifiesto enmascarables
Elementos adicionales que se deben comprobar manualmente (3) Mostrar Ocultar
Elementos adicionales que se deben comprobar manualmente (3)
Mostrar Ocultar
El sitio web funciona en diferentes navegadores
Para llegar al mayor número de usuarios, los sitios deben funcionar en los navegadores más habituales. Más información sobre la compatibilidad entre navegadores
No parece que se bloqueen las transiciones de la página en la red
Las transiciones deberían ser rápidas al tocar en diferentes partes de la aplicación, incluso si la red es lenta. Esta experiencia es fundamental para la percepción del usuario sobre el funcionamiento de la aplicación. Más información sobre las transiciones de páginas
Cada página tiene una URL
Asegúrate de que cada página permita generar un enlace profundo en forma de URL, y de que dichas URLs se utilicen solo para compartir las páginas fácilmente en las redes sociales. Más información sobre cómo proporcionar enlaces profundos