Tips on designing sites for performance

This article is part of a series discussing How to handle more traffic to your website.

Handling a high amount of concurrent traffic at once for a website needs a holistic approach which involves good server infrastructure, planning and continuous monitoring.

We’ve probably all seen the Internal Server Error when browsing the internet and this could mean a number of things: there’s a problem with the code, or the server could be overwhelmed. We’ll be looking at the latter in this series of blog posts and what we can do to make sure that our websites run quickly before having to spend a fortune on hosting.

In this post, I’ll be focusing on things you can do at the design stage that will help pay off later down the line.

Reusable, modular design

Reusable components are parts of your website that can be reused over and over again. Examples of these include the header and the footer of the web page.

Reusing elements means that you benefit from being able to cache certain parts of your site. For example, your website’s header may include your organisation’s logo, once this has been loaded by the user’s device, it is cached and will no longer be requested from the server. This is the same for the CSS (cascading style sheet), the code that controls the look and the feel of the website.

Creating modular elements in the design has other benefits, too. It makes sites easier to update and maintain. Say for example, we created a sidebar that contained links to other web pages within the site. This might be a call to action so users can get in touch and also a graphic promoting a new product or service. If we wanted to change this graphic, we could so in one place and this change would reflect in all sidebars throughout the site.

Creating modular elements in the design has other benefits, too. It makes sites easier to update and maintain.

Use of imagery

There are various different types of image formats we can use when designing a web site. All have pros and cons that you can use to your advantage to optimise your site.

A big trend at the moment is to use a large image at the top of each page. This gives a good visual impact when a user first opens the page but can slow down the experience if the image isn’t optimised correctly.

SVGs

SVGs are good for things such as logos and icons rather than photos. A big advantage of using SVG is that they are vector based. This means that the icon or logo is rendered using maths and code rather than pixel by pixel. This is great for your organisation’s logo as it means the same logo can be used throughout the site at different sizes without a loss of quality. It’ll also be good for the website’s performance: the logo will be downloaded once per user then saved on their computer.

JPGs

JPGs are good for photography that you use throughout your site but they need to be optimised properly in order to get the most benefit. You should always avoid using images at sizes larger than they need to be. Content management systems such as WordPress compress images for you and generate the relevant sized images.

PNGs

PNGs are good as they support transparency and are a good all around image format. Use PNGs for images with a lower number of colours.

GIFs

GIFs are good as they support animation but beware that file sizes can soon get large and take a while to load on mobile connections.

Fonts

There have been massive improvements in support for using fonts in web design over the last ten years. Before this, using a custom font was difficult and not very well supported. Now however, font-face allows us to use pretty much use any font we can get a license for on your website.

However, these font files can be large so try to minimise the use of these. If you’re going to use a custom font for your headers, it may be best to use a native font stack (a list of fonts that are available on devices) for your body copy.

Conversely, if you’re using a font sparingly, it might be best to consider whether you could do this another way that isn’t loading an entire font just to display a few characters. Consider using an image or an SVG instead.

Homepage carousels

Should you use a carousel on your homepage? No.

In all seriousness though, these add a lot of weight to a page with extra images, JavaScript and HTML markup. Some studies suggest that only 1% of users click these. Of those 1% of people, nearly 90% click the first slide with the other 10% on slides 2, 3, 4 and 5.

You probably shouldn’t use carousels on your website. Only 1% of users click them.

Third-party services

You may have one of the fastest websites around but if you use a lot of third party services, this can slow your site down massively and you can’t always do anything about this other than to pick which services you use wisely.

Because these usually aren’t considered at the design stage they can sneak in quickly and have a big impact on website load times.

Google Analytics can be used to track visitors, sales and form submissions but if you barely look at this data or use other tools then this is adding quite a big overhead to each page on your site.

Another similar third-party service is the Facebook Pixel. You’re encouraged to use this if you have a Facebook page and use Facebook Ads.

This tracks a lot of information about the users of your site and it is debatable whether this collects more information than it should. It is however, essential if you want to track the effectiveness of adverts you’re running on Facebook but if you’re not, maybe get rid of it to increase the speed of your pages.

Think modular and keep your fonts, images and third-party services in check

To wrap up:

• Wherever possible, design modular elements that can be repeated throughout the site (making it easier to cache).
• Think carefully about the best image formats to use and make sure you only make them at the size you need them.
• You can choose from thousands of fonts, but it doesn’t mean you have to. Each new font you use on a website makes the site slower.
• Avoid using homepage carousels. Users don’t find them useful and you’ll add unnecessary bloat to any page that has them.
• Think carefully in the design stage what third-party services you really need.

As is always the case—keep it simple. Whilst designing a new website is a fantastic opportunity and the possibilities might be endless, it’s also perfect time to show restraint to help your website load faster in the future.