How to optimize your website performance

2

How to optimize your website performance


(Image credit: Future)

Look around the internet and you’ll find plenty of statistics about how little time people are willing to wait for any website to load before losing interest and moving elsewhere.

And whether you’re trying to keep their attention on your personal site or your business webpage, it’s vital that you do everything you can to keep them browsing and potentially buying for as long as possible.

A dive into the statistics shows that most of us will be fighting an uphill battle. Those with fixed broadband connections expect a website to appear almost instantly, and even mobile users don’t have infinite patience.

According to research, the optimal load time for a page is three seconds, though the majority of sites are closer to double that – or more. And if you go beyond 10 seconds, most people are likely to abandon the page and go elsewhere. And the faster you can make your site load, the better.

How long a web page takes to appear on a browser depends on the server and services provided by your web host, the device that the viewer is using to load the page, and the web connection that’s joining all of that together. There are plenty of moving parts, and it can be undeniably complicated.

While it isn’t possible to speed up all users due to things beyond the web designer’s control – like slow user devices or poor web connections – it is practical to make a site as efficient as possible, improving performance for the majority of visitors.

Enhanced website speed can be achieved with a range of different methods, but there are three central pillars to improving site performance. These are enhanced hosting, site optimization, and some platform-specific considerations.

Supercharge Your Site with NitroPack

NitroPack ensures you stay ahead by compressing images, minimizing code, deploying caching, and using other advanced optimization methods to ensure fast-loading pages for your visitors – all that via a modern UI.

The importance of hosting

How much a site spends on web hosting is usually in proportion to the number of visitors expected on any given day, factoring in how long each stays and how many pages they browse. After all, you don’t want to pay over the odds for capacity or services you’re just not going to use.

This is the primary reason, along with security concerns, why relatively few companies host sites internally.

Typically, web hosting is ‘virtual’ in that a specific piece of hardware isn’t allocated to the website – instead, it’s shared with other sites through virtualization.

The beauty of having this solution is that more resources can efficiently be allocated to a site in times of high demand, providing the hosting agreement allows for this flexibility. If you’re producing a website, it’s crucial to consider the scalability of your hosting.

What’s important to decide is the projected traffic you expect to receive and to elevate your service appropriately.

If you have a rapidly growing site, but due to the hosting level, it starts to become unresponsive when a flood of visitors turns up, this could undermine your whole project. Therefore, plan to start small and then scale when the site reaches maturity.

We’ve gone into more detail below about the steps you should take when finding a suitable web host that can support your business or personal website goals, but getting appropriate hosting should be your first step when trying to improve your website’s performance and chances of success.

(Image credit: Shutterstock / PureSolution)

Site optimization

The performance of any website is dependent on how it was built, what software and tools were used to build it, its content, and whether or not it’s kept up-to-date. While it can be complicated, it’s vital to keep your site optimized properly if you want to ensure that it’s performing with the speed and stability you desire.

Once you have a prototype site, one of the first procedures you need to perform is to score each page on how long it takes to load. There are numerous tools available to measure page performance, and some of them will break down the timings to identify exactly what caused the most delay on any given page.

Google Pagespeed Insights is one of the key ways to check website performance – no surprise when Google’s SEO algorithms also govern so much of the web’s content. Getting second and even third opinions is important, so consider other tools too. GTMetrix is excellent for website speed testing, Dareboost goes further with diagnostics and recommendations to provide a broader view, and Uptrends adds uptime monitoring, loads of metrics, and plenty of server options too.

This testing isn’t something that you should only perform once on a single PC, as your visitors will be coming from a diverse number of locations, with varied broadband connections, and will be using different types of devices.

It’s especially critical that mobile platforms are tested both under Wi-Fi and cellular connections. And, in an ideal world, getting results from remote geographic locations is also valuable information. We’d also recommend testing your site in busy urban areas, too, because the mobile signal can be weaker here – so it’s essential to know if your site is going to struggle when mobile networks are busy or when there are plenty of people around.

Once you have collated this performance data, it is time to return to the site and see what alterations you can make to enhance the user experience.

Here’s a list of the top issues that slow down a site – and ways in which you can flip the switch and improve your website’s performance and success.

1. Simplifying your pages

If a page is made up of elements that come from other locations, including ads, widgets, and plugins, this can dramatically impact speed. The page becomes dependent on how rapidly those elements from outside the site are being served, which can compound performance issues if they are subject to poor coding, slow servers, or other harmful factors.

If you have a page that repeatedly takes too long to load, identify what’s slowing it down and remove it.

