search

detfaellesdesignsystem / dkfds-components

Styling og komponenter
Other
43 stars 13 forks source link

Langsom indlæsning giver blink #132

Closed stil-sds closed 2 years ago

stil-sds commented 3 years ago

Når sider lavet med FDS og inkl, designsystem.dk indlæses, ser det ud til at siden gentegnes efter omkring 500-1000ms. Det giver et blink af ca 1000ms varighed. På designsystem.dk betyder det, at headerområdet indlæses efter resten, på andre løsninger kan det være hele siden eller fx betyde at fonte indlæses igen.

Vi er ved at afsøge andre performanceudfordringer, men denne dukker op på tværs af løsninger.

Sådan genskabes fejlen (Steps to reproduce the behavior):

  1. Desktop, Chrome Version 89.0.4389.72, tryk F12, vælg Performance, "Start profiling and reload".
  2. Tjek rapporten og se fx vedhæftede skærmskud.

image

Min teori er, at der indlæses for meget js/css og et sted derimellem affødes der en række layout shifts som altså er gentegning af siden. Men konsekvensen er så voldsom, at jeg tror, det er noget js, mere end rent layout.

stil-sds commented 3 years ago

Update: Da vi lavede den oprindelige udgave af FDS (piloten) valgte vi at anvende font-display: swap for at kompensere for indlæsningen af IBM Plex. Det kan godt være synderen, der afføder blinket. Jeg tester netop nu med font-display: fallback istedet for at se, om det er mere effektivt. Man kunne overveje :optional, men med den risiko, at IBM Plex ikke indlæses.

stil-sds commented 3 years ago

Update 2: Min umiddelbare anbefaling er nu:

  1. Ændre font-display: swap til font-display: fallback
  2. Fjerne alle ikke-ordinære font-udgaver fra styleguide_xxxxx.css, så der ikke er 90+ font-kald i css'en. Det kræver en vurdering af behov og anvendelse. En løsning kunne være at kalde "kerne" typografi og lade udviklerne kalde særtyper som kyrillisk ved behov i et ekstra css.
  3. Overordnet set er css-filen efterhånden meget stor med en del overskrivninger og krydsreferencer. Det bør nok overvejes at forenkle filen fx ved at gøre den mere modulær.
detfaellesdesignsystem commented 2 years ago

Hej @stil-sds ,

Fik vi afklaret denne?

Det er pt. kun relevante fonte der bliver hentet ind nu. Og hvis jeg husker rigtigt, så kom vi frem til at I kunne bruge sass filerne, så I derved kunne nøjes med at hente det ind I havde brug for og derved ende med en mindre css fil i sidste ende.

Med venlig hilsen Kristina Jensen Det Fælles designsystem

stil-sds commented 2 years ago

Hej Kristina,

Vi har opdateret vores system siden og jeg har ikke hørt mere til problematikken, så lad os lukke issuet.

Bh John