Google says websites should load in less than 2-3 seconds and when Google speaks you better damn well listen. Actually, it’s not only Google that comes up with numbers like this; countless studies say you want to be hitting the 2-second benchmark to stop traffic and valuable leads running out the door.
There’s a problem, though. As the web becomes a more complex medium, performance tends to take a backseat to glitzy features. Which is fine, if you want a fancy website hidden behind that blank loading screen, but not so good when most people quit the session before your first line of content loads.
So how do you find that sweet-spot between a fully-featured website and one that hits the 2-second benchmark?
1. Be careful with website builders
Website builders are great for building websites quickly but quite so good when it comes to loading times. Bulky code working under the hood always puts these sites at a disadvantage against custom-built websites and lightweight themes – and this only gets worse as you add graphics, animations plugins and other resources.
We are not saying you can’t build fast websites with builders like Divi or Elementor but you do have to be careful. You’re starting off with a handicap and this makes it all the more important that you optimize the rest of your project for speed to minimize the negative impact.
Better yet, build your sites from scratch, the old-fashioned way by actually coding them. The fastest sites are built with clean, custom code that’s optimized to take a minimal toll on servers, browsers and devices.
2. Minimize server requests
The first characteristic of clean code is minimizing the number of server requests. Every file on your website (HTML, CSS, JS, images, plugins, embeds, etc.) needs to be loaded and web browsers make a separate request to your server for each of these files.
These requests add up and the more of them a browser has to make, the longer it will take for your pages to load.
There are a number of things you can do to minimize server requests:
- Create a single CSS file
- Create a single JS file
- Use as many web safe fonts as possible
- Take it easy on the images
- Only use trusted jQuery plugins (or, better yet, avoid jQuery altogether)
By reducing the number of server requests you’re on track for a faster website and all your optimization efforts become easier from here.
3. Make your files smaller
Next up, you want to make each of your files as small as possible. This starts with efficient code, which is something of an art in itself, but you’ll also want to minify your HTML, CSS and JS files once you’re done.
Then you have image optimization and there are various things you ca do for this, too:
- Compress your images
- Define image sizes in your code
- Use vector image where possible
- Use the right image format
The same thing goes for any other files you’ll be calling on: PDFs, font files, audio, video, etc. Smaller files are always faster; the challenge is finding the balance between quality and small size.
4. Go mobile-first
Mobile-first design is about far more than creating a responsive layout. The idea is to create a fast, lightweight design for mobile devices and build on this for devices with more firepower and stable connections. So this approach has as much to do with speed optimization as it does with responsive layouts.
Design within the limitations of mobile (screen size, mobile browsers, mobile connections, memory, processing power, battery life, etc.) and you’ll be in good shape for a speedy experience across all devices.
5. Get cozy with a JS whizz
One of the most valuable assets in web development is someone who really knows their JavaScript. We are talking about someone who can solve genuine problems with clean, tidy JS so you don’t need to go anywhere near jQuery plugins or other bulky resources.
There are so many JavaScript tools around these days that JS is more of a niche, expert skill than ever. Sloppy JavaScript is a real speed killer, too, and having a JS whizz on board who can make magic happen with the most efficient code is invaluable. If you want to build faster websites, without dropping features, get the right JavaScript skills on board.
6. Use a content delivery network (CDN)
Server location is an important factor in loading time as well. If your servers are in the US, visitors in Europe will have to wait longer for your site to load than people in the States. This means every single one of your server requests takes longer for people, the further away they are.
That is unless you use a content delivery network (CDN) that essentially copies your pages and places them on servers around the world. This way, no matter where visitors are coming from, they’ll be downloading resources from the server closest to them.
7. Use a caching tool
Caching tools speed up loading times for repeat visitors by storing key files on their browser so they don’t need to download the same files for every visit. The kind of content you can cache includes:
- Logos and icons
- Images
- CSS files
- JS files
- Downloadable content
- Media files
As you can see, that’s a huge weight lifted off your loading times for repeat visitors. Of course, this doesn’t do much for first-time visitors, which is why it’s important to start out with speedy loading times, but caching is a great way to rewards repeat visitors and keep them engaged with improved performance.
8. Take it easy on the plugins/tools
We have already mentioned jQuery plugins as a potential problem and the same goes for WordPress plugins and similar tools. The more of these you use, the heavier their impact on loading times – and there’s another problem too. Plugins are built by third-party developers, which means you have no control over the quality of code, and there’s always the added risk that you could be choosing poorly developed plugins.
You should also be careful with your choice of marketing tools, as well. Placing analytics and cookies code on your site impacts performance and many marketing tools also require you to embed additional code on your site – some of which can impact loading times. Some of the worst offenders are popup software and social plugins – so use with care.
9. Invest in quality servers
Server location isn’t isn’t the only thing to consider when it comes to choosing a hosting provider. The type and quality of hosting you go for will have a drastic impact on loading times. Forget about shared hosting packages and go for dedicated or managed packages – they’re not only faster but also more reliable.
Many higher-end server packages come with decent CDN and caching features including; others you have to pay extra for.
Also, make sure your package covers enough visitor numbers and data usage. The last thing you want after optimizing your site for speed is to max out your 100,000 visitor limit and come unstuck.
10. Benchmark yourself
The only way to know how successful your speed optimization efforts are is to put them to the test. Run your pages through some speed testing tools and compare the results. Pingdom and PageSpeed Insights are two of the many free options you have – and they even help pinpoint potential problems.
Keep in mind the 2-second benchmark that’s generally accepted in the industry right now and don’t forget to test across multiple devices.
Every millisecond counts
Slow loading times are an absolute killer for conversion rates and user experience – nothing you want your sites to be associated with. On the other hand, if you can prove yourself as someone who delivers websites built for speed, you be providing what most in this industry fail to do.
