6 minute read
Serious WordPress Speed Strategy for Business

Save the Internet from WordPress speed abuse.

There’s not enough time to test all new free WordPress themes for speed potential. So we set easy limitations to reduce our workload. We look for signs or clues of author sloppiness and wasteful shortcuts.

The ideal speed theme is a download file of under 1M-compressed. This is our arbitrary threshold and indicator for speed potential. Once decompressed – and with the demo screenshot subtracted – it will total between 1M and 2M. These generally create 500-millisecond to 2-second page loads. And that’s on cheap, shared hosting.

It’s plain many themes above this 1M-download cutoff may be fast. But we don’t want to mess around searching. It’s also rare for a theme to make written guarantees. Nothing about speed, page weight, or even number of HTTP requests. Many imply they’re fast. But they don’t give specifications.

A 1M cutoff drastically reduces the number of theme candidates. This is a quick-and-dirty filter. It prevents you from wasting time on themes with low-speed potential. The package size is indicative of the theme author “caring” about performance.

Note: A lite theme means it has crippled features or stripped down from the “pro” paid version. Lite doesn’t mean lightweight.

The nine free themes listed below all have commonalities. We won’t put them on any preferred list. Even though some are attractive. We’re using them to prove some font facts. For us, they’re toward the bottom of the speed barrel – but still pass the 1M limit barely. They have 1-to-2 second page load potential. They aren’t as forgiving as other less “feature-rich” themes.

Why aren’t they so good? They have built-in site drag. They weren’t authored with speed as a priority. That’s indicated by the frivolous, slow “non-features.”

What are non-features? Unnecessary bloated decorations. Expressive aesthetics like animation. They all use cloud-based Google fonts. And they all have Font Awesome icon font onboard. Four use sliders. Sliders activate JavaScript and are heavy and easily abused. (Read our article about sliders and why they are bad for speed.)

But in spite of these infractions, the themes still pass.

The Font Stacks

We ask ourselves, “How much speed difference does font baggage make?” So we did some testing with the help of free plugins.

Asset Queue Manager
This plugin is almost a secret. Only 900 installs. It’s used for hardcore performance optimization. It allows us to switch off (dequeue) Font Awesome. Of course, it’s used for dequeuing other scripts, too. But we’re just using it for our Font Awesome experiment.

Font Awesome is a font and icon toolkit released 4 years ago. And quickly became a crutch for theme authors to create “cheap art.” Twenty percent of websites with third-party fonts use Font Awesome. We find it on half of new theme releases. It ranks second place after Google Fonts. We hate it because it uses 70 to 80k of page weight globally. And it has no websafe system font fallback like when using a CSS font stack. That means if we disable it, the site may look broken. Not always. Just especially mobile pages.

Frequently, Font Awesome loads on every single page whether there are any icons used or not. That’s bad for mobile bandwidth usage. Font Awesome may be loaded in parallel with other page assets. That makes the drag invisible to users. So why do we even care? Requested font data is still transferred on each page. And that costs someone time and money.

The inclusion of Font Awesome is a solid indicator of a slow theme. Authors who care about speed don’t include it. They let the site owner decide to install it with a plugin if needed. Like Better Font Awesome plugin.

Our other beef with Font Awesome is that only three icons are traditionally used. These are:

  • the magnify glass for search fields
  • the mobile navigational “hamburger”
  • the up-arrow on top-of-page links

(Also social icons. But that story, we’ll save for another day.)

You could make 70 PNG image icons with the same total weight – or less – than Font Awesome. It’s equal to a hero header image. We’d rather not see any icons – either font or image. Overused and boring.

It’s possible for a theme to load Font Awesome – and then a plugin may load it again, too. This duplicates the global load. Doubling the additional page weight by around 150k. Wow. That sucks.

Is it worth removing or dequeuing Font Awesome? Nope. You might save 50 to 100 milliseconds. But, it usually will break something somewhere. Not always. Some theme authors don’t use Font Awesome for the hamburger and magnifying glass. They are merciful. Those authors deserve a medal for going the extra mile.

Is it worth finding a theme that doesn’t use Font Awesome? Yes. We think so. We hunt for those jewels. Remember half of new themes don’t use this iconic boat anchor. (The same statistic goes for unneeded sliders. Half do. Half don’t.) But leaving out Font Awesome is usually futile. It won’t make any noteworthy perceived speed difference in tests. It makes a difference in how much data goes back and forth from server to browser. And if you think that browser caching might help, sorry. Font Awesome comes in many oft-changing versions and flavors. That means browsers probably aren’t storing the right one for your users.

Font Awesome sometimes does weird fluctuations and delays loading by an extra second. Why? Voodoo! Why even take this speed risk?

So does removing Google Fonts make a difference in speed?

External font scripts like Typekit or Google Fonts slow down your site. Typekit is the worst for speed. Websafe fonts are guaranteed to be faster. According to HTTP Archive, as of October 2016, web fonts are just over 3 percent of an average page’s overall weight.

Disabling with Remove Google Fonts References plugin makes an average difference of only 53 milliseconds in our tests. But in the extreme, one theme (Martial-Lite) had a 300 millisecond gain in speed. In some cases, there was no change in speed at all.

The difference in weight is anywhere from 60k to 300k. Again, it’s wasted mobile bandwidth.

Would we delete Google fonts and go with default browser fonts just to save 300 milliseconds? You bet. When we’re working on getting under 2 seconds or even 1 second, that can make a big difference.

Again, there are times requesting Google Fonts will throw a 1-second delay. Just like Font Awesome. Why? We don’t know. Go ask Google. And, of course, the more fonts you call the slower things get. There’s a plugin that combines the Google font requests. Google WebFont Optimizer finds every Google Font request. It bulks them all together. Then your website only asks Google once for the fonts, instead of multiple times.

So our speed recommendations are:

  • Find a 1M or less compressed theme.
  • If it doesn’t have Font Awesome, it’s best.
  • If you can bear turning off Google Fonts, that’s even better.
  • Avoid sliders.

Only about 20 percent of new themes meet these criteria. No surprise.

Steve Teare
performance engineer

Serious WordPress Speed Strategy for Business

What others think of us:

"That's very helpful. What a thorough report. I already implemented some of these changes. Thank You Steve!" comelody.com, Tiberius, Israel

by - Shlomi Tsur