Fast, featherweight WordPress themes for extreme mobile speed.

Email subscriptions update us about new theme releases in the free WordPress directory. There are about 1,500 responsive themes. If a theme file weighs less than 1M compressed, we collect it for further analysis.

That is our arbitrary cutoff. We don’t have time to review every theme release for performance quality. Most themes are heavier than that.

 

So we limit the scope of our theme inquiry. We may miss some good themes – but we know this is an efficient and surefire culling method. We review the collected speed themes every 6 months. In this article, we’ll share some “best of class” candidates and our findings from the first half of year 2017. Our goal is narrowing  hundreds of possibilities to less than a dozen.

Don’t waste precious time checking every theme for perfection. Perfection costs too much.

We’ve torture tested the default Twenty-seventeen theme. We’ve been harsh, skeptical and cynical of it. The truth is it’s a true-blue speed theme – and looks good, too, when used properly. It’s a comparative standard of “goodness” for this review. All themes can be abused making slow websites. This isn’t the theme author’s fault. It’s almost always the culpable site owner. The inability to say “no” produces complicated and overdecorated sites. Or perhaps an egotistical desire to appear more important and bigger than reality. Apathy is the enemy. Discipline is the ally.

The theme contenders in our review only have a few (hundreds) active installs – with one exception. By comparison, there are over one million active installs of the Twenty-seventeen theme. Our evaluation of featherweight themes is esoteric and rare. We say featherweight because our downloads weighed under 500k compressed. We’ve tightening our spec for extreme optimization for mobile speeds. The world is changing too fast.

All future websites should be fast and responsive for small screen-mobile devices. Web marketing companies claim over 50 percent of browsing is now done on a smartphone or tablet. That isn’t always true. But most site owners with speed problems have audiences between 60 and 80 percent mobile. Oddly enough, our PagePipe audience is the reverse. More than 90 percent of our traffic are desktop users. They are web designers and developers. It’s difficult to design a site on tiny screens. Many web builders use extra large screens or even dual screens. We build PagePipe for mobile anyway. We want to be good examples of what we preach. We try anyway.

What do featherweight sample themes have in common?

All weigh less than 500k zipped. they’re fresh and released within the last 6 months. They have Pingdom.com page speeds of about 600 milliseconds. That’s with the same Home page loaded with a simple blog-list. Content is from a WordPress imported XML file – Theme Unit Test Data.

Theme screenshots can weigh over 1M. Ridiculous.

Every WordPress theme package contains a screenshot. These may be PNGs or JPGs. After theme installation, they’re presented in the Dashboard > Appearance > Themes selection area. You can also see them as a thumbnail preview via the Customizer. The images may be heavy – or they may be light. In this test case, they ranged from 113k to 404k in weight. We subtract that amount from the decompressed file sizes for fairer comparisons. Screenshots don’t affect page speed.

It’s a remarkable oddity. One of the new theme candidates isn’t responsive for mobile screens. Chuck that one. And two were child themes. Junk those, too.

After decompressing each theme folder, we subtracted screenshot file sizes. The final theme weights then ranged from 52k to 398k. The variances surprise us. Yet all the load times were the same 600 milliseconds (plus or minus 50 milliseconds). We decided to switch tests from Pingdom.com (best-case test) and use WebPagetest.org. This produces more pessimistic, less repetitive speeds. And also, important Time-to-First-Byte (TTFB) information. TTFB is server wasted delay. WebPagetest.org is a worst-case-scenario test.

The cheaper your hosting usually the worse the TTFB delay. TTFB is outside of our control. During this test, our TTFB on GoDaddy Shared Hosting was between 560 to 906 milliseconds. Nastiness! By taking the load time and subtracting the TTFB, we had a better idea for how long pages actually loaded. Speeds then ranged between 588 milliseconds best case and 1.178 second worst case. Average load time was 862 milliseconds (+ TTFB). So – if you are lucky – with a 100 millisecond TTFB – your load time would be around 1 second. In theory.

