shivam1283/linkTag.md

## linkTag.md

      
    Raw
  

              linkTag.md
            
          
    preload

<link rel="preload" href='./style.css' >
Advantages


The preload property enables browser to load resources tha will be required very soon in the page rendering lifecycle, before the main rendering kicks in.
The call for resources can be prioritised.
Store in the cache for future requests.

type

<link type="text/css" rel="preload" href='./style.css' >
Advantages


The resource can be preloaded
The browser can check if it supports such type of resource and should it load it

Source : MDN Docs
Including MIME(Mutlimedia) type

Background images and media can be preloaded in order to render images according to screen sizes( if images are conditionally rendered from JS).
`

  
  <title>Responsive preload example</title>
  
  
    My site

  
  <script>
    var mediaQueryList = window.matchMedia("(max-width: 600px)");
    var header = document.querySelector('header');

    if (mediaQueryList.matches) {
      header.style.backgroundImage = 'url(bg-image-narrow.png)';
    } else {
      header.style.backgroundImage = 'url(bg-image-wide.png)';
    }
  </script>

`
prefetch

The resources are loaded which might be needed on the next page. These resources are prioritised below preload.