Ollie Theme Speed: Per-Block CSS, Patterns and the Font Setting That Makes Text Wait

Twenty stylesheets that only arrive when invited

Open Ollie 1.6.3's functions.php and the front-end story takes a minute to read. One stylesheet, style.css, is enqueued on every page. Then the theme walks its assets/styles folder and registers each file named core-something.css against the matching core block with wp_enqueue_block_style(). There are twenty of them, from core-button.css to core-video.css, covering columns, cover, gallery, group, image, list, navigation, table, the post template blocks and a few more. WordPress prints each one only on a page where that block actually renders.

Those per-block files are registered with a file path, which makes them eligible for WordPress's inlining: small styles get printed straight into the page instead of costing a separate request, up to a shared budget that the styles_inline_size_limit filter sets at 40,000 bytes since WordPress 6.9. The main style.css is registered without a path, so it stays an ordinary external file that blocks rendering until it arrives. No theme script is enqueued at all. The scripts you will see come from core blocks such as Navigation, and from plugins.

Compare that with a theme that compiles every option into one big stylesheet and you see why Ollie sits near the top of our list of the fastest WordPress themes. The vendor's own words are bigger: the readme promises a blazing-fast site and calls Ollie the most lightweight and powerful website builder on the planet. That is the vendor talking, with no measurements attached, and we have none to add. The Ollie review covers the rest of the theme.

font-display: block, the one line we would change first

Ollie bundles eight typeface folders inside the theme: Big Shoulders, DM Sans, Fraunces, Geist, Mona Sans, Montagu Slab, Source Serif and Space Grotesk. The default style uses Mona Sans, a single variable .woff2 file, for both body text and headings at weight 600. Nothing is fetched from Google. So far, so good. The catch is in theme.json, where every Mona Sans face is declared with fontDisplay set to block, and the typography preset we opened (Preset 3, which pairs Mona Sans with Big Shoulders) does the same.

Block tells the browser to keep text invisible until the font file arrives, for a period the CSS specification suggests should be around three seconds. On a fast connection with a warm cache nobody notices. On a phone over a weak signal, a visitor stares at an empty hero where the headline should be, and if that headline is the largest thing on screen, your Largest Contentful Paint waits with them. Swap shows the fallback font immediately and trades it in when the file lands. For a business site, swap is almost always the better bargain.

The Font Library adds choices, and files

Since WordPress 6.5 the Font Library lets an editor install more typefaces from the Site Editor, including from a Google Fonts collection that downloads the files to your own server. That keeps the privacy and connection benefits of local hosting. It does not make extra families free. Each typeface your pages actually use is another file to download, and a heading font plus a body font plus an italic is three. Fonts that are installed but unused only add a few lines of @font-face CSS. If type looks wrong after a change, Ollie fonts not loading has the checks.

How a lean theme gets heavy: patterns, menus and a shop

Nobody makes an Ollie site slow on purpose. It happens through the features people buy Ollie for. The free theme holds 115 pattern files, and Ollie Pro's cloud library adds more than 200 patterns and over 30 full page designs. A pattern is ordinary blocks once inserted, which is good for portability and neutral for speed: whatever images, covers and galleries the pattern contains are now your page's weight.

• Full-page designs stack Cover blocks. Each cover with a full-width photo is a large image request, and the first one is usually the page's LCP element.
• Placeholder images get replaced with camera originals. WordPress makes smaller copies of a 5,000-pixel photo, but a full-width cover on a wide screen asks for one of the largest, and an uncompressed original makes every copy heavier than it needs to be.
• Menu Designer panels live on every page. The free Ollie Menu Designer plugin builds mega and mobile menus from blocks, so a rich dropdown adds its blocks and their styles to the header of every page, including pages nobody opens the menu on.
• WooCommerce styles ride along everywhere. Ollie's inc/woocommerce.php enqueues assets/styles/woocommerce.css whenever WooCommerce is active, with no check for whether the page is a shop page.
• Plugins load site-wide by default. A form plugin, a cookie banner and a chat widget each bring their own files to pages that never use them. Ollie cannot stop that.

None of this is a flaw in Ollie. It is the ordinary physics of WordPress, explained at length in why WordPress sites get slow. The difference on Ollie is that the theme gives you so little to blame that the culprits are easy to find.

Seven moves for a faster Ollie site, in order

1. 1

   Measure three page types on a phone profile

   Run the homepage, one inner page built from a pattern and one blog post through PageSpeed Insights, and note the LCP element for each. Our guide to reading PageSpeed Insights for a theme explains which numbers to trust.

