Join our Telegram channel to learn more!
This blog series about website speed has been a fun ride.
So far, we’ve learnt that Amazon would lose $1.6 BILLION(!) if their website slowed down.
We’ve also learnt exactly what’s going on behind the scenes to cause website slowdown.
It brings us to our natural conclusion: how exactly can you speed things up? We’re covering everything from server speed, to optimization and a few bonus extras in between.
Part 1: Make Your Server Faster
Part 2: Optimize Website Elements
Part 3: Bonus Extras
First, let’s recap what’s causing sluggish speed:
When you load up my website here at Bitcatcha, your browser (Firefox, Safari, Chrome etc) starts a conversation with my web server.
Browser: “Hey web server! Can you get me all the bits and pieces to display Bitcatcha.com please?”
Server: “Sure thing, let me find them, and send them across”.
Then, the web server puts all the website parts into a tunnel, and sends them across to your browser to load it up.
Sounds simple enough, but here’s what will slow things down:
There’s a lot that can go wrong here. So, how do we speed things up?
Your web host is the company that provides the server. It’s like renting a plot of internet land, where you’ll store all the website parts.
Most of us tend to buy the cheapest plot of land we find. But that’s not necessarily a wise solution.
Cheap web hosts rent servers that are crowded, and small. Remember, you want your server to respond quickly to requests, and speedily send your website down the tunnel to the browser.
Note
Check out our list of fastest web hosting based on their server response time.
Cheap web hosts will place your website on a server along with tons of other websites. It’s called shared hosting, and it means you have to fight it out for resources.
If one website suddenly gets loads of traffic, it’s going to slow yours down, while they gobble up the bandwidth.
By switching to a VPS (a virtual private server) or (at least a quality shared hosting provider like Hostinger), your web host will fence off a corner of the shared server just for you. It means you don’t have to worry about other websites stealing your resources.
Every time someone clicks on your site, your server has to physically send the information across the planet to their computer screen.
If the server is on the other side of the world, that’s going to take a long time. If you know where most of your traffic is coming from, ask your web host to put your website on a server closest to your main audience.
The trouble with moving your server closer to a certain audience, is that someone will lose out. If you move your server to California, your Australian visitors are going to get a slow loading time. So are your European visitors.
A content delivery network, or CDN, puts your data on servers all over the world. So when someone clicks on your website, the server closest to them sends the info.
It means your visitors get a super fast speed wherever they are in the world. (For your reference, I use Cloudflare here in Bitcatcha.)
When your server sends your website files down the tunnel, every part travels separately. Your CSS stylesheet, your logo, each of your images, etc.
Obviously, the most efficient way to do this is sending them all down the same big tunnel.
That’s where the ‘keep alive’ setting comes in. When it’s activated, the main tunnel stays on, and everything comes down the same connection.(This is super fast).
But when the setting is off, a new tunnel has to be made for every element. (This is super slow).
Most web hosts keep this setting on (which is good), but sometimes shared hosts close the connections without warning.
Now that we’ve made your server as fast and efficient as possible, how do we optimize the website parts themselves?
Your browser currently has to ask the server for each element, one at a time. Your logo, then each of the images, then your CSS stylesheet.
The time it takes to receive it is one round trip.
The more round trips you have to make, the longer it takes the entire website to load. It’s like packing up your car with boxes, and moving them to a new house.
The more boxes you’ve got, the more round trips you’ve got to make. The solution? Cut down the amount of boxes you’re taking.
Reduce the amount of elements your server has to send down the tunnel. Fewer images, less code, fewer plugins.
Unfortunately, it’s not just the number of boxes. It’s how heavy they are. If all of your elements are big and heavy, it’s going to take up a lot of space in your tunnel. They’ll also move slower. It’s like lorries building up. Each full of heavy boxes.
Luckily, you can compress your website, and everything on it. Using a tool like Gzip. (It’s recognised by 90% of browsers. – That’s pretty much everyone except a few stragglers still using Internet Explorer 4.)
The chunkiest parts of your site are the images, HTML, CSS, and Javascript. By compressing them, you can reduce the average ‘weight’ of your site while it transfers.
Fun Fact
The average weight of a website is 2MB, but it’s growing larger every year.
Images are usually the weightiest part of any website. They’re the biggest, fattest, slowest loading element.
Start by cropping them down to the exact size you need them. Don’t upload enormous images, and scale them down in the HTML. Just upload them at the right size.
Also, compress your images before uploading. If you are using WordPress, plugins like WP Smush could cut down the image size by a great 80%!
A sprite is one single image that contains lots of little images. It’s great for sharing buttons or other image elements.
Now, your website just needs to make one request, rather than ten separate ones. You can then use CSS to choose which parts of the image are displayed where.
HTML is dense and heavy. It’s also incredibly repetitive. CSS is a little more streamlined, but lots of it is redundant.
It’s time to go through your code with a fine tooth comb, and get rid of all the unnecessary bits.
If you’re using a template from WordPress, Tumblr etc, then there is probably loads of code you’re not using. These templates are set up to give you lots of options for functionality. But most of us don’t need it all.
Be ruthless!
We’ve all experimented with tons of plugins over the years. But often, we forget to uninstall them.
Every plugin is another server request. It’s another weighty package blocking up your high-speed tunnel.
If you’re not using it, turn it off.
For every redirect, your packages go up and down the tunnel twice. Unless you absolutely have to, don’t use redirects on your website.
There’s one part of the process we haven’t talked about yet. It happens right at the very start.
Before your browser starts the conversation with the server, it has to find the server’s location (By finding its IP address). It’s like looking up the server’s number in the phone book. That takes a little time. (Usually 20-120 milliseconds).
It takes even longer if there are multiple domain names associated with your website. Common examples include: blog.yourwebsite.com, or additional domains for images, stylesheets, and flash objects.
If your browser has to do it five times, you might lose half a second. Keep it to as few domains as possible.
Imagine how fast things would be if your browser could keep a copy of all the website files. That way, it wouldn’t have to contact the server every time. It could just load them up from memory.
That’s what caching is. It means your browser ‘remembers’ the website. When you load it up for a second time, it’s super fast.
Phew! That was a longer post than usual, but I think it was worth it.
Now you know everything there is to know about making your website lightning fast. These tricks could shave seconds off your load speed.
That means happy visitors. And it means more sales.
WordPress Speed Guide
If your website is build with WordPress, we have compiled a detailed step by step guide on speeding up WordPress. We use the exact steps to make Bitcatcha.com loads in 3 seconds.
Daren Low is the founder of Bitcatcha.com. With over a decade’s experience in website development and internet marketing, Daren is a top authority on anything to do with building and managing an online business. Pick his brain today by connecting via Linkedin and Twitter.
