Don't Let Third-Party JS Slow Down Your Homepage Load Time - Notes on Optimizing Facebook Chat SDK Integration

The Problem

Many websites integrate third-party JS. After integrating the Facebook Chat SDK on one occasion, I noticed the homepage became extremely slow to load, so I decided to optimize it.

As a software developer, I opened up the developer tools and made a comparison.

In the Network tab, we can see the files coming from fbcdn. I discovered they accounted for 1.8 MB of network traffic, with an uncompressed size of 7.2 MB. I thought to myself, "This is way too bloated; no wonder it's so slow."

• Additional note: "transferred over network" is the size of the resources loaded over the network, while "resources loaded by the page" is the original size of all resources after they have been uncompressed by the browser.

Optimization Steps

The initial load for an SPA is already quite large. To avoid negatively impacting the user experience, I considered adding a button to load the chat system on-demand. However, I still felt the SDK was too bloated. Ultimately, I decided to create a simple customer service button that links directly to Facebook Messenger.

1. First, get your Messenger URL from your Page > Settings > Messaging

2. Encapsulate it in a component

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

Results