WordPress Plugins for Lazy Loading and Critical CSS
Largest Contentful Paint is usually blamed on file size, and it is usually a render-blocking problem. The browser cannot paint anything until it has downloaded and parsed all the CSS in the head, so a 90KB stylesheet fetched from a slow connection delays your entire page even when the image it eventually paints is perfectly optimised.
Critical CSS is the specific fix and almost nobody implements it, partly because generating it properly is genuinely hard. Meanwhile lazy loading, which is supposed to help, actively damages LCP when applied to the wrong image. This article covers both, in the order the browser encounters them.
Verified August 2026. Prices confirmed against vendor pages.
What blocks the first render, in order
First, the HTML must arrive. This is what page caching fixes, and if your server takes a second to respond, nothing downstream can rescue it.
Second, CSS in the head must download and parse. Stylesheets are render-blocking by design: the browser refuses to paint content it might have to restyle. Every stylesheet in the head, including ones from plugins used nowhere on this page, must arrive before anything appears.
Third, fonts. A font file requested from a third-party domain adds a DNS lookup, a connection and a download before text can render in its intended face. Depending on configuration the text is either invisible until then or renders in a fallback and shifts when the real font arrives, which trades an LCP problem for a layout shift.
Fourth, the LCP element itself, usually a hero image or a heading. If that image is lazy loaded, the browser deliberately delays fetching it until it knows it is in view, which on the element defining your LCP is precisely the wrong behaviour and is one of the most common self-inflicted performance problems in WordPress.
The 6 options compared
1. WP Rocket
$59 a year for one site, $119 for three, $299 for fifty, and the most reliable route to critical CSS without doing it yourself. It generates the critical styles per template and loads the rest asynchronously.
That per-template generation is the hard part it handles. Critical CSS is the subset of styles needed to render what is visible before scrolling, which differs between your homepage, a post and a product page, so a single generated file either misses styles somewhere or includes far too much. Its handling of lazy loading is also correct by default, excluding above-the-fold images rather than applying the behaviour blindly. Paired with its JavaScript delay features this makes it the safest single purchase for LCP, and the reason to choose it over cheaper components is that the defaults do not require your attention.
- Price: $59/yr for 1 site, $119 for 3, $299 for 50
- Critical CSS: Generated per template, automatically
- Best for: Getting LCP right without configuring it
- Watch out for: Regenerate after theme or template changes
2. LiteSpeed Cache
Free, and it includes critical CSS generation alongside everything else, which makes it the best value in this comparison by a distance if your host runs LiteSpeed.
Critical CSS generation is computationally expensive, which is why paid plugins charge for it and why LiteSpeed’s implementation uses its own remote service to do the work. You get per-page critical CSS, asynchronous loading of the remainder, font handling and image lazy loading with above-the-fold exclusions, at no cost. The trade is the usual one for this plugin: a great many settings, several of which can break a theme if enabled all at once. Turn on critical CSS by itself, confirm your templates still look right, then move to the next option.
- Price: Free
- Critical CSS: Yes, generated via their service
- Best for: LiteSpeed hosting, at zero cost
- Watch out for: Enable one optimisation at a time
3. FlyingPress
Starter $59 a year for one site, Pro $109 for three, Business $229 for 25 and Unlimited $279, with a 14-day trial giving full access before any charge.
Its design target is what users experience rather than what a lab test rewards, which shows in its render-path handling: critical CSS, font optimisation with preloading, and lazy loading that excludes above-the-fold content by default. The $279 unlimited tier is the best price here for anyone with several sites. Its defaults are more aggressive than WP Rocket’s, which produces better numbers and a higher chance of a broken layout, so the trial exists for a reason. Test on a site with a real LCP problem and compare field data rather than lab scores.
- Price: $59/yr for 1 site; $279 for unlimited
- Critical CSS: Yes, with aggressive font and image handling
- Best for: Agencies and people who will verify the output
- Watch out for: Aggressive defaults; use the trial
4. Autoptimize
Free, and the long-standing way to get asset optimisation without a licence: CSS and JavaScript aggregation and minification, deferred style loading, and support for inlining critical CSS.
The distinction worth understanding is that it will use critical CSS but does not generate it as comprehensively as the paid options, so you either supply it from an external generator or accept a simpler approach. For a site with one or two templates that is entirely workable and free; for a site with a dozen distinct layouts it becomes maintenance. Its CSS aggregation is also the setting most likely to disturb a page builder layout, so enable it, check every template, and be prepared to exclude specific stylesheets. Paired with a simple caching plugin it forms a capable free stack.
- Price: Free
- Critical CSS: Supports inlining; generation is on you
- Best for: Free stacks on sites with few templates
- Watch out for: CSS aggregation can break page builders
5. Perfmatters
$29.95 a year for one site, $59.95 for three, $124.95 for unlimited sites, and the tool that fixes the lazy loading mistake directly.
It provides lazy loading with an explicit exclusion for above-the-fold images, plus a setting to preload the LCP image so the browser fetches it immediately rather than discovering it late. Those two controls address the most common LCP regression in WordPress, which is a hero image being lazy loaded by a well-meaning plugin. It also removes unused CSS and JavaScript per page, which shrinks the render-blocking payload at source rather than deferring it. At $124.95 for unlimited sites this is the cheapest way to apply correct lazy loading behaviour across a portfolio.
- Price: $29.95/yr for 1 site; $124.95 for unlimited
- Critical CSS: Removes unused CSS rather than generating critical
- Best for: Fixing lazy loading and preloading the LCP image
- Watch out for: Removing CSS needs checking on every template
6. Excluding the hero image and self-hosting fonts
Free, takes twenty minutes, and on many sites produces a larger LCP improvement than any plugin in this comparison.
Two changes. First, find your LCP element in PageSpeed Insights, and if it is an image, make sure it is not lazy loaded and ideally is preloaded. WordPress applies lazy loading by default and its heuristics are imperfect on custom headers and page builder layouts, so a hero image being deferred is common and entirely invisible unless you check. Second, self-host your fonts. Loading them from a third-party domain adds a DNS lookup and a connection before text can render, and it transmits visitor IP addresses before consent, which has drawn enforcement in several jurisdictions. Self-hosting fixes a speed problem and a privacy problem in one change, permanently, for nothing.
- Price: Free
- Critical CSS: Not applicable; this is the render path
- Best for: Every site, before buying anything
- Watch out for: Check the LCP element per template, not once
Comparison table
| Option | Price | Critical CSS | LCP image handling | Fonts |
|---|---|---|---|---|
| WP Rocket | $59 to $299/yr | Yes, per template | Correct by default | Preload support |
| LiteSpeed Cache | Free | Yes, via their service | Exclusions available | Yes |
| FlyingPress | $59 to $279/yr | Yes | Excluded by default | Optimised and preloaded |
| Autoptimize | Free | Inlines, does not generate | Basic | Basic |
| Perfmatters | $29.95 to $124.95/yr | Removes unused CSS | Exclusion and preload | Local font hosting |
| Manual fixes | Free | No | You control it | Self-hosted |
Lazy loading done badly
Lazy loading defers images until they are near the viewport, which saves bandwidth and improves load time for everything below the fold. Applied to what is already visible, it does the opposite, and the failure is silent.
- Identify your LCP element. PageSpeed Insights names it explicitly in the diagnostics. On most WordPress sites it is a hero image, a featured image, or a large heading.
- Check whether it is lazy loaded. View source and look for a loading attribute set to lazy on that image. If it is there, that is your LCP problem and no other optimisation will fix it.
- Exclude it, then preload it. Excluding stops the delay; preloading tells the browser to fetch it immediately rather than waiting to discover it in the markup.
- Repeat per template. Your homepage hero, your post featured image and your product gallery are different elements, and a fix on one does not apply to the others.
- Give every image explicit dimensions. This costs nothing and prevents the layout shift that lazy loading otherwise causes as images arrive and push content down.
- Never lazy load anything in the header. Logos in particular, which are small, always visible, and frequently deferred by blanket settings.
On fonts, three habits complete the picture: self-host them, subset them to the characters you actually use, and set font-display so text renders in a fallback rather than staying invisible while the file downloads. That last one trades a small shift for visible content, which is almost always the better bargain.
Related guides
Frequently asked questions
What is critical CSS?
The subset of styles needed to render what is visible before scrolling, inlined in the head so the browser can paint immediately while the remaining stylesheet loads asynchronously.
Why is generating it hard?
It differs per template and per viewport size, and it has to be regenerated whenever the design changes. A single file for the whole site either misses styles somewhere or defeats the purpose by including too much.
Should I lazy load all images?
All except those visible without scrolling. Lazy loading your hero image delays exactly the element LCP measures, which is the most common way sites make this metric worse while trying to improve it.
Does WordPress lazy load by default?
Yes, with heuristics intended to skip above-the-fold images. Those heuristics work reasonably on standard themes and less reliably on page builders and custom headers, so verify rather than assume.
Should I self-host Google Fonts?
Yes. It removes a third-party connection from the render path and resolves the privacy problem of transmitting visitor IP addresses before consent. It is free and there is no downside.
Will critical CSS break my site?
It can produce a flash of unstyled content or missing styles if generation misses something. Enable it, check every template at a couple of screen sizes, and regenerate after any design change.
The verdict
Do the free things first. Find your LCP element, make sure it is not lazy loaded, preload it, and self-host your fonts. Twenty minutes, no money, and on many sites a bigger improvement than any purchase here.
If you are on LiteSpeed hosting: LiteSpeed Cache, which includes critical CSS generation free, enabled one setting at a time.
Otherwise WP Rocket at $59 a year for per-template critical CSS with defaults that do not require your attention, or FlyingPress at $279 for unlimited sites if you manage a portfolio and will use the trial to check its more aggressive output.
And add Perfmatters at $29.95 if the specific problem is a lazy-loaded hero image. Excluding it and preloading it is a two-setting fix for the most common LCP regression in WordPress.
