CODEWITHSUNDEEP
javascripthtmlcssperformancepagespeed
Abilash Erikson
Abilash Erikson

Reputation: 351

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

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 ?

Upvotes: 4

Views: 10180

Answers (2)

Gaurav Mourya
Gaurav Mourya

Reputation: 177

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.

Upvotes: 3

Wazner
Wazner

Reputation: 3102

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

Upvotes: 7

Related Questions