Page 3: CSS & Font Heavy Test
Test Focus: This page loads 3 CSS files (~115KB) and 2 web fonts (~100KB) to test CSS parsing and font loading behavior differences between Safari and Chrome.
Capturing performance metrics
Font Display Test
This text uses a custom web font (Regular weight). Safari and Chrome may load fonts differently.
This text uses a custom web font (Bold weight). Font loading can block rendering.
CSS Styling Test
Utility Box 1 - Heavy CSS classes are applied to these elements
Utility Box 2 - CSS parsing time can differ between browsers
Utility Box 3 - Large stylesheets may impact initial render time
Navigation
About This Test
This page tests CSS parsing performance and web font loading. Safari and Chrome have different font loading strategies, which can affect perceived performance and render blocking.
What to Look For
- DOM Interactive Time: May be affected by CSS parsing
- DOM Complete Time: Fonts should be loaded by this point
- FOUT/FOIT: Flash of Unstyled Text or Flash of Invisible Text
- Resource Timing: Check console for CSS and font file load times
- font-display Strategy: Using 'swap' to prevent blocking
Browser Differences
Safari and Chrome have historically handled font loading differently. Chrome may show text immediately with fallback fonts (FOUT), while Safari might hide text until fonts load (FOIT), depending on the font-display property.