How does Sleeknote affect my page load time?

When you use Sleeknote, we do our best to have as little impact on your website’s performance as possible.

In this guide, you’ll find some of the measures we take to make Sleeknote as non-intrusive as possible.

 

Sleeknote Script

The Sleeknote tracking code you implement to your site is a very small script, which we call the “init script.” (It looks like “1234.js”)

This file contains your currently active Sleeknote campaigns and a reference to our core.js script.

The core.js script (slightly bigger than the init script) handles everything related to Sleeknote, including submitting a newsletter signup, animating individual campaigns, and determining which campaigns to show or hide from your visitors.

We know that loading your site content has higher priority than loading Sleeknote campaigns. That’s why we make sure that the init script doesn’t load the core script, until your website reports to us that all the important assets (such as HTML, CSS, and images) are done loading. (In technical terms, when the document.readyState is “complete.”)

Asynchronous Loading

To ensure that Sleeknote doesn’t slow your website down, we also use a multitude of technologies and techniques to have as little impact on load speed as possible, such as asynchronous (async) loading.

Async loading helps your website render more quickly. By using async loading, we make sure that our script loads passively and doesn’t block any of your website content.

This way, we make sure that loading Sleeknote campaigns doesn’t hinder the rest of your website from loading as fast as it can. 🤓

 

HTTP/2

While loading Sleeknote, we load a lot of small assets, such as HTML, CSS, images, fonts, and other campaign elements.

Previously, this would cause a delay in load times because each load had some overhead in connecting to the server before downloading the asset.

But now, thanks to a new version of the HTTP protocol, called HTTP/2, which we use on our Content Delivery Network, we can ensure better load times by bundling a lot of connections together and removing the overhead of creating a new connection for each asset.

 

Content Delivery Network

Sleeknote also uses a Content Delivery Network (CDN) which is a network of servers from multiple data centers all around the world.

Thanks to CDN, a cached version of your campaign's content is stored in multiple geographical locations around the world to increase your page speed.

Sleeknote uses CDN to make sure that our script loads quickly no matter where your visitors are located in the world. In other words, if a visitor is in the US, content from a US server will be loaded, and if they’re in Europe, content from a European server will be loaded. 🚀

 

Compression

All the content in your campaigns are compressed with the industry standard “gzip” when loading from Sleeknote’s CDN to your visitors’ browsers. This means that the visitor has to download less data before the campaign is ready to show. 🗜️

 

Minified CSS and JavaScript

Most CSS and JS files have spacing, indentation, newlines, and comments in it. A minified version of the files, however, removes those elements.

Sleeknote uses a minified version of the CSS and JavaScript files, to ensure faster load time. ⏱

 

Non-CPU Blocking JavaScript Methods

When developing functionality that runs on your website, we optimize our code to be “non-CPU blocking” because, when the thread of a CPU is working on one “thing”, it can’t work on another “thing”. So, if your website suddenly needs to load a new element or render an animation, it has to wait for the CPU to be available.

To make sure that your website is always responsive and fast, we optimize our code so that none of our methods take more than 50ms to run on modern hardware. This way, the CPU can always be available to react to user input or an animation animating.

 

How can you optimize your Sleeknote campaigns?

Here are a few suggestions you can use to optimize your campaigns for better website performance.

 

Images

Images are one of the biggest factors in slowing down your website. To optimize your campaigns for higher page speed, we recommend you to keep your images under 300 KB.

A few tips for optimizing campaign images without compromising quality:

• If you have the option, always use “Save for web” which will give your image a web-friendly resolution.
• If your image is 2000 pixels wide, for example, you can resize it to 500 pixels wide or even smaller by keeping the same proportions, depending on how you plan to use it.
• You can compress your images with a free tool like TinyPNG.

Fonts

When you use many different fonts in your campaigns, there’ll be more assets that need to be downloaded to show your campaign correctly on your site. Naturally, this means a longer page load time.

If possible, try not to use a lot of different fonts in your campaigns.

 

JavaScript Trigger

When you use the JavaScript trigger to trigger your campaign from specific buttons, we load the campaign on all the pages on your site.

To reduce the impact this may have on your load time, we recommend using “Specific URL” or “URL contains” conditions when using the JavaScript trigger.

When you use page-level targeting to specify the pages where you have these buttons, we’ll only load the campaign on these pages.