Web Font Performance Badge

WHAT IT DOES

Web Font Performance Badge helps you understand and optimize font loading on any webpage. The script analyzes all loaded fonts, tracks loading times, and calculates total font size, displaying a performance badge with a color-coded score (Excellent, Good, Fair, or Poor). A font loading waterfall shows timing breakdown for each font, making it easy to identify render-blocking fonts. The script detects FOIT (Flash of Invisible Text) and FOUT (Flash of Unstyled Text) issues and alerts you to potential problems. Font file sizes and formats (WOFF2, WOFF, TTF, etc.) are displayed for each font. Duplicate font loads and missing preload opportunities are highlighted. Optimization recommendations are provided for preload, fallback fonts, and font-display strategies. The script tracks font loading events and shows load failures, comparing performance against best practices.

WHERE IT RUNS

This script runs on every website (matching all URLs), analyzing font performance across the entire web. It works on any page that loads web fonts—design systems, component libraries, content sites, and more. The script automatically adapts to each page and handles both static and dynamically loaded fonts.

HOW TO USE

After installing through the BotGentz extension, the script automatically analyzes font performance on any page. Use the configuration panel to customize your experience: toggle the performance badge on or off, show or hide the font loading waterfall, show or hide optimization recommendations, show or hide size breakdown, enable or disable color-coded scoring, and enable or disable auto-analysis. The panel displays real-time statistics including font count, total size, total load time, and performance score. Use the "Analyze Fonts" button to manually rescan, or "Export Report" to copy a detailed font performance report to your clipboard.

RESOURCE TIMING API WITH FONT LOADING ANALYSIS AND PERFORMANCE SCORING

This script implements a font performance analysis engine using the Performance API to track font resource loading. The engine intercepts resource timing entries, filtering for font files (.woff2, .woff, .ttf, .otf, .eot, .svg) and extracting loading times, transfer sizes, and start times. The document.fonts API is used to detect loaded font faces and their status. The scoring algorithm evaluates total load time (>1000ms penalized, >2000ms further penalized), total size (>500KB penalized, >1MB further penalized), render-blocking fonts, FOIT/FOUT issues, duplicate loads, and best practice adoption (preload usage, WOFF2 format, font-display). The waterfall visualization uses CSS bars with color coding for blocking versus non-blocking fonts. Recommendations are generated based on detected issues with actionable optimization suggestions.

THE PANEL

The configuration panel is fully draggable and remembers its position per-site using GM_setValue. It snaps to screen edges when dragged near them, collapses to a compact bubble when minimized, and supports Escape key for quick collapse. All settings—including badge visibility, waterfall display, recommendations, size breakdown, color scoring, and auto-analysis—are persisted across sessions.

PLEASE NOTE

This script requires the free BotGentz extension to run. The script runs on all websites and reads font loading data from the Performance API. It does not capture, store, or transmit any personal information. All analysis occurs locally in your browser using GM_setValue and never transmitted to external servers. The font performance score is based on general best practices and may not apply to every use case. Recommendations are suggestions, not requirements. This tool is provided for development and informational purposes only.