Loading the tool…
How to use it
Enter the address of a page and choose the screen sizes. The tool loads the page and its stylesheets, renders it without scripts, and keeps only the rules that style what shows before scrolling. Check the preview, download critical.css, then follow the snippet under the result: inline the critical CSS in the <head> and load the full stylesheets asynchronously.
Questions
What is critical CSS?
The small part of your CSS needed to draw the first screen of a page. Inlined in the head, it lets the browser paint straight away while the full stylesheets load in the background, instead of waiting for every stylesheet first.
How do I use it in Magento 2?
Save the file as web/css/critical.css in your theme, then set Stores › Configuration › Advanced › Developer › CSS Settings › Use CSS critical path to Yes (the Developer section shows in developer mode). Magento inlines the file and loads the other stylesheets without blocking. Generate it from the home page, a category page and a product page, and combine them if they differ.
How do I use it in WordPress?
Optimisation plugins such as Autoptimize and WP Rocket have a field for critical CSS, used when they load the rest of the CSS asynchronously. Paste the result there.
Why does part of the page look unstyled in the preview?
Only the first screen is meant to be styled; the rest arrives with the full stylesheets a moment later. Anything that appears only after scripts run, such as sliders, menus opened by JavaScript or cookie banners, is not seen by the tool: add its selectors under Always include these selectors.
Does it work on every site?
It works on pages whose content is in the HTML, which covers most Magento, WordPress and Shopify stores. Sites built entirely in JavaScript, and pages behind a login, cannot be read this way. There is a fair-use limit on requests per hour.