How To Produce Cleaner Code – Part One
Updated January 4, 2021
Keeping your website code clean doesn’t mean becoming a web developer and editing every line of HTML, CSS, JS (and more) line by line. Instead, it means making decisions about what to use, keeping things updated, regular housekeeping and taking responsibility for maintaining the state of your website, operating system, platform, themes, plugins, database(s) and optimizing all of the above.
Read on to find out our top tips on how to produce cleaner code on your site and why it’s important.
Why a Cleaner Leaner Site is Important-
Website performance is determined by a number of hosting related factors such as your choice of web hosting provider, choice of hosting plan (and whether it has enough resources to meet the needs of your demand) and how close it is to your target audience geography. Consider quality managed hosting like KnownHost and see how your site performance can improve!
Sites that are clean and lean are faster than they would be otherwise if unmaintained, over-bloated and plodding along. The two key benefits of cleaner, faster sites include:
Website visitors will bounce, or exit, away when they find pages are loading too slowly. Speed is innately tied to visitor satisfaction, which in turn drives people to spend more time on site, view more pages and buy more products.
Cleaner, faster sites rank better on Google search results. It’s a fact of life, so take advantage of it. As your site gets faster, your rankings improve, you get more traffic and ultimately derive more profits.
Keeping website code clean, lean and up to date gives you the best shot at staying safe and secure online, since excessive (or out of date) code is a common attack point for hackers. This includes the operating system, platform, plugins, themes, databases and more.
Cleaner and Leaner Code Tasks (Part 1)
Each of the below represents an area of concern and includes tasks you can perform to make sure that your website is clean, lean, and stays that way.
At the foundation of every website is an operating system which sits atop the server hardware, enabling software platforms to run.
For most SMEs, web hosting accounts like shared or reseller don’t offer substantial access to the operating system. Instead, site owners rely on the hosting company to keep the operating system up to date, cleaned and optimized.
Opting for the cheapest unmanaged hosting one can find is a great way to roll the dice with security and performance. Instead, look to find affordable, proven, high performance hosting.
Operating System Task – Find Quality Managed Hosting
If you’re not already hosting with KnownHost, check out the plans on offer, all fully managed, fully maintained, cleaned, optimized and updated, from just $3.47/month.
With the proven best uptime in the industry, a simple task, like switching hosting, can help turn a sluggish, poor-performing site into a high-speed experience that’s a pleasure to visit and a place people flock to for purchases.
Riding on top of the operating system are web platforms like content management systems, ecommerce systems, blogs and the like. WordPress, as one of the most popular platforms, is a classic example of a web platform that benefits from being clean and lean.
We’ll go into more detail about particular aspects of WordPress installations, but for purposes of this point, the platform itself is at issue. You’d be amazed at how many websites are running out of date versions of WordPress, leaving sites at risk of compromise and running more slowly than they could be, once they get updated to current versions.
Platform Task #1 – Check & Update Your Platform
For WordPress, simply login to the admin part of your WordPress installation and you’ll see a big prompt at the top, telling you that your WordPress website needs updated and prompting you with a big button to click in order to make it happen.
Details are available:
Platform Task #2 – Remove Things You’ve Tested
Trying out other software applications and platforms is a hands-on method for finding out what else is out there, which suits your tastes and which ones don’t. If you’ve installed other apps, and aren’t using them, then uninstall them so they get cleaned up, freeing up disk space from files and databases.
Modern websites rely on plugins, well most of them anyway. What separates clean, fast, secure sites from the rest all boils down to which plugins are used, how many are deployed, whether or not they’re updated, if old ones are removed when no longer needed and the sum total of all the above.
Plugin Task #1 – Remove Unnecessary Plugins
Don’t be a kid in a candy store when it comes to plugins. You’re much better off only installing what you really need. Think long and hard about your minimum requirements and remove plugins that are “nice” but not “necessary”.
Plugin Task #2 – Consider Solutions That Don’t Require Plugins
The more things you can do without plugins, the more plugins you can remove, the more clean and secure your site will become.
Plugin Task #3 – Make Sure All Plugins are Updated
In the same manner as you’ve done with checking whether your WordPress version is updated, you can login to the WordPress admin screen and see which plugins, if any, need updating. Take the time to regularly check and update the plugins you have running – it’ll help keep your site clean and secure.
Remember that disabled plugins don’t get update notifications, so you’ll never know that any disabled plugins are needing updates.
Plugin Task #4 – Remove Unused Plugins
If you don’t actively need a plugin, then, rather than disabling it, remove it. Keep in mind that disabled plugins are generally ignored, no update notifications received so they don’t get updated and can pose security issues, providing hackers a way into the site. It’s excess code in directories and the database. As such, it should be cleaned up by removing unused plugins.
Themes play a big role in determining how clean and lean your website is, how fast it runs and of course how it looks to the visiting public. Choose a bloated, inefficient theme and you’ll be saddling a Clydesdale when you need a thoroughbred. Visitor satisfaction and search rankings depend on speed, so keep this in mind when choosing and maintaining your website theme.
Theme Task #1 – Consider a Clean Theme
The web is filled with research on the fastest themes, so take a few minutes to familiarize yourself with what is fast (clean) and easy to work with (to make it do what and look how you want).
Some of the regularly fastest themes for WordPress include:
See how themes have scored in speed tests with WP Speedster.
Theme Task #2 – Keep Themes Updated
Theme makers regularly add features, performance improvements, security enhancements and clean up old code, so take the time to regularly check and update your theme files, including ones you’ve kept around but aren’t currently using as the active site theme.
Drag and Drop Page Builders
Who doesn’t love the ease of building a page using drag and drop builders? This ease of use comes at a cost however. Just as with theme speed testing, so too has there been plenty of comparisons of pages created with various builders and then their performance compared. The differences are staggering, particularly considering the fact that some of the more popular builders can make pages that have twice as much code, twice as many database queries and take more than twice as long to load!
Builder Task #1 – Consider Building Without a Builder
If a drag and drop builder isn’t absolutely necessary, and you know it’s going to result in bloat that slows your site, consider scrapping the whole idea of using a drag and drop builder. It’s one way of getting much cleaner, leaner code that performs better.
Builder Task #2 – Consider a Clean and Lean Builder
The problem with choosing cleaner, faster builders is that you get less features – that’s how they shave time off of page loading and keep pages lightweight. Spend a bit of time looking at the builders available and see which features you really require. It could be that a superlight option like Site Origin (which is quite fast) just doesn’t have the features you want.
Builder Task #3 – Keep it Updated
Just as with all plugins, remove it if you’re not going to use it and keep it updated at all times.
When placing contact forms on a site, many people automatically opt for one that promises to be fast. Site owners go for fast to create without thinking through the impact that can have on page speed. Fast to build isn’t the same as fast to load when it comes to visitors checking out your Contact Us page. Given the importance of having a clean, lean page that loads quickly, it pays to look around for something that might take a small amount of extra time to load but which will pay off by having a fast user experience.
Contact Form Task – Consider a Lightweight Contact Form Alternative
There are several in the repository that will clean up your page code, including Lightweight Contact Form. Look to find one that offers enough features to get you by while at the same time providing fast page loads.
Whatever your platform, keeping the database clean is one often overlooked area to ensure peak performance and security.
Database Task – Regularly Clean Up the Database
Check out the KnownHost Wiki for steps you can take to keep your WordPress database clean, all without needing to install another plugin:
Broken links matter. They matter to users who get frustrated with being sent off to somewhere that doesn’t exist. They matter to search engines who see your site as being poorly maintained. Keeping tabs on your links, both internal and external, is a regular part of good site maintenance.
Link Task – Regularly Check and Fix Broken Links
See the recent post on the KnownHost blog about how to check for broken links. It’ll provide you with multiple ways of checking for broken links on your site so that you can either remove them, or update them with working versions:
Image and Video Formats
By simply switching to modern formats for images and video, your website pages will be leaner and faster. Think of every image and video that you use on site and how one simply change in tactics could accelerate your performance across the board.
Media Task – Switch to Modern Formats
Rather than trying to explain all the ins and outs of this web performance area of study, we suggest you get familiar with the principles of web performance over at web.dev.
A natural tendency is for people to hoard information, including email messages. Because of this, hosting account space is largely consumed with old email messages. Keeping inboxes, archives and spam folders under control is one easy way of reducing bloat and keeping your hosting account performing well.
Email Task #1 – Deal With then Delete
Make a habit of dealing with items in your inbox and then deleting them, unless you really need a copy of the message. Remember that, if you’ve replied to it, there’s also a copy in your sent folder (along with your reply).
Email Task #2 – Clean Up the Server Spam Folder
If you’re using SpamAssassin and have configured it to leave a copy on the server, that spam folder can fill up quickly and needs a bit of regular housekeeping. Login to your cPanel, goto Email and click on Email Disk Usage. That’ll give you an idea of just how much drive space you’re consuming with email messages.
Email Task #3 – Optionally Consider Offloading Email
For those who already have a premium Google or Microsoft account, consider offloading your email to an external provider. This isn’t a necessity, but is a way of increasing drive space when you’re running out of room due to email. It’ll also give you a lot of storage capacity relative to price, since email hosting doesn’t have the same millisecond responsiveness required of SSD web hosting.
Fonts definitely contribute to the look and feel of a website, that’s a fact. But fonts also add to page bloat, particularly when you’re using multiple fonts and they’re file sizes are huge.
Reducing the number of fonts and choosing fonts which have smaller file sizes are both ways of reducing the number of requests during page load (therefore speeding things up) and reducing the overall page size (even faster loads).
Font Task #1 – Assess and Reduce the Number of Fonts
View source on one of your web pages and look in the HEAD section to see how many fonts are getting loaded. Update your theme so that less fonts are being called by re-using a font already in use on the page.
Font Task #2 – Look at Using Smaller Fonts
Instead of using fonts greater than 100k in size, look at some of the 30k and under fonts available to choose from (thanks to oxfordshireweb.com for compiling). You may not believe it, but a savings of 70k is actually significant – particularly if you’re on a 3G cellphone.
WHM / cPanel Backups
Depending on your particular account configuration, you could be retaining a number of backup files (more than you intended). This is especially true when you’ve got multiple cPanel accounts. There’s also the concern about retained backup files from cPanel accounts you’ve removed. Though these should automatically get cleaned after 14 days, there are cases where orphaned files get left behind.
Deleting backups is something you want to plan, not undertake on a whim. Download any backups you plan on purging so that you can change your mind or undo any misfires.
Backup Task #1 – Remove Old Backups in cPanel
See what backups are present via the quick and easy backup wizard found by logging in to cPanel then clicking cPanel, Home, Files and Backup Wizard.
If you’ve accumulated several, it might be time to download them to your local machine and clean out the old backups.
Backup Task #2 – Check for Other Backups
Logging in to the server via SSH (or potentially using File Manager or FTP), look through the various user backup folders for additional files. These will be in the folder (where [username] will be more than one user if you have multiple cPanel accounts):
Backup Task #3 – Check for Other cPanel Temp Files
Logging in to the server via SSH (or potentially using File Manager or FTP), look through the various user temp folders:
Note: cPanel temp files will begin with “Cpanel_”
Click HERE for part 2 of this series on how to produce cleaner code as we dive into more advanced topics (don’t forget making and downloading a site backup before going wild with cleanup activities).