This filter first instruments the page to discover which CSS selectors will be used by the browser. It uses instrumentation results to select the critical CSS rules from the page and inlines those in <style> tags at the top of the document. It lazily loads the original CSS <style> and <link> tags after the page has loaded.

When you load this page, you may see one of several things:

• An unoptimized, uninstrumented page if pagespeed is still loading and processing the CSS resources on the page.
• An unoptimized page with instrumentation code at the bottom, once pagespeed has obtained all the CSS resources the page contains.
• A page with the critical CSS in <style> tags at the top of the document. The original CSS will be in a <noscript> block at the bottom of the page, followed by a script that makes them visible to the browser. This page might also contain additional instrumentation code to ensure that the critical CSS is still valid.

If you see a flash of unstyled content as the page is loading, it is possible the beacon results that pagespeed collected did not include rules that apply to your browser.