Sobes.tech
Middle+

Vartotojas mato baltą ekraną prieš stilių įkėlimą. Kaip išspręsti problemą?

sobes.tech AI

Atsakymas iš AI

Baltas ekranas prieš stilių įkėlimą dažniausiai atsiranda dėl to, kad naršyklė pirmiausia įkelia HTML, tačiau stiliai dar nėra taikomi. Norint išspręsti problemą:

  • Naudokite kritinį CSS — įterpkite minimalų CSS, reikalingą pirmojo ekrano rodymui, tiesiogiai į HTML.
  • Minimalizuokite ir sujunkite CSS failus, kad sumažintumėte užklausų skaičių.
  • Naudokite rel="preload" arba rel="prefetch" atributus, kad pagreitintumėte stilių įkėlimą.
  • Atidėkite nereikšmingų stilių įkėlimą, kad neblokiruotumėte atvaizdavimo proceso.

Kritinio CSS įterpimo pavyzdys:

<style>
  /* minimalūs stiliai pirmam ekranui */
  body { margin: 0; font-family: Arial; }
  .header { background: #333; color: white; padding: 10px; }
</style>