How To Speed Up My Website

I Wanna Go Fast!

I made a post this morning about my progress reworking the styles of the website as well as the admin panel. Doing so led me down a rabbit hole. After any major changes to the site, I typically test its speed using Google PageSpeed Insights. When I did that this morning, I noticed that the site was getting pretty slow on mobile devices. I touched on this a bit in my other post, but my CSS had grown a bit too big for its boots. The main stylesheet running Wisedocks had swelled to nearly 2,000 lines of code, so I split it into two stylesheets: one for critical CSS that I could preload and another that loaded normally for everything else.

But the site was still slow. On computers, the site is really fast, but mobile loading was taking about 4.5 seconds. I had nearly given up. I took a break from messing with the website and began scrolling around Reddit. In doing so, I stumbled on a website. I don’t even remember where, how, or what the name of the site is now. I’ve checked my browser history, but I can’t find it. If I figure it out, I’ll be sure to throw a link their way.

Let's Minify Some CSS and JavaScript

It was a simple website in terms of design, and it loaded crazy fast. I enjoy reading through a website's HTML output just as much as I enjoy viewing the actual website. While doing so, I noticed that they had minified quite a bit of their code. That’s when it hit me—I had forgotten to minify my CSS, JavaScript, or any code for that matter. I leave myself tons of comments in my code, which could be a major performance issue.

But here’s my problem: I don’t work on my websites the "correct" way. I like to use Dreamhost's file editor and edit my files directly on the server—live. It’s an insane way of doing things, but I enjoy it. Since I do things this way, which is quite handy when I need to make a quick edit, it wouldn’t be so quick if I minified all my code. Solution? Do it dynamically. Let’s grab a library or an outside tool to do that, right? NO! No libraries, dammit! I’m building a website, not compiling a full stack of everyone else’s codebase. So, I built a PHP script to dynamically grab my CSS and JS files, minify them, and serve them up.

This sped the site up a little bit but not as much as I was hoping. It did need to be done, so it wasn’t all in vain. Now I can edit my files live, yet they are served to the user minified. I’ve squeezed as much juice out of that approach as I probably will be able to.

I Stopped Using Cloudflare's Rocket Loader

The main problem I was having wasn’t so much file sizes or even the need to minify—it was just simple render time. It took too long for the page to render properly on phones. So, I started running the site through a few other optimization checks. That’s when I noticed something I’d been ignoring for a long time: Rocket Loader. It has always appeared to slow my site down, but in the real world, when I deactivated it, the site would show a noticeable slowdown. However, I hadn’t tried turning it off in a long time. My techniques have gotten much better over the past year, so it was worth a shot. Before I retested, I also tackled another script that constantly appears as a bottleneck.

Turning Off Unused GTAGs

Google Analytics almost always tops the list of scripts slowing down my website, so I took a look at the tags I had enabled. It had been a few years since I set it up, and I had everything enabled. Every time a user interacted with a form, watched a video, downloaded a file, or searched anything on the site, it was tracking. I didn’t even have a search functionality until last week, lol. I turned everything off except the tags that tracked visits. I just want to know how many visitors I have at any given time and what pages they are visiting so I know what’s popular and what isn’t.

Finally Getting Good Metrics

The two approaches combined seemed to do the trick. Turning off Rocket Loader actually sped the page up this time, and I’m sure deactivating the unneeded GTAGs helped a lot too. On mobile, the site dropped from a 4.5-second load time to 1 second—that’s on a slow mobile network. That’s not bad. I’m happy with the results.

If you are deferring your JavaScript and also minifying it, there really is no need to use Rocket Loader. It’s great if you’re using a large CMS, as you don’t have nearly as much control to do some of these things. But if you build the site yourself and take these steps, skip it.