Theme Review: Accelerate WordPress theme is fast loading.

red speed

Save the Internet from WordPress speed abuse.

Updated: November 2017

7 minute read

Sorry. Sometimes we just have to tell the whole story.

We selected the WordPress Accelerate theme – free version from the theme directory. After stripping it down a bit and adding lightweight PNG images, we achieved great load times: 1.63 seconds to Stockholm. 530 milliseconds to New York.

We’d still choose the Accelerate theme today for speed, customization, and user retention (20k installs). It’s being actively maintained by the author in the WordPress directory. Any theme, paid or free, can be abandoned or even banned. That’s the risk of the WordPress world.

For example, Zerif Lite, a theme with 300,000 installs was suspended from the WordPress directory for 5 months at the end of 2016. Why? Because they didn’t comply with requests to keep content active after upgrades (exact problem we experienced with Accelerate). That ban cost the Zerif author (ThemeIsle) $35,000 per month lost revenue. So Accelerate began making new updates to appease WordPress, too. More on that in a bit.

We place our bets based on “reading” the signs of theme credibility and longevity. A year later, Accelerate theme still “feels” right.

A widgetized front page, like Accelerate uses, is a method of getting special customization features many sites need. It’s a theme-developer’s workaround. Its only flaw is sometimes rebuilding when upgrades are made. All widgets are “retired” to the Inactive Widgets section. They then have to be reinstalled one-by-one (drag and drop) to the right locations. If there is no reference (map), it can be a puzzle.

We have 25 widgets.

All themes dependent on “widgetized” front pages have a potential fault. Accelerate 1.3.0 fixed the problem. But we’ve only solidified this knowledge recently. It’s a not-so-well-known bugaboo. It’s not advertised – that’s for certain. The cheap fix is theme author’s supplying a plugin to maintain widgetized front-page content. No one is doing that yet. Well, Zerif Lite is now!

https://wptavern.com/zerif-lite-suspended-from-wordpress-theme-directory-300k-users-left-without-updates

https://wptavern.com/zerif-lite-returns-to-wordpress-org-after-5-month-suspension-and-63-decline-in-revenue

Additionally, if not properly coded, theme customizations made in the control panel may need to be reset (colors, logo, etc.) after updating, too. That’s not good.

Before we do any theme update, we download the theme package and read why the upgrade is recommended. Is it critical (security) or is it just to add a feature we don’t even use? So let’s check that first.

Here’s their story:

== Changelog ==
= Version 1.3.0 – 2017-03-21 =
* Added – Support for Video Headers introduced in WordPress 4.7.
* Feature – Added compatibility for ThemeGrill Demo Importer plugin

These two new changes add functionality that we will NEVER use because our client is targeting a 60-to-70 percent mobile audience. That doesn’t mean the author didn’t use this change as an opportunity to fix a few bugs or security issues. We can’t know. They are under no obligation to reveal that stuff.

We started a site design last August with Accelerate version 1.2.5. In September, when we went live with the site, a new version 1.2.6 was available. When we upgraded, all the Home-page widgets retired to the inactive widget area.  Panic attack! We reinstalled 25 widgets. It was tedious.

Another upgrade version (1.2.7) came out in December, we recommended the site owner hold off upgrading until March. One reason was it was such a nightmare experience. By March 1, the author had version 1.29 upgrade available – also released in December. So we upgraded to that, with the same horrific widget debacle – again. This “widgetization” problem was the same that got Zerif Lite banned.

Irony struck. Within March, another version of Accelerate came out (1.3.0). The theme changelog said they added Video Headers and Demo importer plugin compatibility. So we figured when the site owner requested we update *again* that we were in for another train wreck. But that didn’t happen.

In a secret Trojan Horse tactic, the theme author yielded. He brought Accelerate into WordPress compliance. The widgets maintained where they should be. With version 1.3.0, it was a simple one-button update. No hiccups.

Amazement and delight.

In the end, upgrading Accelerate to version 1.3.0 was a piece of cake compared to past experiences with the theme. The theme’s speed potential is great.

But, that is only half of the story, we still needed to use color wisely for speed.

Can studying Google Analytics web statistics influence design color choices? More ways than you might think. But first, you have to know where you’re at. And where you’re going. You must know what is most important. What is valuable and what is not? To answer that you need objectives – goals for making good choices. Even for something as simple as colors.