A popular first step in this area is to use tools like HTMLMinifier, CSSNano, and UglifyJS to remove whitespace, comments, or formatting from CSS, JavaScript, and HTML files.

This material will usually never be seen by your users, but it’s still something that your website and host need to plough through when loading. It can still contribute to poorer website performance and, in turn, annoy users who may go elsewhere.

There’s more that you can do in this area, too. It’s worth consolidating multiple CSS and JavaScript files into single files so you can reduce the number of requests being sent to your web host – another step that can improve speed and responsiveness.

And, finally, consider scanning your site to ensure that unnecessary CSS, JavaScript, and other types of code are removed. Tools like PurifyCSS, Rollup, and HTMLMinifier are designed for this purpose and can contribute to improved website performance because sites don’t have to wade through redundant code while loading.

There are also browser plugins that can perform much of this functionality – they’re one-stop shops for code optimization and can be incredibly useful when it comes to boosting performance.

2. Widgets and plugins

Widgets and plugins are external utilities or pieces of code that add functionality to your website. Plugins usually work in the background, adding functionality to a page without appearing visible to visitors.

Some of the most popular plugins concentrate on improving SEO, adding eCommerce features to your site, streamlining your user interface, or optimizing images.

Widgets, meanwhile, usually appear on your site, in view of visitors. In many systems, like WordPress, editors mean they can be dragged and dropped into position, and they often connect to third-party services to work correctly.

Popular plugins are often used to add social media displays to pages, insert feedback forms, gather additional statistics, or invite users to leave reviews.

There’s no denying that some plugins and widgets will be useful for your website, and there are even some out there that actually promise to improve your website’s performance. But, that said, these additions usually need to communicate with an external source and load extra code in order to function, so it’s easy to see how they can worsen your website’s performance.

Too many of these components cause much the same problems as multi-source pages, but they’re an issue that affects WordPress sites in particular. The temptation to pre-load pages with all manner of calendars, animated buttons, clocks, and so on is strong, but you must resist.

It’s worth auditing your widgets and plugins to evaluate which ones you need and which ones you can do without – or trying different widgets and plugins to see which ones have less of an impact on performance.

Additionally, you can also use “lazy loading” techniques to influence how your widgets and plugins load – if they’re not immediately essential you can delay their loading until later, which will make your website’s initial loading faster.

3. Managing your graphics

Website graphics shouldn’t be scaled up to vast sizes unless they are photographs that you wish to be clickable for a full-quality presentation – because large file sizes slow down website performance.

Having them scaled up can also introduce aesthetic issues, especially if they load slowly: they can appear blocky or pixelated, or reveal compression artifacts.

Making the graphics the same size as they should be viewed takes the workload off the server and the client browser and prevents the user from downloading larger graphics than needed.

Beyond that, there are methods you can use to optimize your images for performance while still maintaining those all-important quality levels.

Tools like TinyPNG and ImageOptim are perfect for compressing images without losing quality – and the name of the first tool gives a hint about formats, too. It’s vital that you use modern image formats, like WebP or AVIF, rather than older formats like JPEG or PNG. Those more modern formats use more sophisticated compression methods that enable higher quality and smaller file sizes.

Some website and hosting providers also allow you to use responsive images, which is a method whereby your website servers users different-sized images based on their screen resolution and device type. It’s a crucial option that allows your website to react to how people are trying to access it – which, in turn, means that you can preserve those faster loading times and provide viewers with a better experience, no matter their screen size or resolution.

4. Optimize how content loads

(Image credit: NitroPack)

It’s also possible to go further with an option called “lazy loading”. This is a technique that means your website won’t load an image until it’s needed – like when it enters the viewer’s screen.

Many websites use a technique called “eager loading”, which loads everything on a page at once. However, this is inefficient and may slow your page down and waste resources, especially if the user doesn’t even view the material that’s been initially loaded.

Switch to lazy loading and you’ll speed your page up because users only load what they immediately see – and your site doesn’t waste time loading what might never be needed.

You can go further down this route, too, and deploy an option called “preloading”. This tag or option, available in many web apps and systems, allows you to prioritize the loading of important assets on your site.

You can choose to preload essential images and other content on your website ahead of other content you deem less important, so you can ensure that your readers and potential customers see the most crucial stuff first.

It’ll improve your site’s performance and could be vital when it comes to keeping people engaged – because they see content sooner rather than waiting for things to load in an inconsistent and unhelpful order.

5. Fix your fonts

It’s possible to improve your website performance by paying careful attention to your site’s fonts – and they’re worth consideration, even if this is the kind of area that people will gloss over while trying to optimize in other departments.

