透過preload與prefetch優化載入資源

網站一開始執行一定會做的事情就是先載入資源，因此優化載入方式也是需要特別注意的點。

認識阻塞渲染

不管是載入CSS, JavaScript, image……，在渲染我們的HTML時，預設都會造成阻塞渲染，什麼意思呢？
以下面這段程式為例，為了表示HTML確實完成render，所以加上了window.onload：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
    <style>
      html {
        font-family: Roboto;
      }
    </style>
  </head>
  <body>
    <p> Hello </p>

    <script>
      window.onload = function () {
        console.log('已載入');
      }
    </script>
  </body>
</html>

從上到下讀取HTML時，會先載入好資源再往下執行，當你用develop tools把速度改成3G時，你會發現已載入過一段時間才出現。

認識preload與prefetch

善用屬性可以避免在初期render的時候造成堵塞渲染的問題，如果我們能夠提早載入資源，就可以避免進行重複不必要的阻塞渲染。

preload
表示使用者在網站上必須會用到這個資源，所以瀏覽器必須預先獲取或緩存資源。
prefetch
表示使用者在網站上有可能會用到這個資源，瀏覽器可以透過事先獲取資源或是緩存資源來優化使用體驗。
概念上跟preload有點像，但是prefetch的優先權比較不強烈，資源會用到，但並非在一開始時用到。
例如：表單有一個彈出視窗會用到資源，那麼他是一個觸發事件而非立即會用到的資源，因此可以使用prefetch。

評估該使用哪個

拿上面的程式來優化很簡單，只需要加入屬性就行了，但是該用哪個？
首先你要評估的是，這個資源對網站和客戶的重要性多大
如果他很重要，進入網站的當下馬上就會用上，那你就必須要使用Preload
相反的，如果之後可能會用到，但是又不那麼重要時，可以使用Prefetch
以這個例子來說，頁面上的icon應該是馬上就會用到，那我就可以使用preload。

<head>
    <link
      rel="preload"
      href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
</head>

進一步優化

可以加入其他屬性讓瀏覽器可以更精準的提升效能。

<head>
    <link
      rel="preload"
      as="style"
      href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
</head>

關於async與defer

async, defer, preload都可以進行非同步載入資源

async：下載後馬上執行
defer：解析完HTML後馬上執行
preload：必要時執行
prefetch：之後會用到

https://juejin.cn/post/6844903684581621773
https://www.tweaked.dev/faster-page-rendering-async-defer-preload/

Comment