Where’s the Twenty-eighteen WordPress default theme?

Normally, at this season of year we’d write about the new-release of a default theme – and we’d torture test it for speed. Not so this year. Why? Gutenberg has delayed Twenty-eighteen theme completion schedule. The powers that be say, “Spring 2018” for introduction.

Seriously! We doubt it. There is so much controversy over the Gutenberg editor addition. Already plugins are announced to remove it.

Disable Gutenberg
Completely disables the Gutenberg block editor and enables the classic WordPress post editor (TinyMCE aka WYSIWYG) for lighter coding and simplicity.

We’re delighted. There’s rumors the controversy, disruption, and dislike of Gutenberg will fork WordPress. A project fork happens when developers take a copy of source code from one software package and start independent development on it. This creates a distinct and separate piece of software. That would help WordPress get their act together. Or create competition improving quality for both versions.

There is a fork of WordPress already in existence. It merely adds Composer support. Composer is a development tool. It’s a dependency manager for PHP.  Put simply, it’s for coders and programmers. It’s a method of not having to rely on third-party plugins. Everything is integrated into WordPress. That includes customized theme and plugin code. Updates then won’t overwrite any customizations. Do we care about this? No. It’s not part of our goals. We test and write about using WordPress plugins from the free directory.

The other fork was to be Ghost, a lightweight CMS based on WordPress. Plainly, speed and usability were motives for this fork. Instead, it was rebuilt with new code. Why? They got money from Kickstarter ($100,000+) and then Microsoft and others came on the scene as investors. Ghost is written in JavaScript client-side programming language. WordPress is written in PHP server-side programming language. Ghost’s authors claim it’s a CMS concentrated on publishing content. The idea for Ghost first appeared as a post on developer John O’Nolan’s blog back in November of 2012.

Independent tests show Ghost to be up to 1,900 percent faster than WordPress. What does that mean? In the amount of time it takes WordPress to respond to 1 request, Ghost already responded to 19 of them. Is this speed hype for product differentiation?

Does PagePipe use Ghost or Ghost’s $20-per-month servers? Nope. Do we recommend it? Nope. We have a point to prove: cheap, shared-hosting can be fast. Ghost’s Home-page loads in 2.8 seconds and TTFB is 1 second. Not good enough. Even GoDaddy’s better. PagePipe TTFB is 245 milliseconds. So Ghost’s server delays negate fancy speed claims. Most fast, free themes load in around 50 milliseconds. WordPress core is even less than that. So Ghost’s boost in speed is theoretical or ivory-tower.

Since WordPress originated as a fork of b2/cafelog – and almost forked before with Ghost – it may fork in 2018. Who knows? It depends upon how much users hate Gutenberg.

Meanwhile, don’t hold your breath. No Twenty-eighteen theme is on the horizon for some time. We recommend two alternatives for speed:


LOOKING FOR A NEW THEME FOR 2018?

[bscolumns class=”one_half”]

thumbnail of THEME-ME-10-v1.compressed
THEME.ME: What is the fastest free theme? There are 5,100 free themes in the WordPress theme directory. Of those, only 1,602 are responsive. All the rest are fixed-width junk. How did we sort the remaining 1,602 free responsive themes to find the fastest loading?

[/bscolumns][bscolumns class=”one_half_last”]

Twenty-seventeen Default Theme Tips Read our torture-test results of this popular free theme. Don’t get locked in for recurring *annual renewal* theme memberships. Save your money. The Twenty-seventeen Torture-tested Themes ebook contains honest and common-sense reporting and tips about mobile WordPress speed!

[/bscolumns][bscolumns class=”clear”][/bscolumns]

Tiny Hestia free WordPress theme: mobile speed review.

In Ancient Greek religion, Hestia is a virgin goddess of architecture.

Tiny Hestia is a free child-theme that strips down the full Hestia WordPress theme.

There is no reported visual differences between the child theme and the free parent theme. No changes of style. The child theme removes all frivolous scripts to make the theme super fast and clean. That’s the claim. Let’s do some benchmark testing. All tests are done on cheap, shared, magnetic GoDaddy hosting. No CDN.

HESTIA
Version: 1.1.50
Last updated: October 2, 2017
Active Installs: 40,000+
ZIP download: 4M

TINY HESTIA
Version: 1.0.5
Last updated: September 22, 2017
Active Installs: 600+
ZIP download: 785k

Decompressed Tiny Hestia is 1 megabyte. We note: 752k of that is the theme screenshot. That leaves 248k of CSS, PHP, and Bootstrap. Most notably, they removed heavy-loading Font Awesome. It’s replaced with a tiny 1.6k image sprite. The sprite (above left) contains only three icons: a shopping cart, a chain for links, and a magnify glass for search.

Here’s the included theme screenshots:

Main Hestia screenshot.

Tiny Hestia Screenshot

Pingdom.com speed tests for these themes:

Hestia master 474 millisecond load time. No images.

Tiny Hestia load time 434 milliseconds.

The differences include slightly better speed, better page weight, and fewer number of HTTP requests.

Before 〉 256k
After 〉 83.4k

Before 〉 18 requests
After 〉 10 requests

So what if we optimized Tiny Hestia with some speed plugins? What would the results be then?

Tiny Hestia with speed plugins: Load time is now 225 milliseconds.

Before 〉 83.4k
After adding plugins 〉 71.1k

Before 〉 10 requests
After adding plugins 〉 4 requests

We’ve been using Magazeen Lite free theme. So we thought we’d compare it. Note: We recently switched PagePipe to Twenty-seventeen default theme.

Magazeen Lite theme for comparison with the same speed plugins installed.  About the same speed, number of calls, and 15k lighter page weight.

MAGAZEEN LITE
Version: 1.0.11
Last updated: November 7, 2016
Active Installs: 400+
ZIP download: 432k

Any free theme with a zip download file size of about 500k or less will not include Font Awesome.

For Zip downloads that weigh below 1M, about 30 percent will have Font Awesome included. Font Awesome can add 70k to 300k of extra page weight globally (site drag). 17 percent of these themes will have lighter-weight Genericons. The remaining 47 percent will not have any icon font. The remaining 6 percent will have a variety of different lightweight icon fonts.

There is no easy way to remove icon fonts without messing up the mobile user experience. It’s plain – for extreme optimization – it’s best to start with a theme without Font Awesome.

Below is a list of 45 fast themes we recently evaluated. None have Font Awesome. They’re not beautiful themes. They only have speed potential. Load the theme up with:

  • sliders
  • huge images
  • SEO plugins
  • third-party advertising
  • Facebook counters
  • etc

And you’ll have a heavy, slow site. Use good speed strategy and common sense creating your website.

Our speed suggestions from the free WordPress Theme Directory:

Aquarella Lite
Avani
Bakedwp
Best Reloaded
Branches
Burger Factory
Checathlon
Cosmica Green
Couture
Expire
Foodies
Foxhound
Gama store
Golden Black
Grayscales
Hacker
Hamilton
Hit
Housepress
Iconic One
Kiyoshi
Lightblogkt
Lightpress
Marvel
Mediquip Plus
Oneway
P2
PDX Chambers Basic
Photopress
Polestar
Proficient
Responsive Kubrick
Reviewzine
Risa
Seos Video
Siimple
Simple Store
Simply Pure
Singularity
Taste
Tiny Hestia
Truelove
VW fitness
VW Hospital Lite
Wellington

The speed plugins we used from the free WordPress plugin directory:

Autoptimize

Cache Enabler

Disable Emojis

Far Future Expiration Plugin

Query Strings Remover

Remove Google Fonts References

WP jQuery Plus

Is Tiny Hestia optimized special or super speedy?

Not necessarily. It’s better than Big Hestia. By simply leaving Font Awesome out, many trim themes easily have equal speed. But Hestia looks quite nice. And we like the design touches. We recommend Tiny Hestia for improved mobile user experience.


LOOKING FOR A NEW THEME FOR 2018?

[bscolumns class=”one_half”]

thumbnail of THEME-ME-10-v1.compressed
THEME.ME: What is the fastest free theme? There are 5,100 free themes in the WordPress theme directory. Of those, only 1,602 are responsive. All the rest are fixed-width junk. How did we sort the remaining 1,602 free responsive themes to find the fastest loading?

[/bscolumns][bscolumns class=”one_half_last”]

Twenty-seventeen Default Theme Tips Read our torture-test results of this popular free theme. Don’t get locked in for recurring *annual renewal* theme memberships. Save your money. The Twenty-seventeen Torture-tested Themes ebook contains honest and common-sense reporting and tips about mobile WordPress speed!

[/bscolumns][bscolumns class=”clear”][/bscolumns]

Theme Review: Accelerate WordPress theme is fast loading.

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)

LOOKING FOR A NEW THEME FOR 2018?

[bscolumns class=”one_half”]

thumbnail of THEME-ME-10-v1.compressed
THEME.ME: What is the fastest free theme? There are 5,100 free themes in the WordPress theme directory. Of those, only 1,602 are responsive. All the rest are fixed-width junk. How did we sort the remaining 1,602 free responsive themes to find the fastest loading?

[/bscolumns][bscolumns class=”one_half_last”]

Twenty-seventeen Default Theme Tips Read our torture-test results of this popular free theme. Don’t get locked in for recurring *annual renewal* theme memberships. Save your money. The Twenty-seventeen Torture-tested Themes ebook contains honest and common-sense reporting and tips about mobile WordPress speed!

[/bscolumns][bscolumns class=”clear”][/bscolumns]

Twenty-seventeen theme torture testing.

Can you get better speed test scores with motion header graphic elements?

Twenty-seventeen theme on steroids using free SpeedHeader – and extras.

Straight “A” ratings and 100 scores are great bragging rights. But those don’t matter as much as real speed. We got those perfect test marks easily. But most importantly with SpeedHeader, time-consuming HTTP requests were reduced from 73 to only 9. The page speed was reduced to a worst-case 1.6 seconds and best-case 854 milliseconds. And page weight was now a mere 450k. So what? Who cares? Your suffering mobile website visitors that’s who!

 

TEST 1

 

Pingdom.com
Performance grade: “A” 100
Load time: 854ms
Page size: 449k
Requests: 9

Tested from New York

on Nov 23 at 05:06


TEST 2
WebPagetest.org
TTFB: 601ms
First view: 1.609s
Repeat View: 368ms
Page size: 334k (lazy load), 447k complete
Requests: 9
Tested from: Dulles, VA – Chrome – Cable
on 11/23/2016, 5:19:37 AM


THE OOBE

Here’s our story about the “Out-Of-Box-Experience” for WordPress Twenty-seventeen theme. Our raw baseline is pretty fast. But wait until we abuse the theme.

If you don’t add any images assets, the Twenty-seventeen Home page will load in under 1 second. Measuring with Pingdom.com, we got an 805 millisecond speed test. The page weight was 471k with 14 requests. Worst case, measured by WordPagetest.org, was 1.5 seconds. Still not bad. But not impressive enough for a page with no content and only one still-header image!

So we decided to do the amateur approach. Let’s fill all the page graphic-asset options – to the maximum! These included:

  • Fall-back image (the 115k, 2000x1200px default included with the theme).
  • 44-second, 11M, YouTube hosted “atmospheric” MP4 video.
  • Five high-res, featured, digital camera images ranging from 6M to 11M in weight.

We added five camera images because there were places for that many shown in the Twenty-seventeen customizer and Home page. The assumption is filling all the Front Page Content Sections must be normal and good practice. That many, of course, aren’t truly needed – or even wanted. But how would a site owner know otherwise. The content areas can be left empty. That, also, isn’t mentioned anywhere – like in a read.me file.

