> ## Documentation Index
> Fetch the complete documentation index at: https://vr-it-services-pro.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> What the theme already optimizes, and what is still on you to fix.

# Optimization

# Performance

What Vara SaaS already optimizes, what it deliberately leaves to you, and how to find the rest.

**Start by measuring**

Run [Google PageSpeed Insights](https://pagespeed.web.dev/) against your **live URL** before
changing anything. Optimizing blind is how people spend a weekend improving something nobody
measured.

## What the theme already does

This is the part that makes the theme fast, and it is not a plugin you need to install.

### No external requests

> **Fonts are self-hosted**
>
> Inter and JetBrains Mono ship inside the theme as `woff2`, subset to Latin. There is no request to `fonts.googleapis.com` — no third-party connection, no DNS lookup, no privacy commitment.

> **Font Awesome is bundled**
>
> Font Awesome 6.5.1 is included in `assets/fonts/`. Icons and menu icons work with no CDN.

> **No telemetry**
>
> The theme tracks nothing and calls home to nothing.

> **No webfonts from elsewhere**
>
> Everything the theme needs is inside the theme folder.

### Render-blocking styles are avoided

| Asset | Technique |
| - | - |
| `screen.css` | Served with `media="print" onload="this.media='all'"`, plus a `<noscript>` fallback so it still applies without JavaScript |
| Font Awesome | Preloaded with `<link rel="preload" as="style">`, then switched on load |
| Fonts | Two `<link rel="preload">` entries in the document head |
| `main.js` | Hardcoded `defer` |
| `animations.js` | Loaded at priority 20, below content-critical code |

### Conditional asset loading

Assets load only on the page types that need them.

| Loads on | Assets |
| - | - |
| Every page | `screen.css`, `dynamic-vars.css`, `portfolio-and-theme.css`, local fonts, Font Awesome |
| Blog home, archives, search | `blog-index.css` |
| Singular views only | `single-blog.css`, `single-toc.js` |
| Singular with comments open | `comment-reply.js` |
| Customizer preview only | Customizer preview JS and CSS |

**This matters most on landing pages**

A page built in Elementor loads almost none of the blog and single-post CSS. A marketing homepage
stays light while your blog remains fully featured.

### 🌙 Dark mode without a flash

An inline script in the document head applies your stored light/dark preference **before the page paints**. There is no white flash before a dark page renders, a common and avoidable performance and UX problem.

### ⛔No wasteful image handling

The theme uses native WordPress markup, `the_post_thumbnail()` and standard `<img>` output. No lazy loading shim, no custom `picture` element, no double-processing. WordPress does it correctly.

> [!WARNING]
>
> **Do not install more than one caching plugin, and do not combine a caching plugin with a separate CSS optimiser.** They routinely conflict, and the result is slower than either alone.

## Elementor performance

Elementor is the heaviest part of most Vara SaaS sites.

> **Enable Optimized CSS**
>
> **Elementor → Settings → Advanced → Optimized CSS → Yes.** Elementor regenerates and reprints its CSS rather than printing it per element on every page.

> **Regenerate after changes**
>
> **Elementor → Tools → Regenerate CSS & Data.** After importing demo content or importing templates.

> **Keep containers lean**
>
> Deeply nested flexbox containers generate more CSS than simple sections.

> **Avoid global widgets**
>
> A global section widget injects its CSS on every page.

## Measuring properly

**1. Test the live URL**

Not a staging subdomain and not a builder preview.

**2. Test mobile first**

Google indexes mobile performance separately. Most visitors are on phones.

**3. Run it three times**

Scores vary. The median is more meaningful than a single run.

**4. Use field data when available**

PageSpeed shows real user data once a site has enough traffic. Lab data is a simulation; field data is your visitors.

**5. Fix the biggest problem first**

An 800 KB hero image matters more than shaving 20 KB from your CSS.

## A note on the theme's own CSS

The main stylesheet is roughly 61 KB uncompressed. With gzip or brotli it is a fraction of that, and it is cached across page views.

> [!WARNING]
>
> **Do not split, minify, or optimise this stylesheet further.** It is already loaded without blocking render, and aggressive processing is the most common cause of broken layouts after installing a caching plugin. See [Plugin compatibility](/integrations/plugin-compatibility.md).

## Related

> **[SEO](/performance/seo.md)**
>
> The metadata the theme outputs and what to add.

> **[Accessibility](/performance/accessibility.md)**
>
> The other quality signal that overlaps with performance.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.