Above-the-fold CSS that paints before the rest loads
The slowest part of a page is often the wait for stylesheets. Capell inlines the above-the-fold CSS, including the theme color tokens, directly into the document head, then loads the full stylesheet and below-the-fold sections after first paint.
That keeps the first screen stable. Visitors see a laid-out, theme-correct page immediately, and the deferred stylesheet fills in the detail without shifting the layout underneath them.
A fast page is mostly a fast first screen. Capell inlines the above-the-fold CSS, including theme color tokens, so the first paint is laid out and theme-correct before the deferred stylesheet and below-the-fold fragments arrive.
The benefit only holds if it is verified. Capell keeps critical CSS within a size budget, defers the rest of the stylesheet, and requires every theme to declare the viewports its first screen must hold.
What the parity contract protects
- Theme colors are correct on first paint, in light and dark.
- The above-the-fold layout holds on the critical block alone, with no reflow when the deferred stylesheet loads.
- The first screen behaves the same across mobile, tablet, and desktop.
- Critical CSS stays bounded instead of growing into its own weight problem.
The contract is about layout, not pixels. Webfonts and finer styling still arrive with the deferred stylesheet. What visitors get immediately is a stable, theme-correct first screen, and what developers get is a tested guarantee rather than an assumption.
What the first paint has to get right
Critical CSS is only useful if it covers the right things. Capell keeps the first-paint concerns connected to the same page model that drives the rest of public delivery.
Critical CSS questions
Critical CSS, theme tokens, deferral, and parity tests stay tied to the Laravel app and the theme that ships them.
Does critical CSS mean a pixel-perfect first paint?
No. The deferred stylesheet still delivers webfonts and finer detail. Capell's guarantee is that the above-the-fold layout and theme colors hold on the critical block alone, so the first screen is stable and theme-correct, not that every glyph is already final.
Who writes the critical CSS?
Developers own it, like the rest of the frontend. Capell inlines it, keeps it within a size budget, and provides the per-theme parity contract and the tests that verify it.
What stops critical CSS from growing forever?
A size budget enforced by automated tests. Critical CSS that grows past the page-type budget fails the check, so the optimization cannot quietly turn into a second heavy stylesheet.
Make a fast first paint part of every theme
The next practical path is the rest of delivery: cache behavior, public render rules, and SEO performance that keep the page fast after the first paint lands.
Fast first screen Inlined critical CSS, theme tokens, deferred remainder, and tested parity stay tied to the theme.
What Capell holds the critical path to
Above-the-fold optimization is easy to get subtly wrong: a missing token flashes the wrong color, an unstyled block jumps when the deferred sheet loads, or the critical block grows until it cancels its own benefit. Capell keeps these checks near the pages they affect.
| Area | Capell shape | Developer check | Team outcome |
|---|---|---|---|
| Theme correctness | Theme color tokens are inlined into the critical block. | Verify the first screen in light and dark before deferred CSS loads. | Visitors never see a flash of the wrong colors. |
| Layout stability | The above-the-fold layout is produced by critical CSS alone. | Block the deferred stylesheet and confirm the first screen does not reflow. | The first screen stays put as the rest of the page hydrates. |
| Size budget | Critical CSS is bounded per page type. | Keep the critical block under the page-type budget as sections grow. | Fast first paint without shipping a second heavy stylesheet. |
| Cross-device parity | Every theme declares the viewports its first screen must hold. | Run the layout-parity check on mobile, tablet, and desktop. | Themes ship with a first screen that is tested, not assumed. |
How the parity guarantee is enforced
Inline the critical CSS
The above-the-fold styles, including theme color tokens, are inlined into the document head so the first screen can paint without a network round trip.
Review performanceDefer the rest
The full stylesheet loads after first paint, and below-the-fold sections arrive as deferred fragments so the initial document stays light.
Review renderingRequire parity in the manifest
Every Capell theme declares critical-CSS parity support and the viewports its first screen must hold, so the requirement travels with the theme.
Review deliveryTest parity across viewports
Automated tests block the deferred stylesheet and assert the above-the-fold layout holds on mobile, tablet, and desktop, so a regression fails before release.
Review checksCapell learning journey
Step 2 of 4: Platform
Capell is a Laravel CMS split into four parts: Core, Admin (Filament), Frontend, and Packages. See how they fit your project.
Keep moving through Delivery
Frontend, rendering, SEO, performance, and deployment.