Need for Page Speed. Perfect loading time for your website

After all, it has long been known that the loading time of a website has a significant effect on its Google ranking.

Using Google Lighthouse as an example, I have explained the most important measured values for you here:

• The First Contentful Paint measures when the browser displays the first text or image in full. This can also be the background image of the website. This value therefore reveals when users can communicate with the website in question for the first time.

• The First Input Delay is about the time between the first input of a user on the website - e.g. the click on a button - and the reaction of the browser. This value indicates how interactive the website is.

• The Speed Index indicates when all contents of a website are visible to the user.

• The Total Blocking Time adds up all tasks - button clicks, text entries, etc. - that take longer than 50 milliseconds and thus block the next reaction of the website

• The Largest Contentful Paint measures when the largest element of the page is fully loaded. This is because Google Lighthouse assumes that this is the most important content on the page. The value should therefore indicate when users can start using the main element of the website.

• The Cumulative Layout Shift measures how often and how strongly the respective content "jerks". This is especially true when images are reloaded or content is only displayed later. The less the layout "jerks", the better visitors can use the website.

With the following measures you create a basic requirement for the high loading speed of your website:

• Compress images: Many CMS, CRM and e-commerce systems compress images automatically. However, they can also "only" convert a much too large upload into a slightly smaller file. This is only of limited help. It makes more sense to choose an image size optimised for the page. With PNG you save 50 percent of the file size compared to JPG. Webp creates another 25-34 per cent smaller file - and that without loss of quality. It is best to upload the original file even if the browser does not support Webp.

• Rely on a CDN: A Content Delivery Network is an absolute must-have if there are many images in play. Providers such as Cloudflare also combine your images automatically on PNG or Webp.

• Shrink your files with GZIP: With GZIP you can compress your HTML and JavaScript files as well as style sheets.

• Use powerful servers: Good content requires a high-performance infrastructure. For business purposes, you need a response time of less than 500 milliseconds - and you rarely find this on 08/15 hosts. Professional hardware can help.

• Perfect the loading time with Preload: Put simply, Preload is a slow loading for CSS and JavaScript. Simply set a rel="preload" attribute for links. This way the browser knows that it does not have to load this file immediately, but only the rest of the page. At some point, the preload file is then requested like a normal call to an external style sheet. In this way, you speed up the loading speed of your website considerably.

• Work even more efficiently with JavaScript: With JavaScript, individual page sections load either synchronously or asynchronously. Synchronous elements wait until the previous element is completely loaded. Asynchronous elements of a website, on the other hand, load at the same time - and are therefore significantly faster. With the attribute "async" the browser knows what to do. The "defer" attribute tells the browser not to wait for the script - it then continues to process HTML script. 

• Minimum code, maximum performance: Minimize is a technique that allows you to reduce the size of the program code without affecting the function. You can easily minimise your code in four steps.

1. Remove empty spaces, unless syntactically required

2. Remove comments

3. Use more compact language constructs

4. Rename identifier

Important to know: Minification is not important for compiled languages. However, programs that are transmitted and interpreted in the source text save a lot of space. The page load is thus significantly reduced.

Many websites only achieve a medium score with the tools. From a certain number of pages it is very difficult to achieve a page score above 90 points. But that should not be the goal either: The page score is not the only measure that counts - but rather shows you how to optimise individual factors. More important is the real loading speed of the website. If this is good, everything else is usually also in the green zone.