Using a quick-and-dirty browser timer, the estimates maintained steady. Load times (with browser cache cleared) had a tight range of 1.011 seconds to 1.361 seconds on a desktop. That is fast enough for extreme mobile performance.

But we still aren’t happy. Why?

Our curiosity isn’t satisfied. What is the loss of speed from the theme? Without all the content and plugins and overhead complication? The easiest way to find out is using the P3 Plugin Performance Profiler (100,000+ installs, 183k download size). Don’t leave this plugin installed. Use it for a test and dump it. There are 100,000 site owners who don’t realize it slows down every single page of their website. OK. It’s only 4 milliseconds per page view. But that’s equal to 4 useful plugins. Why waste valuable speed?

After checking with P3, you can (supposedly) email the results to yourself. This email feature never works for us. But the concealed statistics show more than plugin speeds. It also shows theme load time in milliseconds. Those test times ranged between 26 and 50 milliseconds depending upon the theme. That’s all. Do we believe it? Yes. A featherweight theme loads faster than Font Awesome. We hate it with a passion because it’s a baked-in delay. It’s so hard to remove. Small themes weigh about the same as Google Fonts – and definitely less than Typekit fonts. Note: Disable Google Fonts with a simple plugin.

People usually think themes devour speed.

Minimalistic themes don’t. Any theme advertised as being fast – or getting great speed scores is suspicious. Test it. Scores are meaningless. It’s load time in milliseconds that count. Never trust the authors opinion or advertising. It’s usually quite the opposite. The theme’s slower than a herd of snails stampeding through peanut butter.

For comparison: How much load time do typical plugins use? About 1 to 2 millisecond each. Of course, the bad ones use 50 to 70 milliseconds (or more). Some themes and plugins have a bad-speed reputation. We’ve tested some real dogs.

In defense of themes, what wastes speed are large images and third-party APIs. Things like social media and email lists and video and fancy fonts and shopping carts, etc. ad nauseam. All those superficial extras add up. You can find a faster alternative or workaround. (Tip: PagePipe specializes in mobile WordPress speed tricks.) Ask yourself, “What are the core goals of this site?” Then get rid of the rest.

One featherweight theme is about equal to 50 lightweight plugins. A heavy popular theme – like “The7” – is equal to hundreds and hundreds of plugins. Yet, plugins get the blame. Not the bloated popular theme.

Choosing a fast theme can conserve your performance budget. But how do featherweight themes look? Well, most look ugly or plain at best. That’s why we’re showing the screenshot – and the naked OOBE (Out-Of-Box-Experience). OOBE’s are always a disappointment. You must look beyond that bleakness for hidden potential. And remember, you’re catering to mobile audiences. How well does the theme read on a small screen? We show iPhone simulator screens for comparison.

Individual test results and screens:

Twenty-seventeen theme

The default Twenty-seventeen theme is 1.2M unzipped file size with a 364k screenshot. That means the actual file size is 836k. (Remember all these test are with sample data (post and pages) imported into the theme.)

  • Pingdom.com speed test: 609 milliseconds.
  • WebPagetest.org: TTFB: 605 milliseconds, load time: 1.719 seconds, Actual theme speed: 1.114 seconds.
  • P3 plugin theme speed: 26 milliseconds.
  • Browser timer: 1.124 seconds.

Notes: This theme includes a preloaded 112k sample header image. Does this theme really load in 1 second? Yes. It’s proven in all our tests.

Features: This theme includes parallax-background feature images for each front page section. These images are automatically resized if they’re too large. The theme also allows motion video in the header up to 8M. (Please don’t use an 8M video. Lighter, repeating 16-second videos are about 2M). This video file is not loaded on small screens to save speed. Instead a fall-back still image is loaded. On large desktop and laptop screens, the video is loaded last (lazy loaded).  All these techniques conserve mobile bandwidth.

