no cost

Save the Internet from WordPress speed abuse.

Updated: October 2017

4 minute read

Our local pharmacy client wanted a rebuild of their existing vintage HTML website. They wanted us to use WordPress and duplicate “a new look” from an example pharmacy website in another city.

When a client chooses the design appearance, it can be problematic. Researching an appropriate theme takes time. When the client isn’t the art director, theme selection is much faster. They wanted to look just like this home page below. This is what the sample-site Home screen looks like:

How we located a free WordPress theme that would fit the bill.

WordPress has a theme repository. They call it the Theme Directory.

theme-directory

You can sort with a Feature Filter.

highlight-directory

We sorted with Responsive and Right Sidebar features selected.

 

That search produced just about 900+ results. In other words, all of the responsive themes. The right column search parameter was ignored! Boo! Malfunction! But we could live with that since large thumbnails are shown of each Home screen. Scanning the themes went fast. We soon discovered the main obstacles were matching the navigation bar and right sidebar criteria like our client desired.

Several themes had the right stuff. Our simple rule-of-thumb for site speed slimmed down the number. Our rule is that compressed theme packages must have a weight of less than 1MB. We can check this by clicking the theme download button. The following screen pops up:

download-theme

The WP-Forge zip file size was 466k. That was a positive sign we could get the page load time down under 2 seconds. We decided this theme was our choice.

naked-theme-screenshot
This is what the WP-Forge demo page looked like in the Theme Directory. The main desirable features were the solid navigation bar and the side bar positioning.

After installation on our test site, we could see the theme had great customization features for matching the example site.

customize colors section
Customization screen
top-bar colors customize
Selecting custom colors for the Navigation Bar.

What it looks like after customization:

screen-crop

The WordPress theme directory gives a theme description and list of features. Below is our extraction from their text emphasizing what we feel deserves  comment:

WP-Forge is a combination of two powerful platforms: WordPress, the leading open source blogging tool and content management system and ZURB Foundation, the most advanced responsive front-end framework in the world.

Bluster! We don’t feel Foundation is necessarily a user-desired feature. It only made production of the theme faster for the developer – not us. Foundation adds extra page weight – but we found it didn’t slow things down too much – especially after minification.

Foundation includes tooltips, modal popups, a slider, pricing tables and more.

We don’t find feature overkill helpful. It’s throw-in-the-kitchen-sink strategy. We didn’t use any of these fancy bells and whistles.

Disposable features we threw out.

There were a number of theme non-features that slowed down page loads. That meant getting rid of a few things. And a few code changes to get things looking right. That meant adding custom code.

Before our customization changes, the site loaded in 1.5 to 2.3 seconds with 30 HTTP requests (226k page weight). That’s quite a few calls. Some things could be discarded to make it run faster such as Genericons font, Google fonts, Emoji’s font. Plus a few other minification and caching tricks.

After our changes, there were a total of 14 components and a total weight of 168.3K bytes. Loadtime was now 1.3 to 1.5 sec. Good enough!

Note: We decided to leave the default “Open Sans” Google font installed. It’s so common it’s cached in almost all browsers already. That makes for a fast load.

Other simple tricks:

1. We tightened up the H1 font used for page titles. We made the letter-spacing -1 pixel instead of the default 0 pixel. That improved readability. This was done in the style.css file.

2. We commented out Genericons in function.php file. Genericons weren’t being used and added 2 calls and 40k pageweight.

/**    wp_enqueue_style('wpforge-genericons', get_template_directory_uri() . '/fonts/genericons.css','', '3.3' );
 */

3. We also changed paragraph subheads in the CSS styling of “strong” to a blue color instead of default gray.

Plugins that helped speed up the site:

  • Better WordPress Minify
  • Cache Buddy
  • Disable Emojis
  • Far Future Expiration Plugin – set to 365 days and select enable Gzip.
  • WP jQuery Plus
  • WP Super Cache

Godspeed—

Steve Teare
performance engineer

Mobile WordPress Speed – without coding!

What others think of us:


"Your site is the only one I've found that seems to take a serious approach to making a WordPress site fast. Everyone talks about the Yoast plugin, fast hosting, CloudFlare, but I haven't read about time to first byte, image compression or similar subjects elsewhere." medium.com/@nathanpen Texas, USA

by - Nathan Pennington