Font Loading & Performance Audit FAQs

Question 1

Do I need a specific browser to use this skill?

Accepted Answer

Yes, it requires a Chromium-based browser connected via the Playwright MCP server to access the Chrome DevTools Protocol (CDP) for CSS and Network domain inspection.

Question 2

Does it check for font compression efficiency?

Accepted Answer

Yes, the audit flags inefficient formats like TTF or WOFF and recommends moving to WOFF2, while also calculating potential savings from font subsetting.

Question 3

How does this skill detect FOIT or FOUT?

Accepted Answer

It captures a series of timed screenshots during the page load process and compares text rendering states to identify instances of invisible text or system font flashes before custom fonts load.

Question 4

Does it validate font preload link syntax?

Accepted Answer

Yes, it specifically checks for the 'crossorigin' attribute in font preload tags, which is a common requirement that, if missing, causes the browser to ignore the preload.

Question 5

Can it help improve Core Web Vitals?

Accepted Answer

Absolutely; by identifying incorrect font-display strategies and missing preloads, it helps reduce Cumulative Layout Shift (CLS) and improve Largest Contentful Paint (LCP) times.

Font Loading & Performance Audit

Key Features

Use Cases

Font Loading & Performance Audit

Key Features

Use Cases