Lead Capture Tools

merlinvicki
メンバー | Solutions Partner
メンバー | Solutions Partner

Live Chat App slows page down

解決

Hi,

I have the Hubspot Chat installed here:

https://www.3mediaweb.com/great-b2b-software-company-websites/

There is a file:

https://static.hsappstatic.net/conversations-visitor-ui/static-1.383/bundles/visitor.js

 

which is almost a 1.39 mb file. Is there no way to compress the scripts so it loads faster?

3件の承認済みベストアンサー
tschemmel
解決策
参加者

Live Chat App slows page down

解決

This is for anyone that requested I show our team's workaround for helping page speed with the bloated Live Chat script. 

First set the Hubspot chat setting to not immediately load live chat. This single setting alone prevents the "vistor.js" file from loading which appears to be the main contributing file to the slow down. Only allow the live chat to load immediately if you know the user to be in a chat session or if the live chat auto launch hash url is used. (#hs-chat-open)

 

//Prevent chat from loading immediately load only if chat is not in progress or #hs-chat-open is not in the url
if (sessionStorage.getItem("chatInProgress") !== "true" && window.location.hash !== "#hs-chat-open") {
    window.hsConversationsSettings = { loadImmediately: false };
}


Now that the chat is blocked. We have to artifically create a chat button that will launch live chat only when clicked by the user. The rest of this code will also set a session storage for knowing if the user's conversation is open, which will allow live chat to load itself on page load. There is also observer mutation events to detect when the live chat window is opened, so you can hide the fake hubspot chat button.

if (window.HubSpotConversations) {
            hubspotChatReady();
        } else {
            window.hsConversationsOnReady = [hubspotChatReady];
        }
        function hubspotChatReady() {
            //Proceed to immediately load Live Chat while conversation is persisting
            window.HubSpotConversations.addEventListener("conversationStarted", function () {
                sessionStorage.setItem("chatInProgress", "true");
            });
            window.HubSpotConversations.addEventListener("conversationClosed", function () {
                sessionStorage.removeItem("chatInProgress");
            });
            //Fake Hubspot Live chat button to launch real live chat only when user clicks
            //Ignore if Live Chat is already loaded
            if (window.HubSpotConversations.widget.status().loaded === false) {
                var $liveChat = document.getElementById("activate-chat");
                $liveChat.style.display = "block";
                $liveChat.addEventListener("click", function (event) {
                    event.preventDefault();
                    $liveChat.classList.add("loading");
                    //Chat window is open when the iframe is loaded in the dom (Hubspot doesn't give a callback for the chat window opening)
                    var observer = new MutationObserver(function (mutationList, observer) {
                        mutationList.forEach(function (m) {
                            m.addedNodes.forEach(function (n) {
                                if (n.id === "hubspot-messages-iframe-container") {
                                    n.querySelector('iframe').addEventListener('load', function () {
                                        $liveChat.classList.remove("loading");
                                        window.HubSpotConversations.widget.open();
                                        observer.disconnect();
                                    });
                                }
                            });
                        });
                    });
                    observer.observe(document.body, { childList: true, attributes: false, subtree: false });
                    window.HubSpotConversations.widget.load({ widgetOpen: true });
                })
            }
        }


I hope this helps some people. This is not a perfect workaround. Some of the shortfalls would be if you use Hubspot's "hide launcher" setting. Where maybe you want to turn Live Chat on or off from the portal. This workaround bakes in a fake button that doesn't know if Hubspot chat should or shouldn't be showing. In our situation we leave Live Chat open 24/7 and just use away messages. 

We are still waiting for Hubspot to take some concern with page speed. But until then we'll do what we can to work around it.

 

元の投稿で解決策を見る

Joy-EWM
解決策
参加者

Live Chat App slows page down

解決

Thanks for the codes, it saves my day.

 

Btw for those who confuse how to create the button, i found another workaround by adding delay. So it will load the chat widget after "X" milliseconds.

 

Here's the sample code with 15 seconds delay:

<script>
  window.hsConversationsSettings = { loadImmediately: false };
  setTimeout(function() {
    window.HubSpotConversations.widget.load();
  }, 15000);
</script>

 

元の投稿で解決策を見る

tilly
解決策
HubSpot製品開発チーム
HubSpot製品開発チーム

Live Chat App slows page down

解決

Hi all! We recently updated the "Time on page in seconds" trigger. Delaying the chat widget load by at least 5 seconds should optimize for a faster initial page load.

元の投稿で解決策を見る

48件の返信
sitmeanssit
参加者

Live Chat App slows page down

解決

This is a laughable response.

bsplosion
投稿者

Live Chat App slows page down

解決

Hi Jenny and the HubSpot crew - it's now October 2019, and the visitor.js script you bundle is still massive and a tremendous resource hog.  It consumes more resources than the entire rest of our web app combined!  This should really be broken down into consituent components and served separately depending on the requisite functionality - I highly doubt you need to serve such a large file for simple chat and tracking functionality.

 

For a benchmark of a couple of your competitors, the Heap Analytics dependency has 1/13th of your footprint, and in that they manage to still identify visitors and track page events at a finer grain than your system.  Chatlio's dependency is about 1/40th. 

 

tl;dr: Tracking and chat with forms takes at most 1/10th of what your library needs and your users (who rely on you for marketing and sales) need your help to get ranked.  It's time to optimize.

 

Edit: And Jenny, regarding your answer, it's not sufficient.  You're referencing an engineering challenge as impossible, and a cursory review of the dependency reveals that's not true.  An easy example is that your team has chosen to define literal month names 3 (!!!) times in the dependency.  If that's happening in a minified file, I can only imagine what the code itself looks like.

edsvcs
メンバー

Live Chat App slows page down

解決

We are also very interested in this. Additionally, it appears the app is including js.usemessages.com which is from MarkMonitor. We need to understand what this is tracking and who has access to the data. Is this just facilitating the tracking we see in our contact records or is this data available to any third parties?

skemble
参加者

Live Chat App slows page down

解決

Hi Jenny,

 

We've put a lot of work in to improving our mobile pagespeed score and load times. Implementing chat on our site dropped our mobile pagespeed score by an avg of 25 points and our desktop pagespeed score by an avg of 11 pts. Surely you must have a solution other than instructing us to look at other elements of our site. Our site is otherwise fast, the culprit for the reduction in speed is strictly the chatbot/visitor.js.

As you can see in the screenshot linked here it takes 10x longer to load than the next longest script. This isn't really acceptable in what some are calling 'The year of pagespeed'.



@thisisdatis 

jennysowyrda
コミュニティーマネージャー
コミュニティーマネージャー

Live Chat App slows page down

解決

Hi @skemble,

 

I wanted to share this resource which is a great resource for HubSpot and page speed. 

 

Thank you,

Jenny

0 いいね!
thisisdatis
投稿者

Live Chat App slows page down

解決

Hi @jennysowyrda - your script is the problem. It loads 10x slower than other scripts. What are you doing to speed things up? As a marketing automation company catering to marketers, you should know the importance of page speed and how it affects mobile rankings. Especially with this being the "year of page speed" according to Google.

davidmmb
参加者

Live Chat App slows page down

解決

Was there any update on this?

 

We are experiencing the same issue?


When we include the tracking code on our website - it will add 20+ requests and slows down the page load by around 2-6 seconds.