Edit

Best Practices for Improving Page Load Times

Rokt understands that page load speed is vitally important to our clients. Rokt's technology is focused on improving the user's experience across your site and as such, page performance has been incorporated as a core tenant into how Rokt builds out solutions. To successfully increase engagement and maximize conversion rates, there are a number of approaches you can take to keep page load times to a minimum.

How Third-Party Snippets Affect Page Load Times

It is important to understand the placement and load priority for all the tools and services you use on your page to drive the best experience for your customers. Any third-party snippet that is added to a web page will impact overall load time.

The Rokt service is specifically designed to improve your customer experience and drive additional value from your page. Other commonly-used third-party services are more focused around tracking and analytics, and do not have a direct impact on customer experience.

To ensure you drive the most value from your page, it is important to ensure that customer-focused services like Rokt are triggered before tracking and other background services.

The best practice approach for placing the Rokt snippet is to include the snippet directly in the response from the server instead of injecting it via client-side scripting. For clients wishing to place the snippet within the content of the page, it should be placed in the page <head> before other third-party snippets.

For background services like Google Analytics, the best approach is to place these snippets at the bottom of the page and load them asynchronously. This approach is intended to ensure that even if these resources load slowly, they do not affect the user's experience.

Asynchronous vs Synchronous Loading

Third-party scripts can be loaded in two different ways:

  • Synchronous loading: scripts are loaded sequentially, one after another
  • Asynchronous loading: some scripts can be loaded simultaneously

The Rokt script loads asynchronously by default, meaning that Rokt and the page load simultaneously. This speeds up the overall loading of a page. Since the browser will not wait until Rokt resources are finished loading before displaying the page to the customer, the experience will not be interrupted and will be shown when it is ready.

For deeper integrations where Rokt is integral to the transaction flow, such as offering upsells or payment options, clients can switch Rokt to synchronous loading so that the page will only be displayed once the Rokt content is available to be displayed. See the Appendix for more information on asynchronous and synchronous requests.

Do Not Load Rokt Through a Tag Manager

Rokt highly recommends that you do not load the Rokt snippet through a tag manager. Tag managers load bulky frameworks for themselves before loading other components (e.g., third-party snippets) in an asynchronous manner. This can cause the following problems:

  • Loading through a tag manager will likely cause Rokt to take much longer to execute, which will negatively impact the user experience and reduce your Value Per Transaction
  • If you are using the Web SDK only for measurement, it will likely cause you to lose accuracy and conversions
  • Other parties within your organization who are unfamiliar with Rokt may change your tag manager configuration and cause unintended side effects

If you absolutely must load Rokt through a tag manager, you should place the Rokt snippet high in priority order relative to other third-party snippets to help ensure Rokt is the first snippet fired.

Use the Preparative Iframe

To optimize both Rokt's time to interactive, and your page performance we recommend our preparative iframe solution, a secure, easy to implement, and flexible iframe placed on an earlier step in your transaction flow. The preparative iframe pre-loads the Web SDK by downloading Rokt resources and caching them to easily retrieve when it’s time to show the placement. By downloading the SDK in sections, we reduce the required network bandwidth on pages critical to your customer’s experience. Preloading will result in a seamless and improved experience for customers and better performance outcomes for both Rokt and you. See the preparative iframe example, for more information on this solution.

Note: for best performance, please ensure that you update to the latest version of the Rokt Object before implementing the Preparative Iframe.

Use the Latest Version of the Rokt Object

We continuously work to improve the performance of the Web SDK and optimize the experience for customers visiting your site. Using the latest version of the Rokt Object will ensure you can provide the best experience for your customers. See Integrating the Web SDK to find the URL pointing to the latest version of the Rokt Object.

Note: updating to the latest version of the Rokt Object will result in page load time improvements for some partners. In previous versions of the Web SDK, two separate domains were utilized: wsdk.rokt.com for serving static resources, and apps.rokt.com for API communication with Rokt backend systems. These two domains have now been unified into a single domain at apps.rokt.com.

Integrations based upon previous versions of the Web SDK require two domain resolutions (one for wsdk.rokt.com and one for apps.rokt.com). Unifying to a single domain removes one of these resolutions resulting in improved load time performance.

Use Resource Hints

Using Resource Hints like preconnect, dns-prefetch and preload is a quick and easy way to improve start times for the Rokt script. Establishing the connection to 3rd party scripts can account for a significant portion of load times, in particular when the third party domain is secure, as is the case with Rokt.

The preconnect tag will instruct the browser to resolve the DNS and connect to the origin earlier in the process, offloading a large portion of the delay, and then will be cached by the browser. <link rel="preload"> informs the browser that a resource is required for that page, and that it should start getting fetched as soon as possible. Once the request to Rokt is finally made later on, Rokt will be able to render offers more quickly to provide the optimal experience for your customers.

