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.
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.
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.
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
.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!
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.
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.
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_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 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.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post