In the first post in this series, we took a look at a few things that we can do in order to keep our WordPress installation healthy. But that's not all we can do.

In this post, we're going to cover what to do with your assets like stylesheets, JavaScript files, images and more. 

Less is more. That's pretty much the message I'm trying to put forward with this entire series. To that end, I've talked about what to with over-done HTML in the, referenced a couple of resources that will help you get started with writing clean theme code, as well as finding the right plugins.

Now it's time to focus on our assets: Stylesheets, JavaScripts and images.

Styles Go Where They Belong

We're all accustomed to writing CSS, right? Even the beginners among us have touched a line of CSS here or there. Ever used a display:none somewhere? There you go, you applied a style rule. 

In its crudest form, I'm sure we've all used them. The more experienced people will know that it's a good idea to keep your styles where they belong: In your stylesheets. This is primarily a matter of maintainability. If you have inline styles all over your templates you'll get lost trying to find the right place to adjust something, and when you adjust that one thing, you still have to find that five other places that have the same inline style applied to them.

Putting styles in stylesheet files has another benefit: You can write less to do the same, using generic style rules instead of focused ones, but you could even take it a step further and use a pre-processor.

Stylus, LESS and Sass are all CSS pre-processors. You can use them to write less code and end up with a cleaner end result. Read that as: Less work, less code, easier to maintain! 

While Stylus is the exception here, both LESS and Sass have WordPress plugins available. If you can avoid using them, do so. There are ways to generate a stylesheet from a .less and .sass file just once, without using those plugins.

Without getting too specific, these pre-processors will allow you to write a lot less code to end up with the same end result. In many cases they will even combine styles together, making your stylesheets cleaner and easier to maintain. A quick tutorial on LESS and one on Sass have existing tutorials right here on Tuts+. 

As to which is better, this is very much based on personal preference. All three of the processors are growing and finding their way. You can find a comparison on the three available processors here that will elaborate more extensively on what each of their strengths are.

Scripts! All of Them!

JavaScript has become an accepted part of web development. A few years ago, we still accepted that it was normal for our visitors to have JavaScript disabled, but that's now the exception, not the rule.

Personally, I still prefer to build my sites without it and then add the scripts as an enhancement. This has the benefit of letting me keep the scripts down to their bare minimum because the site already works right out-of-the-box without it.

The only real option to write less JavaScript is to do exactly that. Write less; however, a good tip here is to utilize the jQuery library that comes packaged with WordPress as it is designed specifically to let you write less to achieve the same result but still remain fast and easy to use.

Images (They Will Forever Be Too Big)

Remember the first post in this series? I mentioned that in the past three years, websites had an absurd increase of 235% in size. Crazy, isn't it? Here's another fact: a large part of that increase comes in the form of images. I doubt anyone is surprised by this as using large images has become somewhat of a design trend, but even so, we should strive to do better. 

But how?

Make sure that if you're using WordPress to set the right image sizes for your images. No sense in loading a 500x500 image if you're only using a 100x100 version in your design. The next option is to use a service like smush.it or kraken.io. Both have WordPress plugins available and both do roughly the same: They rip out the stuff in the images that you don't need or want, optimize them and return the smallest possible file they can make from your image without losing any quality. Smush.it is a free service, where Kraken has a free solution as well as a paid solution that will optimize your images on the fly.

Optimization Is King

By now, you can see that I'm all for less. Less code, less images, less everything. End of the road though: Fast as my minimalist systems may be, I still want that extra mile of awesome. I'll make sure my code is as maintainable as it can be, my stylesheets as small as possible, and my scripts short. All that, however, is primarily preparation. After all, I'll still have the end results minified. Using the pre-processor for my stylesheets I'm already able to turn out a minified edition. For scripts there are similar solutions available.

Here, it's important to make sure your scripts and stylesheets are output using the wp_enqueue_script and wp_enqueue_style functions. Don't just throw them in the head of your template, but use function.php to enqueue them and let the wp_head function do the actual output. 

Why is this important? Because if you properly enqueue your scripts and stylesheets the different caching and minifying plugins that are available can properly combine them into one single stylesheet and script.

Caching? Yes, caching. Next to merging stylesheets and scripts these plugins provide a system to cache the output from the database or even the entire page that gets output. Both will dramatically decrease the amount of time a site will need to load. It's beyond the scope of this series to elaborate extensively on the available caching plugins and their features, Adam Burucs wrote an article comparing the two biggest caching plugins that's a good place to start if you are looking for some information on the two.

External Resources

External resources are a bit of an interesting part of it all. On one hand, using an external provider will offload the traffic from your own server. Usually, it will be faster because of browser limitations on the amount of requests that can be sent to one server. But there's a downside. You can't control what comes down from your external host and you need to both trust that the data will remain the same as well as that the host remains available. In some cases it might be a better idea to keep your resources on your own site.

Wrapping It Up

To summarize: keep it lean, make sure your stylesheets and scripts are as small as you can get them, then minify them even further. Upload images at the size you need them and pull them through an optimizer like smush.it or kraken.io. Use a caching plugin as a final endpoint for your output after you've minimized all the elements before introducing any caching.

There's one more installment left in this series in which we will cover additional references on the topics we've discussed and hopefully provide some additional useful insights.