We borrowed an “atmospheric” MP4 video. We note here that the Twenty-seventeen theme header accepts smaller-sized .MOV files, too. We tested it. But .MOV format will not play on Google Chrome browser. So why bother? Maybe because .MOV is the default format used by most stock video houses. File conversion is then necessary. We admit we picked a heavy 11M video. Most freebies are in the 3M to 6M range. But what’s to stop someone from loading a full-length, 2-hour YouTube movie? [smack forehead now]

We uploaded the temporary video to our free YouTube account. We copied the YouTube link URL address into the theme customizer. The faster-loading alternative is hosting the video from the WordPress theme media library. We discovered it’s the better delivery method. The Twenty-seventeen read.me file again doesn’t tell you that nice speed tip. But, we wanted to build a worst-case scenario. So we used YouTube. This option falsely appears to be the most sensible.

YouTube has high-bloat overhead. Many third-party HTTP requests are introduced by YouTube hosting. There are no warnings of potential speed damage. Whereas, only one request occurs loading video clips from the WordPress media library. Requests cause delays.

The sample stock images came from Death to Stock. We used The Collaborative collection. Each digital-camera JPEG image was uploaded to the media library. It took a while to process because of the big sizes. But we were curious what WordPress would do. Would it fail?

The still-image weight changes after WordPress processing:
WordPress automatically compresses all image uploads. All images were also mechanically resized to 2,000px × 1,200px by the theme.

Before > After upload
1. 5472 x 3648px, 11M > 106k,
2. 4126 x 2693px, 7M > 141k
3. 4220 x 2373px, 6M > 167k
4. 4240 x 2684px, 7M > 158k
5. 5472 x 3648px, 11M > 105k

After WordPress processing, all images pass WebPagetest.org’s criteria for optimization equivalent to a Photoshop JPEG quality setting of 50. Beautiful! We’re impressed with WordPress’ image optimization capabilities. No fancy plugins were required. But we’ve added 677k to the page weight! Ouch.


We jammed WordPress Twenty-seventeen Theme full with big, generic stock images and motion video. A worst-case scenario test – with an idiot at the wheel. The final results still aren’t horrible: 1.5 to 4 seconds load times. We’ve seen much worse.

This video above is a quick scroll through the beautiful page. But, we deliberately loaded up the Twenty-seventeen theme to be heavy. Let’s see what the test results are for speed now.

Note: Because of good lazy loading practices, the perception of speed with Twenty-seventeen is very good. But uncaring bandwidth consumption affects mobile data throughput – crummy UX results and higher connection costs. The extra page weight makes a big difference for mobile device users.


The data as evidence:

Pingdom.com (best case)

Performance grade: B 87
Load time: 1.53s
Page size: 9.3M
Requests: 73
Tested from Dallas

on Nov 23 at 02:48


WebPagetest.org (worst case)

TTFB: 552ms
First view: 4.145s
Repeat View: 1.836s
Page size: 1.8M (lazy load), 4.6M finished
Requests: 33 (lazy load), 65 finished.
Tested from: Dulles, VA – Chrome – Cable
on 11/23/2016, 3:29:02 AM


To achieve those great speed test results for SpeedHeader and Twenty-seventeen theme, did we cheat?

Honestly? Us cheat on a speed test?

Yes. We cheated. Just a little bit for a boost. Here’s good news from our plugin back story >

Notes for extreme-speed fanatics (like us): Twenty-seventeen theme does a great job of optimizing JPEGs to the new 82-quality setting (was 90 before). This makes large images pass WebPagetest.org’s image-compression test criteria. That’s the equivalent of a 50-quality setting using Photoshop. Wonderful. But…

We did one of our favorite signage speed tricks, using large-size – but small-weight – PNG files. Uploading the featured PNG images to Twenty-seventeen theme the weight automatically increased by 3 to 4 times the original. We found that if we used GIF images we had “no changes” and a smaller image file resulted. Freakish image voodoo.

ruby #c43a2c

For example: This 2000x1086px simple, red 9k-PNG signage (above) converted to 32k as a featured PNG image. Fail! As a 25k JPEG, WordPress automatically converted it to 58k of JPEG bloat. The solution: make it a 15k GIF. Then WordPress wouldn’t change it. Oddity.


You can download the lightweight motion header used in this test and other goodies for free here >

A personal note from Steve:

I‘m recommending the Twenty-seventeen default theme. I’m not following my own convention of being unconventional. You may have expected me recommending something more esoteric. Or perhaps a *premium* theme. It may seem an evasion or path of least resistance. Not so. The main reasons for using this theme are:

1. It’s WordPress endorsed. They are the biggest theme author and theme publishing company in the world. The future longevity of this theme is excellent. It will be updated and kept current for many years. It won’t be abandoned or sold.

2. I torture tested the pre-release back in October – and have continued testing it since (9 months). It’s fast for mobile – even when abused with sloppy design practices that bloat most sites. If a site is slow using this theme, it’s not the theme’s fault. It’s something else. It has potential most people don’t realize.

3. Pages are a classic one-column layout suitable for modern mobile business sites (not a blog format with sidebar). The parallax, front-page, sectional, featured images can be used or not. It has flexibility.

4. With a little imagination, using color-depth-limited GIF images allows big-screen graphics to look “grand scale.” Yet, still be fast loading. This is a standard-issue theme with uncommon mobile adaptation.

5. It works well for responsive mobile screens. It does require planning and creativity for the fall-back header image.

Don’t hesitate or be embarrassed for using this theme. While one person at Automattic designed it, a team of 103 contributors put many hours into reviewing and tweaking it. It had a high price tag for WordPress to produce it. So just because it’s free, doesn’t mean it’s cheap.

Intense E-motion – freebie header for Twenty-seventeen theme!

Review: How fast is Bimber WordPress theme?

Aggregator websites collect and post syndicated material from around the Web, including news, specialized publishing, or the latest bargains and deals in Internet shopping.

Good aggregation helps readers find interesting news and information. It also gives sites they link to added exposure. They are middle men, but they greatly benefit both sides.

Aggregator websites are all about monetization. Website monetization is the process of converting existing traffic being sent to a particular website into revenue. The most popular ways of monetizing a website are by implementing Pay per click (PPC) and Cost per impression (CPI/CPM) advertising.

A good explanation of aggregator strategy and purposes can be found at http://www.onlineeconomy.org/aggregators-the-way-to-win/

There are many WordPress themes that cater to the needs of this niche market. As near as we can tell, there is no free theme that can do all the necessary features. But there are paid themes and one in particular is of interest: Bimber by ThemeForest.

Bimber has great Mobile UX. Banner ad appears underneath a top feature, thumb-swipable, horizontal scroll. No scrolling jank from the ad shoving things around as it loads on the page. Very nice.

mobile-landscape-480x320px

It’s difficult to make an aggregator theme and site load quickly. Aggregators are image intensive and can have 100s of javascript HTTP requests. Because of syndications, ads, and other offsite or third-party assets, we’ve seen aggregator home pages with over 300 calls. Page weights are in the above-average, multi-megabyte range.

Aggregator websites have resource intensive hogs like Disqus, Facebook, Twitter, Google Analytics, YouTube, Vimeo, Google News, etc. There is nothing wrong with using plugins that may be resource intensive, but you need to balance the trade-off of the plugins’ functionality with the speed and optimization of your website. This requires value analysis. Especially for mobile users.

Value analysis includes the following: combination, simplification, elimination, standardization, and substitution. This is strategic performance optimization. A value analysis audit examines every requested component and it’s contribution to site goals. This requires setting self-imposed limitations. Aggregator sites are seductive for adding too many features in the hopes of perfecting revenue.

Perfection has too high of a price. Metrics need to be evaluated. Only 20 percent of assets provide for 80 percent of the profit-producing features.

Bimber theme is touted as a lightweight aggregator theme. Their marketing says they are a “viral & buzz theme.” Those are unmeasurable, unregulated advertising claims. How fast is “lightweight”? Viral and Buzz are jargon, weasel words. This diminishes their credibility.

Test results for Bimber speed reports vary depending upon the date of the test, the location, and the testing tool. Times ranged from best-case 1 second to worst-case 5 seconds. that is quite a spread. And page weights varied from 830k to 1.7M. Again, a big spread. So testing conditions with changing parameters render objective benchmarking a flop. It’s hard to say if our performance goal of a 2-second load time is achievable especially internationally.

The average Internet page weight today is around 2.3M. None of these test reports used a demo page of that size. It also appears that aggregator sites are above average in page weight with above 4M of files. This diminishes the prospect of good speed (under 2 seconds) for mobile users.

Bimber is frequently featured on articles dedicated to fast WordPress themes. Fast, of course, is relative.

Top 30 Fastest WordPress Themes For Fast Loading Sites in 2017

The above article claims the following for Bimber load times:

GTMetrix Score:
PageSpeed 89%, Yslow 80%, loadtime: 3.64 seconds, requests: 47

Pingdom Score:
Load time: 981ms, Requests: 61, Page size: 830kB
(Note: Aggregator sites are never this light – under 1M. These are unreliable results. A fake page.)

Google Page Speed Insights:
Desktop: 89/100, Mobile: 85/100

Another recent 2016 test claims the Bimber theme loads within 1.5 seconds. (Pingdom score 84/100 to Amsterdam, Netherlands), Page size: 1.7MB, 83 requests.
(Note: This is a more realistic page weight test. But still too small for any real-world aggregator situation. And only 83 requests is also not a real-world number. HTTP request would be in the 100s of calls.)

“On the (Bimber) homepage, you have a 728×90 ad banner, exactly below the header which will attract your users. A 300×250 is placed within the content so that it would look more like a part of your site rather than an advertisement. This is the most profitable ad placement in this theme.”

Bimber demo framebuster code won’t allow testing on browser-based iPhone simulators. Or on Yslow. So we couldn’t get results there. Yslow tests would have revealed how much lazy loading of assets were really occurring (if any).

About those HTTP calls: there were only 47 to 83 requests on these tests. That doesn’t represent the hundreds of usual HTTP requests that occur on a normal aggregator website. This demo is a best-case scenario. Or a mock-up dummy.

Bimber’s advertising page claims the theme is optimized for Google PageSpeed. We couldn’t care less about this test claim. But we ran the demo page anyway for verification. We got the usual frustrating, boiler-plate, error messages this lame test usually produces for WordPress sites. The scores are meaningless if the page  loads in 5 seconds. Google doesn’t even use PageSpeed scores in it’s own ranking algorithm. Instead, Google uses Time To First Byte (TTFB). Bimber can get good time to first byte under the right conditions (322 milliseconds). That depends most on the hosting service.

Read our article: Why we don’t use Google PageSpeed Insights. >

Also offsite links:

Why you Shouldn’t Care About Google PageSpeed Insights

Why Trying to Get 95+ on Google PageSpeed Insights for Your WordPress Site Will Drive You Mad!

Our own Bimber PageSpeed Insights test results.

Mobile 90/100, with the usual WordPress unachievable error message of:
“Eliminate render-blocking JavaScript and CSS in above-the-fold content”

Desktop 94/100, with the following absurd warnings:

  • Enable compression
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content
  • Leverage browser caching

We know those things are being done as best as possible. This is a sales demo after all.

iPhone-Bimber
Bimber on iPhone.

What is of more benefit is testing with WebPagetest.org. Ironically, an open-source tool also sponsored by Google after a buyout.

Our Bimber demo page test with WebPagetest.org:
weight: 1.3M
First View (cleared cache): 3 seconds
Repeat view (primed cached): 2 seconds
Requests: 50

Fully loaded: 1.7M, 5 seconds cleared, 3 seconds primed.

This data shows the demo is “lazy-loading” about 400k of assets. But they are not using a lazy-load plugin. It may be part of the Google CDN feature or built-into the theme. We’re not sure. Most (half) images are stored in the media library.