Twenty Seventeen features many sections on the front page. Plus widgets, navigation and social menus, a logo, and more. It has an asymmetrical, one-column grid with a custom color scheme. A right sidebar appears on posts but not pages.

We’ve reported about testing and tricks with Twenty-seventeen default theme elsewhere. Here’s the articles:

SpeedHeader: Twenty-seventeen before-and-after benchmarks.

 

How we cheated the speed tests using Twenty-seventeen theme.

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


 

Avani Theme

Avani theme is 420k unzipped file size with a 273k screenshot. That means the actual file size is 147k. (Remember all these test are with sample data (post and pages) imported into the theme.)

Avani Theme has over 1,000+ active installations. This is the highest number in this test.

  • Pingdom.com speed test: 642 milliseconds.
  • WebPagetest.org: TTFB: 663 milliseconds, load time: 1.593 seconds, Actual theme speed: 903 milliseconds.
  • P3 plugin theme speed: 32 milliseconds.
  • Browser timer: 1.361 seconds.

Features: The theme screenshot is beautiful because of the artistic images. The OOBE looks as plain (simple and minimal) as any other theme in mobile tests. Allcaps slabface text on mobile makes the Site ID (headline) looks gaudy. We can fixed it with a shorter description, too. That means we need to fiddle with CSS text styling. Do we like that “pin” icon on the sticky post? Absolutely, not! Usually you want to conceal stickiness from viewers. Lame idea. We’d strip that non-feature using CSS code.

How much does stripping Google fonts save in load time? About 100 to 300 milliseconds. But font loads cause random delays. Then you’ll wait for external server requests. The worst waits often hit 1 second. And heavy Typekit is always a long load time (1 second or longer). Beware!

Avani screenshot – looks nice.

Avani OOBE Screen

Avani Mobile Screen

Avani OOBE on an iPhone.

Burger Factory Theme

Burger Factory theme is 168k unzipped file size with a 116k screenshot. That means the actual file size is 52k. (Remember all these test are with sample data (post and pages) imported into the theme.)

  • Pingdom.com speed test: 604 milliseconds.
  • WebPagetest.org: TTFB: 560 milliseconds, load time: 1.449 seconds, Actual theme speed: 889 milliseconds.
  • P3 plugin theme speed: 38 milliseconds.
  • Browser timer: 1.121 seconds.

Features: Burger Factory is a minimalist theme for writers. It puts focus on the words instead of images. Uses excerpts as summaries. Can still be used standard-blog-style. Left sidebar? Big deal. But it’s certainly barebones.

Burger Factory screenshot looks boring – but we’d use this theme in certain conditions.

 

Burger Factory OOBE test screen.

MOBILE

Burger Factory OOBE on an iPhone with test content.

Checathlon Theme

Checathlon theme is 589k unzipped file size with a 191k screenshot. That means the actual file size is 398k. (Remember all these test are with sample data (post and pages) imported into the theme.)

  • Pingdom.com speed test: 556 milliseconds.
  • WebPagetest.org: TTFB: 812 milliseconds, load time: 1.400 seconds, Actual theme speed: 588 milliseconds.
  • P3 plugin theme speed: 31 milliseconds.
  • Browser timer: 1.089 seconds.

Features: Custom Background, Custom Header, Custom Logo, Custom Menu, Featured Images, Footer Widgets, Grid Layout, One Column, Portfolio, Theme Options.

OOBE

MOBILE


Expire Theme

Expire theme is 370k unzipped file size with a 126k screenshot. That means the actual file size is 244k. (Remember all these test are with sample data (post and pages) imported into the theme.)

  • Pingdom.com speed test: 614 milliseconds.
  • WebPagetest.org: TTFB: 914 milliseconds, load time: 2.026 seconds, Actual theme speed: 1.112 seconds.
  • P3 plugin theme speed: 32 milliseconds.
  • Browser timer: 1.361 seconds.

