9 Tips for Better Website Performance

Why is website performance important?

The speed of a website or an online shop not only influences Google's ranking algorithm - fast websites appear higher on Google - but also the user's behavior or their bounce and conversion rate. Statistics show that for every additional second it takes for a website to load, the bounce rate increases by almost 7%. This in turn affects the conversion rate, which decreases as a result. For example, the financial impact of a 2% better or worse conversion rate on a high-volume e-commerce site speaks for itself. Long story short:

Website Speed = Money 💰

Website Speed = User Experience 😍

How can I measure the performance of a website?

In order to know where the cause of poor website performance lies and to check whether adjustments have a positive effect, website performance can be measured, for example, with the new tool from Google: "Lighthouse". Lighthouse can either be accessed in a Chrome browser via DevTools or installed as a Chrome browser extension. Since the performance of a website can be viewed from different angles and Google is still the measure of all things, it makes sense to measure the speed with this tool.

Attention: Google's previous website performance tool “PageSpeed Insights“ has not been further developed since the end of 2018. The results differ greatly from the current Lighthouse tool and should not be taken into account.

Website Lighthouse analysis of Holzschutz 24 website by Sitewerk

In order for your website to achieve optimal results as well, the following nine things should be considered:

1. Optimize the website images for better performance

Reduce the size of the images to the size actually displayed

Reduce the images on the website to the sizes in which they are displayed. In this way you improve the loading time of your website eminently. For example, the product image of an e-commerce website is displayed at 1200x800 pixels. An original image from a stock website often has a resolution of up to 5000x3500 pixels. Adjust the size of these images to the size used. Otherwise, your website risks drastic losses in speed and usability, which leads to poor website performance. 💥

Adjust the quality of the images

Another way to optimize website performance is to reduce the quality of the images to around 85% (can be set when saving in Adobe or other image editing tools). The reduced image quality is hardly visible to the user, but reduces the file size of the image by up to 70%. Small file sizes mean faster loading times and therefore better performance of your website.

Use WebP format

To better compress images and make websites even faster, Google introduced the WebP image format. The WebP format is supported by all common web browsers. According to Google, if the images on a website are delivered in the WebP format, the file size can be saved by up to 34% while maintaining the same quality. This can trigger a real website performance boost on image-rich websites!

More information and instructions on the new WebP format can be found here at Google's documentation.

Attention: The WebP format is only supported by current browsers such as Chrome, Firefox etc. For a correct display of the website on Internet Explorer, for example, there must be a fallback to JPG or PNG.

2. Deliver the website via a Content Delivery Network (CDN).

A CDN (Content Delivery Network) can help to reduce the loading time of a website regardless of location. A CDN is a network of servers distributed around the world. The files of a website are hosted on this network of servers. If a user accesses certain content from a website, a special routing system determines which server in the CDN is best suited for the delivery. This guarantees fast and uninterrupted loading times for websites, regardless of location. Depending on whether a cloud CMS is used, the files on a website are automatically delivered via a CDN. So whether you deliver the website via a CDN has a decisive influence on your website performance.

3. Minify the website's CSS and JavaScript files

When the web developer writes the CSS stylesheets and JavaScript files for a website, these must be stored in a «human readable» form. A website project consists of countless CSS and JS files, each of which contains a lot of spaces and line breaks. These are for readability only. In most cases, they are meaningless for the browser. Leave them out and optimize your website performance. One speaks of «minification». All files can also be combined into one, which is referred to as «concatenation». There are countless freely available tools that perform these two steps for the user. According to the JSCompress tool, the size of JavaScript files can be reduced by up to 80%.

How the whole thing works in detail and which tools are still available can be read here: Minify your website .

4. Reduce loading of external libraries

Websites usually consist of a collection of different components. A button, a slideshow or an accordion has been programmed thousands of times and there are many helpful UI libraries to be found on the Internet. The temptation is great to use a convenient library for each component of the website. Also makes sense. Because programming beautiful UI components takes time and ultimately money.

But what you can't ignore is the amount of unknown source code that you load into a website project every time you add such a library. A large UI library is often loaded, but only a fraction of the available elements are actually used. This has a negative effect on website performance.

In order to optimize the loading time of a website, you should only use libraries that add value. Don't use everything that makes sense for your website. The following often applies to the selection of plugins and libraries: less is more.

5. Use the web server's gzip website compression

Gzip compression is all about compressing the various files that it takes to load a website. By making the files smaller, less data needs to be transferred when transferring the website from the server to the browser, which makes the request faster. The gzip compression is enabled by a setting on the web server and is active by default on most web servers. The following article explains how to override or change the settings: Compression

6. Use the browser's website caching

The cache can be used to improve the performance of loading and navigating within a website that is visited again. There are different caches that a developer can use for optimization:

Website cache on the server

In server cache, the mechanism works as follows: A user sends the server a request for a specific website. The server processes the request and sends the user the desired data and information. It is essentially a snapshot of the queried website. If the user visits the exact same website again (thus sending the exact same request), the server does not have to re-render the snapshot of the website. Instead, it takes the saved snapshot from the cache and sends it back to the user. Requests to display visited websites are processed much faster.

The most common CMS, such as Wordpress, support server-side caching and only need to be activated. A small but effective step towards optimal website performance.

Website cache in the browser

With the browser cache, modern browsers allow the user to temporarily save a visited website in a local memory, the browser cache. Here, too, repeated visits or navigating within a visited website are made faster because not all content (images, scripts, etc.) has to be downloaded again from the server.

7. Asynchronously load the website's JavaScript and CSS files

Another way to speed up website rendering and improve website performance is to load JavaScript code or CSS style sheets asynchronously. Loading these files asynchronously prevents the so-called «render blocking» problem. This means pausing the rendering (displaying) of the page until each individual JS and CSS file has been loaded from the server. This can sometimes be time-consuming. In most cases, only a part of the files is necessary to display the first screen of a website correctly. These are forced to be downloaded before the website is rendered. All additional files are then loaded without the user noticing. This is how the website is given a performance boost 💨 again.

8. Use lazy loading on websites with high-resolution images or videos

Lazy loading is a performance optimization technique that guarantees faster loading times for websites with lots of high-resolution images or other media, such as videos. The basic idea of lazy loading is that while the website loads visible content, the downloading and rendering of the content (images, videos) that is not currently displayed is delayed. The loading and rendering of this content was delayed until the user got to the part of the website where the content should actually be displayed.

9. Prevent website redirects

Redirecting some URLs from old websites is unavoidable in a relaunch, for example. If possible, however, such redirects should be avoided. Because if a redirected website is requested by the user and the server has to make a redirect to the new page, this extends the request for a fraction of a second. For websites with optimal performance, redirects should be avoided if possible.

Conclusion

In practice, one quickly discovers that there is no such thing as a website with the perfect loading time, or that the effort involved is often simply too great. However, if you stick to the points described above, you can achieve considerable loading times and thus optimized website performance with reasonable effort. Google and your website visitors will love your fast website. 😉