VP Speed - Local Bootstrap Icons (Pro)

Many Joomla templates load Bootstrap Icons from a CDN like jsDelivr. That pulls a stylesheet and a large font file from a third-party domain on the critical path — extra DNS, TLS and connection time before your icons appear. VP Speed can serve Bootstrap Icons from your own site instead, and preload the font. PRO

Why a CDN font hurts performance

A CDN feels free, but it isn't. Loading icons from cdn.jsdelivr.net means the browser must resolve a new domain, open a fresh TLS connection and only then fetch the CSS — and the CSS in turn references an icon font that can be well over 100 KB. All of this competes with your own resources during the most important moment of page load.

Serving the same files from your own domain reuses the connection the browser already opened for your site, removes the third-party round trip, and lets the file benefit from your own caching rules.

Enabling local icons

On the Plugin tab, switch on Serve Bootstrap Icons locally. VP Speed ships a bundled copy of Bootstrap Icons (CSS and the WOFF2/WOFF fonts) and, on the front end:

  • detects the Bootstrap Icons stylesheet — whether it comes from a CDN or from your template — and replaces it with the bundled copy served from /media;
  • preloads the icon font, so it starts downloading early instead of waiting until the CSS is parsed.

Detection and removal use the same robust approach as the Bootstrap replacement: the Web Asset Manager, the legacy stylesheet API, and finally the rendered HTML as a guaranteed fallback for hardcoded CDN links.

The bundled icons are a recent Bootstrap Icons release. Because icon sets are additive between versions, the bundled copy covers the icons your template references even if it requested a slightly older CDN version.

A real example: demo.vpjoomla.com

Our demo site loaded Bootstrap Icons from jsDelivr. In PageSpeed that showed up as a render-blocking stylesheet of about 14 KB taking roughly a second, trailed by a 128 KB icon font fetched from the CDN domain.

After enabling local icons, the jsDelivr requests disappeared from the audits entirely. The icon CSS now loaded from our own domain at around 12 KB, the font was preloaded, and the third-party domain was gone from the critical path — removing close to a second of blocking time with a single switch.

This pairs naturally with the Bootstrap Optimizer. Once both the framework CSS and the icon CSS come from your own domain — and the full Bootstrap is replaced — your render-blocking CSS is almost entirely first-party and tightly trimmed.

Verifying it works

Reload the front end and view the page source. The Bootstrap Icons link should now point to /media/plg_system_vp_speed_pro/icons/ instead of a CDN, and you should see a <link rel="preload" as="font"> for the icon font. Your icons should look exactly as before — same glyphs, served faster.

Next step

The next article covers the remaining resource hints: the Preload Manager for your own critical assets, and automatic preconnect for external domains.