Notes: This theme includes a preloaded 69k sample header image.

Features: This theme looks pretty good right out of the box on large screens – but not so good on small ones. It would need some adjustment in CSS. If you going for evergreen content with no dates, you’ve lost a cool graphic element. Folder style posts. Blog, Custom Background, Custom Colors, Custom Header, Custom Logo, Custom Menu, Featured Images, One Column, Post Formats, Right Sidebar, Sticky Post, Theme Options.

OOBE

MOBILE

The mobile screen looks pretty cluttered and hard to read. That can be fixed with tweaking. Maybe?

 


LightBlog KT Theme

LightBlog theme is 687k unzipped file size with a 404k screenshot. That means the actual file size is 283k. (Remember all these test are with sample data (post and pages) imported into the theme.)

  • Pingdom.com speed test: 655 milliseconds.
  • WebPagetest.org: TTFB: 666 milliseconds, load time: 1.844 seconds, Actual theme speed: 1.178 seconds.
  • P3 plugin theme speed: 50 milliseconds.
  • Browser timer: 1.205 seconds.

Features: Another minimalist theme. This theme asks you to load two free plugins: Ajax Pagination and Infinite Scroll and Kirki. As near as we can tell, they are not required. Just suggested. Custom Colors, Custom Menu, Featured Images, Full Width Template, Left Sidebar, One Column, Right Sidebar, Sticky Post, Two Columns.

SCREENSHOT

OOBE

MOBILE


Louelle Theme

Louelle theme is 526k unzipped file size with a 266k screenshot. That means the actual file size is 260k. (Remember all these test are with sample data (post and pages) imported into the theme.)

  • Pingdom.com speed test: 593 milliseconds.
  • WebPagetest.org: TTFB: 993 milliseconds, load time: 1.747 seconds, Actual theme speed: 754 milliseconds.
  • P3 plugin theme speed: 47 milliseconds.
  • Browser timer: 1.141 seconds.

NOTE: Grayed-out text is a fake minimalist trick that makes reading difficult. The body text color should be #333 dark gray using CSS code for better readable contrast.

Features: Simple and lightweight theme. Custom Background, Custom Menu, Full Width Template, One Column, Right Sidebar, Two Columns.

SCREENSHOT

OOBE

MOBILE


Oncanvas Theme

Oncanvas theme is 531k unzipped file size with a 165k screenshot. That means the actual file size is 366k. (Remember all these test are with sample data (post and pages) imported into the theme.)

  • Pingdom.com speed test: 481 milliseconds.
  • WebPagetest.org: TTFB: 615 milliseconds, load time: 1.407 seconds, Actual theme speed: 792 milliseconds.
  • P3 plugin theme speed: 28 milliseconds.
  • Browser timer: 1.011 seconds.

Features: A light and minimal distraction-free portfolio theme. It displays posts in a 3-column grid layout, without a sidebar on the homepage and archive pages. Blog, Custom Background, Custom Colors, Custom Menu, Featured Images, Footer Widgets, Full Width Template, Grid Layout, Left Sidebar, One Column, Photography, Portfolio, Right Sidebar, Theme Options, Two Columns.

OOBE

MOBILE


Responsive Kubrick Theme

Responsive Kubrick theme is 421k unzipped file size with a 343k screenshot. That means the actual file size is 78k. (Remember all these test are with sample data (post and pages) imported into the theme.)

Pingdom.com speed test: 571 milliseconds.
WebPagetest.org: TTFB: 906 milliseconds, load time: 1.557 seconds, Actual theme speed: 651 milliseconds.
P3 plugin theme speed: 37 milliseconds.
Browser timer: 1.154 seconds.

Features: Odd look on mobile. A modern remake of the famous Kubrick theme. Customizable header gradient, lightweight CSS3 build and modern standards compliant. Blog, Custom Background, Custom Menu, Right Sidebar,  Sticky Post, Two Columns.

