With the introduction of Web Vitals, page rendering time becomes one of the key factors affecting search engine visibility, but it also affects the user’s perception of the page.

JavaScript
The critical part of the JavaScript code should be placed directly in the HTML code so that there is no need to download additional files blocking the page rendering.

Each non-critical script should be included with one of the following attributes:

• async attribute – downloading is done asynchronously without blocking page rendering, after downloading the file rendering will be held and file content will be executed
• defer attribute – the download is done asynchronously without blocking the page rendering, its content will be executed only after the page is rendered.

CSS
Similarly, in the case of CSS styles, we should extract the styles necessary for the first page rendering and place them directly in the HEAD section.

The other styles should be attached with rel="preload" attribute so that they are loaded asynchronously.

It is also worth considering splitting styles into separate files in the context of media queries – one basic file with styles, and additionally separate files for different screen types (media="(max-width: 600px)") or display modes (media="print").

If we need to execute computationally complex code without affecting the performance of the page itself, we should execute it outside the main thread. In this case, it is best to use Web Workers.