Modern way to defer CSS and JavaScript resources to improve page load speed

To improve page load speed, you can defer CSS and JavaScript resources by adjusting only the HTML code of the page.

1. Delay CSS
2. delayed media
3. Delay JavaScript

Resources such as CSS, fonts, and JavaScript are considered render-blocking . This means that the browser needs time to load page content before it actually renders them.

So the larger the files for these resources, the longer it will take to load them and the longer the user will see the content of the page.

To check page load speed and render blocking resources, you can use Lighthouse tools directly in your browser (Chrome) . This is one of the important tools for measuring web performance .

To prevent render-blocking resources from slowing down your pages, you can implement the small HTML changes listed below to resolve this issue.

Delay CSS

The correct way to handle CSS load is to split styles into critical CSS and non-critical CSS.

• Critical – These styles are required to display instant content once the page loads (first