SCREENSHOT

OOBE

MOBILE


Some conclusions:

This is a small sample. Hardly, scientific. Our crude speed tests vary in results – but not much. We already expected that. What we’re looking for is relative rules of thumb – not absolutes. Eliminating all the variables costs too much time, money, and energy. But we can make generalizations:

  1. Themes with a 500k zip download package size have a higher probability of one-second page loads. Images optimization and lazy loading affect the speed dramatically. If you’re goal is a 1-second page load on shared hosting, scrimp on images. Or not use images at all (one of our frequent suggestions). Illustrations are better than photographs for speed.
  2. Any color usage makes a difference in memorable branding for a small screen.
  3. Type differentiation (font style) wasn’t demonstrated on small screens. It rarely makes a difference to the user. But speed does. Slow speed is the bane of every remote mobile user. Sacrifice Google Fonts and Typekit for extreme mobile performance optimization.
  4. Use a simple desktop browser timer for measuring speed. To ferret delinquent components, use an online tool like Pingdom.com. These give waterfall loading charts. Those are HTML, images, CSS, JavaScript shown on separate lines. Times show each server resource until it’s downloaded and rendered in the browser.
  5. Face it, mobile UX is pretty bland. Images are small. Text is narrow single column. You have to do value analysis of what is important. What are the least features to communicate for results? Severe mobile limitations force creativity.

Our recommendation is the Twenty-seventeen default theme for speed, longevity, and support. And that theme will look better on all devices. Not always. Header images can be problematic.

 


Minimalist featherweight themes

theme link installs unzip k screen weight Pingdom TTFB WPT.org speed P3 ms timer ms
Default 2017 1M+ 1200 364 836 609 605 1719 1114 26 1124
Checathlon 300 589 191 398 556 812 1400 588 31 1089
Responsive Kubrick 200 421 343 78 571 906 1557 651 37 1154
louelle 600 526 266 260 593 993 1747 754 47 1141
Oncanvas 300 531 165 366 481 615 1407 792 28 1011
Burger Factory 400 168 116 52 604 560 1449 889 38 1121
Avani 1k+ 420 273 147 642 663 1593 930 32 1147
Expire 100 370 126 244 614 914 2026 1112 32 1361
LightBlog KT 200 687 404 283 655 666 1844 1178 50 1205

What is the fastest free WordPress theme in 2017?

Which WordPress theme would we choose for best mobile speed? You can’t judge by looking at the theme on a desktop screen – nor by a demo page. You have to test with either iPhone simulators or web tools like Firefox browser addon:

Web Developers Toolbar → Resize → View Responsive Layouts

Or real hardware devices. No one owns that much hardware.

And how a theme looks – the “Out Of the Box Experience” (the oo-bee) – is nothing like the beautiful demo page. When you first install your new theme, disappointment!

Unfortunately, theme selection is often based solely on looks (aesthetics). Demo-page performance is deceptively “tuned and tweaked.” Premium themes are available for sale from marketplaces and individual WordPress developers. Purchaser speed-evaluation or testing is rarely done at all. It’s a faith-based buy. Speed is an after-the-fact repair job. This is “consumer-like” impulse buying. There’s buyers remorse for a non-returnable theme product. We’ve been there. We sympathize.

Our speed philosophy starts with a stripped-down, free theme. Then add only necessary features with free plugins. This is the foundation of good speed design. These kinds of themes are sometimes called: stripped-down, bare-bones, generic, basic, naked, essential, fundamental, or “bootstrap.” Those key phrases return pages full of affiliate links to theme-publisher houses. The blog author gets a kickback. Bloggers aren’t motivated to help you – as much as help their wallet.

We’ve found free themes in the WordPress directory often get a bad rap. Paid-theme publishers claim free themes have inherent flaws. This is advertising hype (aka lies). These imagined flaws include:

  • Lack of Updates
  • Security Problems
  • Lack of Support
  • Lack of Features
  • Lack of Customization

