Performance

Tune the expensive bits first

For COBE, mapSamples is usually the biggest GPU cost.

Start with 8000-16000 for most pages, use 8000 on weaker devices, and only push toward 40000 for large hero sections where visual detail matters more than battery or scroll smoothness.

Pause work when the globe is hidden

The highest-value optimization is usually simple: stop requestAnimationFrame when the canvas is off-screen.

Use IntersectionObserver to start animation only when the canvas is visible. This matters a lot on docs or marketing pages where several demos may exist below the fold.

Add document.visibilityState on top of that so background tabs stop animating too. Off-screen pause helps scroll performance; tab-hidden pause helps battery and laptop fans.

Control resolution and lifecycle

Do not let screen density or unnecessary teardown logic burn GPU time.

Cap devicePixelRatio at 2 and size the canvas from the rendered element, for example canvas.clientWidth * devicePixelRatio. That keeps Retina displays sharp without letting very dense screens blow up render cost.

Only recalculate canvas width and height on a real resize. Do not measure layout every frame if the globe size is not changing.

For mobile layouts, keep the globe around 280px to 340px wide so it stays clear without forcing excessive canvas area on smaller screens.

Use globe.update() only for values that actually change, and call globe.destroy() when unmounting or swapping scenes so WebGL resources do not hang around longer than needed.

Load less up front

If the globe is not needed immediately, delay the library cost too.

Use dynamic import('cobe') when the globe appears inside a preview, tab, modal, or below-the-fold section. That keeps your initial JavaScript smaller for users who never reach that part of the page.

Also avoid rebuilding markers or arcs arrays on every animation tick unless the scene data actually changed. Let rotation animate, but keep the rest of the config stable.

Copyable lifecycle pattern

This is the one pattern worth copying first: lazy init, visibility-aware animation, and full cleanup.