Middle

Kako izbeći problem 'bljeska neuređenog sadržaja' (FOUC)?

sobes.tech АИ

Одговор од АИ

Najefikasniji načini:

Sinkrono učitavanje CSS-a: Postavite <link rel="stylesheet"> u <head> dokumenta kako bi pretraživač učitao i primenio stilove pre renderovanja sadržaja.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Moj App</title>
  <link rel="stylesheet" href="/styles/main.css">
  <!-- Ostali tagovi u head -->
</head>

Inline kritične stilove: Umetnite stilove potrebne za prikaz vidljivog dela stranice ("Above the fold") direktno u <head> pomoću <style>. Ovo ubrzava inicijalno renderovanje. Ostale stilove možete učitati asinhrono.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Moj App</title>
  <style>
    /* Kritični stilovi ovde */
    body { margin: 0; padding: 0; }
    h1 { color: blue; }
  </style>
  <link rel="stylesheet" href="/styles/main.css">
  <!-- Ostali tagovi u head -->
</head>

Korišćenje font-display: swap ili sličnih svojstava za fontove: Za prilagođene fontove koji mogu izazvati FOUT (Flash of Unstyled Text), koristite font-display u pravilu @font-face u CSS-u. swap omogućava odmah prikaz teksta sistemskim fontom i zamenu sa prilagođenim nakon učitavanja.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('my-custom-font.woff2') format('woff2');
  font-display: swap; /* Ili fallback, opciono, block */
}
```
Primena lakih šablona (u server-side renderingu): Ako koristite SSR, možete u HTML-u ugraditi minimalni skup stilova potrebnih za prikaz skeleta stranice.
Minimizacija i objedinjavanje CSS fajlova: Smanjenje broja HTTP zahteva i veličine CSS fajlova ubrzava njihovo učitavanje.
Korišćenje alata za izgradnju: Webpack, Parcel i drugi mogu automatski ugraditi kritične stilove i optimizovati CSS.

Претходно Следеће