You have a WordPress website. This imaginary site gets good traffic. Monthly, two percent of your new web traffic comes from Facebook. Almost nothing! Social media has failed. Everything reported is organic Google search results: 100-percent traditional. Imagine your information site receiving 20,000 unique visitors per month with 18,000 leaving in under 10 seconds. Most everyone plainly perceives they landed in the wrong place.

Perhaps the description underneath the Google search link misled them. Somehow, you didn’t serve the information they were hoping or expecting. They then reacted negatively by hitting the back button – and kept on searching. On the web, people’s behavior is impatient and intolerant.

Of your remaining new visitors, only 2,000 per month stay for 3 minutes to over 30 minutes. Those are the people who are engaged and interested. They read content because it’s perceived as relevant. They watch videos in hopes of getting answers to their problems. They may even do something beneficial like signup or buy.

What if Google Analytics tells us 60 to 70 percent of visitors use Apple iPhone and iPads? Those real numbers are whopping. The majority is mobile. Is that normal? Sometimes. It’s happening on many sites now.

Your imaginary home-page, load time is under 4 seconds. That doesn’t seem so bad. But Google reports your most popular landing pages are averaging 6-seconds or more to load. That speed (slowness?) doubles into about 12 seconds on a mobile device. This wait is beyond the human 10-second threshold of pain. Attention wanders. That means viewer boredom, frustration, annoyance, and abandonment increases. Hmm? No wonder the bounce rate is high.

You have a big user experience problem affecting website profits. Speed is killing opportunity. Can color help solve this speed problem? Maybe.

Speed is primary to achieve mobile site goals. We have to get past that barrier and achieve an ideal 2-second load time. Yet, we need branding (decoration) that communicates to the right audience. Decoration adds page weight. Bloat occurs on overly decorated sites.

Alexa gives us demographic data that Google’s free service can’t provide. What if our marketing goal is to appeal to an all female audience? Not men. But Alexa indicates 40 percent of site visitors are male. Men are unqualified leads. How can we subtly tell men to get lost and not waste our time? How can we entice women to stick around? Can we filter sales leads with color? Can color be “weightless”? (Weightless meaning not adding any page weight or drag to the site).

An unconventional solution.

The speed-and-decoration balance for Accelerate theme lies in one simple trick. We must discard photographic images – and all Jpegs for that matter. Instead, we must use solid-color, illustrative, PNG-image files. Not Jpeg format.

JPEG is the most widely used image type on the Internet. Of all websites, 70 percent use JPEG images. JPEG image compression exploits certain properties of our eyes. This allows for compression for smaller files. But they are rarely as small of files as illustrations.

We’ll demonstrate. 259k Jpeg vs 17k PNG.

Screenshot at 2016-08-08 20-08-40
Above: Typical banner stock Jpeg image, 400k, 1920px × 1280px, background image. Heavy for mobile bandwidth.
Above: Typical custom line-drawing header with reduced color numbers (hero-image substitute), 17k, 1100px × 259px. Much lighter. 17k vs 259k. Hmm? Which will load faster? Illustration always wins over photos for speed.

A PNG illustration banner or hero image consumes so few kilobytes because it’s visually simplistic. Visual complexity increases image file size. Therefore, consider using illustrations and graphics rather than detailed photographs.

But, you say, “They aren’t the same image! Is that a fair comparison?” Actually, yes, it is. Because they both communicate. An illustration is less complicated. It can focus the message with fewer details and fewer colors. This improves viewer attention. And speed! This color strategy kept Accelerate theme fast.

Final Accelerate theme Home page design with PNG images and custom colors targeting a female audience. 530 millisecond load time. 125k page weight. Only 21 HTTP requests. Very fast. (Shared hosting: Pressidium.com with Linode, TTFB: 20 milliseconds)

Godspeed—

Steve Teare
performance engineer

Mobile WordPress Speed – without coding!

What others think of us:


"Steve, many thanks for your prompt reply. I really appreciate it. I have to now seriously look at ways to speed up the site and what is relevant content for the mobile market. My Google analytics show 75/25 in favour of mobile/tablet users." londontheatre1.com London

by - Neil Cheesman