The most important thing for SEO is Time To First Byte. Bimber TTFB is only 322 milliseconds (very fast) when hosted on a faster NGINX server (not Apache based).

But this speed number only influences less than 1 percent in the Google algorithm. Relevant content will always superseded speed for ranking. Speed is not a significant SEO factor. It’s a major UX factor.

The Bimber demo uses two free plugins from the WordPress plugin repository.

  1. Sitelinks Search Box
    Free plugin so people can reach your content more quickly from search results. If you use WordPress SEO by Yoast plugin version 1.6 or newer, you don’t need to use this plugin, as this feature has been included in the version 1.6 update.

After activating the plugin you only have to “Wait for Google Search algorithms to identify your site as a candidate for the new sitelinks search box”.

2. W3 Total Cache plugin
This is a popular plugin (over 1 million installs). Some people swear by it. But from our tests, we’ve never had improved speed results on a well-optimized site. The demo is successfully using WTO plugin for minification and content delivery network support. But other alternatives exist.

Note: W3T caching plugin wouldn’t be our recommendation. The most raved about caching plugin is WP Rocket. It’s a paid plugin we’ve never tested. And never will because all our tests of other available caching plugins reveal they only help improve speed if your site is grossly bloated. If the page is well optimized, there is no improvement whatsoever with caching plugins.

Elements that are significantly delaying or improving Bimber demo page load time:

  • At least, 1.5 to 2 second load time delay is for Facebook API JS libraries connections and calls. Out of 5 seconds total Facebook is a huge problem!
  • JS and CSS are minified and concatenated. This improves speed and is most likely being done with the W3T plugin.
  • The demo uses GStatic CDN (Google) to offload JS/images/CSS – and probably fonts. But mainly images. There are some blogger complaints that GStatic CDN does NOT improve performance and actually slows down page loading. It would require benchmark tests. We see CDNs as band-aids for sloppy web design.
  • About 1M of images on the Bimber demo page could have been compressed further by 379k (almost 40% reduction in file size — visually lossless). The speed gain would be less than a second – but worth it.
  • The demo page uses the Google viewport meta tag which means the content is optimized for mobile content. A viewport controls how a webpage is displayed on a mobile device. Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen. Setting a viewport gives control over the page’s width and scaling on different devices.
  • The demo uses built-in Aggregation Functionality plus Pingbacks, RSS, Really Simple Discovery, and Window Live Writer Support. All of these things cause “drag” because they are offsite calls for assets or code.
  • We don’t know if the following are standard Bimber theme features or not: The demo also uses Open Graph Protocol (supported by Facebook). And Twitter Cards for linking content to Twitter. These cause drag.
  • Bimber uses “scrset” in their theme code for adapting images for high- and low-resolution displays. (Good for iPhones and iMacs).

Bimber Theme Conclusions:

Bimber theme has all the bells and whistles any aggregator business would love to have. It’s mobile UX is superior. It’s $49 price tag is cheap. To get load times below 5 seconds will take work. In the final speed analysis, every single HTTP request must be evaluated for contribution to site value.

Reviewing “The7” theme for speed improvements.

Summary: The7 theme javascript is the main speed obstacle. Second, is the type of image files used to create the animation (PNGs). Third, the animation plugins (slider) is slowing down the site. These elements cannot be improved or changed.

It’s a miracle this theme loads in under 4 seconds (sometimes 3) with all of these obstacles stacked against.

The client wrote:

To make a long story short, the job was to improve the look of the website and improve the speed to 2 seconds or less.  When he started the site was loading close to 3 seconds and as you can see it got worse to about 4 seconds. I believe it was $680.00 through a “developer” in India.

You got at least $1,500 worth of work for $680 dollars. Many people would be satisfied with your site. It’s fresh and modern. You’re disappointed because your expectation of speed improvement didn’t materialize as promised. In fact, it got 1-second worse (depending upon the test used).

The theme “The7” cost $59. The visual composer (drag-and-drop) is built-in for maximum customization. It’s “feature-rich” – meaning the theme authors from the Ukraine included the kitchen sink to appeal to everyone. Multipurpose usually means slow. The7 has been sold 30,000 times. It’s popular. Popular means “slow.” That is because people are attracted to themes that look pretty and have bells and whistles. But learning how to use The7 is probably as complex as a new computer operating system.

$1.7 million dollars worth of The7 theme have been sold to happy(?) customers. In the Ukraine, that’s a lot of money.

One single javascript file for this theme feature is 403k minimized. A heavy load. There is about 1M of javascript total associated with the theme (before being gzip compressed). This cannot be improved.

Images on your page are 265k for background images and 230k for other images. The PNGs can’t be altered or it destroys the aesthetics. They require transparency. They are the biggest part of the image weight. They cannot be improved with optimization either.

This is typical: 50 percent code weight and 50 percent image weight.

The goal is to balance aesthetics (branding) and speed (load time). Anytime, you increase one you decrease the other. Push and pull. More decoration slows down a site. Less speeds it up.

There are two types of aesthetic design: classic and expressive.

A “The7” site leans toward expressive because of the colors, animation, and image usage. Image usage includes PNG transparency and large background images (layering effects). If too much expressive aesthetic is used, then the page gets visually noisy – and heavy. It distracts from the content (text). The goal is to get people to read – or click a response button.

Classic aesthetic is static, clean, and usually stark white. Sometimes referred to as minimalistic. But it has it’s roots in Greek and Bauhaus design theories with white space usage, invisible grids, and golden-aspect ratios.

If a page is too classic, it gets boring and repetitive. If it is too expressive, it turns into distracting noise. A balance has to be found again for wisdom. How “good is good enough” is subjective and biased by opinion and perception.

For me, it’s amazing The7 theme loads in 4 seconds with all the expressive design elements. 4 seconds is a typical load time for a WordPress theme that doesn’t have many images on the page –and no animation. But the Internet average load time is about 8 seconds. Which has been proven practically intolerable for users. The saving grace is the pages aren’t completely blank for 8 seconds. If it is blank, the site will most definitely be abandoned.

At this point, to get better speed, you’d have to throw money at the theme problem – or redesign. You’d have to sacrifice some expressive aesthetics – especially the animation. All for a few seconds of speed.

I do like the look of the site so my goal would be to improve the speed as you suggest.  4 seconds is just too long.

The prospects of trimming 2 seconds aren’t good. The image assets are heavy and require Javascript to be loaded. The PNGs can’t be improved. They are already 8-bit save-for-web and best case. But Jpegs may be improved. From our tests, we doubt the Smush plugin is doing any good. WordPress image compression was recently changed from 90 to 82. That is good enough.

There are other things that can’t be changed: Fontawesome is included. It loads even if it isn’t used. SliderRevolution plugin is loaded on every page – even if there isn’t a slider present. Dashicons are loaded for every page. Various Google fonts are loaded. While all of these things can be removed with code modifications, they are part of the design and the site wouldn’t look the same – it may even break.

After he screwed up my site

Your site isn’t screwed up. It’s just not perfect in every way. Perfection can have a high price. It’s definitely an above-average website. Very usable. We wouldn’t have wanted to build it. We wouldn’t change it. Those animation addons have a steep learning curve.

I followed this guide exactly but it only made a tiny improvement:  http://www.onlinemediamasters.com/w3-total-cache-settings/

We’ve never had any success with W3 Total Cache plugin. So you aren’t the Lone Ranger. In general, if the site is already as optimized as it can get, caching just doesn’t make any difference. It doesn’t matter what caching plugin you use.

But recently Cloudflare and MaxCDN stopped working right so I disable both of them and they weren’t really working anyway.

Be sure to completely uninstall any plugins associated with those old CDNs.

Cloudflare CDN also failed in our speed testing. Same story as caching. Once a site is optimized, CDNs can’t help. Instead, they frequently slow down pages or cause “page not found” errors. It’s our opinion that CDN mainly helps with security and not speed. But if you have a grossly bloated website, CDN makes a difference. Or if you are selling to an international market (which you aren’t).

CDN and caching are band-aids for sloppy designers. Too lazy to optimize.

Current plugins:
Akismet
Yoast seo premium
WP smush
Relevansii premium
Blubrry powerpress for my podcast
contact form 7
forget about shortcode buttons
ninja popups
Slider revolution-homepage animation
W3 total cache
WPbaker visual composer ( this is what he used to design the site rather than my requested CSS in the style.css document in the child theme which is blank).

There isn’t anything we can add that would significantly improve the speed. We do believe W3 Total Cache is minifying your CSS and JS files. It’s also gzip compressing all files. So you are getting some benefit from it. Those features could be added with other plugins – but there wouldn’t be a speed increase to remove the W3 Total Cache plugin.

Contact Form 7 is a heavy plugin. But changing it to something lighter won’t be significant. We’d leave it alone.

Conclusion: We suggest your website is good-enough to communicate for marketing purposes. Review the main goal of your site. Redesign should be postponed as long as possible.

LOOKING FOR A NEW THEME FOR 2018

thumbnail of THEME-ME-10-v1.compressed
THEME.ME: What is the fastest free theme? There are 5,100 free themes in the WordPress theme directory. Of those, only 1,602 are responsive. All the rest are fixed-width junk. How did we sort the remaining 1,602 free responsive themes to find the fastest loading?

[bscolumns class=”one_third”]

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

[/bscolumns]

[bscolumns class=”one_third”]

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

[/bscolumns]

[bscolumns class=”one_third_last”]

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

[/bscolumns]

Speed report: 35 theme candidates.

We evaluated 35 theme candidates. All are available as free downloads from the WordPress theme repository. They came to our attention via email newsletters. Some are new and others are older but still popular. The alphabetical list is at the bottom of this page.

Here we report some theme trends that affect website speed and how to evaluate what is important.

Remember, our goal is a two-second, home-page load time using WordPress. The lighter the theme overhead the more headroom we have in our performance budget for adding things like images, forms, and other features.

There are certain cues and clues that help us evaluate a theme for speed potential (fast page load) – without installing it first. The download package size is number one on our list. Any theme download that is under 1M (zipped) usually is a sure bet for speed. But larger than that compressed file size doesn’t always mean a speed failure. You have to dig deeper by downloading the package and examining the contents. The 1M package size is a quick-and-dirty selection method.

A compressed theme package may contain many resources – or sometimes non-features. When we say non-features, we refer to fluffy bloat intended to deceptively entice website owners. Theme authors include these things to make the theme appear “feature rich.” But most features have a speed price.

Modern WordPress Speed Traps

