When you use Onsite, 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 Onsite as non-intrusive as possible.
Drip Script
When you start using Onsite, we will add a very small script to your Drip script, which we call the “init script.” (It looks like “1234.js”). The "init script" will load after your main Drip script.
This file contains your currently active Onsite campaigns and a reference to our core.js script.
The core.js script (slightly bigger than the init script) handles everything related to Onsite, 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 Onsite 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.”)
Note: If you have a campaign with a teaser, the teaser will load after your entire site is loaded, since Onsite is last-in-line to load.
Asynchronous Loading
To ensure that Onsite 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 Onsite campaigns doesn’t hinder the rest of your website from loading as fast as it can. 🤓
HTTP/2
While loading Onsite, 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
Onsite 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.
Onsite 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 Onsite’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.
Onsite 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 Onsite 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.
Manual Trigger
When you use the Manual 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 Manual 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.