How to minimize loading time of a google script?

Question

I am working on HtmlServices of google apps script. In this script I implemented two functionality, Autocomplete and DataTable, for this used many js and css file. All functionalities are working well but when the script is loaded, its taking too much time. Once the script is loaded completely, then its working fine. This script is published on web.

So, there is any approach to minimize the loading time?

Answer 1

I've had the same issue but came to the conclusion that how I'd designed my script contributed to the problem. Originally I designed my script to build the entire page and then present it to the user. When the script began, it appeared to take a long time for the first page to present making the page look slow. It was slow.

I'm now in the process of switching to presenting a "loading..." type page which shows quickly. After loading, it does a callback to the server to build the remainder of the page, passing it back to the client script to presents it. I'm not entirely done with this yet but it looks promising.

I'm not sure that GAS will ever be fast since it's dependent on Caja. Therefore we need to use good design in our code to help was much as possible.

Answer 2

It seems that there is a significant lag between when doGet() starts, and when google.script.run executes the first time. I created a dummy app called Simple which has a similar structure to my app (based off the demo app) that does nothing other than a single jQuery call to set the text in my template.

doGet() loads my index.html template. I included my CSS and Javascript in my index.html template to further simplify things.

I setup doGet() to immediately evaluate the template after loading it.

On evaluation, google.script.run calls a dummy function in code.gs that does nothing and returns null. On success it calls a javascript to update the page, which does a single jQuery to update my html element. The template has "Hello world!" in it, and this is replaced with "Hello other world!"

This is about as trivial as it gets. The template loads almost immediately, displaying "Hello world!" but it takes about 6 seconds for the contents to get updated by the single jQuery call. This performance mirrors what my real application is doing. Once the app gets to the javascript, subsequent calls to google.script.run are very fast.

Interestingly, I can evaluate doGet() within the web development environment and it runs in under half a second, with the execution transcript confirming that all the appropriate calls, including the jQuery reference, are made.

This demonstrates a couple of things. First, doGet() is loading and displaying the template (on calling template.evaluate()) very quickly. It seems that the first call to google.script.run is where the delay is, but only when the app is presented to the web. Subsequent calls to google.script.run are very fast, demonstrated by my working app, which has a form where I can update the page by calling google.script.run with a variable passed through the URL.

This delay makes google apps script for web apps unattractive for most web based apps that I can think of. This is unfortunate, because the environment has so many other things that make it appealing.

I'm happy to share my sample code with anyone on request. I would also love to hear if Google is aware of this and what there stance is on the issue. Code is included below:

code.gs:

function doGet(e) {
  Logger.log('start');
  var template = HtmlService.createTemplateFromFile('Index');
  // Build and return HTML in IFRAME sandbox mode.
  Logger.log('before template.evalute()');
  return template.evaluate()
      .setTitle('Web App Window Title')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  Logger.log('after template.evaluate()');
}


function getFolderContents() {
  var contents = 0;
  return contents;
}

---

index.html

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">

    <h1 id="main-heading">Hello world!</h1>

<!-- Use a templated HTML printing scriptlet to import JavaScript. -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  /**
   * Run initializations on web app load.
   */
  $(function() {
    // Call the server here to retrieve any information needed to build the page.
    google.script.run
       .withSuccessHandler(function(contents) {
            // Respond to success conditions here.
            updateDisplay(contents);
          })
       .withFailureHandler(function(msg) {
            // Respond to failure conditions here.
            $('#main-heading').text(msg);
          })
       .getFolderContents();
  });

  function updateDisplay() {
    $('#main-heading').text("Hello other world!");
  }
</script>

---