Performant Sites Are Fast 🚀

Tags that this post has been filed under.

Overview: Website performance has to do with page load time as well as User Experience design and how the website solves user problems.

The 2s Rule

Page load time is the first experience a user has of your website. As far back as 2010, Google research shows that websites that take longer than 2 seconds to load leave a negative impression on visitors. Site performance is however not just about satisfying visitor patience, a fast site is good for SEO and better for the environment.

Performance is good for SEO

Search engines do not want to serve their customers slow websites. If fact, site speed is a signal in Google's search ranking algorithm, the faster the site the better it ranks. Site performance is a priority for both web designers and web developers.

Environmental Impact

Slow websites have an environmental impact because it means more work for servers and personal devices, which ultimately requires more electricity. Improve website performance and you minimise the environmental impact of your site.

Practical Tips

Here are a few practical tips that will help boost website performance:

UX

Performance isn't only about kilobytes and seconds, it is also about User Experience. Websites serve a particular function or task, from shopping, to research, to entertainment. Help website users to perform their tasks in an easy and streamlined way by designing from their point of view. This reduction in user friction will reduce time spent navigating around unnecessarily.

Reduce & Optimise Images

Images are one of the greatest contributors to a slow website. Question to consider: could the image be removed and the spirit of the page remain? If the answer is yes, why not remove the image?

If a page cannot do without a particular image, then reduce it's file size. For example, an image downloaded from Unsplash could be 6000px by 4000px. That is a large image, especially when you consider that the resolution of a laptop screen is approximately 1366px x 768px. If the image you want displayed is a small thumbnail size, then it really does not need to be high resolution. Large image files will slow your web page load time, affect SEO, UX, as well as impact the environment. Here is a process to optimise images.

Go easy on video & audio files

Video and audio files are also large contributors to page weight. If the page cannot do without them, then look to ways in which they can be optimised. For example, remove auto-play, or leverage other platforms like YouTube (there is some control over how the embedded YouTube video appears).

Optimise Fonts

Choose a maximum of two typefaces, and be conservative in the choice of font weights. Each addition costs in terms of page weight. You may consider using variable fonts. There are also ways to optimise fonts, for example, self-host fonts instead of using hosting services (e.g. Google Fonts), use modern font file formats, and adopt an appropriate font loading strategy.

Write Clean & Streamlined Code

When using site builders you can see the code that is created using the developer tools of your browser. You'll often find that this code is bloated, i.e. some code is superfluous and unnecessary for what the displayed page actually requires. When you engage a web developer, they are concerned with writing clean and streamlined code.

When entering a web address in your browser, your browser queries that address on the internet, downloads and interprets the coded files, and finally displays the web page on the device. Often there are many files that make up a web page. Reasonably, if those files are well structured and written they will perform their specific function in an efficient way. This efficiency boosts website performance.

Build static websites

Most webpages are static, that is, they only require HTML and CSS (and possibly JavaScript) to perform their function. Perhaps the only user input required is entering details into a contact form, there is no dynamic update of the webpage, no need for a database. It's possible to use static site generators, e.g. Eleventy, which compile static pages. Because these pages are static, they do not require work on the part of web-servers to query a database and compile the page at the time of request. Static sites can be made to be fast!

Conclusion

Website performance definitely has to do with page load time. Both designers and developers can do things to improve site speed. Performance and speed also have to do with User Experience design and how the website solves user problems.