Twenty Twenty default theme’s hard-to-remove speed problem.

WordPress Mobile Speed

Updated: March 2020


There are no affiliate links on PagePipe.

What you should know about the Twenty Twenty theme – and potential mobile speed problems.

We tested the Twenty Twenty default theme. We strip the theme and WordPress core, using our usual plugins. We describe that process in this video about the Twenty-nineteen theme:

REFERENCE: http://pagepipe.com/under-1-second-page-speed-with-twenty-nineteen-theme-and-heavy-video/

Default Twenty Twenty theme demo.

There is one gotcha we’ve never seen before. Read on.

In the Twenty-nineteen theme, the developers were kind enough to use a mobile system font stack. Great for speed. It’s a 385k zip file download.

But in Twenty Twenty, there’s a font in the stack called “Inter.” It’s a variable font. This isn’t an accepted technology yet. There are known issues with variable fonts in Chrome. In particular, on Microsoft Windows.

The request for “Inter Var” isn’t for a Google font. Inter font is a Google font now but still seeing the same troubles in speed waterfalls. Plugins can’t remove it. Nor is it a system font. We’re not sure why they used it except they thought it was cool. It’s a speed liability. To remove it, you have to add custom code to the customizer:

h1, h2, h3, h4, h5, h6, p {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans;
}

But even that custom CSS fails. To remove the 800-millisecond delay caused by this font, we deleted the code from the theme style.css file. Even if you use !important to force it.

BEFORE removal of Inter Var

AFTER removal of Inter Var font. 800-milliseconds faster load time.

We don’t appreciate being experimental guinea pigs for faddish slow font features like variable fonts.

After stripping the theme and core, load times on shared hosting are about a half-second. There are only 5 requests per page.

Adding Autoptimize plugin creates no gain in reducing the number of calls. jQuery is not activated by the theme. That’s a nice speed bonus.

Twenty Twenty theme is a 638k zip file download.

What about the Chaplin theme?

Chaplin has a zip package download size of 1.2MB. Our cutoff for evaluation is 1 megabyte. It smells sort of interesting. The biggest heavy boat anchor is including Font Awesome. That’s bad for speed. If they left that out, the theme has real speed possibilities. Test results:

Pingdom SF: 118k, 526ms, and 10 requests.

Demo page: Chaplin theme.

That is with loading Merriweather – the theme default Google font. But you can change the font to Arial in the Customizer. Or leave the two font fields blank and then a mobile font stack is used. That’s the best choice. It should be the default. And the theme loads jQuery globally. Not a good choice either. But livable since many plugins activate jQuery, also.

Activating Autoptimize plugin took the Chaplin theme test results down to:

71k, 461ms, and 7 requests.

We observe that Font Awesome is not enqueued by default. But from experience – if it’s used even once – it globally loads at least 75k on every page. So avoid that trap.

Of the two themes, we prefer Twenty Twenty with Inter font defeated in CSS for speed.

But Chaplin has beautiful Customizer features like:

  • disabling comments
  • default related posts
  • deactivating author and date metas (for evergreen content).

Very nice and tempting.

We like what we see in Chaplin. We’re impressed. It’s an underrated theme. Lots of nice features eliminate extra plugins reducing the speed overhead.


Addendum

I wanted to thank you for the article you wrote about the new WP 2020 theme. It’s the only article I’ve found really talking about the speed issue with the Inter Var font.

I tried deleting the font settings on Line 253. However, I see multiple other instances where inter-var shows up in the code. (It seems like deleting line 253 may have interfered with some automatic color-adjustment when using a color background.) Is there a straightforward way to removing the Inter Var font? Thanks again!  PS- The Woo Storefront theme (which was very customizable and still highly limited) was much faster than 2020. My dad even said “huh, your site is noticeably slower on mobile” and he’s not a tech guy at all. —Travis Burch

To remove it, we used the WordPress Theme Editor. (Appearance > Edit Theme > style.css).

We tried using the Customizer to change the CSS. It didn’t work for us. We don’t know why. That’s abnormal. Everywhere font-family: “Inter var” exists has to be manually removed.

When the theme updates that junk returns to the code. Annoying. There are ways to prevent updates with a plugin. That would be a clunky workaround.

For this reason, we now think Twenty-twenty theme sucks for speed. If you hear of someone inventing a plugin to remove the font, please let us know.

Original article © November 2019

Other Related Resources

If you’re new here, start with our best primer speed articles.

If you’re ready to give your WordPress site wings, here are powerful tools to speed up your site.

Learn how the most popular plugins and ideas waste your time – and hurt web speed. Includes important tips for mobile speed without coding.

Build with Empathy
GIVE SPEED