Prioritize Critical CSS
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.