Your first port of call should be using system fonts only, because if you rely on the fonts that most people already have installed on their device then that’s something that won’t have to load from a server or web host.

Of course, you can’t guarantee what fonts people will have on their devices, especially when such a vast array of devices and operating systems will be used to access your website. But if you stick to key system fonts that are pre-loaded on the majority of systems, then you’ll give yourself the best chance for success.

If that’s not an option, you can delve into your settings and try some alternative options to improve website performance. You can use asynchronous loading to delay how your fonts load, which can be used to prioritize more critical content – and get that to your potential customers sooner.

Also, consider using a technique called “subsetting”. This technique slices up fonts and rebuilds their files so your website only loads the characters and symbols that you actually use on your website. It can speed up performance because your website doesn’t have to load letters and characters that will never be used.

After all, font packs usually include every possible symbol that a user may require, but you probably won’t need many of those.

You can also use the preloading technique we mentioned earlier with fonts, too. This means that you can instruct web pages to load fonts first – so if a unique font is a crucial part of your website’s experience and you want potential customers to see it, then it’s possible to prioritize a font over other content.

6. Incompatible media

There exists a raft of file types that were once popular on the PC but are now effectively defunct. Mobile users won’t be able to access them, and most desktop users will also have issues unless they’re still running a plugin on an old browser version.

As a rule, don’t host video, image, or music formats that won’t work by default with Google Chrome or Microsoft Edge. It annoys users when the website has elements missing or comes up with odd errors.

If you want to ensure the best chance of success with your media files, use a modern format like WebP. JPEG and PNG are also widely used and well-supported when it comes to search engines, SEO rankings, and website performance. SVG is a popular choice, too, for certain situations, like logos.

And if you want to host videos, stick with MP4 – it’s popular, well-supported, and flexible, so you won’t run into many issues. Keep consistent with these modern file formats, and you won’t go too far wrong.

7. Backend code

How many times have you seen a neat feature that can be added to a website with ‘just a short line of code’? There are many of these, and they can be helpful. However, they often cause a headache for a much larger piece of code that is running on the server in order to make the code snippet do something useful.

Have too many of these – because you put that code on every page – and the server will become bogged down trying to process these requests rather than serving the site pages.

The most common culprits for these things are, ironically, analytics and form processing. However, code that tackles other tasks can also have a negative impact on overall performance.

8. Clear up links and redirects

Redirects are used to direct users around your website and, in theory, they can ensure an improved experience. They’re often deployed to send people to the mobile version of your site if they’re browsing on a phone or tablet, for instance, or prompt people to read the latest versions of your pages.

They can also be used to present people with location-specific pages or move people away from pages that are no longer relevant.

While they’re undoubtedly useful, using redirects adds latency to your website. It’s just something else that has to be loaded before potential customers can begin to engage and something else that can make your website seem slower. Ultimately, that’s something that can drive people away.

To improve this situation, keep things as simple as possible. Ensure that your website isn’t using redundant redirects that no longer serve any purpose, don’t use chains of redirects that force your users to travel around multiple pages. That way, if customers have to see it, at least it’ll be useful and engaging.

We also recommend customizing your 404 page. Some users will inevitably see this page, especially if you’re in the middle of a website optimization project. But if you customize the 404 page with fun graphics, a playful message, or helpful links to your website’s most pertinent pages, you’ll have a better chance of keeping people engaged.

(Image credit: Getty Images)

Similarly, we recommend that you scour your site for broken links. Google’s Webmaster tools can do this, and SEO audit tools from companies like Ahrefs and Screaming Frog perform this function, too. You can even get browser plugins to do it.

If you scan your site for broken links and either fix them or remove them, you’ll improve website performance. Loading won’t be hampered by URLs that don’t go anywhere, there will be less for your site to load overall, and users won’t be frustrated by broken links.

9. Mobile mistakes

A classic mistake that impacts mobile users is for the mobile site redirect to come only after most of the desktop-intended homepage renders on the phone or tablet.

The result is often a long wait while users see a desktop site that doesn’t appear correctly on their mobile device before they’re whisked away to the mobile site. When users have to load two pages to see your site effectively, they’re unlikely to stick around.

Ensuring that your site provides an excellent mobile experience is vital. Approximately 60% of web traffic now comes from mobile devices, and 57% of people’s total online time was spent using mobile devices.

Alongside that increased mobile prevalence you’ll also find shorter attention spans: according to SEO experts Semrush, mobile site visits tend to last between 704 and 775 seconds, while desktop visits sit between 996 and 1,918 seconds.

