Updated: November 2018
Plugin Surgery
INTERNATIONAL SITE OWNERS: Get under 2-second load time on cheap, shared magnetic hosting. No CDN cheating. And still use dozens of free WordPress plugins!

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 wieght or drag to the site).

An unconventional solution.

The speed-and-decoration balance 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 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!

Godspeed—

Steve Teare
performance engineer

Mobile WordPress Speed – without coding!

What others think of us:


... Facebook Mastermind Group just referenced your blog in talking about WP themes ... Best quote he said, "Here's an interesting site on WordPress speed: PagePipe.com. Warning: he's got some controversial ideas." Thought you’d like that! Lilypad Media LLC, North Carolina, USA

- Kurt Perschke

Quality-82 image-compression change for WordPress.
Removing Genericons font for reduced page weight.