Performance Table of Contents

• Prevent Flash of Unstyled Content (FOUC)
• Prevent Flash of Unstyled Text (FOUT)

Unstyled content when opening an application or website creates a bad first impression. To prevent this, the Porsche Design System offers various partials as part of the @porsche-design-system/components-{js|angular|react|vue} package to ensure all necessary Porsche Design System fonts and components are fully loaded. Read further on how to prevent Flash of Unstyled Content (FOUC) and Flash of Unstyled Text (FOUT) to boost your application. Prevent Flash of Unstyled Content (FOUC)# Initialize Porsche Design System early Preload component chunks Inject initial styles Prefetch icon svg files Prevent Flash of Unstyled Text (FOUT)# Inject Font Face Stylesheet Preload specific font files