You’ve got to cater to both mobile and desktop users, then, but arguably you need to work harder on performance and optimization given the growth in mobile browsing and the shorter timeframes you’ve got to capture people’s attention and keep them on your site.

Because mobile users are often connecting to 4G or 5G data services without the consistent transfer speeds that wired broadband users might expect, the significance of rapid web page delivery is even greater.

10. Use compression

There are numerous ways that it is possible to ensure that the files that make up the site are smaller and therefore quicker to download for a visitor. And while we’ve already mentioned compression elsewhere, when talking about images, this technique isn’t just valuable for your visuals.

There are global server-side technologies like Gzip or Brotli that can crunch file sizes by as much as 70%, although just picking the correct files and compression levels for JPG files can also bring performance benefits.

These sites compress HTML files, CSS, and JavaScript on servers before sending them to the user’s browser, which improves performance because less data has to be transferred and managed before the site loads.

The only caveat to using compression is that you must identify those files and folders that you don’t want compressing to the system. Because already compressed video files and compressed volumes (ZIP, RAR, or LZH) can’t be squeezed down any further.

11. Rely on Content Delivery Networks and Caching

Content Delivery Networks, or CDNs, are groups of servers that speed up the delivery of web content to users by storing copies of files in data centers close to them.

If you want to give yourself the best chance of holding people’s attention and improving your website’s loading times then it’s worth investigating your options for these geographically distributed networks. By storing content closer to your users you reduce latency and improve loading times – which, in turn, boosts website performance.

Content Delivery Networks can also host and serve static assets, like images or code, which can reduce the load on your primary server. This collaborative, geographic way of working can have a significant impact on your website’s performance.

That’s not all you can do when it comes to your servers and hosting, too, because caching can play an essential role in boosting your website’s performance.

“Caching” is the practice of storing copies of files in a temporary storage location so that they can be accessed more quickly. That temporary storage location is called a cache – hence the term “caching”.

If you use caching on your website and your user’s devices support it, then you can store static files on their devices. This improves loading times when they visit your website in the future, which can play a big role in enhancing the user experience and contributing to better overall loading time and performance statistics.

Server-side caching is a similar technique that can also have a significant impact. This technique temporarily stores data and assets on servers for use later, which reduces the load and latency on a server – in effect, assets are faster and easier to reach and don’t have to be loaded from scratch every time.

These caching techniques won’t necessarily improve website performance for a customer’s first visit, but they will have an impact on later visits. That’s because a user needs to visit a site first for their device or for servers to grab content to cache. But once that’s done, the content will be more accessible for future visits, and performance will improve.

12. The host with the most

If you want to maximize website performance then it’s crucial to pick the best web host you can – and if you spend time doing plenty of research at this stage, you’ll likely have better results in terms of performance and stability in the long term.

Before you do anything else you need to consider what kind of website you’re building and what kind of demands it’ll have. If you’re putting together a fully-featured site for a large business that sells plenty of different products, for instance, you’ll need loads of e-commerce features, plenty of flexibility, and scalability to handle lots of traffic.

But if you only need to put together a modest site for a small business, or if you don’t need e-commerce abilities, then your more straightforward requirements will mean you will likely need a more straightforward and affordable web hosting package.

If you estimate how much traffic you’re likely to generate it will help you choose a web host and a web hosting package – it’s no good to pay over the odds for resources that you won’t use, and a good host will help you scale up later, if necessary.

Shared hosting is an ideal option for smaller sites that will generate less traffic, but it’s less suitable if you anticipate loads of traffic or need high-end features. There are often similar options with website builders, too, which is perfect if you want to drag and drop your site together with minimum fuss and technical knowledge.

WordPress hosting is a middle ground that provides exceptional editing and a good range of features.

If you need something more powerful, VPS hosting provides your own virtual server space on a server shared with other users – so you get more control and customization without the need to manage physical hardware. But if that’s what you need, then providers will offer dedicated hosting with total server control, the widest range of features, and the best performance.

Once you’ve decided what kind of hosting you need, take a look at the plans on offer within those packages – any good provider will offer various tiers of pricing that support different levels of traffic and features.

After all of that research, you should know what kind of hosting you need – and what level of package you need in terms of the resources it provides.

At this point, it’s worth comparing your chosen method and package across different providers to see who offers the best value for money. It’s a very competitive market, so look for discounts, too, and check how the pricing differs depending on the length of the hosting package you’re considering – if you buy a more extended package, you’ll often get better value.

Also, consider if your package of choice offers a money-back guarantee, check the renewal pricing, potential price changes if you expand your product, and what’s included for free. These are all areas where good hosting providers will be generous and honest – but some will try and sting you.