When evaluating themes for speed, you need to consider the following:

  • Google Fonts (or worse the heavier Typekit) will slow down a website. It’s now rare to see a theme using fast-loading system fonts. Die-hards argue that most Google Fonts are now present in all browser cache. There is no way to prove this with present online testing tools. We estimate a 100 millisecond slow down uing Google Fonts instead of websafe fonts.
  • Fontawesome icon font – or an equivalent such as genericons or glyphicons. Icons are a popular inclusion. The downside is they load universally on all WordPress pages and posts whether the icons are used or not. How much this slows down a site depends on variables. We feel icon fonts are justified if you leverage them in your page design. But usually, it’s better to dequeue the font in the WordPress functions.php file and simply use icon PNG image files. If you remove the font files from your server using FTP or C-panel, you will end up slowing down the site even worse with 404 errors. Fontawesome can slow down a site by 500 milliseconds or more – 1 second delay isn’t uncommon. But how bad it really is depends. More typically, you’ll see delays of 100 to 200 milliseconds. There may be some improvement by using Better Font Awesome plugin and loading from their external CDN. We’ve played with this in tests and it has some potential for time-saving parallel loading.
  • Sliders are common additions now. When they are built into a theme, they may universally slow down all pages – even when they are only used on the Home page. How bad this delay is depends upon the slider. But for example, Nivoslider slows down all site pages by minimum of 200 milliseconds – even when no slider is present. The most popular in the 35-theme evaluation was Nivoslider (5 instances). Other sliders included: bxslider, OwlCarousel, Flexslider, Sldr, lightslider, and few custom ones. 19 of the 35 themes used sliders – that’s 54 percent. Over half. Sometimes, a better strategy is adding a standalone slider plugin and then selectively activating the plugin only on pages where it’s needed. The best plugin to do this is Plugin Logic.
  • Every theme includes a screenshot that serves as an icon in the WordPress theme control panel. These are rarely optimized images. In this evaluation, they vary from 100k to 2.5M Jpeg file sizes. The typical size is about 600k. This extra theme package weight doesn’t slow down the theme. But it’s an indicator of the theme author’s attention to speed details. A bloated screenshsot is simply benign, but wasteful, overkill.
  • It’s common for many themes to include sample or demo images. Like screenshots, these are rarely optimized images. 16 of our themes included header or slider images for easy setup. But they are extra baggage in the package. Worst case we had one theme with over 5M of Jpegs. But more typically, they were around 200k to 500k. These images are not intended to be used. They will be slow loading.
  • Theme packages may include language translations. These can add from 100k to 600k. But only 6 of our samples had these files. They don’t slow down a site. They just increase the package size.

Here’s the alphabetical list of themes evaluated: accelerate, accesspress-basic, activello, amazing-blog, awaken, awesome, bizgrowth, blogim, canape, coral-light, dellow, enigma, faceblog, flatter, futura, grow, hemingway, hueman, kotha, make, nisarg, perfetta, pingraphy, quidus, rams, responsive-brix, revive, simona, sixteen, splendor, tora, tracks, travel-eye, ultrabootstrap, and zerif-lite.

Excel spreadsheet analysis. Download >

The final proof is installing the themes and doing benchmarks. But, as noted above, there are things that can streamline our selection process before installation.

Fatness and popularity: Site owners prefer bloat.

The pressure to inflate theme package sizes is almost irresistible for theme authors. This is evidenced by the popularity of two examples: Zerif-lite (2.7M zip) 100,000 installs and Hueman (2.1M zip) 80,000 installs. And the incredible, 7M-download Enigma theme with 30,000 installs. Most themes are lucky if they get 10,000 installs. The fatter the more popular.

So if a theme is popular with the most installs, you can bet it’s a slow loading theme.

Read More Speed Theme Reviews

There’s a great article we recommend over at WP Rocket about choosing fast themes >

MB expanded installs fontawesome header image
accelerate.1.2.5 0.79 1.5 20000 0.959 1100px
accesspress-basic.3.0.3 1.2 2.2 3000 0.891
activello.1.0.2 2.1 3.5 10000 1.1
amazing-blog.1.0.7 1.3 1.9 600 0.838 1140px
awaken.2.0.5 1.5 2.4 10000 0.815
awesome.1.2.1 3.2 3.7 900 0.835 1280 fullscreen
bizgrowth.1.6 2 2.6 1000 0.835 fullscreen
blogim.1.2.6 0.947 1.7 700 0.718
canape.1.0.2 0.922 1.1 1000 0.166 fullscreen
coral-light.1.0.4 1.2 1.8 200 0.718 980px
dellow.1.0.6.4 1.1 1.8 700 0.672 parallax 1920x1080px
enigma.2.4.2 7 9.1 30000 0.147
faceblog.1.0.5 1.2 1.6 50 0.838 composite blocks
flatter.1.1.6 2.5 3.5 2000 0.718
futura.1.5 0.484 1.6 500 parallax 1920x1080px
grow.1.0.9 3.2 7 2000 0.838
hemingway.1.56 0.936 1.1 30000 parallax
hueman.3.1.6 2.1 5.2 80000 1.6
kotha.1.4 1.3 2.2 2000 1
make.1.7.4 2.2 4.2 20000
nisarg.1.2.6 5.3 6 10000 0.891 fullscreen
perfetta.1.3.0 0.857 1.3 1000 0.718
pingraphy.1.3.0 0.957 1.5 2000 0.719
quidus.2.134 1.3 2.6 1000 0.199 parallax
rams.1.15 0.37 0.457 2000
responsive-brix.2.2.5 1.1 2.2 2000 0.838
revive.1.0.0.1 1.2 2.8 2000 0.899
simona.1.0.4 1.6 2.4 1000 1 1600 × 800 pixels
sixteen.1.5.4 1.4 1.9 9000 parallax
splendor.1.0.3 3.6 3.7 300 0.194
tora.1.07 1.3 2 1000 0.459 parallax
tracks.1.50 1.3 2.3 10000 0.899
travel-eye.1.5 1.2 2.1 1000 0.959
ultrabootstrap.1.0.8 1.9 2.8 300 1.1
zerif-lite.1.8.4.4 2.7 4 100000 0.606


LOOKING FOR A NEW THEME FOR 2018?

[bscolumns class=”one_half”]

thumbnail of THEME-ME-10-v1.compressed
THEME.ME: What is the fastest free theme? There are 5,100 free themes in the WordPress theme directory. Of those, only 1,602 are responsive. All the rest are fixed-width junk. How did we sort the remaining 1,602 free responsive themes to find the fastest loading?

[/bscolumns][bscolumns class=”one_half_last”]

Twenty-seventeen Default Theme Tips Read our torture-test results of this popular free theme. Don’t get locked in for recurring *annual renewal* theme memberships. Save your money. The Twenty-seventeen Torture-tested Themes ebook contains honest and common-sense reporting and tips about mobile WordPress speed!

[/bscolumns][bscolumns class=”clear”][/bscolumns]

Review: Aldehyde versus Dellow versus Sixteen WordPress themes.

We built a prototype site for LiveInPalouse.com. The Aldehyde theme was our initial choice – never realizing a problem existed with the responsive, mobile-view for smartphones.

Aldehyde iPhone fail.
Aldehyde iPhone fail. Ugly.

Aldehyde Theme Failed

Aldehyde has nice features (3000+ installs). In particular, parallax scrolling and a parallax header. Plus a responsive Nivo slider supporting up to ten slides. We wanted these features but they weren’t a required specification. So we searched for alternatives.

To find a new theme, we sifted through 35 theme candidates. Where did these themes come from? All are available as free downloads from the WordPress theme repository. They came to our attention via email newsletters. Some are new and others are older but still popular. (We’ll revisit what we learned from our theme analysis in a later post.)

Here’s the alphabetical list: accelerate, accesspress-basic, activello, amazing-blog, awaken, awesome, bizgrowth, blogim, canape, coral-light, dellow, enigma, faceblog, flatter, futura, grow, hemingway, hueman, kotha, make, nisarg, perfetta, pingraphy, quidus, rams, responsive-brix, revive, simona, sixteen, splendor, tora, tracks, travel-eye, ultrabootstrap, and zerif-lite.

Excel spreadsheet analysis. Download >

While many of these themes are useful for various applications, the ones that caught our attention immediately for further testing were Dellow and Sixteen. Both had home-page, responsive Nivo sliders and parallax header features.

Dellow Theme Better Alternative

Dellow only had about 700 installs on the web. Not very many. Potential for speed is indicated by the theme’s small, download-package size (1.1M). That expands to 1.8M after unzipping the file. About 216k is image fluff, 294k the screenshot for the theme icon, and 100k is a nice PDF document file of how to use the features. Happily, none of those components contribute to page bloat. But sadly, some of the 672k in Fontawsome icon font will. We don’t appreciate it’s inclusion in the theme design since it slows down page loads.

Dellow desktop screen version. Click image to enlarge.
Dellow desktop screen version test. Click image to enlarge.

In spite of being potentially fast, Dellow theme wasn’t very attractive looking. This was a deal killer. After installing it on our test site, we found that the name “Dellow” most likely originates from a contraction of “dark yellow” – the theme’s main mustard color. It clashes with the vibrant greens in the featured slider and background photography. And that’s unpleasant. Fixing the color by recoding will take too much time.

Dellow smartphone screen. Not too good looking.
Dellow smartphone screen. Better. But not too good looking.

Sixteen Theme Best Choice

The other theme candidate is Sixteen, a recent release.  It has about 9,000 installs – a more popular theme already, even with being new. The download file decompresses to 1.9M. In the components, 248k is placeholder image fluff, 253k is the screenshot.  It has the same Nivo slider and parallax header features. And wonderfully, it doesn’t include Fontawesome baggage. But that isn’t the reason this theme is selected. We know how to dequeue that icon weight.

Sixteen theme uses a classic color palette. of black and creme. Much nicer look. Click image to see a larger view.
Sixteen theme uses a classic color palette of black and creme. Much nicer look. Click image to see a larger view. Feature post images aren’t reduced in size for the sidebar like in Dellow.

Sixteen’s color usage is much better and easy on the eye.

Oddly, the number of slides is limited to just 5 in Sixteen. Whereas Dellow allowed 10. Go figure. But 5 is enough for what we want to achieve with the website. So how does, Sixteen look on a smartphone screen. Pretty good.

Sixteen responsive screen. It's resize is working and readable!
Sixteen responsive screen. It’s resize is working and readable!
Sixteen theme in the wild on an iPhone.
Sixteen theme in the wild on an iPhone.

The test site with Sixteen theme installed loaded in about 2.5 seconds. We then installed some plugins to improve things (minification, caching, and others) and got the speed down to 1.7 seconds. We feel this can be further improved with resizing some of the home-page slider images.

live-in-palouse-home
Final version

Sixteen is our recommendation of these three themes.

Pingdom test of Sixteen theme.
Pingdom test of Sixteen theme. 283-millisecond load time. No CDN. No caching. GoDaddy shared hosting!

Review: GovPress WordPress theme for speed.

Cities and towns have different website needs than small businesses. We’re rebuilding a website for the local Palouse Chamber of Commerce.

GovPress is a free WordPress theme designed for use by city and town governments. This theme is perfect for our web design goals. But it’s boring. So we’ll change it with customization and give it some life.

The theme custom header allowed a floating logo and a background image. Shown below:

A 8-bit floating PNG banner with transparency featuring the downtown Palouse clock.

The GovPress theme also allowed for color customizations. Our goal is a traditional palette based on the city’s frequent use of Hunter Green. This green is used on the city streets in the clock, light poles, benches, and waste receptacles. Also, Burgundy Red is the color of a dominant building on Main Street. Colonial Blue worked well with these colors.

The old VisitPalouse site was built with HTML Tables.
The old VisitPalouse site was built with HTML Tables.

Hero Widget Image

Click image to enlarge.
Click image to enlarge.

Traditional Color Palette

colors-palouse

Simple Typography

The theme typography is a simple and utilitarian Google Font called Open Sans. This is a popular font and already loaded in most browser cache for speed. It’s not decorative or distracting (like an expressive aesthetic font would be). This keeps the reader focused on featured stories and events.

open-sans-typography

Fast-loading Feature Video

Vimeo Jpeg 45k-image placeholder for the video. The image is loaded first. The video is loaded and starts when the image is clicked.
Vimeo Jpeg 45k-image placeholder for the video. The image is loaded first. The video is loaded and starts when the image is clicked. Notice the red and green building colors of our palette.

Normally, we wouldn’t consider putting a video on a Home page. Too heavy. But, Palouse has a nice, 2-minute video hosted on Vimeo. It was produced for the Palouse Scenic Byways Project. It’s perfect for the design look-and-feel we wanted. We tested embedding that video on the Home page in a feature-column widget. This slowed the page load to over 3 seconds. Badness! We needed a workaround to keep our load time fast.

