Google PageSpeed third party chat loading issue

2
votes

I am using below code to execute live chat code through which I have added a div and chat box is showing which is working fine.

try {
  // LIVECHAT
  //if (matchMedia('only screen and (min-width: 1025px)').matches)
  //{
  var __lc = {};
  __lc.license = XXXXXX;

  (function () {
     
      var lc = document.createElement("script");
      lc.type = "text/javascript";
      lc.async = true;
      lc.src =
        ("https:" == document.location.protocol ? "https://" : "http://") +
        "cdn.livechatinc.com/tracking.js";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(lc, s);
       
  })();
  var LC_API = LC_API || {};

  LC_API.open_chat_window = function () {
    $(".chatbox").show();
    $("#chat-widget-container").show();
  };


  LC_API.on_chat_window_minimized = function () {
    
    $(".chatbox").show();
    $("#chat-widget-container").hide();
  };

  LC_API.on_chat_window_opened = function () {
    $(".chatbox").hide();
    $("#chat-widget-container").show();
  };

  LC_API.on_chat_window_hidden = function () {
    $(".chatbox").show();
    $("#chat-widget-container").show();
  };
  //}
} catch (err) {}


$(".openChat").on("click", function (event) {
  
  LC_API.open_chat_window();

  return false;
});

But when I go to Google Pagespeed Insights and track the website in mobile https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.rosterelf.com%2F, I am getting the low rankings as its keep saying this.

Time to Interactive 11.9 s

If I comment the above code then my percentage getting higher to above 65.

So can someone guide me how can I optimize this script to solve this issue ?

Thanks

2
phpseopagespeedgoogle-pagespeedlivechat
TTI is counting how long it takes for all your javascript libraries to load if I recall correctly. - zanderwar
cdn.livechatinc.com/tracking.js this is third party cdn added in script if you can remove this then speed will be increased or download it then use it then speed is also increased . - Rakesh kumar Oad
@zanderwar Its 12.7 s . Its due to chat .. as soon as I remove the chat script and its decreasing. - Mittul At TechnoBrave

2 Answers

0
votes

Yes you can optimize the script download the cdn link https://cdn.livechatinc.com/tracking.js and save in project folder

lc.src =
    ("https:" == document.location.protocol ? "https://" : "http://") +
    "cdn.livechatinc.com/tracking.js";

Replace this

lc.src ="folder_name/tracking.js";

then speed of page is increased .

0
votes

When we load javascript on our page then under the hood many things start happening. At first, the browser downloads this file and since it's a javascript file it starts executing it and stops all other things like parsing the page further. In your case, the same thing is happening and it is increasing the loading time for your page. enter image description here

Also, you can see the dnslookup is taking so much time so you have improved this too. Now follow the given steps to improve your loading time.

Steps:

  1. Preconnect to required origins. Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins.
  2. USe defer and async during loading your javascript files so that js execution doesn't affect page loading.
  3. By preloading a certain resource, you are telling the browser that you would like to fetch it sooner than the browser would otherwise discover it because you are certain that it is important for the current page. So preload your critical js. Syntax - <link rel="preload" as="script" href="critical.js">

Here you can see that you don't need a chatbox to appear at the time loading. So you can defer the javascript loading to improve page speed.

Follow the above steps to improve your page performance affected by javascript

Some more tips to increase your page speed:

  1. Lazyload your images so that images download at the time when scrolls to the.
  2. Preload the external font files and critical resources.
  3. Use chrome dev tools coverage tab to identify the unused CSS and JS
  4. Serve all your contents with cache-policy. This will help you get static resources from the cache and hence improve the loading time.
  5. Try using a fast CDN for serving static files.

Most Important tip - From the URL I can see that your website is vulnerable to XSS attacks. So please look up into that and also work on your security headers like Content Security Policy (CSP).

For more examples see this website - https://codebulbs.com and check its source. You will get many things to learn from the source of this website.