Review: Sobe WordPress theme for speed.

Reading Time: 3 minutes

The WordPress Sobe theme was first published in 2013 before addition to the free WordPress repository in 2015. It was out in the wild for almost 2 years. It either reached market saturation – or was a flop. Why else would the author choose to make it free? As you’ll soon see, it turns out we’re happy for their generosity.

First consideration: The .zip-compressed download file size is 257k. That is our first quick-and-dirty sign of speed potential.

Most theme downloads that weigh 1MB or less create a theme that can load in about 1 second on low-cost shared servers. Bigger downloads requires more scrutiny for approval. A typical load time for most WordPress themes is around 4 seconds. The Sobe theme download is inside our 1MB rule of thumb. So we’ll check it out next for speed-and-aesthetic balance.

What the theme name tells us.
Sobe refers to South Beach, Miami – an area developed in 1910 with Art Deco architecture for clubs and hotels. Think of the Miami-Vice-TV look of the 1980s. There are two things that give a “light-hearted” feeling (as advertised) to this theme: 1) the pink accent color and 2) the font selection. That’s it. But those are strong cues.

The font-family stack of “Playfair Display”, Times, and default serif (900 weight) are the heads. The body text is font-family stack Lato, Arial, Helvetica, and default sans-serif (300 weight). Lato is generic sans-serif with classic aesthetic and Playfair Display is expressive aesthetic. It’s a good balance with high-contrast font-weight. It looks nice.

Playfair Display-pink
Figure 1: Playfair Display font is a transitional font. (Go ahead wiki that). Pink #e57667 is the default color.
times-pink
Figure 2: Times font doesn’t look as nice – but it’s much faster to load. And we can still read it!
Georgia is the best compromise. It looks similar to the default Playfair but is fast to load.
Figure 3: Georgia is a sturdy compromise. The numbers looks similar to the default Playfair but still faster to load. We changed the font color to tangerine #e77918 and the background color to butter #ffc – instead of white #fff. These were easily done in the Sobe theme Appearance > Customize > Colors options.

Playfair Display has an extra large x-height and short descenders. It can be set with no line-spacing if space is tight. In the late 18th century, steel-pointed pens replaced the broad nib quills. This influenced typographical letterforms of high contrast and delicate hairlines like Playfair. The straight lines and curves balance both masculine and feminine attributes. More universal font that way.

Playfair Display is tempting from an aesthetic standpoint. In a few minutes, we’ll show you it’s affect on page load time. Then your opinion may change.

The Sobe readme.txt file description says, “Choose between a one- or two-column layout.” They neglect mentioning these features require unspecified widget plugins. The real column specifications are main column width 500px with an active sidebar, or 600px without a sidebar. The right sidebar width is 230px. That isn’t wonderful pixel math but it’s what it is.

