skip to Main Content

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

Answers


  1. 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 .

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search