So what do we mean by “fast”?
We do need to take a minute to talk about what kind of speed I’m referring to. In short, all the speed. More specifically, three kinds of speed:
1) Loading time
This would be the time it takes for all of the information to download to your users’ devices. This is affected primarily by the speed of the internet connection, and the actual size of the files.
You can’t do much about the connection, but you can do a lot about file size.
2) Processing time
After your files are downloaded, they have to be processed and rendered by the browser. All of that processing and rendering is affected by how well your code was written, and everything else going on on the user’s phone, tablet, or laptop/desktop.
The only thing you can control is your own code, but that makes a big difference.
3) Perceived website speed, or perceived performance
And then there’s the psychological factor. Fast websites can look and feel like they’re going slow. Slow websites can be made to feel a tiny bit faster with the judicial application of some tricks.
This part is all about studying your user, and letting them know what’s going on when they interact with your website or app.
You need to pay attention to all three aspects of website speed to make your site feel like it’s going fast. And the bigger the site is, the more there is to optimize.
Let’s get started, then.
1. Speed up your CSS
Then, of course, there is the matter of how fast your website will actually run on your user’s desktop, laptop, tablet, or phone. Much of the actual “work” or rendering a web page is done by the software, with a little help from your GPU.
It might load quickly, but scroll slowly. The way your CSS is written has a direct effect on how fast a particular device is able to actually display the web page once the files have been downloaded.
When optimizing a website to run faster, the CSS is usually a good place to start.
It’s a double whammy of painful slowness, and our users are often the victims, especially those on mobile browsers. This is not, however, the fault of the language. How screwed up our JS gets is often in direct proportion to our ignorance of programming in general.
I’m a non-developer. I’ve often used libraries like jQuery, or individual stand-alone JS plugins to get stuff done. The more I need to do, the more plugins I need to make it all work. These plugins and frameworks come with extra options and features that I may never use.
There’s the bandwidth-stealing bloat, right there.
In addition, plugins might not work well together. They might slow each other down, or one might stop another from working altogether.
There’s the wasted processing power, right there.
If you really want to speed up your website, shave off milliseconds (or whole seconds, in some cases) here’s what you need to do:
3. Avoid frameworks and other dependencies if you can
If not, is the framework modular? Can you pick and choose only the parts you actually need? If so, and you believe the file size trade-off to be worth it, then by all means go for it! Otherwise, it’s best practice to see what you can take out more than what you can cram in.
4. Compress Images & Videos
When you take video out of the equation, the biggest thing on any given content-driven site is the images. Images tend to be big, bulky, and slow as hell when they’re not optimized.
Now, with the proliferation of retina screens forcing us to use bigger images if we want things to look good on every device, the problem isn’t going to get any easier to solve. And worse, it’s an issue that’s easy to forget about until you end up spending more than intended on bandwidth.
When every byte counts, we can’t afford to forget.
The good news is that this isn’t a new problem by any means. Why is that good? It means that there are tons of potential solutions to pick from, and you can use more than one of them at a time. In fact, that’s generally a good idea.
This will make your website much faster than a normal website.