How to use rel=“preload” as=“style” or as=“script” or Better method for page speed

Question

i am trying to reduce my webpage load time . When i am searching i come to this point preload css and javascript .

So i am trying to implement this

Answer 1

Why this doesn't work

Preloading resources that are loaded directly in the HTML is useless. This is because the browser reads the preload at the same time as the actual resource reference.

Preloading is useful to reduce the length of your request waterfall. Imagine the following situation:

style.css

body {
    background-image: url(myimage.png);
}

index.html

The process of loading the above page consists (roughly) of the following steps:

1. Download index.html
2. Parse the HTML file
3. Because of the link tag, download style.css
4. Parse the CSS file
5. Because of the background-image, download myimage.png
6. Parse the image and display it on the screen

This means your request waterfall is index.html -> style.css -> myimage.png.
By adding a preload for myimage.png the browser can download the image earlier, so your request waterfall becomes:

index.html  +-> style.css
            +-> myimage.png

Instead of 3, it is now only 2 requests long, which means faster load times.

What else can you do to improve (perceived) page load times?

Some common ways are:

• Minify your assets (JavaScript, stylesheets)
• Ensure your server has compression enabled for static assets
• Only load resources actually required on page load first, then load other scripts later (like those for user interactions).

But to get a better overall view of the things you can improve you can use the Chrome Audit system (Lighthouse).