Prioritize critical CSS (prioritize_critical_css)

Uses a JavaScript beacon to collect critical CSS data from real user visits. The beacon endpoint must be accessible for data collection to work. Can cut perceived load time, but test it against your own page layouts first. In v1.15.0+r18 and later, the filter honors a restrictive Content-Security-Policy when HonorCsp is enabled: on pages whose policy disallows inline styles or scripts, it passes the page through unchanged instead of injecting content the policy would block. For the trade-offs behind critical-CSS extraction, see how critical CSS is identified.

If you prefer a smaller inline block and accept that content below the first screen may be partly styled until the full stylesheet arrives, turn on CriticalCssAboveTheFoldOnly (off by default): ModPagespeedCriticalCssAboveTheFoldOnly on on Apache, pagespeed CriticalCssAboveTheFoldOnly on; on nginx, pagespeed CriticalCssAboveTheFoldOnly on on IIS.

What to expect. After you deploy a changed stylesheet, the filter leaves that page’s stylesheets blocking for a few page views, until visitors’ browsers have reported on the new rules. After a page’s markup changes without its stylesheets changing, rules that newly apply can be late until a visitor’s browser reports on the new markup; the module asks for a report again after about a minute by default (twelve times BeaconReinstrumentTimeSec), and the wait is longer when the visitor who is asked does not report. The browser reports which rules the page uses once the page has loaded, so content that a script removes, hides or gives other class names before then can be painted without the rules that applied only to its earlier state, until the full stylesheet arrives. Content a script adds while the page is loading takes its rules from the full stylesheet. The full stylesheet is turned on by a small inline script: if something in front of your server delays inline scripts, the full styles arrive when that script runs. For pages whose markup differs from visitor to visitor under one URL, leave the filter off (DisableFilters prioritize_critical_css for that location).

A stylesheet keeps its ordinary blocking <link> when it uses an @import the server cannot merge into it, when nearly all of it would be inline anyway, or when its <link> carries an event-handler attribute, a title or disabled. A page with more matching selectors than one report can carry keeps its blocking stylesheets until a complete report arrives (see the beacon_overflow_count statistic). The filter needs the beacon and therefore does nothing on Envoy.