Astra Performance: Reducing Page Weight and Improving Core Web Vitals

Astra is marketed as a lightweight theme, and the theme itself is genuinely small — under 50KB. But an Astra site with Elementor Pro, WooCommerce, and a few plugins can still load slowly. The theme is not the bottleneck. Here is where weight actually comes from and how to address it.

What Astra Actually Loads

The Astra theme loads one CSS file and minimal JavaScript. In Astra Pro, the header builder adds some additional CSS. By itself, this is not a performance problem. The weight comes from the page builder (if you use one), plugin scripts, fonts, and images.

Check what is actually loading using Chrome DevTools Network tab, filtered to CSS and JS. This tells you what is causing your actual page weight — not assumptions about the theme.

Removing Unused Astra CSS

Astra generates CSS for all its features regardless of which ones you use. If you do not use the WooCommerce module or certain header elements, that CSS is still loaded. Two options:

• Use a plugin like Asset CleanUp or Perfmatters to remove the Astra CSS on pages where specific features are not used.
• In Astra Pro settings under Performance, enable individual CSS loading which splits Astra CSS into modules and only loads what is needed per page.

Google Fonts and Font Loading

Astra uses Google Fonts by default if you select a Google Font in the typography settings. Google Font requests trigger an external DNS lookup and can delay rendering. Fix this by:

1. Going to Appearance, then Customise, then Global, then Typography and switching to system fonts or a locally hosted web font.
2. If you need Google Fonts, use a plugin like OMGF (Optimize My Google Fonts) to download and serve fonts locally.
3. In Astra Pro, go to Performance settings and enable Preload Fonts to hint the browser to fetch fonts early.

Improving Largest Contentful Paint (LCP)

LCP is almost always the hero image or header image on Astra sites. Make sure the hero image is:

• Sized correctly — not a 2000px wide image displayed at 800px.
• In WebP format.
• Not lazy loaded — the LCP image should have loading=”eager” or no lazy load attribute. Most caching plugins add lazy loading to all images by default; exclude the hero image from this.
• Preloaded using a link rel=”preload” tag added via your child theme or a performance plugin.

Cumulative Layout Shift (CLS) on Astra Sites

CLS on Astra sites is commonly caused by the logo image loading after the header renders, shifting the layout. Fix this by setting explicit width and height attributes on your logo image. In the Astra header builder logo settings, set the logo width. Also check the mobile header — a different mobile logo without explicit dimensions causes CLS on mobile.

Web fonts cause CLS through FOUT (flash of unstyled text) when the browser swaps from a fallback font to the loaded web font. Set font-display: swap in your font loading configuration to minimise this.

Combining Astra With WP Rocket

WP Rocket and Astra work well together. In WP Rocket, enable page caching, CSS and JS minification, and lazy loading for images below the fold. Exclude the Astra header builder JavaScript from deferring if you experience any header functionality issues after enabling JS defer. Use WP Rocket’s Cloudflare integration if your site is behind Cloudflare for coordinated cache management.

For a full performance audit of your Astra site including custom optimisation beyond standard plugin settings, a WordPress performance developer can identify and address site-specific bottlenecks.