2

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

Mittul At TechnoBrave
  • 1,142
  • 3
  • 25
  • 70

2 Answers2

1

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.

thelovekesh
  • 1,364
  • 1
  • 8
  • 22
  • Thanks for your answer.. but my question is.. how should or what should I change or update in my script above ? – Mittul At TechnoBrave Jun 19 '21 at 07:36
  • You can't optimize the performance by changing the above script because at last browser is going to download the script and execute it in run time. That's why I suggested you follow some practices like `preconnect` to another resource so that at the time of script downloading there is no time waste in DNS lookup and hence performance gets optimized. Check the DNS lookup time in the above image. – thelovekesh Jun 19 '21 at 07:44
  • Also if you preload that critical js then it will get download as the browser interacts with the page. So as a result, you will get an optimized speed index and FCP. You should get more info about core web vitals first. – thelovekesh Jun 19 '21 at 07:50
  • This question is related to the optimization of core web vitals more. – thelovekesh Jun 19 '21 at 09:00
  • I appreciated you because you supported me by answering my question .. that's my manners .. Coming to accepting your answer, then well I need an answer how can I update the current code .. that is an ideal answer I want to be able to achieve what I want. I already know most of the thngs you mentioned but if you can guide me to solve by updating my current code, that would be ideal dear. Thanks – Mittul At TechnoBrave Jun 21 '21 at 04:19
  • I have also mentioned that you cannot optimize that script because in last the browser is going to download the `tracking.js` and no developer can eliminate execution time of javascript in a browser. You can defer the script only. Or you can trigger that script after the fully page load. – thelovekesh Jun 21 '21 at 05:47
  • And the time i checked your website there was no best practices followed for site performance. – thelovekesh Jun 21 '21 at 06:03
  • Thanks for the reply .. can u explain how can I defer in my current script ? Also my SEMRush has 0 errors and around 99% scrore .. and In pagespeed for desktop it has around 95% .. i am also using lazy loading minification etc .. so can you please explain me what am I missing in terms of the best practice you are mentioning .. Thanks – Mittul At TechnoBrave Jun 21 '21 at 06:09
  • to defer your script insert this `lc.defer = true;` at the place of `lc.async = true;` and your initial server response time is very very poor. – thelovekesh Jun 21 '21 at 06:36
  • And one more thing.. pagespeed has marked some of your resources at critical resources. So I suggest you to preload them. – thelovekesh Jun 21 '21 at 06:38
  • Thanks for your reply .. Yes .. intial time of responsive is poor special in mobile version hence I asked the question here in forum to get help .. Thanks for your help and suggestions. I will make the changes which you have suggested and upvote your answer if its working how I exactly wanted. I will come back soon .. Thanks – Mittul At TechnoBrave Jun 21 '21 at 11:24
  • To optimize your initial server response time use caching technology like varnish in front of your web server. – thelovekesh Jun 21 '21 at 11:39
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/234011/discussion-between-lovekesh-kumar-and-mittul-at-technobrave). – thelovekesh Jun 21 '21 at 11:39
  • I have used `lc.defer = true;` still score does not increase. – Mittul At TechnoBrave Jul 06 '21 at 03:29
  • No problem.. see the above image that I have shared for your `tracking.js`. you will see that DNS lookup is taking so much time. so move your script to some fast CDN like CloudFront or Cloudflare. – thelovekesh Jul 19 '21 at 05:59
  • Thanks for the reply. I have used `setTimeOut` to solve the issue. – Mittul At TechnoBrave Jul 19 '21 at 07:32
0

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 .

Rakesh kumar Oad
  • 1,332
  • 1
  • 15
  • 24