In the previous two posts in this series, we've discussed how we've gone from tiny websites to the enormous apps and sites we have today. We've discussed some of the choices we can make as it relates to leaning out our WordPress web site, what to watch out for, and why each thing important.
In this post, I'm going to give some actual examples of what I'm talking about. It won't be a straight up guide that is going to fit every use case perfectly, but the intention is to provide some examples in order to help get you started with cleaning and trimming off the extraneous bits on your blog that you don't need.
Leaning Out Template Files
Below, I've taken an piece of HTML from a recent project. The original site contained a lot of stuff it really didn't need. Over time the company had accumulated plugins and additions to their theme and were now experiencing absurdly slow loading times.
In this case, the most straightforward solution would be to slap a caching layer in front of it and be done. But that doesn't really solve the problem. One of the things I ended up doing was stripping away roughly 50% of the HTML in the theme, rewriting it where needed and adjusting the CSS accordingly to keep the design the same.
Here's a part of the HTML that was in the original theme. I did fix the formatting a bit.
<div id="content-wrapper" class="site-content">
<div id="content-inner-wrapper">
<div id="content" role="main">
<section>
<div class="section-content">
<article class="post small-image-left">
<div class="title-meta-holder">
<header class="post-heading">
<h2><a href="/permalink-to-post" rel="bookmark">Post title goes here </a></h2>
</header>
<div class="meta_author-area">
<div class="meta-info-left">
<div class="categories-list">
<ul class="post-categories">
<li><a href="/category-name/" title="View all posts in Category Name">Category Name</a></li>
</ul>
</div>
<div class="info">
<div>
<span>Posted on <span class="timestamp">Feb 28 2014 - 2:40pm</span> by <a href="/author/admin/" title="View all posts by Bob The Admin">Bob The Admin</a></span>
</div>
</div>
<div class="clear-both"></div>
</div>
<div class="meta-info-right">
<span class="post-comments">
<span><a href="#" title="Comment on Post title goes here">Comment</a></span>
</span>
</div>
<div class="clear-both"></div>
</div>
</div>
<div class="post-content">
<div class="post-content-wrapper">
<div class="content-image">
<a href="/permalink-to-post" rel="bookmark">
<img width="150" height="150" src="/permalink-to-post-image" class="attachment-smallthumb-left wp-post-image" alt="Post title image here" />
</a>
</div>
<div class="content-area">
<div class="content-wrapper">
<p>post content here</p>
<div class="clear-both"></div>
</div>
</div>
<div class="clear-both"></div>
</div>
<div class="clear-both"></div>
</div>
</article>
</div>
</section>
</div>
</div>
</div>
It's not the worst HTML I'd ever seen, and absolutely not one of the parts that really made the site a lot slower, but it's perfect for what I'm trying to show here: There's a lot of cleaning that can be done. There's an excessive amount of wrappers and clearing div elements.
After some cleaning I ended up with:
<section id="content" role="main">
<article class="post small-image-left">
<div class="title-meta-holder">
<header class="post-heading">
<h2><a href="/permalink-to-post" rel="bookmark">Post title goes here </a></h2>
</header>
<div class="meta_author-area">
<div class="meta-info-left">
<div class="categories-list">
<ul class="post-categories">
<li><a href="/category-name/" title="View all posts in Category Name">Category Name</a></li>
</ul>
</div>
<div class="info">
Posted on <span class="timestamp">Feb 28 2014 - 2:40pm</span> by <a href="/author/admin/" title="View all posts by Bob The Admin">Bob The Admin</a>
</div>
</div>
<div class="meta-info-right">
<div class="post-comments">
<a href="#" title="Comment on Post title goes here">Comment</a>
</div>
</div>
<div class="clear-both"></div>
</div>
</div>
<div class="post-content">
<div class="content-image">
<a href="/permalink-to-post" rel="bookmark">
<img width="150" height="150" src="/permalink-to-post-image" class="attachment-smallthumb-left wp-post-image" alt="Post title image here" />
</a>
</div>
<div class="content-area">
<p>post content here</p>
</div>
</div>
</article>
</section>
This piece of code has most of its wrappers stripped. If you don't need them, don't add them. Proper usage of CSS will allow you to avoid using most, if not all, of the wrappers in the original piece of code.
This example might seem insignificant, and on its own, it is. But do this everywhere for every template in your theme and you'll end up with a significantly smaller output.
When rendering your site, browsers will be happier for it, mobile visitors everywhere will appreciate your site opening faster on their phones because less data means faster loading times, and you will be happier when you need to adjust something in the code.
There's a lot more to discuss here, but this series is not meant as the definitive guide for writing clean HTML. Instead, it's purpose is to make you aware of the potential improvements that you can apply to your site.
Rachel McCollin has written a very elaborate and extensive guide on building a theme for WordPress. Her series details in exceptional detail how to build a theme and her examples are entirely void of any bloat, I can recommend anyone looking for some pointers on how to get their HTML sorted to take a look at her series.
Trimming Our Plugins
Now that we've taken a look at the themes, let's talk plugins.
A lot of the same rules apply here. The cleaner the plugin is written, the easier it will be adjust it when you need to do so. Remember that you will lose the compatibility if you adjust a plugin directly so it's generally best to try and avoid that.
Plugins come in all sizes. That is say that some do what they need to do and nothing more, others do what they have to do as well as many other things. Feature bloat is not uncommon and something you really want to keep a close eye on when you're selecting the plugins you want to use. In some (but not all) cases, the more plugins you have, the slower things will end up being.
Of course, this largely depends on the code quality of the plugin. This is why it's important to make sure you perform your due diligence when investigating the plugins you're about to install.
Individually, each plugin may not seem to be doing much, but if put together a large number of poorly coded plugin, you will see a significant decrease in performance.
When I was initially writing this article, I was going to touch on a lot of things to keep an eye on when selecting your plugins; however, Barış Ünver has written an excellent guide on what to look for when choosing a plugin and I don't need to repeat his words here.
Instead, read up on his guide if you are looking for tips on what plugin to use.
What's Next?
First, let's summarize: The cleaner you write your code - be it HTML, PHP, JavaScript, C - the easier it will be to maintain and adjust later. This post attempted to give you a couple of handholds on cleaning your templates and refers to excellent resources on getting started with this and finding plugins.
Some of you will have noticed that I failed to talk about anything related to CSS, JavaScript, minimizing elements, and other forms of optimization. That's because the next post will be about exactly that.
In the meantime, let me know in the comments what your thoughts are after reading!
Comments