6 minute read
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 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?
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.
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.
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.
We use Stylify Me web tool to spy on site colors.
Mobile WordPress Speed – without coding!
What others think of us: