Font loading causes Cumulative Layout Shift (CLS)
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Aptitud para principiantes
- 38/100
- Tipo de issue
- Error
- Claridad
- Necesita aclaración
- Estado de actividad
- Estancado
- Área
- documentation, performance
Línea de trabajo
Comienza con la URL /kratos/bring-your-own-ui/custom-ui-advanced-integration en PageSpeed Insights y, a continuación, inspecciona los causantes de los desplazamientos de diseño indicados en la pestaña Performance de Chrome DevTools. Se considera completado cuando la carga de la fuente personalizada ya no provoca el reflow indicado del texto visible y mejora el CLS de la página.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
Preflight checklist
- I could not find a solution in the existing issues, docs, nor discussions.
- I agree to follow this project's Code of Conduct.
- I have read and am following this repository's Contribution Guidelines.
- I have joined the Ory Community Slack.
- I am signed up to the Ory Security Patch Newsletter.
Ory Network Project
No response
Describe the bug
The docs site experiences layout shift when custom fonts load because the fallback fonts (sans-serif, monospace) have different metrics than our web fonts (Inter, JetBrains Mono). This causes visible "jank" as text reflows when fonts swap in.
This seems to negatively impact Core Web Vitals CLS score.
Reproducing the bug
PageSpeed Insights
- Go to PageSpeed Insights - /kratos/bring-your-own-ui/custom-ui-advanced-integration
- Enter the docs URL
- Click on Desktop tab
- Scroll down and click Layout shift culprits to expand
Chrome DevTools Performance Tab
Relevant log output
Relevant configuration
Version
1.0.0
On which operating system are you observing this issue?
None
In which environment are you deploying?
None
Additional Context
No response
- Lenguaje dominante
- TypeScript
- Estrellas
- 161
- Forks
- 1.9k
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Preparar el entorno
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de ory/docs
-
bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
-
good first issue help wanted upstream
Dificultad 1/5 1-3 horas Aptitud para principiantes 72/100
-
bug
Dificultad 1/5 Menos de una hora Aptitud para principiantes 78/100
-
good first issue help wanted upstream
Dificultad 1/5 1-3 horas Aptitud para principiantes 72/100
-
Shared kratos pages can only belong to one sidebar — OEL readers lose navigation contextQuizá libre de nuevo @hperl la tomó hace 80 días y no hay ningún pull request abierto. Abierto
Issues similares
-
Dificultad 1/5 Menos de una hora Aptitud para principiantes 78/100
lichess-org/api#678 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 84/100
PostHog/posthog.com#20628 ·
Los mantenedores suelen responder en 1 día
-
bug status:Needs Triage
Dificultad 1/5 Menos de una hora Aptitud para principiantes 92/100
jupyterlab/jupyterlab#19964 ·
Los mantenedores suelen responder en 1 día
-
bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
agentscope-ai/QwenPaw#8064 · 1 comentario ·
Los mantenedores suelen responder en 1 día
-
area: notebooks-jupyter bug theme: new notebook frontend
Dificultad 2/5 1-3 horas Aptitud para principiantes 88/100
posit-dev/positron#16347 · 1 comentario ·
Los mantenedores suelen responder en 1 día