Edit

Best practices for improving performance

Rokt understands that website speed is vitally important to your business. Rokt's technology is focused on improving the customer experience across your site and as such, page performance has been incorporated as a core tenant in our 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.

Third-party snippets and performance

It is important to understand the placement and load priority for all the tools and services you use on your page. 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 customer experience.

Asynchronous vs. synchronous loading

Your site can load third-party scripts 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 doesn't wait until Rokt resources are finished loading before displaying the page to the customer, the customer experience is not interrupted and the Rokt placement is shown when 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 is only displayed once the Rokt content is fully loaded. See the Appendix for more information on asynchronous and synchronous requests.

Don't 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:

  • Longer execution times that negatively impacting the customer experience and reducing your value per transaction.
  • Loss of accuracy and conversion data, if you are using the Web SDK for measurement.
  • Possibility of changing tag manager configurations can 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 ensure Rokt is the first snippet fired.

Don't load Rokt through experimentation engines

For similar reasons to the above, using experimentation engines like Optimizely to load Rokt slows down page speed. Rokt provides its own tools for experimentation. For more information on Rokt's experimentation tools, contact your account manager.

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 preloads the Web SDK by downloading and caching Rokt resources so they are easy to 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 results in an improved experience for customers and better performance outcomes for you.

For more information, see the preparative iframe integration example.

Note: For best performance, 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 ensures you can provide the best experience for your customers. See integrating the Web SDK to find the URL that points to the latest version of the Rokt Object.

Note: updating to the latest version of the Rokt Object results in load time improvements for some partners. In previous versions of the Web SDK, two separate domains were used: 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 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 third-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 instructs the browser to resolve the DNS and connect to the origin earlier in the process, offloading a large portion of the delay. <link rel="preload"> informs the browser that a resource is required for that page, and that it should be fetched as soon as possible. Once the request to display a Rokt placement is made later on, Rokt can quickly render offers 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 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 (SPA), we recommend preloading the Rokt script on the view before Rokt appears. This initialization step does not require any customer data, and allows the Rokt script to load in the background of the page.

When your customer reaches the page where Rokt should appear, the Web SDK is already 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.

Don't load Rokt through malware protection or integrity scripts

We don't recommend using programs like JScrambler to load Rokt, as it slows down page speed. Rokt runs in sandboxed iframes to minimize any interactions with the parent page and offers additional security features to increase the trust in the code running on your site. See the Web SDK 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. Time to first byte (TTFB). Receiving the first piece of information from a resource.
  4. Download/time to Last Byte (TTLB). 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 Developer Tools documentation 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 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 the popping up of content on a page or flickering where the original page content loads.

Here's what a page might look like when a script is loaded asynchronously:

<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 loads simultaneously with other scripts:

Web SDK Asynchronous Loading

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

Resource hints

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

  1. DNS-prefetch indicates an origin that can be used to fetch required resources and that it should be resolved as early as possible. Get more information on w3.org.
  2. Preconnect indicates an origin that can be used to fetch required resources so browsers can initiate an early connection, which includes the DNS lookup, TCP handshake, and optional TLS negotiation. Get more information on w3.org.
  3. Preload indicates a resource that will be used as part of the current navigation and should be fetched as early as possible. Get more information on w3.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.

← Event-based integrationAttributes →