That’s where this plugin came to the rescue: Lazy Load for Videos. But it would only work as a shortcode placed in the page or post text content. It wouldn’t work in a standard text widget. And we needed to have the video appear inside a widget. Big problem.

The solution was using the Black Studio TinyMCE Widget as a workaround. It allowed using the lazy-load shortcode without corruption or deletion. A Pingdom.com speed test to New York was now 1.24 seconds best case. We were getting the fast performance we needed again.

Google Maps without a plugin.

Image link using a 24k Jpeg screengrab of the Google Map.
Image link using a 24k Jpeg screengrab of the Google Map.

Since a principle site goal is getting people to come and visit the City of Palouse, they need to locate this small town. There are many plugins for embedding Google Maps. But all of them are slow loading – and require multiple HTTP requests. A Google Map can delay a page load by seconds. With a two-second performance budget, we wanted to avoid Google Map overhead at all costs.

The map-weight compromise is simple. Place a much-lighter, 24k, screengrab static image of a Google Map in the “Home page featured widget.” Then make an image link to the interactive Google Map in a new tab. This strategy also allows Google to manage many complex features like current weather, satellite map view, and street view images. This successfully offloads all those heavy features.

Feature Columns

We wanted multiple feature columns in the main area below the full-column-width Featured widget (map). Responsive Column Widgets plugin was the solution to get our 3-wide and 2-up multi-columns. Inside of these widgets we used the HW Image Widget plugin. It let us embed a feature image and also editable text and links description underneath the images.

Prototype Home Page

Above: Prototype Home page. Click image to view actual final page.

Responsive web design for all screen sizes.

desktop-2-visitpalouse
Desktop: VisitPalouse.com prototype Home page on desktop computer.
iphone-visitpalouse
iPhone: VisitPalouse.com prototype Home page on iPhone screen.
tablet-visitpalouse
Tablet: VisitPalouse.com prototype Home page on horizontal table screen.
vertical-ipad-palouse
Tablet: VisitPalouse.com prototype Home page on vertical table screen.

Final load time to New York 387 milliseconds.

Final Pingdom time and score.
Final Pingdom time and score.

251 posts of meeting minutes were converted from DreamerWeaver table-based pages.

It wasn’t too painful. Just repetitive robot work that we could do while listening to loud 70’s rock music. We’ll still be making pages in our dreams. Head banging.

Most of the page formating and text styling transfered well. There is only one remnant that needed changing: bolded subheads had “underlined” text styling.

Underlines are indicators of links. None of these subheads are links. There were thousands of them. We removed all underlining and left the subheads bolded. This is the “best-practice” styling method.

To make all of these changes as quickly a possible, we used Better Search Replace plugin. This stripped all HTML <u> and </u> underline tags from all post’s code.

One new plugin trick.

We used Simple Yearly Archive plugin to create a page with a list of all of the posted counsel-meeting minutes. They appear in the usual reverse-chronological order. There are anchor links to jump to years from the top of the page. The number of meetings (entries) appear in parenthesis next to the year.  All future posts will be automatically added to the list.

35 active plugins added to the GovPress theme. All freebies.

AA Sitemap, Better Search Replace, Better WordPress Minify, Black Studio TinyMCE Widget, Block Bad Queries (BBQ), Brute Force Login Protection, WP-PICShield – HOTLINK Defence, Configurable Hotlink Protection, Disable Emojis, Enable Media Replace, Far Future Expiration Plugin, Huge IT Slider, HW Image Widget, Imsanity, jonradio Current Year and Copyright Shortcodes, Lazy Load for Videos, No Comments, One-Click Child Theme, Optimize Database after Deleting Revisions, Plugin Logic, Remove Google Fonts References, Responsive Column Widgets, Rocket Lazy Load, Simple Drop Cap, Simple Scroll To Top, Simple Yearly Archive, Standout Color Boxes and Buttons, Super Simple Google Analytics, UpdraftPlus – Backup/Restore, Visitor Mailer, WP jQuery Plus, WP Super Cache, WP Updates Notifier, and WP-SpamShield.

Final page design.
Final page design.

Problems We Encountered

We had plugin conflicts that affect the usability of the dashboard and login. These were associated with the caching plugin and minification plugin.

Autoptimize we disabled. And WP-Cache.com plugin. These deletions didn’t affect speed. Pingdom load time to NY was still about 500 milliseconds.

Review: WordPress Sapor theme for speed.

These branding guidelines help determine the best way to use the logo, name, colors, typography, and photographic images for the new Friends of Hospice website.

Logo

The previous logo was blue on white background, circular and frequently hard to recognize because the negative space was seen as foreground first by some viewers.
Old logo.

The previous logo was blue on white background, circular and frequently hard to recognize because the negative space was seen as foreground by some viewers. The pattern was two geometric hands.


warm-hands2
Stock-art watermarked placeholder (aka clip art).

To maintain continuity, a new logo with two hands is still desired. Cupped hands are symbolic of friendliness and caring. A new design component of warmth is now implied in a two-color illustration. The logo is more organic in shape and visually recognizable. This warm-hands illustration is available as a royalty-free EPS vectored image for $39 membership fee at http://depositphotos.com. This is a placeholder.

http://www.shutterstock.com/subscribe $29.
http://www.canstockphoto.com/warm-hands-icon-21577852.html $12.50

The logo needs variations:

Medium Web
Essentially the same size as shown “warm hands” above.

Print Media
A 300dpi CMYK TIFF image of “warm hands” for offset printing and a 150dpi Jpeg for laser print output.

Editing, changing, distorting, recoloring, or reconfiguring the logo is not recommended. The logo shouldn’t be embellished with shadows, patterns, or intricate backgrounds. Do not add a tagline, slogan, or motto to the logo.

Colors

A solitary color rarely is considered color theming. Color themes create mood or feelings. How a visitor feels about a website is called user experience (or UX). Good UX is a goal of every professional web designer. Good user experience is one of the things that keeps your audience coming back to your website. Color choices affect first impression in under 50 milliseconds. It bypasses all logic in the brain and is visceral.

Colors are powerful cues and are considered part of a website’s body language. Subliminal feelings come from recalled memories. Usually, a combination of three colors generate strong attraction and memories. Too many colors cause distraction and turn a design into expressive art at the best – or visual noise at the worst case.

Natural color palette based on image strategy.
The Friends of Hospice cannot afford custom or usage-fee-based photography. Our recommendation is using large, free, screen-saver images of nature scenes that use depth-of-field photography effects. The site goal is appearing inviting and tranquil. Soft, nature images create the right mood. These images then steer us toward using a natural color palette.

Google Image search phrase "nature depth of field" produces thousands of royalty-free, free images for web use. Click to see larger size image.
Google Image search phrase “nature depth of field” produces thousands of free-use  images. Click to see larger size image of the screengrab.

The Home page image helped us select some prototype colors for starters. We used online image-to-color palette tools for evaluation.

autumn-forest-672
Optimized 33k Jpeg forest image for Home page.

image-color palette

A proportional palette showing colors in the image by percent usage.
A proportional palette showing colors in the image by percent usage.

The colors we chose for the prototype:

colors-4

White canvas and natural gray #333 text splashed with accents of hazy sky and dark green colors. But any soft colors can be used that are found in nature.

The three colors recommended are a dominant, subordinate, and accent colors. Many colors will work in a natural palette. Colors can be selected with color pickers from nature photographs, also.

Color Details

Accent color is added to type, horizontal rules (lines), and thumbnail-photo borders.

Color added to 4-pixel thumbnail borders and 1-pixel horizontal dividers
Color added to 4-pixel thumbnail borders and 1-pixel horizontal dividers

Friends of Hospice as a wordmark.

Friends of Hospice has frequently been confused as a provider of hospice services. This is not what they do. The organization is a referral service of volunteer friends, helpers, and companions. Free programs are offered through the Friends of Hospice that are helpful and compassionate.

Volunteer services include:

  • Music and Memory for people suffering from Alzheimer’s, other forms of dementia, and cognitive and physical impairments.
  • Living Legacy which is the capturing of stories and memories as told by and through the hospice patient.
  • Caregiver Massage for relieving the stress of those caring for ailing loved ones.

The list goes on with Community Resources, Grief Support groups, Advance Care Planning assistance, and fundraiser events.

For better positioning strategy in body-text writing, the Friends of Hospice should be referred to as simply The Friends using title caps. It’s also recommended on website artwork that Friends of Hospice be written with all capitals and lowercase italics like this:

FRIENDS ~ of hospice

with a tilde in the middle.

Small Web text
Graphic for limited space in the persistent navigation bar at the top of the page. This is no more than 30 pixels high @72ppi.

friends-top-logo
Small type treatment for bar.

This text styling would help differentiate the organization from hospice. In all cases, either web or print, please write the name in plain text rather than embedding the logo into text.

Theme Typography

Sapor is a responsive, two-column blogging theme available for free download from the WordPress theme directory. It was released by Automattic (owned by WordPress) in February of 2016. Any updates are available for free.

While we’ve customized the theme’s colors, we recommend using the Google cloud default fonts that are installed. They are PT Serif and PT Sans font pair. Both were released in 2009 as open-source fonts from the ParaType foundry. ParaType was established as a font department of ParaGraph International in 1989 in Moscow, Russia.

We experimented using alternative system-default fonts for speed considerations. But the page’s look-and-feel was drastically different. The PT Sans and PT Serif fonts add about 500 milliseconds to the initial page load – but this is theoretical. Because the Google fonts are in common usage, they have a high probability of being existent in the user’s browser cache already.

pt-serif-02
Sample of PT Serif font family.

PT Serif is a transitional serif typeface with humanistic terminals. It’s designed for use together with PT Sans, and is harmonized across metrics, proportions, weights and design.

The serif family consists of six styles: regular and bold weights with corresponding italics form a standard font family for basic text setting; two caption styles in regular and italic are for use in small point sizes.

pt-sans-01
Sample of PT Sans font family.

PT Sans is based on Russian sans serif types of the second part of the 20th century, but at the same time has distinctive features of contemporary humanistic designs. The family consists of 8 styles: 4 basic styles, 2 captions styles for small sizes, and 2 narrows styles for economic type setting.

Both font families are available for free download as True Type fonts (TTF) for graphic and print applications.

https://www.fontsquirrel.com/fonts/pt-sans

https://www.fontsquirrel.com/fonts/pt-serif

Emphasis and Search Engine Optimization (SEO)

Good communication strategy relies heavily on emphasis. This is what indicates to the audience what is of greatest importance. It’s a subconscious statement of purpose and mission. There are many graphic and layout techniques to reinforce emphasis on a page. But before that can be done, objectives must be established.

If a website emphasizes everything, it emphasizes nothing. What you end up with is noise. People are then confused as to “what you are all about.”

Search engine optimization (SEO) is directly related to creative positioning strategy. Good positioning is about people’s motive to find shortcuts to solve their relevant problems. Relevance and positioning are related. Our recommendation is to put the service before the source in the hierarchy of importance. It’s the services that people will need most. Relevance is what visitors search for. That must be upfront and obvious – not the Friends of Hospice organization (source).

Search engine keyphrases will include: death, dying, grief, and many other “sad” words that are less frequently used currently on the website. Search phrases may also include: Pullman, Whitman County, or other regional boundaries like The Palouse. The site is somewhat “sanitized” with less powerful terms like end-of-life, palliative, and bereavement. People don’t use these words in common conversation. They are hospice jargon. People are unlikely to type long words into Google’s search engine.

How the design and communication strategy affects the website Home page.

BEFORE: The old Home page.
BEFORE: The old Home page. Color scheme is cool – not warm or natural. Seagulls are in the header.
screen-4-full
AFTER: Natural color scheme is warm and inviting.

