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.
Each non-critical script should be included with one of the following attributes:
asyncattribute – downloading is done asynchronously without blocking page rendering, after downloading the file rendering will be held and file content will be executed
deferattribute – the download is done asynchronously without blocking the page rendering, its content will be executed only after the page is rendered.
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 (
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.