This is something that I might start doing on Monday's. I'll run through my code and document my findings and fixes and tips and such for anyone out there who may have more code than they know what to do with.
I've spent today cleaning up the code from a few of my sites as I like to do on occasion. Sometimes code gets stale and I end up with variables, functions, classes and whole pages that I'm not using anymore. They sit there, confusing me whenever I glance over at them. Worse off, they sit there slowing down my compilation time and my page load time. I recommend every developer refactor their code every so often. At previous companies I've worked at, the lead developers set aside time each week to do the same, and in the end it leads to more readable and more manageable code. And in my particular case, it could also lead to faster page loads and more SEO friendly pages, as I was loading several things that I haven't used in years. I was actually loading several JS libraries that I've moved away from recently who were just sitting there haunting my code.
It's not a terrible thing though. Every website is chock full of errors and warnings and there is always room for improvement. What makes sense now won't make sense next year when you learn about new techniques and such or when new standards are created. There's a few tools that can help you along the way too, which I'll mention a bit more down below. Having clean code makes working on a website levels easier. You should be able to look at a module on a page and within 1 minute know how it was generated and how it was styled even. So let's take a look at how my code cleanup went.
This is what I found after a few hours today:
- Pages not used and/or public facing
- An old admin that's never been used
- Unused style sheets
- Unused CSS rules
- Repeated code with variations throughout
And it's barely Monday. Ouch.
I've never worked on a website that didn't have unused content or dead code. It could be anything from functions never getting called to whole directories without public facing links. It happens. Sometimes you start work on a small module, then move on to something more important and forget that it's there. If you're working on a .NET site like I am, that usually means longer compilation times, and some slow down on your IDE's side as it tries to debug and render different parts in real time.
Unused functions have been very common in my work life, and now also in my personal work life. For example, in one of my websites I had a slider, front-facing, with some back-end components that were used to set the min and max. I ended up getting rid of the slider at some point shortly after due to low user interaction and the fact that usability on sliders is really hit or miss, but a few variables, properties and functions remained behind making my code look more bloated than it should be. This is more of a an issue with code maintainability than anything else, as having too many functions won't effect your visitors. But just imagine coming back to your code a month later to look for a bug, and having to wade through a dozen functions that do absolutely nothing.
At my previous company, there were dozens of unused directories in the website I worked on. After digging into them to figure out what they did, my jaw dropped. They were fairly complex modules and features that no one had ever known existed on the website. Everything from live chat assistance to an entirely different website within that site. When or where those pages ran is a mystery to this day, but cool find nonetheless.
An Old Admin? WTF
A fully functioning admin I might add. I keep all of my code stored in SVN tucked away, so I can delete it from my main project whenever I want without concern really. So why did I have an old admin lying around unused for eons? Well, when I built this particular site I copied over alot of pre-built functionality from another website that I had, and I used this admin initially to set everything up. A few months out, I now have a much better admin that's custom to just this website, but I still had the old one sitting there in a 3 layer deep directory. It's not a small directory I might add, so it does add some time to my compilation. It also adds time to my site-wide search, which if you're a developer, is in your top 5 most most important tools.
That wasn't the only unused module lingering around the code. There were tons of left over web service functions and helper functions that have since gone unused in the code. The thing is the longer you write code the more you realize how little of it you really need. A year from now, you'll have removed pages, created new pages, and re-styled you website. My website runs just as it did before I cleaned it up, but if you look at the page load times, they're much much better. If you look at network utilization, it's much improved. The website compiles faster now. And my project-wide search saves me seconds that build up into minutes on any given day.
Unused CSS Rules
Take my site...please. Since I run my own websites and do my own A/B testing and analytics analysis I'm constantly moving things around and trying things out, so many a time I end up with leftover style rules, which I tend to forget exist. So what happens next? I do a build, deploy and end up with a stylesheet that's 5kb too hefty for its own good. That's not great, but it's not a terrible thing either. You do that enough though, and you end up with a stylesheet that's 70% unused. Not only is that bad for your pages load speeds, but it can also harm your page ranking with search engines. Slow websites don't make for good user experiences, and search engines like Google know that.
My approach is to split off my styles by page and module. It's something that I've thought of doing in the past but have been too lazy to do. 1 day later, I'm 90% done and I've managed to get that 70% unused number down to about 30% now, which will require a bit further investigation. If you want to see just how your website fairs in that department, just open the Google Chrome Inspector and click on the Audit tab to do a quick site network and performance audit. More on that down below.
Maybe not that many errors, but some errors will be found. Normally when you build a large module for your website, you code, you error check, you correct, you release, test live and it's done. After that, the data changes, new things are added, new logic is implemented and that old code that once so great, might not be as awesome as you would think anymore.
For example, I had new flags created in my database table in order to further filter down a view. Low and behold, there were a few places that continued to make calculations on that data without including the new filters. A quick search through the code fixed the problem in 5 minutes.
When Should You Refactor?
Whenever you have downtime. Or Mondays like I do, eh? The faster you can quell that pesky runaway code the better. Otherwise you end up with 2000 unused style rules that you must find a way to get rid of. You also end up with bulkier compilations that take up time for no reason. And more importantly, it leads to a slower and more cluttered website, which is both bath for search engines trying to index your website, and for your visitors which are sitting there waiting for 20 JS files to load when they'r not being used anywhere. Set time aside after a major build and go through a few tests to ensure that you're not carrying over unnecessary code.
A Few Helpful Tools
Google Chrome Audit
The audit tool is designed to help you see shortcomings with your network and page performance, which is also super important, and for another post perhaps. But a nifty tool it has is that it lets you see how much of a CSS file is going unused on your website.
Lots of nifty info in the Chrome Audit Tool, which I won't get into today, but future post coming I'm sure. So here we can see that I have a total of 1606 unused rules on this particular page, which is a problem. The page doesn't need that bloat slowing it down. My solution was to beginning splitting up style rules by page and module, and only loading the necessary CSS files when appropriate. At the end of this process I should technically have moved out all of the used rules into their own files and the remainder should be safe to delete.
Built-In IDE Tools
Visual Studio in particular can point out unused variable usage throughout your code, which can lead to further hints about other unused modules. It can also inform you of all the places in your project where a function is being used.
Unfortunately there's no way of having Visual Studio tell me all of the functions that are going unused. But maybe we can builld something for that later in a future post! So many post ideas to jot down...
So I would call that a productive day. I've got less dead code to worry about, and I've got a faster loading website to get indexed. Many times software developers worry more about writing and too little about deleting. Take a day out of the week, run through a few pages and always keep code clean. Happy coding clean!
Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.
Stay up to date
Sign up for my FREE newsletter. Get informed of the latest happenings in the programming world.