Weply Chat widget optimizations

Would you rather have a bad user experience on your site than adding a few milliseconds to your load time? Websites without any third-party tools is almost unheard of as it improves a site’s user experience. Even though tools can affect a site’s load time you must measure this up against the potential gain from the implemented tool. A slower load time of milliseconds will rarely outweigh the benefits of the tool. However, it is up to you to decide what performance measurements that are most important to you and then pick and choose your third-party tools based on that.

Updates to Google’s measurement parameters have radically changed how the website performance is measured. To meet our clients’ needs and improve globally, we have optimized the widget in order to meet the demands from PageSpeed Insight and Lighthouse.

Google PageSpeed and Lighthouse are both tools to measure the performance of websites. PageSpeed purely looks at performance metrics based on the CPU speed on the computer or service you are using. Therefore the results vary on many external, physical factors. Lighthouse runs its performance audit and other parameters such as SEO and accessibility together with a CPU benchmark. This results in generally longer times measured with PageSpeed Insights, as it takes into account what the experience may be on a slower connection.

When evaluating your website, we recommend to combine a stack of tools to gain a better perspective on your website performance.

At Weply we have executed a larger optimization project composed of two phases. These updates were released in September 2021 where the actions and improvements have been noted as follows:

Phase 1: Tree shaking

We have eliminated dead code from our script which has directly affected the Largest Contentful Paint (LCP) parameter measured by Google PageSpeed Insight.

  • We have achieved a reduction of javascript transfer size from 313.8KiB to 169.6KiB.
  • Weply polyfills reduced to 0kiB.

Phase 2: Improved loading logic

The script since its previous state has loaded asynchronously. In order to improve “Blocking Time” metric on Google Page Speed Insight, we have implemented the following:

  • Integration loads after website DOM has loaded.
  • Lazy loading implemented: only parts of the code load when it’s needed.

Optimization results and comparison

In order to measure Weply widget performance, we have isolated the chat to an empty website that only contained the widget. Our method was to measure the chat using PageSpeed Insights purely, during various times of day to deduce an average score for both mobile and desktop.

Overall improvements from previous version of widget to the new (version September 2021)

Comparison chart between Weply, Intercom and Zendesk measured with PageSpeed Insights (from February 2022)

Mobile resultsWeplyIntercomZendesk
Perfromance919382
First Contentful Paint1.4 s0.6 s2.1 s
Speed Index1.4 s2.5 s4.1 s
Largest Contentful Paint1.4 s0.6 s3.5 s
Time to Interactive3.9 s3.0 s3.9 s
Total Blocking Time350 ms290 ms250 ms
Cumulative Layout Shift000
Desktop resultsWeplyIntercomZendesk
Perfromance10010098
First Contentful Paint0.4 s0.6 s1.1 s
Speed Index0.4 s0.8 s1.1 s
Largest Contentful Paint0.4 s0.2 s1.1 s
Time to Interactive1.1 s0.9 s1.1 s
Total Blocking Time50 ms70 ms30 ms
Cumulative Layout Shift000

When comparing the largest chat service providers on the market with Weply it can be concluded that mobile performance of blocking time is a metric wherein the measurement is higher. When looking at Lighthouse results for mobile, the Total Blocking Time measured for each chat were as follows:

WeplyIntercomZendesk
Total Blocking Time0 ms110 ms250 ms
Performance1009995

Overall Weply performs as a strong chat service on technical performance.

How to move forward

Website performance optimization is no easy project and requires thorough testing and evaluation. As the world functions today, a website without any third-party tools is almost unheard of, as a user’s experience of a website substantially increases with its presence.

So where do we go from here if you want all performance measurement tools to show you a green signal?

The answer is to pick and choose what matters most to you from the metrics, and take the recommendations given by the different tools. It is important to prioritize the recommendations, as they don’t carry the same weight or urgency. The same goes for the third-party tools you are using on your site: Is it worth it to remove them, if the effect would be a worse experience for the users visiting your site? Perhaps removing a third-party tool will make it harder for you to map your customer journey and improve your site further later on. List the benefits your third-party tool provides your business at the end of the day and measure this up against the potential loss from milliseconds of slower load times.

Last updated: February 9, 2022 by Maggie Jane Magaard.