別讓第三方的 JS，拖慢網站首頁加載的速度 - Facebook Chat SDK 串接優化筆記

大分類
Frontend
By Mark.Ku
facebook message js enhance chat sdk

別讓第三方的 JS，拖慢網站首頁加載的速度 - Facebook Chat SDK 串接優化筆記

問題起緣

許多網站都會串接第三方的JS，但在某次串接完 Facebook Chat SDK 後，發現首頁的載入變得非常的慢，並決定著手優化。

身為軟體開發人員的我，又打開了開發者工具，做了對比。

從 Network Tab 中，我們可以得知來自 fbcdn 的檔案，發現就有1.8 mb 網路流量，解壓縮後的檔案大小為7.2 mb，心想這未免也太肥大，難怪會慢。

  • 額外補充:transferred over network是通過網路加載的資源尺寸，而resources loaded by the page 是前端頁面加載的所有資源經過解壓之後的原始大小。

優化步驟

SPA 網頁本身首次載入就很肥大，為了避免影響用戶體驗，雖然我也可以做個按鈕，按下才開始載入客服系統，但我覺得還是太肥大了，最後我決定做一個客服按鈕，直接開啟 Facebook 的連結。

1.首先從粉專 > 設定 > 訊息 > 取得你的 Messenger 網址

2. 封裝一個元件

<template>
   <a href="https://m.me/letsgogofruit" target="_bank">
      <div class="facebook-live-chat">
        <SvgIcon icon-name="messenger" class="w-52 h-52" />
      </div>
    </a>
</template>

<style lang="scss">
.facebook-live-chat{
  position: fixed;
  right: 30px;
  bottom: 160px;
  z-index: 8;
  border: none;
  border-radius: 100%;  
  
  font-size: 22px;
  text-align: center;
  // display: none;  
  cursor: pointer;

  svg{
    &:hover{
      filter: drop-shadow(0 0 2px rgba(#fff, 0.5));
    }
  }

  @media (max-width: 577px) {
    
      svg{
        width: 40px;
        height:40px;
      }  
      right:20px;  
      // bottom: 130px;
      //  解決 ios tab bar 問題
    // iOS < 11.2
    bottom: calc(172px + constant(safe-area-inset-bottom));

    // iOS >= 11.2
    bottom:calc(172px + env(safe-area-inset-bottom));
    }  
}

</style>

成果