Nothing could be further from the truth. You can get the same lousy service from paid authors. Some of the biggest and best authors in the business fall flat on their faces sometimes. Even WordPress makes security mistakes and suffers from favoritism and apathy. Don’t believe myths that “premium” themes are better – or delivers better guarantees.

HOSTING

Many blog thought leaders say the right web hosting is critical. Even more critical than theme and plugin selection. This isn’t true. And you can bet whatever host they recommend is an affiliate link, too. (More kickback money).

We’ve only seen short duration when hosts provide consistent and reliable services. And we aren’t just talking shared hosting. We mean all hosting. From SiteGround to BlueHost to HostGator to DigitalOcean to GoDaddy. It doesn’t matter if they’re solid-state disk drives or old, mechanical, magnetic drives. “Reliable and repeatable” speeds drift all over the map. Why? Ask them. They won’t give you a straight answer.

Worst-case performance today – is tomorrow’s average (poor) performance. Hosting companies get juggled around from owner to owner. With each new owner, comes policy changes. Different management brings either better or worse predictable performance. It’s hard to know. It’s always random. If you had a different experience, please email us.

So the answer is: build the best and fastest strategic website to run well even on crummy hosting. That way you aren’t disappointed. We’re convinced, with even expensive web hosts, you don’t get what you pay for. We want cheap, shared hosting. We prefer not to share our server with too many other people. (For example, PagePipe shares with 24 other web domains). Use YouGetSignal.com to find how many domains are on your server.

Time to First Byte Specifications

We want to get a good TTFB (time to first byte). This is a measurement in milliseconds. It’s how long a user’s browser waits before receiving it’s first byte of data from the host server. It includes “network latency.” Data makes trips back and forth between server and browser. A long wait slows down seeing the page. Theme selection doesn’t affect TTFB. It is completely host dependent. But if your theme is too slow and your TTFB is slow, also, you’re doomed to always have a slow site.

  • 100 to 200 milliseconds TTFB is excellent.
  • 300 to 500 is good.
  • 500 to 800 is average.
  • 800 to 1000 milliseconds is poor.
  • Above 1 second is not “happiness.”

One client using BlueHost shared a server with over 2,000 other domain names. They wondered why their TTFB was always 4 seconds. Ouch!

TTFB is not web speed. It’s server responsivity. You can measure TTFB online with WebPageTest.org or with http://www.ByteCheck.com/

An offsite link about cheap hosting.

PERFORMANCE BUDGET

When you design a site for strategic speed, you use a performance budget. The industry-standard budget for best practice is under 2-second page load time. If your TTFB is 800 milliseconds, that server overhead reduced the amount of budget to 1.2 seconds. If TTFB is 100 millisecond, you have 1.9 seconds of pure luxury. That sounds like a small bonus. But believe us, you can add many extra features in 700 milliseconds.

Did we search for a shared host with 100 to 200 millisecond TTFB? Yes. And we found one. And even tested it: iPage.com We don’t get a kick back. We’re not an affiliate – so only click the link once. Save electricity. Did we switch to iPage? Nope.

Read about fast, web-hosting reviews offsite at: Woodstitch

More about TTFB improvement offsite at Kinsta.

NOTE: On these two links above, their reporting is honest. But it didn’t always match our experience in every regard. So test for goodness sake!

SPEED NOTE: After reading Brian Jackson’s article at Kinsta, we decided to try Cache Enabler plugin again. We saw no benefit before – as a caching plugin – and unknowingly tossed it. But Brian was claiming it improved TTFB. We found it hard to believe. This time we watched a video on how to set it up. TTFB dropped from 600 milliseconds to 350 milliseconds. That speed benefit happened across the board on every theme tested. Fantastic! We turned “GoDaddy-quality” into “iPage-quality” hosting with no extra cost! Thanks, Brian.

