[PWA] Optimize Assets Delivery using preload and prefetch

By default, browsers load the assets in a render-blocking way. Modern browsers introduced prefetch and preload which let us specify the priority for a resource without blocking the first render..

This lesson shows you how to use preload and prefetch on an external css.

 

<link rel="prefetch" 
      as="style" 
      onload="this.rel = 'stylesheet'" 
      href='https://fonts.googleapis.com/css?family=Roboto:400,500|Material+Icons'>

 

Resource: https://css-tricks.com/prefetching-preloading-prebrowsing/