This document examines how (GCDC) behaves on web pages where it is operating, how it affects overall page performance.

The GCDC application is effectively a JavaScript application that runs on web pages. It examines the DOM of pages where it is embedded and will turn any trigger elements that it finds (specially marked-up HTML ‘a’ and ‘div’) into fully rendered gates for the user to interact with. As part of this process, the base script must make calls to GCDC servers to retrieve additional stylesheets, JSON configuration data, and submit analytics data.

First Contentful Paint

When installed in the correct manner, GCDC should have minimal, if any, impact on your website’s first contentful paint time. This is because the installation tag should be embedded within the body element of the page, and is therefore non-render blocking. The tag itself injects further dependencies which are all loaded asynchronously after the browser has begun painting the page.

Network Payload Size

The base GCDC script is <150kb, and is cached and loaded over our global CDN supplier for optimised delivery. This means that the network transfer times of our script are generally very fast. This base file size can be increased on sites that require support for many different languages and alternative form layouts, custom business logic etc.

JavaScript Execution Time

Due to the complexity and feature set of the GCDC application, it is likely to be one of the larger assets on your website once embedded. However, based on PageSpeed testing with previous clients, the application passes Google’s Javascript execution time tests, with a time generally <500ms.

Layout Shifts

GCDC gates are displayed in one of two ways: either as modals, or inline gates. Modals have no effect on the page layouts since they bind to existing links on the page and will only display when the user clicks those links.

Inline gates on the other hand can alter the page layout when they render. The extent to which they will change the layout depends on the part of the page where the gate has been embedded. The effect can be minimised by adhering to one of the following:

  • Ensure a CSS min-height has been applied to the element that will contain the gate that equates to the rough height that the gate will be when rendered, so that content around the gate does not need to be moved substantially. To improve UX, a simple loading GIF can also be applied to this containing element as a background, to indicate to the user that some content will be loading there imminently.

  • Embed gates within a column adjacent to the primary site content. This means that when the gate loads, it will simply load next to your existing content rather than moving it.

Cache Policy

GCDC assets are generally sent with a short cache TTL policy (normally 30 minutes). This is done so that changes made by administrators to their GCDC account configuration are reflected quickly in end-users’ browsers. This can sometimes cause tools such as PageSpeed to flag the GCDC script for having an inefficient cache policy. We can adjust these settings for individual accounts, but it is worth noting that increasing this time will subsequently increase the time that it takes for changes to reach all end users.