2. 2

   Switch font-display from block to swap

   Override fontDisplay for the faces you use with a few lines in a small site plugin (the wp_theme_json_data_theme filter), or ask your developer to. A child theme works too, but switching to one after customizing in the Site Editor can leave your template and style edits behind with the parent. Retest the page whose LCP element is text; it should show its headline sooner.

3. 3

   Preload the one font file the hero uses

   WordPress does not preload theme.json fonts. If Mona Sans renders your hero headline, a single preload hint for Mona-Sans.woff2 gets it requested earlier. Preload one file, not the whole folder.

4. 4

   Resize the images inside your patterns

   Upload hero and cover images at roughly twice their displayed width, compressed, rather than camera originals. Avoid the Cover block's fixed background option for the first screen, since it turns the image into a CSS background the browser discovers late.

5. 5

   Keep the WooCommerce stylesheet on shop pages

   If you run a store, dequeue the theme-woocommerce-style handle on pages that are not shop, cart, checkout or account pages, then check that the header mini cart still looks right.

6. 6

   Audit plugins by page, not by list

   Load a plain page with the browser's network panel open and list every file whose path contains /plugins/. Anything there that the page does not use is a candidate for conditional loading or removal.

7. 7

   Retest after each WordPress release

   Ollie's menus and much of its styling ride on core blocks, so a WordPress update can change both behavior and weight. Run the same three tests after every major release.

Work on a staging copy and change one thing at a time, so you know which step earned which result. If you would rather hand the job over, our theme speed optimization service does exactly this, with a changelog you can reverse.

Core Web Vitals on a block theme with nothing to strip

LCP: a cover image or a headline in hiding

On most Ollie pages the Largest Contentful Paint is either the first Cover block's image or the big heading over it. For images, WordPress core already marks the first large content image with fetchpriority high and skips lazy loading on it, so a lazy-loading plugin that tags every image undoes that help. For text, the font-display fix above matters most. The wider mechanism is in WordPress vs Next.js on LCP, and slow LCP on a WordPress theme walks the diagnosis.

CLS: fonts, sticky rows and late banners

Switching to swap introduces a small risk the block setting avoided: when Mona Sans replaces the fallback font, lines can rewrap and nudge content down. Keep it small by choosing a fallback stack with similar width. Ollie 1.6.2 added sticky single header rows; test that the header holds its height when it sticks. Cookie banners that push the page down are the usual larger offender. Layout shift on WordPress themes and WordPress vs Next.js on CLS explain the mechanics.

INP: the menu is the main interaction

Ollie's header uses the core Navigation block with submenus that open on click, so the hamburger and dropdowns are the first things visitors tap. Large Menu Designer panels make each tap do more work. Most bad INP on these sites, though, comes from third-party scripts sharing the main thread: chat, analytics and review widgets. If the mobile menu misbehaves rather than lags, start at Ollie mobile menu not working. The INP background is in WordPress vs Next.js on INP.

Where Ollie's good manners stop

Tune everything above and some costs remain, because they belong to WordPress or to the server rather than the theme folder.

• Server response. Every uncached page is assembled by PHP from database records. Ollie cannot make a slow host answer sooner; page caching and better hosting can.
• Core's own output. Global styles, core block CSS and the Navigation block's script are WordPress's, and they change with WordPress releases, not Ollie's.
• Release timing. WordPress 7.1 made Ollie's mobile submenus open already expanded until Ollie 1.6.3 shipped a fix. Speed and behavior depend on two release calendars.
• Editing power. Anyone with Site Editor access can add a video background or a fourth typeface to every page in a few clicks, and nothing reviews it first.
• Plugin assets. Whatever a plugin enqueues site-wide stays site-wide unless someone writes code to stop it.

Ollie gives you very little to remove, which makes everything you add easy to spot.

When speed alone justifies leaving Ollie for Next.js

Honestly, rarely. An Ollie site with sized images, a sensible font setting and a short plugin list is about as quick as WordPress gets, and for a brochure site or a small shop that is plenty. Speed becomes the reason to move when the site's revenue depends on milliseconds: lead generation from paid traffic, hundreds of programmatic landing pages, or a catalog where every product page must load instantly on a phone.

That is where a Next.js build changes the arithmetic. Pages are prerendered and served from a CDN, so there is no PHP assembly on each visit. next/font self-hosts fonts and handles loading behavior in code, and next/image resizes images and serves modern formats without a plugin. Nobody can add a fourth typeface from an admin screen. The trade is a higher up-front cost and a developer for layout changes. Read the full Ollie vs Next.js comparison before deciding, and see how an Ollie site moves to Next.js when you are ready. Block markup migrates more cleanly than any page builder's format.

Comparing other options first? The WordPress themes hub lists every review, and our roundup of themes that pass Core Web Vitals shows where Ollie's neighbors land.