Check what features your potential package has, too. You need enough storage and bandwidth, organization and backup tools that you’re comfortable using, a domain name, and a free SSL. You may also want full root and access control and switching options if you’re migrating your site from somewhere else.

Also, ensure your host has suitable security measures. You need DDoS protection, firewalls, virus scanning, brute force defenses, and server hardening at a minimum. Domain privacy is useful, too.

Check out any prospective host’s support services, too. Some will have phone support, responsive live chats, knowledge bases filled with articles, and forums filled with helpful customers and support agents.

Some may offer priority support as an extra feature, or with specific hosting packages. But others may just have web forms that don’t promise much at all. And if you’re putting together a business-critical website, it’s crucial to have reliable, rapid help if anything goes wrong.

Some of these steps may not seem related to website performance, at least initially. But if you want to maintain a reliable, rapid website, you need great support, features, and security.

It’s also essential to take a closer look at features that do play a more direct impact on your website’s performance. Any good web hosting provider will be able to show off great uptime figures. And while 100% uptime is never possible, anything above 99.95% is a decent figure that should ensure reliability for your site.

Uptime guarantees should be easy to find and many hosts provide server reports and status pages. If any of that information is hidden, it should be a red flag.

The more server locations any prospective host has the better, as it means your site will theoretically load quickly for people in a broader variety of locations.

Finally, check out reliable review sites to see how real users rate your prospective web hosts. Many of them make big claims, but they’re not worth much if people’s real-world experience doesn’t match up.

13. Keep monitoring and testing

It’s all well and good to put plans in place to improve your website’s performance. However, software updates, bugs, services changing their functionality and algorithmic issues can all contribute to performance improvements or regressions over time.

And unless you keep monitoring, testing, and refining your website performance, all of your hard work could eventually be undone without you even noticing.

We’ve already discussed the methods you can use to test performance when building your site. Tools like Google Pagespeed Insight, GTMetrix, Dareboost, and Uptrends are great options for evaluation.

But this isn’t the sort of situation where you should test a couple of times and leave your site alone. If you want to give yourself the best chance of success, you need a consistent testing regime that uses several different tools to evaluate your site’s performance on a day-to-day basis.

This is because websites are complicated things that pull content from many different sources using many different types of code and content – and all it takes is a buggy software update from a third-party service or for something to go wrong somewhere else for your performance to take a hit.

Go beyond regular testing, too, by deploying real-time monitoring tools. Many of the tools we’ve mentioned include real-time monitoring, and services from companies like New Relic, Pingdom, and SolarWinds also provide this functionality.

If you want to take website performance seriously, it’s not just about building it initially – constant monitoring and testing are vital, too.

Optimize your website for business success

You can build the best-looking website in the world, fill it with amazing photographs, and ensure the copy is enticing and engaging – but it won’t succeed with customers if it takes ages to load or if it’s buggy and unresponsive.

And we do understand that the process of optimizing your website’s performance can be daunting and time-consuming. When it starts with researching web hosts, carries on with analysis and optimization of images, fonts, content, and links, and concludes with regular testing, there’s no doubt that it could require some significant investment of time and potentially money.

We promise, though, that it’s worth it. And if you take the time up-front, it’ll pay dividends for your website’s performance – and, in turn, the success of your business.

Start with thorough web hosting research and you’ll be off to a good start. A top-quality host will include great uptime and server performance by default alongside many of the tools you’ll need to keep your website ship-shape.

Once that’s done, it’s vital to analyze every aspect of your website – and keep doing that with regular testing to ensure that everything’s working well.

A fast, responsive, and reliable website can transform your business prospects: if you’ve got a website that works well, you’ll build a brand, develop trust, and capture customers. But if your website is slow and unreliable, potential customers won’t trust you to do much else right, either.

These rules also apply to personal websites, even if you’re a freelancer or a sole trader. Indeed, they’re universal.

With websites, it’s easy to build and forget. But if you develop and invest, instead, you’ll find the success you seek – follow these tips, and your new site will soar.

TechRadar Pro created this content as part of a paid partnership with NitroPack. The content of this article is entirely independent and solely reflects the editorial opinion of TechRadar Pro.

Mike Jennings

Mike has worked as a technology journalist for more than a decade and has written for most of the UK’s big technology titles alongside numerous global outlets. He loves PCs, laptops and any new hardware, and covers everything from the latest business trends to high-end gaming gear.

With contributions from
  • Mark Pickavance
Latest

Jaguar’s striking Type 00 concept is a bold statement of intent, but it needs more to restore its patchy EV reputation

See more latest ►