Most of the Sobe theme advertising is standard, fluffy braggadocio. Here are the main Sobe features:

  • Site Logo (requires Jetpack plugin), The site logo has a width and height of 300px on the home page and 100px on later pages. But, we don’t like Jetpack. That’s a non-feature.
  • Social Links Menu – uses heavy icon fonts – gak! Another non-feature.
  • One, custom “flexible” header image: Recommended size is 920 x 300 pixels. Not full-width. We’ll get over it. Flexible means we don’t have to hack the theme to upload a smaller or larger image. This turns out to be handy.
  • Custom backgrounds and colors (meaning it allows CSS tiling selections). We’ll use this.
  • Featured Images apply to page or post headers and thumbnails.
  • Default color scheme is Pink (#E57667) and Light (gray #666). Big deal.
  • Responsive Layout for mobile devices. We expected as much.
  • Sticky Post: This is a nice but unnecessary feature. It doesn’t add to page weight.

Also from the theme readme.txt file: The developer baked-in Genericons and Font Awesome icons. Nooo! We don’t like this theme-icon trend. It slows things down.

Let’s get started.
We begin testing by installing Sobe on a live, shared-hosting space to learn more. Gzip is on. No CDN. No images. No caching plugins.

Out Of Box Experience (The OOBE).
Here’s the immediate result with WebPagetest.org default settings. 1.5 second load time, 15 requests, 212k page weight. For the repeat view: 704 milliseconds, 1 request, 3k load. And the plugin has a Yslow Grade A 99. Most web designers and site owners would be happy with that and proceed to load up the theme with images and plugins. We’re determined to push the peddle to the metal for web speed.

Speed strategy and observations.
The Sobe theme doesn’t activate jQuery, this keeps the theme page load time fast. Our target is under a 2-second load time after adding visual-branding assets. We’re curious to see what speed improvement we get when we remove the icon fonts and Google fonts. We’re already greedy for more headroom for site branding and written content. What speed gain will result after severe fontotomy?

Step one:
Activating Better WordPress Minify plugin reduces HTTP Requests to 12. It improves load time by 100 milliseconds and ups the Yslow grade a notch to A 100.

Step two:
We remove Playfair and Lato Google fonts with Remove Google Fonts References plugin. This reduces the page load time to 1 second. Is 400 milliseconds worth losing the font branding? The websafe fonts Georgia and Arial aren’t as charming but look fine and are fast. Now there are 6 component, 33.4k page load.

Slow-loading Genericons by Automattic (aka WordPress) creates an additional 22.7k of pageweight! We aren’t even using Genericons in the design. We’ve got to get rid of that stuff. That would buy at least another 100 milliseconds.

We go to the theme file functions.php and comment out the line that calls the Genericons using /* and */. That simple change reduces the load time to 895 milliseconds and only 4 components. Page weight is just 10.6k!

We decide to do a jQuery experiment.
What would happen if we switched jQuery “on” with a plugin. Orbit is a free, lightweight, responsive jQuery slider plugin. If we activate this slider, even though it’s lightweight, it causes jQuery loading. What happens to the page speed?

We find jQuery increases the load time from 1.53 seconds to 1.9 seconds adding 400ms of site bloat. Remember Gzip compression is on. Think how bad it might be without it. This isn’t the plugin weight. It’s just jQuery.

screencapture-tearewebtest-info
Three images added: header, tile, and inset.

 

Final Specifications with Branding Elements

Page weight: 54.3k, 7 components, Yslow: “A” 100 rating, load time: 863 ms. Nice. Sobe theme can fly.

 


Postscript: A few speed-graphics tricks for those interested.

This is the orange swirl tile used in the banner. It's a royalty-free image. We compressed it from 28k to 9.7k in an imaging program using "Save for web" features.
This is the orange swirl tile used in the banner. It’s a royalty-free image. We compressed it from 28k to 9.7k in an imaging program using “Save for web” features.

Wild Sea tile source >

The free web headers source >

color-header
We chose this image from FreeWebHeaders.com (link above). The original download was 1280 x 375 pixels and weighed 190k. We resized the image to 920 x 270 pixels and “saved for web.” The new image weight was 54k.

 

The smae header image but blurred reduced the file size to 21.2k.
The same header image –but blurred– reduced the file size to 21.2k. Much faster loading but still colorful.

 

We use Stylify Me web tool to spy on site colors.

stylify-me-tearewebtest.info-2
We thought we’d already changed default pink to orange. That insidious pink was still lurking in the CSS code waiting to leap out when least expected. We searched the code for the color specified by Stylify Me and changed it. We also consolidated all of the grays to dark gray #333. The light grays weren’t readable onscreen.
stylify-me-tearewebtest.info
This was the end result after the color purge. We want the white background to be either transparent (clear) or creme – but that’s a coding problem for another day. Searching for white or #fff didn’t reveal a quick fix. HTML colors don’t add page weight. But keeping colorized elements consistent is important to branding.

What others think of us:


"To be honest, I didn't expect much in the way of a reply but what I got was truly astonishing. He is a genius at what he does, as honest as they come and one of the last really good guys. If you need help with your WordPress site, try Steve first. You won't need to look any further!" fiftiesweb.com Fort Lauderdale, FL

by - Michael Rich