14 minute read
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:
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:
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 OOBE Screen
Avani Mobile Screen
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.
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.
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.
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.
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.
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.
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.
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:
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.
- Any color usage makes a difference in memorable branding for a small screen.
- 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.
- 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|
Mobile WordPress Speed – without coding!
What others think of us: