A felhasználó fehér képernyőt lát a stílusok betöltése előtt. Hogyan oldja meg a problémát?

A stíluslapok betöltése előtt megjelenő fehér képernyő általában azért fordul elő, mert a böngésző először betölti a HTML-t, de a stílusok még nem kerültek alkalmazásra. A probléma megoldásához:

• Használjon kritikus CSS-t — közvetlenül az HTML-be ágyazza be a minimális CSS-t, amely szükséges az első képernyő megjelenítéséhez.
• Minimalizálja és egyesítse a CSS-fájlokat, hogy csökkentse a kérések számát.
• Használja a rel="preload" vagy rel="prefetch" attribútumokat a stílusok betöltésének felgyorsítására.
• Halassza el a nem fontos stílusok betöltését, hogy ne blokkolja a renderelést.

Kritikus CSS beágyazásának példája:

<style>
  /* minimális stílusok az első képernyőhöz */
  body { margin: 0; font-family: Arial; }
  .header { background: #333; color: white; padding: 10px; }
</style>