The phrase "New Year, new you" comes to mind when it comes to websites. Sure, it is a little cliché, but January is a nice time to step back and double check that everything is working well for your website and/or web application. A few days improving things can definitely make a world of difference for how the rest of the year is going to go, and you might find a few problems that you were not aware of.

The software that runs this blog, Craft CMS, reached version 3 last year, but I have stayed on version 2 because the code structure of the application changed significantly and I was too lazy to read up on what was necessary to upgrade. Fell into the trap of "Everything is working so far, why change?" The answer, of course, is that software updates have performance and security improvements, on top of their shiny new features. Also, the longer you go between updates, the more painful it is when you finally do the work.

It just so happened that I was also setting up a demo site for my latest software project last week and discovered that my server could not run my new application. The server was still running PHP 5.6, and while I had installed PHP 7.1 on it for another project, I needed to be on PHP 7.3, which is the latest and greatest stable version. This server had been created almost three years ago—a geological age in web development time. Despite my attempts to keep all of its inner workings up to date and running swimmingly, it was becoming harder and harder to maintain. That same day I discovered that Craft CMS v3 would also not run on the server without upgrading PHP and at least two of its libraries.

Time to upgrade!

Servers

I use Laravel Forge to manage my personal servers. For my own projects, it is relaxing to have a dedicated application handling the provisioning of the servers, adding a site, handling queue workers, installing SSH keys, setting up SSL certificates, and the more mundane tasks of managing a server. I still have to do work via the command-line to get everything the way I want it, but Forge definitely saves me time and effort.

So, over the course of a morning, I provisioned two new servers and begun the process of setting up my websites on one and web applications on the other. While things were being built, I took my blog and upgraded it to Craft CMS 3 on my local development environment. It was a pleasantly small amount of work. There were two hiccups, but they were minor and easily addressed. Even took the time to set up a staging site too, just so I could test things prior to switching the DNS records and going live.

Once the sites and applications were on the new servers, I switched over the DNS records and waited for the propagation to occur. Again, two minor hiccups were found once live, but it was a simple tweak to fix once I knew the underlying issue. Added SSL certificates to the sites (thanks, Let's Encrypt!) and everything was running normally again.

It took a solid five hours to move five sites and two applications to the new servers and get everything live, but it was worth it. The server specs were tweaked to better handle my needs, all software was upgraded to the most recent stable versions, new server image backups were implemented, and I even have a staging environment that I have been wanting for a while. Shiny.

Link Checking

It just so happened that the day after doing the server work, my good friend Cameron posted a Tweet reminding people to check the links on their websites. I ran both my blog and The Guide through the tool he posted and found over a dozen links broken on both sites. Ouch! For The Guide, it was particularly painful as I had gone through each article at the end of last summer updating content and links. Six months later and already things were out of sorts; two websites had gone completely away and the rest were sites changing their URLs without adding redirects.

Spent an hour fixing all the broken links. There were more than a few where the content no longer existed, so I simply had to remove the link. I also added a notification in my calendar to remind me to check again in six months. The web is prone to breaking changes, that is just the nature of the beast, so having a way to regularly validate your links (and images) is a prudent idea.

Security, Performance, Accessibility Audit

There are a plethora of tools for helping to manage the CSS and JavaScript for websites . They will do everything from building output from frameworks, bundling files together, moving files to a publicly accessible directory, compressing and obfuscating code, and versioning. While doing my software upgrades, I noticed how out of date my tools had become as well as the libraries and frameworks they were using.

Once you build a site, unless you are adding features or modifying a design, it is depressingly easy to just ignore it until something breaks. And then someone needs to tell you that it is broken. As egotistical as I am, I will go weeks without viewing some of my own sites. Server monitoring only gets you so far. Security warnings you read on Twitter or GitHub are easily ignored. Every so often, you need to roll up your sleeves and go through your files.

First, I upgraded my package managers and updated my tools. This can be painful and involve numerous Google searches. A version of one tool may not work with a version of another tool. Maybe whomever managed a JavaScript library has abandoned it and you need to switch to a new one, which will require you to upgrade your site's javascript to be compatible. Maybe a PHP framework switched to a new bundler tool that uses a new JS framework and nothing can be upgraded as your existing stack is simply no longer maintained. Things are better than they used to be—for instance, GitHub now provides security warnings for your project's stack—but it can be exhausting work. Wait long enough and it might be simpler to start over with a fresh frontend stack and copy over your old work.

Once you upgrade your tools and packages, you should evaluate your pages for performance and accessibility. Thankfully, modern browsers have built in tools to make these tasks easy. The Chrome Audits panel is probably my favorite tool right now. It will go through a page looking for problems and suggest ways to fix or optimize. It will evaluate your javascript for security alerts, it reviews forms for accessibility, checks to see if images are optimized, whether valid caching headers are sent for files, and much much more.

It can be an exhausting amount of information if you have not done it before. I will usually start with a single Audit like "Accessibility" and move through its list of suggestions. Getting a perfect 100 score is admirable but not necessary. Every so often Chrome makes suggestions (example: "Serve images in next-gen formats") that do not make sense for your site, so review its information and check the boxes you think are important.

Doing these Audits on my sites was so helpful. A few of my image files were way too large for how they were being displayed. I had totally skipped making a form accessible to screen readers. And my newly upgraded servers did not have caching headers added for CSS, JS, and images.

All of my website homepages load less than 1MB of data on an initial page load. Thanks to my changes, on subsequent page loads, this blog itself will only load ~22KB of data. The Guide will load less than 8KB on a second page load. So light! So fast!

A Conclusion (of Sorts)

Keep your software up to date and regularly check for problems with a set list of tasks.

Bugs exist, code gets stale, links expire, and problems develop even when you change nothing. Maintenance is important and fixing things will make for a better, faster, more secure website. Give yourself reminders to make sure things are checked on a regular schedule. It really will make a difference.