This guide is for owners and operators. Frontend Optimizer makes your pages load faster by streamlining the files visitors download and by inlining the styles needed for the top of the page. Most of the time it runs on its own and there is nothing to do. Occasionally you may turn an option on or off, or clear the optimised files after a big change. The advanced settings are best left to your developer. No technical knowledge needed. Every step uses the labels you see on screen.
- Open Frontend Optimizer in the admin to reach its settings.
- Under Critical CSS, switch on Enable critical CSS. This inlines the styles needed for the top of the page so visitors see content sooner, before the rest of the stylesheets load.
- Save.
- Open the Frontend Optimizer settings.
- Switch on Automatic generation. When a page is missing its optimised styles, the optimiser queues the work to rebuild them in the background.
- Save. From now on the optimised files refresh on their own as pages are visited.
If your developer has not set up background processing, leave Automatic generation off and ask them before turning it on, so the heavy work does not run inside a visitor’s page load.
- Open the Frontend Optimizer settings.
- Set the Profile scope to decide how the optimised styles are grouped (for example per layout). A broader scope reuses one optimised set across more pages; a narrower scope tailors it more closely.
- Save.
- After a large design or content change, the streamlined files may be out of date.
- Ask whoever manages the site to clear the optimised files, or use the clear option if it is available to you.
- The files rebuild on their own as visitors load pages, so clearing them is safe.
- The Frontend Optimizer settings include advanced options such as Max inline CSS bytes, Viewports, Fold multiplier, Extra fold pixels, Playwright wait strategy, and Playwright timeout.
- These control exactly how the top-of-page styles are measured and built. The safe defaults work for most sites.
- Do not change these unless your developer advises it.
- Enable critical CSS. This is the main speed-up and is safe to switch on. Get it working before touching anything else.
| Need | What to use |
|---|
| Show content sooner at the top of the page | Enable critical CSS |
| Keep optimised files fresh automatically | Automatic generation (needs background processing set up) |
| Control how optimised styles are grouped | Profile scope |
| Fine-tune how top-of-page styles are measured | The advanced settings, with developer guidance only |
| Role | What they do |
|---|
| Site owner | Switches on Enable critical CSS, leaves advanced settings at default |
| Developer | Sets up background processing, tunes the advanced options, confirms the optimiser is active |
| What you see | What it means | What to do |
|---|
| A page looks wrong after a big change | The optimised files are out of date | Clear the optimised files so they rebuild as pages load |
| You are unsure about a setting | It is one of the advanced tuning options | Leave the safe defaults on and ask your developer before changing it |
| The site still feels slow | Optimisation may be off, or the cause is elsewhere | Confirm Enable critical CSS is on; raise persistent slowness with your developer |
| Turning on Automatic generation worries you | The background work needs proper queueing to run out of band | Confirm with your developer that background processing is set up first |
