Widget performance optimization

Created by Certorix Online, Modified on Mon, 4 May at 9:30 PM by Certorix Online

Widget performance best practices

Optimise the Certorix widget for fast loading and smooth customer experience.

Embed snippet placement

Place before </body> – Allows page content to load first, widget loads asynchronously.
Avoid placing in <head> – Would block page rendering.
Use async attribute – The snippet already includes async (default).

Tree size impact

Widget load time is proportional to tree size:

<10 nodes: ~200 ms
10‑50 nodes: ~400 ms
50‑200 nodes: ~800 ms
200‑500 nodes: ~1.5 seconds
500+ nodes: >3 seconds (not recommended)

Image optimisation

Compress images before uploading (TinyPNG, ImageOptim).
Use WebP format instead of PNG/JPG (smaller file size).
Set explicit width/height attributes to prevent layout shift.
Host images on a CDN (Cloudinary, Imgix, your own CDN).

Caching headers

The widget script (widget.js) is cached by browsers for 1 hour. After updating your tree, customers may not see changes immediately. For immediate updates, you can:

Force cache refresh by appending ?v=timestamp to the script URL (not recommended for embedded snippet).
Wait 1 hour — widget automatically refreshes cached tree on idle.

Preconnect to CDN

Add these lines in your page <head> to speed up widget loading:

<link rel="preconnect" href="https://cdn.certorix.com">
<link rel="dns-prefetch" href="https://cdn.certorix.com">

Lazy loading the widget

If the widget is below the fold, you can delay loading until user scrolls near it:

// Load widget only when user scrolls within 200px of widget container
const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    // Inject embed snippet here
    observer.disconnect();
  }
});
observer.observe(document.getElementById('widget-container'));