Three ways to add a particles background to a web (without tanking Lighthouse)

The "particles floating in the hero background" effect is overused, but when it fits the brand it looks great. The problem is that 80% of the implementations you see out there slow the whole site down. Here are the three options, ordered from most control to fastest.

Option 1: particles.js direct

The original library by Vincent Garreau. Discontinued for years but still the reference. For anything new, use its maintained fork tsParticles (GitHub)—same API, better performance, framework-compatible.

<div id="particles-js"></div>
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3"></script>
<script>
tsParticles.load("particles-js", {
  particles: {
    number: { value: 40 },
    color:  { value: "#ff6b1a" },
    move:   { enable: true, speed: 0.8 }
  }
});
</script>

Start with number: 40 and ramp up slowly. More than 80 particles and old phones lag.

Option 2: WordPress plugin (zero-code)

If you're on WordPress and don't want to touch JS:

• Particle Background (Aastha Solutions) — the simplest. Activate it, gives you a shortcode, drop in any section.
• Particle Background WP (Ryan Novotny) — same concept with advanced options: collisions, shapes, connecting lines, cursor reactions. The one I recommend if details matter.

Option 3: skip particles, use animated gradients

Fastest and best-looking in 2026: a conic or radial gradient with a very slow CSS animation. Zero JS, zero downloads, zero Lighthouse impact.

.hero {
  background: conic-gradient(from 0deg at 50% 50%,
    #ff6b1a, #1e6fdb, #ff6b1a);
  background-size: 200% 200%;
  animation: drift 30s linear infinite;
}
@keyframes drift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

This store's blog uses exactly this trick (radial instead of conic) and weighs zero kilobytes. No libraries, no canvas, no JavaScript running 60 times a second.

Real performance cost

My rules: particles yes, but always behind prefers-reduced-motion: reduce (animations off for vestibular issues), and if the page is commercial-critical (storefront, paid landing), CSS gradient and nothing else.