In the screengrab above, the new logo and Friends of Hospice label (the source) are relegated to the left, lower sidebar and are secondary to social and navigational elements. This is a way of indicating lesser importance – but still important enough to include on the Home page. They aren’t dominant nor occupying prime page positions.

iPhone screenshot of prototype page.
iPhone screenshot of prototype page.

The prime space (hierarchal page dominance) is assigned to the top-most persistent or universal headline and deck. That means it’ll appear on every page of the site. It doesn’t matter where a visitor drops in at. A site visit may not initiate on the Home page from a search listing. That headline emphasizes the service and the geographic region. It’s placed unconventionally in the customization area of the WordPress “site identity.” That feature is most commonly used for a company name (the source).

The headline isn’t a non-readable image file but better machine-readable HTML text. That means search engines can sniff and crawl and catalog the text – and rank it’s search relevance. And the headline, unlike an image header, is editable by the site owners. It can be easily adjusted, if and when needed.

ipad-horziMac-iPad

All images are purely for mood and feeling. They’re poetic windows. They’re meditative and contemplative. It’s the clichés they do not show that are most important: old hands, tubes and hoses, gray heads, bedsides, etc. Instead, they’re symbolic of gentler peace and natural progress. They discreetly reflect the cyclical nature in the seasons of life.

laptop2
Prototype Home page on a laptop.
handheld-device
Prototype Home page on hand-held device.

Screenshot from 2016-05-27 02:20:49

340 millisecond load time!

Optimizing a fansite by one second.

Fans of the cultural-phenomenon Cypher graphic-novel maintain Cypherfansite.com. Cypher was first published by Gibbs Smith Publishers as a hard-cover in September, 1997. Brad Teare is the author and illustrator. The graphic novel is unique in many aspects. The most noteworthy is it’s hand-drawn in comic book format using laborious scratchboard techniques.

A few online tools help us examine the workings of this website.

cypher-placeit
The fansite on a desktop computer screen.

What WP Theme Is That?

Next, we go to http://whatwpthemeisthat.com/ to find the theme and a few plugins:

From the results, we learn that the site is using a free WordPress theme called Editor by Array Themes (788k zip file download, 1.2M decompressed). The file sizes show that this theme is fast loading. Our rule of thumb is under 1M zip-file download. That will usually yield a theme that loads in under two seconds with cache cleared. This proves true with Editor theme usage on the Cypher fansite. First load of the home page with cache cleared is about 1.5 seconds. With the cache loaded (for return visitors), the page loads in about 1 second.

And there is one free plugin: Simple Scroll To Top. There are more as we’ll discover in a few minutes.

Stylify Me

Next, we take a look at the theme’s “brand manual.” We use http://stylifyme.com/ . It will generate a 3-page PDF, style-guide download from the home page:

We learn that Google’s Roboto Condensed is the headline font (H1, H2, and H6). And, we see Source Sans Pro is the body text.

Stylify PDF’s Page 2 (below) shows sample images and page 3 (not shown) is a screen grab of the entire page. Stylify is a nice tool for preparing client presentations.

PAge 2 of the Stylify PDF.
Page 2 of the Stylify PDF.

Yslow

We use the Yslow extension for the Google Chrome browser to look further at the page components:

Yslow
Click image for enlarged view.

This information tells us that GZIP compression is enabled. That makes the code load faster. There are 144.5k of images total for the page and the page weight is 284.5k. This is typical that half of the page weight is images.

The only thing that might make the page load faster would be removing the Fontawesome webfont (72.4k + 4.9k = 77.3k).  This involves messing around in the code. This is not worth it for a site that already loads in about 2 seconds – fast enough.

Small improvement potential: A minification plugin might help a little for speed. Also, loading jQuery from Google’s repository might help. Removing emoji’s with a plugin is also minor. But still probably not worth the effort. A caching plugin would be helpful perhaps.

WebPagetest is an online performance utility. Using http://www.webpagetest.org/, we find pretty lousy results for speed. But it is more accurate than our browser timer. First view: 3 seconds and Repeat view: 1.2 seconds. These are unacceptable.

Free WordPress Plugins

We install the following free plugins. They are explained on our Speed page:

Better WordPress Minify

Disable Google Fonts

Disable Emojis

Email Address Encoder

Far Future Expiration Header

Rocket Lazy Load

WP jQuery Plus

WP Super Cache

Did those plugins help the speed?

First view
Before: 3 seconds
After: 1.750 seconds

Repeat view
Before: 1.2 seconds
After: 1.075 seconds

The most important thing is we shaved off 1 second from the initial load time. We are now under 2 seconds. Our performance budget is achieved. Page weight using Yslow assessment is reduced to 184.4k total (from 284.5k). We could still kill Fontawesome (77k extra) but decide it’s not worth the trouble.

NOTE: How to kill Font Awesome.
Add this function to your child theme’s functions.php file:

add_action( 'wp_enqueue_scripts', 'generate_custom_scripts', 10 );
function generate_custom_scripts() {
wp_dequeue_style( 'fontawesome' );
}

Learn how to disable Font Awesome with a plugin here: READ MORE

Review: Free Craft theme for speed.

The free, responsive theme we used for this store is called “Craft.” It works fine for what we need. The client originally wanted a site store (PayPal) but we convinced her to use Etsy instead.

lavender-page

We also recommended using Facebook as her blog – since she thinks *social* is cool.

These two off-site functions (Etsy and Facebook) drastically reduced our workload and she seems happy with that solution.

Graphic production included the buttons, favicon, background tile, logo, and bundle-of-lavender illustration. Photos were shot by the owner.

New tricks we learned on this project included Black Studio TinyMCE Widget plugin and Very Simple Contact Form plugin. Both useful for widgets.

We used about 20 free plugins on the site. Here’s the list: Better WordPress Minify, Black Studio TinyMCE Widget, BruteProtect (now part of Jetpack), Cache Buddy, Clean Up Images, Disable Emojis, Enable Media Replace, Far Future Expiration Plugin, Google Maps Widget, Image Widget, Imsanity, No Comments, One-Click Child Theme, Rocket Lazy Load, Simple Drop Cap, Very Simple Contact Form, WP Old Post Date Remover, WP jQuery Plus, WP Orbit Slider, and WP Super Cache. Feel free to question us on any of these.

The Google Map Widget plugin is about 500ms to 750ms of the page load time on GoDaddy shared Linux hosting. This is not uncommon when adding map functions.

The page loads in 1.6 to 1.9 seconds, cache cleared. The actual page weight is 454k with 29 components. But they don’t all load at once with the “Rocket Lazy Load” plugin. Below-the-fold, delayed image loading is the saving grace for this page. 329k of the page weight is images.

We’re allowing 3 Google font calls all for Open Sans. These are already cached on many browsers or systems.

Speeding Up the WordPress Twenty-sixteen Theme

It’s a myth that using many plugins will slowdown your website. Being sloppy in judging plugin quality or necessity is the culprit. That’s within a designer’s control. It calls for wisdom and speed testing. The best plugins add no page weight at all – weightlessness!

Better WordPress Minify
Allows you to minify your CSS and JS files for faster page loading for visitors. Not all minifier plugins work – in fact – they frequently break your site. This plugin really works. It combines (concatenates) all possible files to reduce the number of HTTP requests and removes code “white space” and comments. In our case, that was the combination of several calls. All the little things add up.

Cache Buddy
Minimizes the situations in which logged-in users appear logged-in to WordPress, which increases the cacheability of your site. Improves page load time.

Remove Google Fonts References
Disable enqueuing of fonts used by WordPress from Google. This speeds up load time. Note: Open Sans is rarely a speed problem because it is cached on so many browsers. But other Google Fonts can drag a site down by a second in speed.

Google fonts can add up to one second to your page load time. For example: requesting Noto Sans and Noto Serif from the Google cloud was adding about 1 to 2 seconds to PagePipe’s website load time. The trade off for branding wasn’t worth it.

Get rid of calling Google Fonts from their remote server and load local websafe fonts instead. We confess Google fonts have more class but there’s nothing wrong with using “Georgia” and “Helvetica Neue” – the fall back fonts in the theme stack. We used “Disable Google Fonts” plugin first. But it failed to remove all offending instances. We then installed “Remove Google Fonts References” plugin instead. It worked great. All font calls were removed.

Remove Google Fonts References is very lightweight. It has no settings, just activate it and it works immediately.

Disable Emojis
This plugin disables the new emoji functionality in WordPress 4.2. WP does not need emoji. Probably, the worst decision ever by WordPress Core is enabling emojis by default, and providing no way to disable them. WordPress core developers should have a disable setting instead of us installing another removal plugin. Emoji functions add 5.6k to 14.7k page weight and 2 or 3 HTTP requests to a site. Waste.

Emoji are the 12-pixel-square-grid ideograms, emoticons, or smileys used in Japanese electronic messages and Web pages, the use of which is spreading outside Japan. Originally meaning pictograph, the word emoji literally means “picture” + “character”.

Beyond the standard emoticon-type “smileys”, there are hundreds of emoji, ranging from plants and animals to people, objects, vehicles, food, the Sun and Moon, and more.

Far Future Expiration Header
This plugin will add a “far future expiration” date for various file types to improve site performance. This is a best practice advocated by the Yahoo Extreme Performance Team. It keeps files and images cached longer. There is also a radio button to enable Gzip – a nice addition.

Optimize Database after Deleting Revisions
Optimizes the WordPress database after cleaning it out. This flushes the deadwood from the MySQL database that WordPress uses. MySQL is provided by your hosting company.

Rocket Lazy Load
A tiny Lazy Load script for WordPress without using jQuery or others libraries. Lazy load is a method of delaying loading non-critical images that are “below the fold.” This technique buys about 1 to 2 seconds of faster perceived load time. Rocket Lazy Load automates everything.

This tiny script (less than 2k!) displays all images in a post or widget, thumbnails, avatars and emoticons as users scroll down your site. It doesn’t come with any options or customizations, just install and activate this plugin and let it do it’s thing.

ShortPixel Image Optimiser
ShortPixel is an image compression tool that helps improve our website performance. The plugin optimises images automatically using either lossy or lossless compression. Resulting, smaller, images are no different in visual quality from the original. The plugin can do this as images are loaded or can retrofit your image library. Retrofits can take about 20 minutes of computer time. So go make a sandwich. The savings results are shown in your media library for each image.

Visitor Mailer
Receive an email update of the number of visitors to your site. We hate using Google Analytics because it’s slow. It requires calls and wait time and adds page weight. We only need reassurance that people are coming to our site. We may get more sophisticated someday and start measuring bounce rate and clickthru. But not yet. We aren’t selling pet supplies or trendy clothes.

WP jQuery Plus
Loads jQuery from Google and is nicely compressed and minified. Plus there’s a failsafe. If it doesn’t respond, it just loads the onboard WordPress version. jQuery is usually one of the biggest chunks of code in WordPress. It needs special attention. Loading WordPress javascript files from Google’s Libraries rather than serving directly from your WordPress install, will – in theory – reduce latency, increase parallelism, and improve caching.

Is removing the default version of jQuery in WordPress irresponsible? No. The fastest jQuery is the one you never have to load.

WP Super Cache
Caching plugin for WordPress. We find this plugin doesn’t always help with speed. But in this case, it did. So we used it. The benefit at best case was 500 milliseconds gain. We’ll take it.

All plugins listed are free downloads from WordPress.org.

We frequently remove Genericons by WordPress. They are baked into the WordPress theme installation in the functions.php file. We removed all “genericons” words from the file. This reduced page weight by an additional 75k. It eliminated two [tipso tip=”Whenever your web browser fetches a file – a page, a picture, etc – from a web server, it does so using HTTP – that’s Hypertext Transfer Protocol.”]HTTP calls[/tipso] and bought us another second of reduced load time.