THEME OVERLOAD

There are 4,476 free themes in the WordPress theme directory (2017). Of those, only 1,470 are responsive. All the rest are fixed-width junk. No one should design today with a theme that doesn’t adapt to small-screen size. That limitation immediately reduced the number of candidates.

We had three criteria for the remaining 1,470 free responsive themes:

  1. Updated in 2017. Too many changes occurred in WordPress during the last quarter of 2016 and the first quarter of 2017. Some were functional and some security issues. We only wanted current and active themes supported by conscientious authors.
  2. The zip package size must be under 1M download. An arbitrary cutoff based on our experience unpacking, examining, and testing themes. It’s our rule of thumb. Only theme authors who care about speed keep the download package small and tight.
  3. They can’t be a child theme.

That reduced our database or sample size to 155 themes. That’s all! Those 155 themes went into a spreadsheet and sorted by decompressed package size. We then examined the contents of the TOP 10 smallest packages. And we also considered the number of active installations (popularity).

These themes by nature are plain and unadorned. Boring but functional. The principle goal is communicating and publishing. We want web content readable on a small device. Expressive aesthetics are second priority. It boils down to reading. People rarely view portfolios seriously on phones.

Speed Strategy requires:

  • Focus on content and interactions. Not on details, images and elements (space-filling prettiness).
  • All elements must have purpose and value.
  • Design for user experience – easier content consumption.
  • Test on a small screen first and later a larger screen.

We loaded sample content “test-data.xml” from WordPress’ Theme Data Test page.

(Use WordPress Importer plugin and Dashboard > Tools > Import).

We installed the following free, speed enhancing plugins:

We then installed the TOP10 themes candidates on a cheap, shared-hosting site (GoDaddy). And checked each resulting load time with Pingdom.com:

(Sharing with 25 other domains. TTFB: 500 to 600 milliseconds. Install Cache Enabler plugin and subtract 200 milliseconds from the load times below.)

theme installs fonts removed load time ms
Pacify 1000 Lobster/Raleway 671
Basic 10000 PT Serif/ 760
Generic 500 helvetica/Georgia 761
Grace 1000 open sans/raleway 835
Hexo 700 meriweather/lato 935
RedPro 300 lato 984
Triad 1000 open sans 1000
Techism 1000 open sans/helvetica 1030
Emphasize 1000 open sans 1250
Enough 1000 ubuntu 1390

We stripped the webfonts using Remove Google Fonts References plugin. We prefer websafe fallback fonts instead. Removing webfonts reduces 160 to 260 milliseconds from the page speed. Those are the final speed numbers shown above. We recommend this extreme method for mobile performance. Most people can’t tell font differences on small screens anyway. It’s a waste of resources. Most designers are underestimating the effect web fonts have on mobile speed.

Google Fonts is an open-source, third-party, font directory. According to BuiltWith, over 44% of the top 10,000 websites use Google Fonts on their websites. Slow. They need linking to an external asset on a distant server. You might see errors or warnings that the resources are missing a cache validator. Or that they require expires headers. These are fixed at the server level, and when they are on a third-party server you have no control over fixing them. Don’t use Google Fonts. Easy speed solution.

THE WINNER

We then focused on the TOP3 themes popularity: Pacify theme (1000 installs), Basic theme (10,000 installs), and Generic theme (500 installs). Basic Theme had something the other two didn’t: 10,000 installs and lots of functionality. Popularity doesn’t count much in our book. But in this case, the theme will have a longer shelf-life potential. Basic Theme is our final choice.

 

https://wordpress.org/themes/basic/



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)

SpeedHeader: Twenty-seventeen before-and-after benchmarks.

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.

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

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!

Review: Editor by Array Themes free WordPress theme for speed.

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.

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.

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.

13 free themes are prime candidates for testing aesthetics and customization.

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 >

 

 

 


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

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.