DEV Community

Airbyte Tools
Airbyte Tools

Posted on

How I Built 20 Lightweight WordPress Sites with Custom Themes - Zero jQuery Under 15KB CSS

Most WordPress themes are bloated with jQuery, Font Awesome, multiple CSS files, and dozens of JavaScript libraries. When I needed to build 20 tool websites, I decided to create custom themes from scratch that prioritize speed above everything.

The result? Each site loads in under 2 seconds on 3G, scores 90+ on PageSpeed Insights, and uses zero external dependencies.

The Architecture

Each site follows the same minimal structure with style.css at about 11KB for entire site styling, functions.php for enqueue menus and custom post types, header.php, footer.php, front-page.php for homepage with tool grid, single.php for blog posts, page.php for static pages, 404.php, search.php, and JS files at about 11KB total. Total theme size is about 25KB. Compare that to Astra at 300KB or Divi at 2MB.

Key Decisions

No jQuery

WordPress loads jQuery by default. I deregister it in functions.php so the frontend stays lean. Modern vanilla JS handles everything jQuery did with better performance and zero overhead.

No Font Awesome

Instead of loading 100KB+ of icon fonts for 5 icons, I use inline SVGs. Each icon is just a few bytes of markup directly in the HTML.

System Font Stack

No Google Fonts. The system font stack renders instantly without any network request.

CSS Custom Properties for Theming

Each site has its own color scheme via CSS variables. Changing the entire site theme means updating 5 variables in :root.

The 20 Sites

Finance Calculators:

Developer Tools:

AI Tools:

Utility and Converters:

Performance Results

Metric Custom Theme Typical WP Theme
CSS Size 11KB 200-500KB
JS Size 11KB 300KB-1MB
HTTP Requests 3-4 15-30
PageSpeed Score 90-98 40-70

AdSense Considerations

Fast sites get better AdSense approval rates and higher RPM because better user experience means lower bounce rate, faster ad loading means higher viewability, Core Web Vitals directly affect ad performance, and clean code means no policy violations from third-party scripts.

Takeaway

You do not need a premium theme or page builder. A custom WordPress theme with system fonts, CSS custom properties, vanilla JavaScript, inline SVGs, and proper caching headers will outperform any theme from ThemeForest. The entire stack is on GitHub.


If you are building tool or utility websites, this lightweight approach is the way to go. Fast loading, easy maintenance, and AdSense-friendly.

Top comments (0)