Minimise HTTP Requests
A HTTP request must be made to web browser to download front-end elements like images, stylesheets and scripts. A request must be made for every single one of these elements. The more page components the website has, the longer it takes for the page to load.
Reducing the number of requests is the key to faster pages.
It’s a good idea to find out how many requests your site is currently making, as you can use this as a benchmark (contact your web design agency who will be able to do this for you.)
Web developers will look through your files and see if there are any that are outdated or unnecessary. It’s also likely they’ll find some files that can be combined, which brings us on to our next step.
Combined files
You now know how many requests your site makes, so now it’s time to reduce that number by combining files.
Combined files are a great way to reduce the number of HTTP requests, by combining all scripts into a single script and combining all CSS into a single stylesheet.
Since every unnecessary piece of code will add to amount of request your page will make, it’s important to remove extra spaces, line breaks etc.
Combing files can be difficult, especially when scripts and stylesheets vary from page to page. But it is worth it in the long run and will speed your site up considerably.
When it comes to your website, less is more. The fewer elements on your page, the fewer requests your page will need to render, and the faster it will load.
Lazy loading
Once you’ve reduced the number of requests and combined your files, you can also influence the way that they load on your page.
Scripts can be loaded in two different way – synchronously or asynchronously (also known as lazy loading).
Scripts that load synchronously will load in sequence, one after another, in the order that they would appear on the page.
Scripts that load asynchronously will load simultaneously.
If the load gets to a file that is not asynchronous, it will stop loading anything else until it has fully loaded that specific file.
If the load got to the same file, but it was asynchronous, the browser could continue to load other elements on the page at the same time.
Lazy loading will prevent a delay in page load because the page will attempt to load all elements simultaneously.
Reduce DNS lookups
A key factor in how quickly your page loads is the amount of time your DNS lookup takes.
A DNS is a sever with a database of IP addresses and their hostnames. And a DNS lookup is the process of finding a specific DNS record.
It's like your computer looking up a number in a phone book.
Let’s say you want to visit https://www.biggerpicture.agency/. You would type this URL into your browser, but your computer won't know what to do with this information.
Your ISP will perform a DNS lookup to find the IP address connected to that URL. It’s quicker than it sounds, though. A DNS lookup will typically take 20-120 milliseconds to find the IP address for a given hostname!
Use a CDN
Your website is already hosted on a server, but there are other networks of servers out there that will decrease the load time for your visitors.
When your site is hosted on just one server, each user who tries to visit it will send a request to the same server. If you have a site that drives high levels of traffic, it can increase the time it takes to process each request. This slows load time for all your users.
A Content Delivery Network, known as CDN, can help you solve these issues. With a CDN you can cache your site on a global network of servers. When a user requests files from your site, the request is sent to the closest server. Cloudflare is a great CDN option for those wanting to get started.
Remove unnecessary redirects
Redirects are great. They help you eliminate issues with broken links, and they are necessary when you move or delete pages.
However, having too many of them can cause problems. They can create further HTTP requests, which can make your site slow. So, it’s best to eliminate them where possible.
But many website owners are unsure about how to eliminate or restructure their own content. You many even need to contact your web design agency to help you improve this.
There’s always room to start improving, though. Screaming Frog is a great tool which will crawl your website and show you all of the current redirects on your site.
You can look through the redirects to see if they’re actually serving a purpose. It’s also great to find any redirect chains which may be hiding in your site and slowing down your load times!
Optimise your images
Images can play a major part in how fast your site loads, as they are often very large files.
A website without images isn't an option though, so it's important that images are optimised as best as possible.
The key to successfully optimising your images is to find the perfect balance between file size and image quality. Reducing their file size could likely have a big impact on how long the page takes to load, but it's important the image is still crisp and clear.
Image compression is a great place to start, and there are several different types of image compression tools available.
For easy image compression, you can save your images normally and use a tool like TinyPNG as a DIY solution. It's a manual method that will allow you to compress your own images before uploading them to the site.
If you're looking for a more advanced solution, however, there are integrations available like IMGIX. This is an image processing API that will optimise your entire image library and speed up your site. Its biggest benefits are its resizing, cropping and formatting solutions, which help to optimise your images and speed up your site.
Fortunately, we have lots of experience with IMGIX - we've even written a blog about it. Find out more here.
This intelligent API is used by leading stock-photo provider, Unsplash, who saved thousands of hours of development time after switching to IMGIX for all their image processing needs.
Image compression integrations are ideal for websites with lots of images, like e-commerce sites, where it's vital to showcase images of the products. Not only do they save time and make life easier, but they also help to speed your site up.
Monitor mobile page speed
You’ll want to pay attention to how well your site loads on both mobile and desktop. Mobile user experience does now affect your site’s rankings, so it’s important your site loads smoothly on mobile devices.
It’s also best practice to provide a fast, user-friendly site to keep your website visitors happy.
Platforms like Google Page Speed Insights and Pingdom Website Speed Test give indicators of how your site is performing on desktop and mobile.
If your website speed isn’t where you want it to be, it can feel like a big challenge to undertake. But as you work your way through this article, you can keep testing your site and you’ll soon see your site performing better.
Speed up your site in 2021
Getting your website speed can be a challenge. But it’s worth it and will have a positive impact on your site performance.
You don’t need to complete all the tasks in one day. Remember, Rome wasn’t built in a day. Instead, audit your site and spend some time looking at the biggest issues that need fixing. From there you can work your way through this list.
Reducing the load time can make the world of difference when you think about the potential conversions you could be achieving. If you’re in need of a web design agency to help you speed up your website and increase conversions, get in touch. We love a challenge.