Bounce rates and loading speed

First of all, let's be clear about why a fast website is so important. Since we live in a mobile-first world, a fast user experience on mobile is essential. The amount of time people spend on their mobile devices is increasing year on year. But attention spans are decreasing. So you don't want those people to click away from your website because it loads too slowly or incorrectly. Clickers After all, they cannot do business with you. A slow site, and therefore a poor PageSpeed ​​score, is disastrous for your bounce rate. Google itself recommends keeping the overall loading speed of your page under 2 seconds. We discuss in this blog that there is much more than just loading speed. A look under the hood of PageSpeed.

Death by a thousand cuts

Because the PageSpeed ​​is made up of all different elements, there are a number of remedies that you can apply to help your website get out of its snail's pace. You can also go wrong in many areas. The result of this is that you have to think about a lot of things to have and keep a well-optimized website.

It is clear that a good PageSpeed ​​score is important. But how do you get a good PageSpeed ​​score? What is involved in improving this, and what are the main and side issues?

Don't display more than necessary

Probably the most common issue when you think of a slow site. Loading images and videos at unnecessarily high quality. So make sure that the images and videos shown are not larger than necessary. Also make sure they are in the correct file format and that they are compressed for the web. 

Use CSS sprites to create a template for images you commonly use on the site, such as buttons and icons. CSS sprites combine images into one large image that loads at once (meaning fewer HTTP requests) and then displays only the sections you want to display. This saves loading time because the user does not have to wait for multiple images.

Support your local with a Content Delivery Network (CDN)

It is clear that a cause of a slow website can be due to uncompressed media. Both images and videos can add tremendously to a page's loading speed. There are basically 2 things you can do. Compress the media to be displayed (from 5 MB to eg 100 KB) as described above, or move the media (source) to the user. The latter is possible with a so-called CDN.

A Content Delivery Network stores the website on local servers close to the user, so to speak, which literally makes the connection a lot shorter. Storing this, and thus having a copy of the website ready, is called caching. A CDN has the absolute advantage that your website loads more or less equally fast everywhere in the world. A known problem that prevents someone in Indonesia from getting a cup of coffee while loading a Dutch website has been resolved. The PageSpeed ​​score is therefore extremely high everywhere in the world. Good for your Google ranking, and therefore good for your business.

A CDN distributes important content to multiple data centers located worldwide, so it is closer to the end user and therefore the content can be served faster. The network uses server optimizations based on content type to get that content to the user as efficiently as possible. Read more about using a CDN here

Avoid redirects

Each time a page redirects to another page, the user waits longer for the page to finish loading. All this extra bounces costs time. Valuable time, we now know. For example, if the mobile redirect path looks like this:

example.com -> www.example.com -> m.example.com -> m.example.com/home

This means that the site only actually appears after 4 redirects. Unnecessary delay that you must try to avoid.

Use browser caching

Browser caching works by “remembering” previously loaded resources so that they do not reload on each visit. When a website visitor goes to a new page on your site, not all content, such as logos and footers, need to be reloaded. This results in a big speed increase when people land on a website.

PageSpeed ​​parsed

And then PageSpeed ​​itself. The metrics that Google itself uses basically boil down to what was discussed above, but in slightly different wording. Google itself uses 6 quite technical terms that together form a PageSpeed ​​score. But what exactly does PageSpeed ​​measure?

• Largest Contentful Paint (LCP) – Essentially it is the speed at which the most important content on the site loads. A few main reasons for a poor LCP score are slow server response times and slow source loading times. More here.
• First Contentful Paint (FCP) – Unlike the LCP, the FCP logically concerns the time that elapses before the first cash is displayed. It marks the first point where the user can see something on the screen – a quick FCP helps reassure the user that something is happening. More here.
• Interaction to Next Paint (INP) – INP is about the reaction speed of all elements to user input. A practical example below shows not only the speed of an element, but also the way it responds to input. More here.

• First Input Delay (FID) – While FCP and LCP are about display speed, FID is about display speed responsiveness of the website. And in particular the speed of response to the user's first interaction with the site. More here.
• Cumulative Layout Shift (CLS) – CLS involves changing the layout of elements on a page. Unexpected movement of page content usually happens because resources are not loaded synchronously or DOM elements are dynamically added to the page over existing content. The culprit could be an image or video with unknown dimensions, a font that appears larger or smaller than originally intended, or a third-party ad or widget that dynamically resizes itself. More here.

• Time to First Byte (TTFB) – TTFB is a metric that measures the time between the request for a resource and the first byte of a response starting to arrive. A number of causes of a bad TTFB can be found, for example, in hosting services with inadequate infrastructure and therefore cannot handle high volumes of traffic. Improving TTFB is often done by choosing a suitable hosting provider with an infrastructure that guarantees high uptime and responsiveness. This is possible - in combination with a CDN - to help. More here.

Fast, but still a mediocre PageSpeed ​​score

All the above metrics together form the PageSpeed ​​score of a website. And despite the fact that the name suggests that it is all about speed, a disappointing score does not necessarily mean that your website is actually slow. A super fast loading website can still have a lower score due to poorly loaded elements or elements that jump and are not dynamic enough.

Don't forget that the PageSpeed ​​test is available for both desktop and mobile. For example, a website can achieve sublime scores on desktop, but perform only mediocre on mobile.

Keeping the user happy

A good PageSpeed ​​score is therefore important, because it means that your website is up to date multiple fronts performs well. That the content is displayed quickly, but also that the content is displayed correctly and logically. So that the user is a satisfied visitor. And after all, a satisfied visitor is a converting visitor.

Op https://pagespeed.web.dev/ companies can check for themselves how their site is performing. The test also immediately indicates in which areas improvement is needed. This is done at a very detailed level, so you immediately know exactly where things are going wrong. Or just good, of course. If these insights become too technical for you, you can always contact the website builder for clarification.