To implement preconnect , dns-prefetch, and preload include the following code in the <head> section on all pages that will show Rokt placements:

<link rel="preconnect" href="https://apps.rokt.com/" crossorigin>
<link rel="dns-prefetch" href="https://apps.rokt.com/" >
<link rel="preload" as="script" href="https://apps.rokt.com/wsdk/integrations/snippet.js">

Note: Make sure the link referenced in preload matches the URL pointing to the Rokt Object in the integration snippet on your page

Preload the Rokt Script (for Single Page Applications)

If your site is a Single Page Application, it is recommended to preload the Rokt script on the view before Rokt appears. This initialization step does not require any customer data, and will allow the Rokt script to load in the background of the page.

When your customer reaches the page where Rokt should appear, the Web SDK will already be warmed up and ready to go. This approach allows you to simply call a method to get placements to show on the page without waiting to download the entire Web SDK before displaying an offer. See the Single Page Application example for more information on the recommended SPA integration.

Do Not Load Rokt Through Experimentation Engines

For similar reasons to the above, you should not use tools like Optimizely to load Rokt, as this slows down page speed. Rokt provides its own tools for experimentation. For more information on Rokt's experimentation tools, please contact your Account Manager.

Do Not Load Rokt Through Malware Protection or Integrity Scripts

Client's should not use programs like JScrambler to load Rokt, as this slows down page speed. Rokt runs in sandboxed IFrames to minimize any interactions with the parent page. Rokt also offers additional security features in order to increase the trust in the code running on your site. See the Rokt security documentation to learn more about these features, and our approach to security.

Appendix

Network Request Phases

Web pages load through a series of phases as the browser requests and receives all the various resources that make up that page (images, CSS files, JavaScript files, etc.). The five basic steps of how a page renders are listed below:

  1. DNS Lookup: Finding the requested resource's web address (e.g., apps.rokt.com)
  2. Initial Connection: Successfully talking to that resource's address
  3. TTFB (Time to First Byte): Receiving the first piece of information from a resource
  4. Download/TTLB (Time to Last Byte): Receiving the very last piece of information from the resources, thus allowing the resource to render (e.g., image) or execute (e.g., script)
  5. Document Complete: A signal that the web page has completed loading all of its resources

Google's Dev Tools provides more information.

Synchronous and Asynchronous Requests

Scripts can be loaded in two different ways:

  • Synchronous: Scripts are loaded sequentially, one after another
  • Asynchronous: Some scripts can be loaded simultaneously

A web page consists of a head and a body. Everything in the body is rendered by the browser and the head is used to load external resources such as scripts and stylesheets. When the page loads in a browser, the browser starts reading the html from top to bottom. The head section has a special characteristic that prevents anything from showing until all external resources are fully loaded. This is "synchronous loading".

However, you can change this functionality to make certain elements load without waiting for all external resources to load. This is known as "asynchronous loading".

Synchronous Loading

Here's what a page might look like when resources are loaded in a synchronous manner:

<html>
    <head>
        <script src="a.js" />
        <script src="b.js" />
        <script src="c.js" />
        <script src="d.js" />
        <script src="e.js" />
    </head>
    <body>
        Your content
    </body>
</html>

When all resources are synchronous, the elements will load, in order:

Web SDK Synchronous Loading

Asynchronous Loading

Loading a script asynchronously has the advantage of not slowing the page down, but it can cause content to "pop in" to a page, or flickering where the original page content loads, followed shortly by changes of any variations.

Here's what a page might look like when a script is loaded in an asynchronous manner:

<html>
    <head>
        <script src="a.js" />
        <script async src="rokt.js" />
        <script src="c.js" />
        <script src="d.js" />
        <script src="e.js" />
    </head>
    <body>
        Your content
    </body>
</html>

When a script is asynchronous, it will load simultaneously with other scripts (see below).

Web SDK Asynchronous Loading

Rokt, in this case, will not prevent other resources from being loaded, as the Rokt script and the other page resources are able to load at the same time. This will speed up the overall loading of a page. Since the browser will not wait until Rokt resources are finished loading before displaying the page to the customer, the experience will not be interrupted and will be shown when it is ready.

Resource Hints

Resource hints assist browsers in the decision process of which origins it should connect to and which resources it should fetch and preprocess to improve page performance.

  1. DNS-prefetch: indicating an origin that will be used to fetch required resources and browsers should resolve as early as possible (W3C org).
  2. Preconnect: indicating an origin that will be used to fetch required resources so browsers initiating an early connection, which includes the DNS lookup, TCP handshake, and optional TLS negotiation (W3C org).
  3. Preload: indicating a resource that will be used as part of the current navigation that should be fetched as early as possible W3C org

Note: Preconnect has been supported by all major browsers since 2015. To ensure support on older browsers, we also recommend the use of DNS-prefetch as a fallback.

← Sandbox IntegrationAttributes →