Cheetah in Namibia, by user tpsdave on Pixabay, CC0

Theme Performance

Website performance is a daunting, complicated subject; everything from servers, networks and the code itself affects the length of time it takes for our carefully-crafted pixels to arrive on the screen of our viewer. However, when it comes to WordPress themes, there are a few simple guidelines we can follow to make sure our themes help, rather than hinder, that process.

There is a single, unifying concept behind all of the following practices: less is more. Performance can be improved every time we:

  • reduce the amount of data we fetch,
  • reduce the time required to fetch that data, and
  • reduce the number of times we have to fetch data at all.

Image Handling

Images require special treatment to not get in the way of performance. These tips will make sure any images you require are as lean as possible.

  • Many images can be further compressed before suffering any visible loss in quality. Make sure any included images in your theme are compressed, either with your favourite image editor, or a tool like PNGCRUSH. Use the image format (JPG, PNG, or GIF) that best suits your situation and results in the smallest file size.
  • The best way to reduce image size? Don’t use them at all. If all you need are icons, use an icon font (like Genericons) instead, or the vector format SVG. Use CSS whenever possible for graphic elements, such as spinners or loaders.
  • If you must use multiple small images, combine them into a single file as CSS sprites, to reduce their download to just one HTTP request.

Scripts and Stylesheets

Scripts and stylesheets add up quickly. Simply adding third-party scripts and libraries that cover all edge cases can result in a lot of un-necessary code, while comprehensive CSS frameworks can also amount to needless data. Keeping in mind our mantra of less is more, two further action points can bring significant improvements to our page loads.

  • Minify, combine and compress your scripts and stylesheets to reduce their size and the number of requests to load them.
  • Enqueue scripts and stylesheets only on the pages that require them. See the Twenty Fourteen default theme for an example of how CSS and JS for the slider are conditionally loaded for just the home page.

Transients

Web servers have a very repetitive job. If ten users request our website in one minute, and nothing has changed on that page in that minute (a new post, categories removed, menus changed), it’s a bit of a waste for the web server to keep querying the database for the same information every time. This is where caching comes in. Caching is the general idea of doing the time-consuming data fetching one time, storing the results, and then delivering those stored results the next time someone asks for that same page. While the details of caching are far beyond this article, suffice it to say that the more our theme code can take advantage of caching, the speedier our sites will be – and the Transients API is a simple tool for theme developers to do just that.

Theme developers can store long-running queries in a transient, meaning each time that information is requested by the theme, it will be delivered quickly from cache rather than from a full query of the database. Secondary loops can be stored in transients, as well as the results of uncached core functions. The Twenty Fourteen default theme uses a transient for handling Featured Content.

For more information on transients and caching in general, Zack Tollman of The Theme Foundry has written an easy-to-understand overview of how WordPress uses caching in core.

Testing

Google’s PageSpeed Insights tool is extremely helpful when measuring performance of your sites in general. While some of it will not apply directly to theme code, it can point out issues with large images, unminified assets and more. There are two versions: a web version and a Chrome extension. The web version is usually more up-to-date (and now includes mobile-specific tests), while the extension can be used for offline, local testing.

Pingdom offers a suite of tools for web developers, one of which is the Website Speed Test. While PageSpeed is an overall review of best practices, Pingdom’s page test is focussed on load time, with the number of requests and load size for context.

Wrap-up

Getting content in front of our users as fast as possible is more important than ever these days, particularly considering the growing use of mobile phones and tablets. If we want content in front of our user within one second, we need to squeeze every millisecond we can get out of our themes and WordPress installs. Performance is an ongoing, incremental process which, with these guidelines and regular education, will keep your themes in top shape for all of your visitors, mobile and up. Remember: less is more!

WordPress Admin Screenshots

Theme Development Enhancements In WordPress 3.8

Some news on recent changes for WordPress 3.8 that make theme development even easier:

Post Formats

From 3.8 onwards, theme developers will be able to check if a post has any post format associated by checking has_post_format() without passing an argument:

// Does the post have any format assigned to it?
has_post_format();

// Does the post have this specific format assigned to it?
has_post_format( 'aside' );

// Does the post have any of these formats assigned to it?
has_post_format( array( 'aside', 'image', ) );

Background Images

Additionally, it is now possible to be more specific about a theme’s custom background support. You can now specify default-repeat, default-position-x, and default-attachment arguments for background images. This is the full array of defaults when registering theme support now:

$defaults = array(
    'default-image'          => '',
    'default-repeat'         => 'repeat',
    'default-position-x'     => 'left',
    'default-attachment'     => 'scroll',
    'default-color'          => '',
    'wp-head-callback'       => '_custom_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => '',
);

Miscellaneous

  • With the improved theme experience in the Appearance menu, WordPress can accommodate for even bigger screenshot sizes of your theme, the new standard size is now 880x660px!
  • If you have themes in the WordPress.org repository or plan to release a theme there (you should!), these three tags will be available to classify your theme appropriately: responsive-layout, fluid-layout, fixed-layout.
    They replace fluid-width and fixed-width, to make the terms broader and match web design terminology better. You can also classify your theme as accessibility-ready – if it is.

Why Hard Working Classes Slack in WordPress

Nathan Ford wrote a great article about how you can use the attribute selector to define styles for a multitude of classes that share a common element. Initially I thought this was great (I actually still think this is a great idea), and used it in _s and Twenty Thirteen to simplify the clearfix selector and some others. We used [class*="site"] and [class*="content"], to grab all classes that contained those two words, essentially addressing our entire page structure with two selectors. Awesome, right?

Well, it turns out there are a few issues with this approach. After a while we received a report that Modernizr uses a generatedcontent class on the html element, screwing with the rest of the site because the styles for the [class*="content"] selector were applied. We also received reports from WordPress.com, where users specified tags, categories, or post titles that contained one of our two words. Since WordPress adds all categories and tags as classes in post_class(), this, again, broke the site’s layout.

I still think this a valid approach in projects where you can control the class namespace. Since you can’t really do that in WordPress, it’s not a good approach for theme developers.

underscores

Don’t Update Your Theme (From _s)

I recently attended Steve Zehngut’s session on Underscores at WordCamp Los Angeles, where I was surprised to learn that a lot of developers are unsure how to update their themes with the changes we make on _s.

Version-less _s

For that we decided to make _s version-less, to prevent the feeling you need to update your _s-based themes with these constant changes. With no real roadmap, previously we bumped the version number arbitrarily whenever we felt like it, with a big enough change. Continue reading

Attachment Body Classes

There was an interesting bug reported for Twenty Twelve recently: The .single-attachment body class only gets applied when the attachment’s parent is a post (or custom post type). If the attachment’s parent happens to be a page, that class is missing.

In case you have been using .single-attachment to specify styles for the image attachment page, make sure to test your theme with images that have a page as a parent. And use the .attachment body class in the future. ;)