Comment out Genericons in function.php.

Genricons are a special font symbol. They aren’t really used by this theme. Genericons are a bloated bane we have written about before. Commenting out a single line of code in the functions.php file is the solution. Find the file using the Editor. Use the symbols /** in front and **/ on the other end of the single line that has the three words “genericons” in it. That gets rid of almost 40k of deadwood page weight.

Turnoff the silly default avatar.

Twentysixteen theme comes with the avatar switched on and all it calls is the gray silhouette image of a human form. That adds 1 second to the page load time. When your target performance budget is under 2 second load time, one second wastes half the budget. The solution is simple: Deselect (off) Avatar in Dashboard > Settings > Discussion. Done deal. No plugin or code rewriting necessary.


LOOKING FOR A NEW THEME FOR 2018?

[bscolumns class=”one_half”]

thumbnail of THEME-ME-10-v1.compressed
THEME.ME: What is the fastest free theme? There are 5,100 free themes in the WordPress theme directory. Of those, only 1,602 are responsive. All the rest are fixed-width junk. How did we sort the remaining 1,602 free responsive themes to find the fastest loading?

[/bscolumns][bscolumns class=”one_half_last”]

Twenty-seventeen Default Theme Tips Read our torture-test results of this popular free theme. Don’t get locked in for recurring *annual renewal* theme memberships. Save your money. The Twenty-seventeen Torture-tested Themes ebook contains honest and common-sense reporting and tips about mobile WordPress speed!

[/bscolumns][bscolumns class=”clear”][/bscolumns]

Tweaking Twenty-sixteen theme for speed.

Some people are complaining the WordPress Twenty-sixteen theme is old-fashioned or plain. We think it’s fine for certain jobs. If the goal is to communicate and not impress with any animation, we think Twenty-sixteen fits the bill.

We liked the look for what our goals were but … the load time was 3 seconds. Too long. We decided to track down the speed culprits and eliminate them. We got the load time down to 1.5 seconds with just a few simple adjustments. The examination tools we used were Yslow extension for Google Chrome browser and Webpagetest.org online website performance tester. Here are the things we discovered and some of the possible fixes:

1. Watch out for automatic image resizing.

When we placed the custom header image, the size increased from a 30k PNG to 96k. The solution was simple. Just skip cropping. WordPress automatically saves files to it’s own preferred specifications. This sometimes makes the file size bigger – instead of smaller. That’s poor engineering but as long as you double check image sizes for aberrations like this one, you’ll always have a fast site.

2. Comment out Genericons in function.php.

Genricons are a special font symbol. They aren’t really used by this theme. Genericons are a bloated bane we have written about before. Commenting out a single line of code in the functions.php file is the solution. Find the file using the Editor. Use the symbols /** in front and **/ on the other end of the single line that has the three words “genericons” in it. That gets rid of almost 40k of deadwood page weight.

3. Remove Google fonts.

Get rid of calling Google Fonts from their remote server and load local websafe fonts instead. We confess Google fonts have more class but there’s nothing wrong with using “Georgia” and “Helvetica Neue” – the fall back fonts in the theme stack. We used “Disable Google Fonts” plugin first. But it failed to remove all offending instances. We then installed “Remove Google Fonts References” plugin instead. It worked great. All font calls were removed.

4. Turnoff the silly default avatar.

Twentysixteen comes with the avatar switched on and all it calls is the gray silhouette image of a human form. That adds 1 second to the page load time. When your target performance budget is under 2 second load time, one second wastes half the budget. The solution is simple: Deselect (off) Avatar in Dashboard > Settings > Discussion. Done deal. No plugin or code rewriting necessary.

5. Install a caching plugin.

We used the free WP Super Cache plugin and enabled all recommend settings. We don’t normally use this plugin.

6. Get rid of the funeral black border.

Under Customize, we changed the background color to #125faa blue for our border around the page. No change in page weight – but much easier on the eyes.

There you have it. We cut the page weight significantly and reduced the load time in half.


LOOKING FOR A NEW THEME FOR 2018?

[bscolumns class=”one_half”]

thumbnail of THEME-ME-10-v1.compressed
THEME.ME: What is the fastest free theme? There are 5,100 free themes in the WordPress theme directory. Of those, only 1,602 are responsive. All the rest are fixed-width junk. How did we sort the remaining 1,602 free responsive themes to find the fastest loading?

[/bscolumns][bscolumns class=”one_half_last”]

Twenty-seventeen Default Theme Tips Read our torture-test results of this popular free theme. Don’t get locked in for recurring *annual renewal* theme memberships. Save your money. The Twenty-seventeen Torture-tested Themes ebook contains honest and common-sense reporting and tips about mobile WordPress speed!

[/bscolumns][bscolumns class=”clear”][/bscolumns]

PDF Download: Codium Grid theme speed case study.

WordPress categorizes the free Codium Grid theme as a fluid layout instead of responsive. It’s a layout that uses proportional measuring for content, images, or any other item. This allows the web page to stretch and contract relative to the user’s screen size.

codiumgrid-big

Our “Codium Grid theme case studyeBook.
18p, full-color, printable, 11 x 7.5 inch, 935k
Download the PDF for free.

Responsive design is the process of creating a website or theme with all devices and screen sizes in mind. The techniques of fluid design combined with CSS media queries creates a theme that is responsive.

Media Queries is a CSS3 module allowing image rendering to adapt to conditions such as screen resolution. Media Queries is a cornerstone technology of responsive web design but not fluid design.

This report presents the customization phases used to brand and optimize the WordPress Codium Grid theme for use as a fast-loading design portfolio website.

Review: Our recommended fastest, free speed themes.

Our speed experiment started with recommended collections of 386 free, responsive WordPress themes. They came to our attention via recent newsletter advisories. To reduce the number, we only reviewed themes that decompressed to 1MB or less. That reduced our database to 169 themes. We installed each theme and compared for speed evaluation. All these themes are from the WordPress Repository. Just one exception, “Frank,” which is available on GitHub. It’s designed for speed – even though it isn’t the fastest theme.

We examined each theme’s:

  • Original .Zip file size.
  • Decompressed folder size.
  • Extra files included such as icons, fonts, background images, etc.
  • Fonts used.
  • Page weight.
  • Cached weight.
  • Number of HTTP requests.
  • Empty-cache Home page load in milliseconds.
  • Primed-cache Home page load in milliseconds.

We then reduced the database again by discarding themes that took longer than 1000 milliseconds to load. That left 15 themes as prime candidates for further testing of aesthetics and customization. As you will see, many themes are plain and even boring.

Our “SPECIAL SPEED REPORT” eBook.
D
ownload the PDF for free.

We ran our speed tests using YSlow and WebPagetest, two highly regarded testing services. Our setups ran on GoDaddy’s cheap, shared hosting – no CDN – plugins only as required by the themes, and we compressed all files with gzip.

Note: With shared hosting you just can’t get sub-second loads, without gzip. Not on any of these themes. You can set up gzip with a plugin or by editing the .htaccess file – but whatever you do, don’t expect a high-speed website without gzip.

There are 338 words of text content on the sample test pages. No imported images were used except those provided with the theme.

Is it really possible to achieve a one-second load with more than just text on the page? Yes. But it takes strategy and modifications. We’ll test these final 15 themes with before-and-after custom-aesthetic design. Stay tuned.

I also believe that themes need to stop trying to do it all and this would reduce the need for so many updates / feature packing. If themes stuck just to design aspects and let plugins do the building we wouldn’t have to have so many themes. Timothy Brand (@brandgraphics)

No one notices when a website loads fast, but everyone notices when it’s slow. And that slowness may be the last thing people notice if your site takes too long to load. People are impatient and quick to hit the Back button – unwilling to wait even a few seconds. Human perception of machine delays have remained intact for forty years – this isn’t anything new.

response-timeWhen a page changes within 100 milliseconds, the viewer has the illusion of instant response. At 1 second (1,000 ms), they still have a seamless flow of thought. This is a flow state. Nothing distracts them from the site content or what they are looking for. If a page is delayed by over one second to ten seconds, they will abandon the page.

What if your page loads in 20 seconds? Face it. No one will see the hard work you put into website aesthetics and content. It’s as if a slow site doesn’t even exist. Visitors will be gone.

The hallmark of a fast-loading theme is always a small download folder size. The theme may be plain and simple – but it will be fast.

Learn more about the results here >

 


LOOKING FOR A NEW THEME FOR 2018?

[bscolumns class=”one_half”]

thumbnail of THEME-ME-10-v1.compressed
THEME.ME: What is the fastest free theme? There are 5,100 free themes in the WordPress theme directory. Of those, only 1,602 are responsive. All the rest are fixed-width junk. How did we sort the remaining 1,602 free responsive themes to find the fastest loading?

[/bscolumns][bscolumns class=”one_half_last”]

Twenty-seventeen Default Theme Tips Read our torture-test results of this popular free theme. Don’t get locked in for recurring *annual renewal* theme memberships. Save your money. The Twenty-seventeen Torture-tested Themes ebook contains honest and common-sense reporting and tips about mobile WordPress speed!

[/bscolumns][bscolumns class=”clear”][/bscolumns]


The 386 initial themes included:

A
abaris, accelerate, adamos, adaption, advantage,
adventurous, advertica-lite, albar, aldehyde, alexandria, alizee, allmed, almanac, alpha-trinity, andrina-lite, anew, anew-child-master, aplos, aquarius, archy, areview, asteria-lite, attitude, avenue, avrora

B
Barebones-master, baskerville, beluga, bharat, big-impresa, bizflare,
bizmo, biznez-lite, bizsphere, bizstudio-lite, bizway, blackbird, bliss,
blogly-lite, Bodega, boemia, boksy-lite, book-lite, BootstrapParallax-Package, bosco, bose, bota, briks, business-lite, business-one, butterbelly

C
canoe, capture, cara, caresland-lite, carton, casper, casper-wp-master, catch-flames, catch-kathmandu, celebrate, celestial-lite, celestino, chelonian, circa, city-informer, cleanport-lite, clearly, clear-tranquil,
codium-light, coeur, colorway, convac-lite, corpo, counterpoint, crawford, cubby, current, cwp-youit

D
daisy-blue, dazzling, delivery-lite, dellow, de-naani, diarjo-lite, dice,
digest, directory, discover, d-lite, duena, dw-timeline, dw-wallpress

E
edin, editor, effect, eighties, elucidate, EmptyCanvas, enfold, enigma,
enlightenment, enterprise-lite, eptima-lite, espied, espressionista, esteem, evolve, expresscurate

F
facade, family, faq, fastr, fictive, figero, finale-theme, finch, fine, firmness, first, fizz, flat-bootstrap, flaton, Flatty-master, floki, flounder,
focus, formation, Foxy, franklin, Frank-master, fresh-and-clean, fukasawa, fullfolio, future

G
garfunkel, genbu, Glider-master, golden-eagle-lite, gommero, goran, graphy, gravit, gray-whale, green-lantern, gridiculous, gridly, gridz, griffin, guardian, gump

H
halcyon, hardpressed, hashi, heavenly, hellish-simplicity, hemingway, hexa, highwind, hoffman

I
i-am-one, ice-fresh, iconic-one, ifeature, ignite, ih-photographer, illustratr, imbalance2, impero, impulse-press, influence, inkzine, interface, intergalactic, intuition, invert-lite, invisible-assassin, isis, isola, itek, i-transform

J
jkreativ-lite, justwrite

K
kelly, kirumo, klasik, kodax_10, komachi, kotetsu

L
lean, Less, libra-free, lifelog, lingonberry, link, litesite, local-business, lupercalia

