标签：#webp

In web development, every millisecond on the critical path matters. Typography is part of your visual identity, yet a single self-hosted family can add hundreds of kilobytes before the browser paints the hero line clients actually see. That cost often shows up as slower First Contentful Paint (FCP) and a worse Largest Contentful Paint (LCP) when the LCP element is a headline set in a custom face. Font subsetting is the practical fix: ship only the characters (glyphs) each page or component needs instead of entire typefaces built for every language and symbol you will never render. What font subsetting is A typical desktop font file contains thousands of glyphs: Latin extended, Cyrillic, ligatures, numerals, punctuation, and symbols you may never use on a marketing site. When you @font-face that file or pull it from a CDN, the browser still has to download and parse the whole package unless you split it. Subsetting creates a smaller font file that includes a defined subset of Unicode code points. Examples: A display font used only on one H1 might need fewer than 40 characters. A Latin-only blog body font does not need CJK tables on every article. UI labels in English can omit unused weights and scripts. The browser downloads less data, spends less time decoding, and can apply the face sooner. You keep the look; you drop the dead weight. When font subsetting improves web font performance and LCP Subsetting pays off fastest in these cases: Situation Why subsetting helps Display or hero typography Few unique characters, high visual impact, often on the LCP text node Single-language sites Remove unused scripts and diacritic ranges you do not publish Icon or logo fonts misused as full fonts Replace with SVG where possible; subset if you must keep a font icon set Multiple weights loaded globally Subset per weight, or load weights only on routes that need them It is lower priority when you already use a system font stack for body copy and only load one small variable font w

An account manager forwarded us a Search Console screenshot at 4:47 p.m. on a Friday. LCP on the homepage had been in the red for eleven days. Engineering had not been in the thread because nobody was assigned to watch the numbers until a sponsor noticed. That is reactive performance monitoring in practice: fast tools, slow humans, and a calendar that only opens when someone else raises the alarm. Proactive monitoring is the opposite shape. Scheduled lab tests run whether or not anyone remembered to open PageSpeed Insights. Performance budgets turn history into rules. Alerts fire when those rules break, with enough context to triage and enough restraint that people still read them. The word “smart” in product copy usually means the second part: alerts that match how teams actually work, not a louder siren. This post is for agency leads who already automate some tests but still learn about regressions from client inboxes. We walk through what reactive looks like, what proactive requires, and how to wire alerts so they change behaviour instead of training everyone to mute the integration. What reactive performance monitoring looks like on agency teams Reactive does not mean “no tools.” Most agencies we speak with have PageSpeed Insights bookmarks, a monthly spreadsheet, and a standing item on the retainer review slide. Reactive means the signal arrives after the business event you wanted to prevent. Common patterns: Spot checks after deploy. Someone runs PSI on staging, ships, and assumes production matches until a complaint arrives. Quarterly or monthly report pulls. CrUX and Lighthouse exports go into a deck. Useful for storytelling; too slow to catch a plugin update that moved INP on Tuesday. Client-led discovery. The sponsor pastes a screenshot, asks “is this new?”, and the team scrambles to reproduce on a laptop that may not match the lab conditions you use in production monitoring. Alerting without policy. Webhooks fire on every metric twitch. By week three the