Optimizing a template

This topic describes some ways to optimize a template in order to speed up the output process. However, the template itself is not the only factor to be taken into account. The server configuration and hardware configuration have an influence on the output speed as well. For advice on server configuration and hardware configuration, see Performance considerations.

Scripts

In the process of output generation, the execution of scripts may take up more time than necessary. Here's what you can do to shorten that time.

  • Use efficient selectors. Using very precise selectors in scripts will be much faster than using a text selector, especially on large documents. See Use an ID as selector.
  • Optimize your scripts. Custom scripts with non-optimized loops and unnecessary DOM manipulations can slow down Content Creation. Use the Designer's test facilities to find out which scripts can be improved (see Testing scripts and Optimizing scripts).
  • Only run the necessary scripts. Normally the Designer will run all scripts for each and every record and section. You can save time in the process of Content Creation by organizing scripts in folders and setting their execution scope or even disabling them (see Managing scripts). Note that loading a JavaScript library is generally very fast and is only done once for the record set.
  • Use a fast network and internet connection or avoid loading external or internet resources. Using images, JavaScript or CSS resources located on a slow network or on a slow internet connection will obviously lead to a loss of speed. While we do our best for caching, a document with 5,000 records which queries a page that takes 1 second to return a different image each time will, naturally, slow output generation down by up to 83 minutes.
  • Make sure to use optimized graphic resources. For instance, avoid using images with transparency where no transparency is needed.

Images

  • Make sure to use optimized graphic resources. For instance, avoid using images with transparency where no transparency is needed.
  • When a template that contains lots of images is merged with a large record set, the many file requests may slow down the process of output generation. One solution is to combine the images into a single image file (an 'image sprite') and display the part that holds the image. This reduces the number of file requests and can improve the output speed significantly.

Creating and using image sprites

Step 1. Create a file that contains a collection of images.

Static images may go in any type of image file. Store images that need be added dynamically to the template, in one PDF file, one image per page.

There are several tools to combine image files into a singe PDF. ImageMagick is one of them. You could use the convert command of the ImageMagick library:

convert C:/myimages/*.jpg C:/myimages/image-collection.pdf

You could also use Connect Designer itself: create a print template with the size of your images and set the page margins to 0. Create a script that loops over your images and adds them to the text flow of the template. Subsequently generate PDF output and use the resulting file as your collection file.

Step 2. Add the file that contains the collection of images to the template's Resources (see Adding images).
Step 3. Display part of the collection file as an image in the template.

  • Static images that are part of an image file can be displayed via Cascading Style Sheets (CSS). This technique is much used in web design. In this technique, the file that contains a collection of images is called an image sprite. The trick is to create a Box (or Div) for each image and give that box an ID (see Boxes). Then use the ID in a style sheet to select the Box and write a style rule (see Styling templates with CSS files) that sets its background image to the image sprite and positions the image.

    For an explanation and examples of this style rule, see https://www.w3schools.com/css/css_image_sprites.asp.

  • Dynamically added images are loaded in a script. To retrieve one page from a PDF file in a script, add the page parameter to the file path and set that as the source of the image. Here is an example (assuming that the page number is stored in a variable pageNumber):

    var imageStr = "";
var imagePath = "file:///C:/image-collection.pdf?page=" + pageNumber;
imageStr += '<img src="' + imagePath + '">';
results.after(imageStr);