M
MagazinePlus, manifest, mantle, mantra, maryanne, material, memento, meris, mesocolumn, mh-elegance-lite, microfusion, minezine, minimable, minimagazine, minimaliste, minimatica, minnow, mn-flow, modish, moesia, multipurpose, museum, MyCorp, my-passion, mywiki, naked-wordpress-master

N
national-basic, naturespace, naya-lite, newmedia, newpersonal, news-magazine, news-mix-light, nirvana, nouveau-riche, nova-lite, nulis, nu-white

O
office, omega, one-page, onetake, onetone, opal, opus, origami, osiris

P
padhang, panthea-free, papercuts, parabola, parallax, perfetta, pho, phogra, photomaker, photopia-lite, pilot-fish, pinboard, pinkrio, pinpress, pisces, plainly, portal, preus, prism, professional, prompt, puro, quality, quill, radcliffe, radiant, radiate, rams, ravel, razor, readly, ready-review, rectangulum, resolution, responsive, restaurateur, restimpo, reviewgine-affiliate, rewind, road-fighter, rt_halcyon

S
saga, seller, semicolon, semplicemente, sensitive, serene, shaken, shamatha, shapeSpace, sheeva, shift, simone, simple-business-wp, simplecorp, simple-life, simpleo, simple-theme, simplicity-lite, singl, sixteen, sketch, skt-biz, skt-parallaxme, skt-photo-session, smartshop, socially-awkward, socute, sorbet, so-simple, sparkling, stairway, StanleyWP-Package, starkers-master, stork, storto, sublime-press, subsimple, suevafree, sundance, svelte

T
takeoff, taraza, tashan, tatva-lite, tdpersona, tdsimple, the-box, thememagic, themia-lite, themify-base, Thoughts, time, times, tiny_theme-master, tonal, toommorel-lite, top-mag, torch, tracks, tuned, twentyfifteen, twentyfourteen, twentytwelve, typal-makewp, Typesense-master

U
unite

V
vaaka, vanilj, vantage, verbo, verge, virtue, vision, volta

W
wallstreet, ward, water-lily, weavr, weblizar, welcome, Wembley, white, whiteboard, why-hello-there, wilson, windsor-knot, wortex-lite, wp-barrister, wpex-proyecto, wp-folder-files, wp-framework, wp-svbtle-master

Y
yarn

Z
zeedynamic, zeefocus, zeeminty, zeenoble, zeetasty, zerif-lite, zinnia


LOOKING FOR A NEW THEME FOR 2018?

[bscolumns class=”one_half”]

thumbnail of THEME-ME-10-v1.compressed
THEME.ME: What is the fastest free theme? There are 5,100 free themes in the WordPress theme directory. Of those, only 1,602 are responsive. All the rest are fixed-width junk. How did we sort the remaining 1,602 free responsive themes to find the fastest loading?

[/bscolumns][bscolumns class=”one_half_last”]

Twenty-seventeen Default Theme Tips Read our torture-test results of this popular free theme. Don’t get locked in for recurring *annual renewal* theme memberships. Save your money. The Twenty-seventeen Torture-tested Themes ebook contains honest and common-sense reporting and tips about mobile WordPress speed!

[/bscolumns][bscolumns class=”clear”][/bscolumns]

PDF Download: PhotoGrid WordPress theme speed case study.

This case study focuses on building an artist’s portfolio website. These are always challenging because they are large-image intensive. In the past, people expected longer load times on portfolio sites and were usually willing to wait. Not any more.

photogrid-11-big

Our “PhotoGrid case studyeBook.
13p, full-color, printable, 11 x 7.5 inch, 880k
Download the PDF for free.

Performance engineering is a position found on web teams at large corporations. Their goal is studying loadtimes, server latency, throughput, and memory usage. They tune a website to achieve optimization goals that are within a performance budget. The budget is not specified in dollars but rather milliseconds. Web time is literally money.

Anything that slows down a website is “expensive” since it cuts into the allotted performance budget.

Performance engineering is idealistic – usually working towards the unachievable loadtime of zero seconds. A well-tuned site loads the Home page in under one second.

Before mobile applications and websites came along, no one worried about millisecond loadtimes. Well, some people did – but they weren’t making any news.

The invention of online tools to measure web performance helped produce de facto standards from experts at large-corporate laboratories. Speed is a competitive issue. Speed became more desirable and a hidden asset.

Speed is a website differentiator. Differentiation is part of creative marketing positioning strategy. If two websites have equal offers, customers prefer a 1-second page rather than a heavier 10-second page. People don’t like to wait for services especially on the Internet. Plain and simple.

Our experience is no WordPress theme will produce a sub-second load time straight out-of-the-box. It will be more between 4 and 8 seconds. It requires customization, tweaking, and experimentation to get it slimmed down. Few web designers will do this extra work to deliver quality.

Is website optimization even significant for small businesses? Absolutely. More and more small business customers use phones and tablets to find, compare, and locate services. Slow wireless connections make optimization a necessity. If a site doesn’t fit and is slow on a phone screen, it’s immediately considered “old and obsolete.” It implies you’re business may be apathetic, uncaring, and behind the times.

Times change but speed is as critical as ever. Because of mobile phones, we’ve stepped back to the years of dialup modem connections. But today’s users still expect mobile or responsive sites to be just as fast as wired, desktop browsers.

What we show you in this case study is how you can be a common-sense performance engineer and make your site experience the best.

PDF Download: Clarity WordPress theme speed case study.

When an industrial client approached us about getting a website, they said we had to use WordPress, and that the deadline was just two weeks. It turned out to be more than just a website.

clarity-9-big

Our “Clarity theme case studyeBook.
13p, full-color, printable, 11 x 7.5 inch, 720k
Download the PDF for free.

Sometimes two weeks isn’t bad – for a small and simple site – but this project was going to involve a lot more than just putting stuff on some web pages, and taking it online.

Not only did we need to come up with a great design, but we also had to figure out the marketing strategy, come up with all the graphics, write the copy, write up an interview with one of the product developers, design pseudo product packaging, and more – all for a product we had never heard of.

We also had to battle our way through some problems with the ThemeTrust Clarity theme, including major weirdness related to the built-in slideshow.

Did this keep us up late at night? Yes. Did we got the job finished in time? Yes. Is the client happy? Yes, the client is very happy.

PDF Download: Frank WordPress theme for speed case study. Experiment 2.

In this case study, you’re introduced to a free and fast WordPress theme called Frank. It’s adaptable and a good foundation for building basic websites. It isn’t universal in application but we like it a lot.

frank-6-big

Our “Frank theme case studyeBook.
19p, full-color, printable, 11 x 7.5 inch, 1.6M
Download the PDF for free.

The downloadable report explains two plugins, SS Downloads and Sell Digital Downloads. We use them for selling case-study reports. (These reports are now free). These are extraordinary plugins because they’re both purpose-built and, thus, have speedy page-load times.

You learn our decision-making process for removing and replacing plugins. We deleted or substituted: Notification Bar, WP Orbit Slider, Symple Shortcodes, and WP Responsive Menu. We also examine the claimed benefits of notification bars.

In the branding department, you see how to use an expressive color palette of green, black, and white. It’s a little risky but more memorable. We also show fast-loading, spunky, and whimsical illustrations for page variety.

You discover our criteria for choosing from 32,753 WordPress plugins. We then test the Dependency Minification plugin and others. We recommend substituting with lightest plugins first and experiment upwards until things work.

We talk about the simple opportunities for new business from pitching responsive WordPress websites.

You find out about the modern benefits of re-using old Splash Screen technology. The biggest advantage being reducing content density based on reader’s goals.

To improve usability, we replaced the theme default menu using Sticky Header plugin.

And finally, we dump Google Analytics in favor of a marketing lead tracking plugin.

PDF Download: Foxy WordPress theme speed case study.

Speed – or page load time – is always the first aspect a website user encounters. If the page load is too slow, the viewer will discard the site. It doesn’t matter how attractive it is. They never saw it. People are impatient.

Our “Foxy theme case studyeBook.
17p, full-color, printable, 11 x 7.5 inch, 995k
Download the PDF for free.

Branding aesthetics is important for web credibility, too. It‘s the second judgment made by viewers. And it’s made so fast it’s subconscious. If they don’t like the look of the site immediately, you’ve lost the opportunity to make a good first impression. Yes. People do judge a site by the landing page decoration before any text content.

This Foxy theme case study focuses on choosing a color palette and images that create feeling and mood. Choosing colors should never be based on the mere choice of a favorite color. A single, solitary color is not a palette. Feelings, memories, or color psychology is usually formed from combinations of colors. Best practice of using two or three colors is all it takes.

We chose the color palette from the main image and finally sampling specific colors to keep the website feeling cohesive. See for yourself and use these creative color ideas on your next project.

PDF Download: Frank WordPress theme speed case study. Experiment 1.

During the experimental Frank theme project, we learned the mysteries of achieving under 1-second page loads on cheap, shared hosting.

fraank-7-big

Our “Frank theme case studyeBook.
19p, full-color, printable, 11 x 7.5 inch, 1.6M
Download the PDF for free.

To get the domain count on a shared server, we use an online tool called Reverse IP Domain Check at www.yougetsignal.com. When we saw the number of domains fighting for bandwidth on two separate GoDaddy servers, we were astounded at the disparity – one was almost clear and the other crammed. We decided to add the plugin WP Super Cache to both sites.

chart

For PagePipe, it made no difference. This was typical of past performance with cache plugins because we always optimized sites to the point it never mattered. Or frequently, adding the cache plugin broke some other feature we needed.

Imagine our surprise, when we installed WP Super Cache on TeareLabs and the loadtime immediately dropped from over 3 seconds to 500 milliseconds. Our target!

We might conclude at this point: First, the more exaggerated the number of domains, the greater the opportunity for improvement from caching. If you’re site is optimized and you have a server that isn’t jammed with traffic, it may not need a caching plugin – yet.

NOTE: Since this was written GoDaddy reduced the number of domains on the SteveTeare.com server to 23 domains. Then the caching plugin no longer gave any benefit.

In this report, you learn a few graphic tricks for page variety. We give a brief explanation of how the JPEG Xray images were produced. Also, how PNG signage can make lightweight fake columns when you place more content in the caption.

We also examine the necessity of stock images for low-budget production – in spite of Google’s custom photography recommendation.

You see how a no-brainer color scheme can mimic the powerful green, white, and black used on PagePipe trials (report #6). We show plenty of yellow-and-black identities as models. And demonstrate gray-scale testing for legibility. Expressive color schemes and the common Frank theme tie these two fraternal twin-sister websites together.

The difference between fixed-width and responsive design messed up touch-screen navigation for our dropdown menus. This was impossible to test on a simulator. We needed a real iPad with fat fingers to troubleshoot these problems.

PDF Download: Bota WordPress theme speed case study.

This case study introduces how we customized the free Bota WordPress theme. This theme is our foundation for producing a website for the Palouse Health Center.

bota-big

Our “Bota theme case studyeBook.
13p, full-color, printable, 11 x 7.5 inch, 979k
Download the PDF for free.

One of the biggest concepts shown in this report is how we communicate our choice of a warm color palette. Color palettes are the primary communication device for a website’s “look and feel.” A unique image color-extraction tool helped keep consistency when we selected background and type colors.

We always set site goals. We wanted warm, rural images with depth-of-field lens effect for mood. Besides color, lighting in these images needed to be consistent.

We show how we found free plugins and royalty-free, legally-unencumbered stock images. We wanted to achieve sub-second page load times using low-cost hosting. That’s usually considered impossible with WordPress.

Besides our usual audit of Home page performance, we talk about surprise discoveries of speed benefits in the theme and plugins we chose.

PagePipe helps you balance performance and mobile branding.