Book a Call

7 Tips to Speed Up Your Website

7 Tips to Speed Up Your Website

Why speed up your website? Speed is the most important metric for your website. If you want your site to rank well on Google, convert users into customers, and really succeed, you need speed.

Web users are sooo impatient. Stats vary, but back in 2016 Google reported that 53% of mobile users abandon sites that take over 3 seconds to load. In the intervening years, it seems unlikely that the internet has got any more laid back. It takes work to generate website traffic – to get users to your site. To lose half of them immediately is galling and expensive!

While squeezing the absolute max out of your site’s performance is a complex business, some really simple, practical steps can make a big difference.

1. Optimise Images

Images are big, really big. Even a very small image is likely to occupy a far greater file size than the rest of your web page. Making every image as small as it can be makes a great deal of sense.

  • Resize images to the exact dimensions required on your site (or as close to it as you can). Remember, doubling the site dimensions multiplies an image‘s file size fourfold. HTML and CSS will let you resize images so they look right but your user still has to download all that data. An image straight off your phone is likely to be massively greater than you’ll ever need to use online.
  • Choose the right format. Use WebP format for photographs and transparent images, and SVGs for icons and logos. Modern image formats offer far better compression and quality than older JPEG and PNG formats.
  • Use a Media Query and img srcset attribute to show the image for the right screen size. A small phone is 480 pixels wide, a studio monitor is often over 5,000 pixels wide – the needs of both users are clearly very different.

As an aside, smaller images will use less of your users’ mobile phone data. Failing to optimise your site will literally waste your users’ money.

2. Minimise HTTP Requests

Almost every element on a webpage must, at some point, be called from a remote server. The internet is fast, but the full payload required to display a complex web page can consist of a thousand or more assets. Each asset must be called by your browser, sent across the internet, processed by the server and sent back over the internet.

If you want to speed up your website, you want to keep these request round trips to a minimum.

  • Combine files: Merge multiple CSS and JavaScript files into one.
  • Use CSS sprites: Combine multiple images into a single file and use CSS to display the relevant image section. Better yet, use SVG files for all your icons. SVG icons are almost always smaller than their bitmap equivalents.
  • Levarage Browser Caching: Most of a website’s design will be common throughout the site. Indeed, repeated layout, typography and branding all make a site usable and recognisable. A browser cache means your device will store common assets so they don’t need to be called from the internet when you view the next page.

3. Enable Server Caching and Speed Up Your DNS

Every time you make a request to the internet e.g. for the logo on this site:

https://little-fire.com/wp-content/uploads/2023/09/roundel.pngCode language: JavaScript (javascript)

The first step is resolving where, on the internet, the image is physically stored. Literally the server or data centre where the image is saved on a disk. This is done by DNS. DNS converts the domain name (in this case little-fire.com) into an IP address which, like a phone number, identifies the host device. Not all DNS is equal. To speed up your website, use the fastest DNS you can.

Server caching will also help make the request round trip as fast as possible. With a ‘store’ of frequently-requested files, the server can provide files faster and work less hard (which in turn allows the server to run faster).

Cloudflare offers industry-standard DNS with server-level caching for free. Yes, free. It may take some time to set up, but we wouldn’t consider using anything else.

4. Minify CSS, JavaScript, and HTML

Minification is the process of removing unnecessary characters from code without changing its functionality. Spaces, commas and other characters will make file sizes larger than required:

  • Most modern content management systems will minify assets like these for you. If it won’t, consider services like CSSNano for CSS, UglifyJS for JavaScript, and HTMLMinifier for HTML.
  • Automate the process using task runners like Gulp or Grunt, which can minify your files automatically as part of your development workflow.

5. Utilise a Content Delivery Network (CDN)

A CDN is a network of servers distributed across various locations worldwide. It stores copies of your website’s static content, such as images, stylesheets, and JavaScript files, and delivers them to users from the nearest server location:

  • Choose a reliable CDN provider like Cloudflare, Amazon CloudFront or Akamai.
  • Configure your CDN to work seamlessly with your existing hosting setup. You should ensure that all static content comes through the CDN.

6. Minimise Bloat and Unused Plugins

Bloat is unwanted, old code. Bloat slows down server execution times without benefit to the user. Getting rid of old code is expensive and not without risk but, left unchecked, bloat can kill a system (Windows Vista? anyone). Wherever you can, excise bloat in both your client-side (HTML, CSS, Javascript) and server-side code.

Plugins are great; plugins make your site more useful, but they will slow your site down. Google’s own analytics code will slow your site down. There is always a conflict between functionality and speed Google lighthouse may help you make key decisions about what is helping and what might be boosting your bounce rate.

7. Faster Hosting = Faster Website

Hosting is the combined process of storing your files on disk and returning them to the internet when requested. Hosting varies a great deal. What was fast a few years ago my well be slow now. It does not matter how well optimised your site is, how small your images, how cleaver your code. If your hosting is slow, your website will always be slow.

Imporving your hosting may be the most inexpensive change you make. It may also be the one that makes the biggest difference to the success of your site.

Speed Up Your Website – Where to Start

By implementing these tips, you can significantly improve your website’s loading speed, providing a better user experience and potentially boosting your search engine rankings.

It isn’t all easy, you may have a lot of historic content which is hard to optimise. You may not know how to do it all but any effort is greater than none.

If you get stuck, we can help you speed up your website. We’ve done it before. We’re good at it.