Widget size and weight informationUpdated 6 days ago

We work hard to decrease Gorgias Chat's impact on website loading times - it currently affects the performance score by only 3 points.

Google Lighthouse Score

The Google Lighthouse Performance score is a weighted average of the metric scores used to calculate a page's speed. Generally speaking, the Google Lighthouse Performance score takes into account the following metrics score:

• First Contentful Paint
• First Meaningful Paint
• Speed Index
• First CPU Idle
• Time to Interactive
• Max Potential First Input Delay
• Total Blocking Time
• Largest Contentful Paint

Naturally, more heavily weighted metrics have a bigger effect on the overall Performance score. Weights are chosen to provide a balanced representation of the end user's perception of performance.

Once Lighthouse is done gathering the performance metrics (mostly reported in milliseconds), it converts each raw metric value into a metric score from 0 to 100 by looking at where the metric value falls on its Lighthouse scoring distribution. The scoring distribution is a log-normal distribution derived from the performance metrics of real website performance data on the HTTP Archive.

For example, Largest Contentful Paint (LCP) measures when a user perceives that the largest content of a page is visible. The metric value for LCP represents the time duration between the user initiating the page load and the page rendering its primary content. Based on real website data, top-performing sites render LCP in about 1,220ms, so that metric value is mapped to a score of 99.

Our approach

Using Google Chrome's developer tools, we find out what actions can be taken to improve performance. For instance, we focused on the following:

• Profiler tab - Which JS functions are using too much CPU time.
• Coverage tab - Which code isn't executed and can either be removed or moved to a separate chunk.
• Network tab - Which assets are loaded and how.

Using the webpack-bundle-analyzer, we visualize the contents of JS chunks which helps us realize what's inside the bundle and find some opportunities to improve it.

Gorgias Chat's Specifications

• We no longer render the MessageWindow component (very heavy) until the first user interaction - it has a lot of logic inside unecessary to render if the user doesn't interact with the Chat.
• Instead of loading and executing the Load MessageWindow chunk, we'll load it via <link rel="prefetch"> which tells the browser to load this resource in idle, because it could be used soon.
• From now on we'll use the woff2/woff fonts to reduce the size from ~256kb (90kb gzip) to 93kb (67kb gzip) for each font file.
• The mp3 file size was reduced from 27kb (18kb gzip) to 3.5kb (1.4kb gzip).
• We upgraded the react-frame-component to v5 which should be more performant because it's using srcdoc instead of document.write which is not render-blocking.
• We'll load fonts only when needed. Because of this CSS in the MessengerButton component:
  
  

  1```jsx
  2*:not(.fas)': {
  3    fontFamily: chatFontFamily,
  4    lineHeight: '20px',
  5    webkitFontSmoothing: 'antialiased',
  6}
  7```

  
  Fonts were loaded regardless of the presence of the text on the screen (for example, if we just show a button). We made a change to include this piece of CSS only if we have a component with some text.
• The new Chat snippet makes fewer network calls, which is good for performance (in Chrome Lighthouse in mobile simulation mode, each request has a latency of 200ms, so by reducing the number of calls from 4 to 2, we save 400ms minimum).
• The [segment.io](http://segment.io/) sdk was huge (30kb gzip) and we don't need it on the initial load, so we can load it on the first call of the track function (lazy load).
• Since react-router is only used in the Chat window component, it doesn't make sense to have it in the main.js file, so we moved it to gcmw.js. It was achieved by moving "import { Router } from 'react-router-dom" line from one file to another.
• Sentry SDK is huge (25kb gzip) so we replaced it with an alternative called Micro-Sentry. This package isn't official, however, it's developed by TinkoffCreditSystems which is one of the biggest banks in Russia and probably the most modern.
• We moved the code related to Campaigns to a separate chunk since not all of our clients are using Chat Campaigns.
• We rewrote some functions using vanilla.js instead of day.js to move this library out of main.js and save ~10kb.