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

user_7850364 0
Viewed 7365

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 in my html page please see my html code before and after implementation before

<html>
<head>
 <link href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" rel="stylesheet" type="text/css"> ...........
</head>
<body>

html contents 

  <script src="assets/js/jquery-1.12.4.min.js" type="text/javascript"></script> 
</body>
</html>

After implementation i change like this 

<html>
<head>
 <link rel="preload" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" as="style">
 <link rel="preload" href="assets/js/jquery-1.12.4.min.js" as="script">
 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700">
</head>
<body>

html contents 


  <script src="assets/js/jquery-1.12.4.min.js"></script>
</body>
</html>

But i can't notice any increase in speed . So please help to make this in correct way

i read the following article

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content .

But i can't figure out . Please help .

Or is there is any better method for page speed ?

pagespeed css html javascript performance
2 Answers

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

<html>
<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

</body>
</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).

user_50824270

https://developers.google.com/web/updates/2016/03/link-rel-preload

See the above article link. I saw the link shared above. Preload never makes the page load the page fast. It only gives the priority to the files which is declared rel="preload" to load very early as the page loads up. You can read the article again Also the article shared by me. It will say the same.

You will need other methods to load the page fast. This method will not be helpful. There are few methods listed below you can use to make page load faster.

  1. You can minify css and js files which will load very very fast than normal file. You can minify script and css files from (https://www.minifier.org/) here.

  2. Avoid external links of css and js files

  3. Avoid spaces and Newlines in code.

  4. Use compressed images which will also load faster.

  5. Enable Caching.

user_91266500
Related