How to speed up your website

Top 5 SEO Agencies
November 29, 2015
Start a YouTube Channel for Your UAE Business
February 21, 2016

How to speed up your website

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

Many times, especially on those smaller, experimental projects that I love so much, I find myself spending more time on the CSS than any other part of the code. Oftentimes there is also more CSS written than HTML or JavaScript. So that, right there, is an indicator of just how much your CSS can affect file size.

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.

2. Speed up your javascript

JavaScript can be really slow. To be more specific, JavaScript can have a much more direct effect on the “processing” part of the speed equation than the CSS. Worse, JS can get exponentially heavier in terms of file size in order to achieve seemingly trivial things.

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 you’re designing a full-fledged app, then you can and maybe should ignore this section. A good, flexible, and light framework can give developers a huge edge. For small-to-medium-sized websites, however, including a JavaScript framework may be overkill. On these websites, JS will be mostly used in the back-end of the CMS for administrating content. On the front-end, you might have an image slider, or masonry layout or two. If you’re really fancy, you might have auto-complete on the search bar.

Most content doesn’t need to be fancied up and animated like this. JavaScript should, as much as possible, be reserved for improving the user experience. Relying on it to simply pretty up a site can result in a slow, slow site, especially on mobile devices.

In a way, all code frameworks are all the same, whether it’s JavaScript, PHP, Python, HTML, or CSS: every feature is a bunch of code. When choosing a framework or plugin for a job, ask yourself if you’re going to use every feature it offers, or even most of them.

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.