Twenty Twenty-Four Speed: Finding Three Years of Weight on a Theme That Ships Almost None

No theme stylesheet, one button file, four fonts

Look through the theme's functions.php for a front-end stylesheet and you will not find one. Styling comes from theme.json, which WordPress converts to CSS. The single extra file is button-outline.css, attached to the core Button block with wp_enqueue_block_style(). A comment in the theme's code explains the choice: such stylesheets load only when the block is rendered, which it describes as improving performance and reducing the data visitors request. That is the only performance statement the WordPress team makes about this theme, and it is a description of a mechanism, not a score.

Fonts are where Twenty Twenty-Four spends. Body text uses Inter, bundled as one variable .woff2 file covering weights 300 to 900. Headings use Cardo, bundled as three static files: regular, italic and bold. A page with headings and body text therefore needs Inter plus at least one Cardo file, and more if bold or italic headings appear. None of it comes from Google. The readme lists Instrument Sans and Jost as bundled too, for the style variations, and the theme ships seven variation files (Ember, Fossil, Ice, Maelstrom, Mint, Onyx and Rust).

The font declarations set no font-display value, so WordPress applies its default, fallback: a very short wait, then a fallback typeface, with a limited window for the real font to swap in. Cardo is a serif with its own proportions, which matters for layout shift, covered below. The Twenty Twenty-Four review has the rest of the theme's story.

Dating the layers on a site that has been live since 2023

Twenty Twenty-Four became the default theme with WordPress 6.4 in November 2023, which means many sites running it were set up then and have been growing ever since. The theme has kept pace, reaching version 1.6 in August 2026 and tested up to WordPress 7.1. The site around it often has not. Treat a speed audit here like dating rock strata: each layer was laid down for a reason, and some of those reasons have expired.

• The launch layer. Plugins chosen in the first week: a form plugin, an SEO plugin, maybe a slider for a homepage the theme's own patterns would have covered.
• The media layer. Photos uploaded straight from phones and cameras before anyone thought about size. WordPress makes smaller copies, but huge originals still weigh down every copy and any place the full size is used.
• The marketing layer. A chat widget, a review badge, a tag manager carrying three analytics tools, a popup from a campaign that ended last spring.
• The workaround layer. A page builder installed on top because the Site Editor felt unfamiliar, or an optimization plugin added after a bad PageSpeed report, sometimes two.
• The server layer. The PHP version the host set up in 2023. The theme's minimum is PHP 7.0, and many hosts will still run old versions until asked to move.

Each layer has a different owner and a different fix. The useful question for every file the page loads is simple: is the job it was hired for still being done, and does this page need it? Our WordPress theme speed test guide explains how to measure before and after so the answer is a number, not a hunch.

The child theme trap, and where speed code belongs

Most speed fixes beyond settings need a few lines of code: a preload hint for the hero font, a dequeue for a plugin's stylesheet on pages that do not use it. On a classic theme, that code goes in a child theme. On Twenty Twenty-Four, think twice. Templates and template parts edited in the Site Editor are stored in the database against the parent theme, and a forum thread documents what happens on switching: the child theme does not inherit those changes. Your customized header and homepage template can revert to the defaults.

If a child theme is already in place and the header looks wrong, Twenty Twenty-Four header not showing and Twenty Twenty-Four layout broken walk through recovering the templates.

Six passes over a long-running Twenty Twenty-Four site

1. 1

   Measure three templates on a phone profile

   Test the homepage, a long post and any page using the Page with Wide Image or Page with Sidebar templates. Record LCP, CLS and INP from PageSpeed Insights, plus field data if the site has enough traffic.

2. 2

   Bring the platform current

   Confirm WordPress is on the current release and ask the host to move PHP to a currently supported version. Newer PHP is generally faster at running WordPress, and it costs nothing to ask. Test on staging first.

3. 3

   Retire plugins from expired layers

   Remove the slider the theme's patterns can replace, the popup from a finished campaign and any second optimization plugin. Keep a list of what went and why.

4. 4

   Fix the media layer at the source

   The theme's content column is 620 pixels wide and wide blocks reach 1,280. Images around twice those widths cover high-density screens. Replace the largest originals on key pages with compressed versions.

5. 5

   Add speed code in a site plugin

   Preload the Cardo file your largest headings use if a heading is the LCP element, and stop plugin assets loading on pages that do not use them. Keep it out of a child theme, for the reason above.

6. 6

   Add one caching layer and retest

   Host-level page caching or a single caching plugin. Then rerun the three tests from step one and compare.

Prefer a hand with it? Our theme speed optimization service runs these passes on a staging copy and hands back a changelog. If the problem turns out to be the plugin pile rather than the theme, why WordPress gets slower over time explains the pattern.

Where Twenty Twenty-Four's vitals usually slip

Largest Contentful Paint: Cardo headings and wide images

On text-led pages, the largest element is often a big Cardo heading, so the speed of that one font file matters. On the Portfolio and wide-image layouts, it is a photo stretched toward the 1,280-pixel wide width. Core gives the first large image fetchpriority high and skips lazy loading on it, so remove any plugin that lazy-loads everything. Fixing slow LCP and WordPress vs Next.js on LCP cover the mechanism.

Cumulative Layout Shift: a serif arriving late

When Cardo arrives after the fallback serif has painted, line lengths change and paragraphs below can move. The fallback setting limits how long that can happen, but a heading at the top of a page still nudges the rest. Embeds without reserved space and banners inserted above the header are the larger causes. See layout shift on WordPress themes and the CLS comparison.

Interaction to Next Paint: one menu for every page

The header template part places the core Navigation block on every page, and its overlay setting decides the phone hamburger. That menu is the first thing most mobile visitors tap. Lag there usually comes from marketing-layer scripts, not the block. Twenty Twenty-Four mobile menu not working handles menus that fail outright, and the INP comparison explains the metric.

Delivery compared with its successor

Owners often ask whether switching to Twenty Twenty-Five would speed things up. On delivery alone the two are close, and the switch is mostly a design decision.

The real difference sits elsewhere: what the site has accumulated. Switching themes does not remove a single plugin. For the full theme-by-theme picture, see our Twenty Twenty-Five speed notes and the themes with the least CSS and JavaScript.

The weight no theme can lift, and the Next.js question

• PHP and the database. Uncached pages are assembled on request. A theme with no stylesheet is still a theme on a server doing work for every visitor caching misses.
• Core output. Global styles and core block CSS belong to WordPress and change with its releases.
• Plugin assets. What a plugin enqueues everywhere stays everywhere until someone writes code to stop it.
• One header for all. Hiding or slimming the header on certain pages means separate templates, each one more thing to maintain.

A theme that ships nothing cannot be the reason a page is heavy. It can only be the place the weight is sitting.

If the site is a writer's journal or a small consultancy, the passes above are enough. Speed becomes the case for Next.js when the site has grown into something that earns per visit: paid landing pages, a store, many location pages. A Next.js build prerenders pages to a CDN, self-hosts fonts with next/font and serves resized images through next/image, and every addition passes a build before it reaches visitors. It costs more up front and needs a developer for structural changes. Compare in Twenty Twenty-Four vs Next.js, plan with moving a Twenty Twenty-Four site to Next.js, and browse alternatives in the WordPress themes hub.