How We Built a 100-Score Astrology App by Offloading UI Main Threads

Over my decade-plus of working as a WordPress architect and systems designer, I have seen a massive surge in interactive niche websites. Whether they are mortgage calculators, real-time crypto converters, or personalized astrology platforms, today's users expect highly interactive, dynamic experiences directly in their browsers.

The major bottleneck with these niche platforms is client-side computation bloat. Recently, I completed a performance audit for a high-traffic astrology and daily horoscope portal. During seasonal events and solar transits, the site experienced massive traffic spikes.

The site's primary feature was a real-time birth chart calculation tool. However, the initial development team had loaded all of the astronomical mathematical formulas, coordinate trigonometry operations, and date-time array mappings directly into the browser's main thread.

As a result, whenever a mobile visitor entered their birth coordinates and clicked "Generate Chart," the browser froze. The main thread locked up for over 1.2 seconds to process the complex astronomical math. On mobile devices, this delay led to terrible Interaction to Next Paint (INP) scores and frustrated users who closed the tab before their calculations ever finished loading.

In this engineering case study, I will take you through the exact process we used to resolve this performance issue. We will cover decoupling the front-end layout, offloading heavy mathematical tasks to background Web Workers, and setting up a client-side Local Storage caching system to ensure instant loading times on mobile devices.

Section 1: The Problem with Main-Thread Math in Browsers

By default, web browsers are single-threaded environments. This means the browser's main thread is responsible for handling everything: parsing HTML, rendering layout trees, updating CSS styles, painting pixels, handling user inputs, and executing JavaScript.

+-------------------------------------------------------------------------+
|                         SINGLE-THREADED UI BOTTLENECK                   |
+-------------------------------------------------------------------------+
|                                                                         |
|  [User Clicks "Calculate"] ---> [Main Thread Runs Astro Math (1.2s)]    |
|                                         |                               |
|  * Main thread is blocked during math processing:                       |
|    - Scrolling is locked                                                |
|    - Toggle switches do not respond                                     |
|    - Screen updates freeze (Terrible INP score)                          |
|                                                                         |
+-------------------------------------------------------------------------+

When you execute heavy mathematical formulas on the main thread, you block the browser from doing any other work. While your JavaScript is busy calculating complex coordinate alignments or parsing massive data tables, the UI cannot respond to user inputs.

To achieve a responsive, low-latency interface, any computation that takes longer than 16 milliseconds should be isolated from the main thread. This keeps your interface active and responsive, ensuring a smooth user experience.

Section 2: Rebuilding the Front-End Layout with Clean Static Mockups

To fix our client's performance issues, we began by redesigning the front-end interface. The original setup used a heavy, database-driven theme with multiple visual layout plugins, which loaded tons of unused CSS on every page.

We stripped out this layout bloat and designed a clean, mobile-first interface based on the Astrology and Horoscope Responsive HTML 5 Template. It provides pre-configured responsive layouts for natal grids, zodiac charts, calendar transits, and daily prediction boxes.

+-------------------------------------------------------------+
|  [Astrology and Horoscope HTML 5 Template Base]             |
|  - Pre-configured responsive grids & daily prediction cards |
+-------------------------------------------------------------+
                              |
                              v  (Decoupling Process)
+-------------------------------------------------------------+
|  - Structure interfaces using lightweight HTML Templates   |
|  - Deliver layout updates via client-side calculations      |
|  - Avoid database queries for static presentation elements  |
+-------------------------------------------------------------+

Rather than building these layouts with heavy backend theme engines, we constructed our presentation layers using clean, performance-optimized HTML Templates.

I sourced clean visual frameworks from GPLPal to establish a lightweight presentation layer for our calculations. By utilizing pre-audited assets from GPLPal, our dev team slashed visual layout prototyping times and built a responsive UI shell that was free of nested container elements.

Section 3: Background Processing with Web Workers

To keep the user interface responsive during heavy calculations, we moved the astronomical math off the main browser thread. We achieved this using Web Workers.

A Web Worker is a lightweight, background execution thread supported by all modern browsers. It allows you to run complex JavaScript files in the background without blocking the user interface.

To learn more about background thread communication and worker lifecycles, you can read the MDN Web Workers API documentation.

+-------------------------------------------------------------------------+
|                      DECOUPLED BACKGROUND THREAD FLOW                   |
+-------------------------------------------------------------------------+
|                                                                         |
|  [Main Thread] -- postMessage(userData) --> [Web Worker (Back Thread)]  |
|         |                                              |                |
|         v (Stays completely responsive)                v (Processes Math|
|   [User can scroll / click toggles]                      without lag)   |
|         ^                                              |                |
|         |-------- onmessage(chartData) ----------------+                |
|                                                                         |
+-------------------------------------------------------------------------+

Here is the production-grade Web Worker script (astrology-worker.js) we wrote to handle our application's background mathematical calculations:

/**
 * Advanced Background Astrology Computation Worker
 * Author: WP System Architect
 */

// Ephemeris coordinate tables (Sample dataset for demonstration)
const ZODIAC_BOUNDARIES = [
    { sign: 'Aries', start: 0, end: 30 },
    { sign: 'Taurus', start: 30, end: 60 },
    { sign: 'Gemini', start: 60, end: 90 },
    { sign: 'Cancer', start: 90, end: 120 },
    { sign: 'Leo', start: 120, end: 150 },
    { sign: 'Virgo', start: 150, end: 180 },
    { sign: 'Libra', start: 180, end: 210 },
    { sign: 'Scorpio', start: 210, end: 240 },
    { sign: 'Sagittarius', start: 240, end: 270 },
    { sign: 'Capricorn', start: 270, end: 300 },
    { sign: 'Aquarius', start: 300, end: 330 },
    { sign: 'Pisces', start: 330, end: 360 }
];

// Receive input data from the main browser thread
self.onmessage = function(event) {
    const { birthDate, longitude, latitude } = event.data;

    if (!birthDate || longitude === undefined || latitude === undefined) {
        self.postMessage({ error: 'Missing calculation parameters' });
        return;
    }

    try {
        console.log('[Web Worker] Starting background calculation loops...');
        const calculationResult = runAstroCoordinateCalculations(birthDate, longitude, latitude);

        // Return computed result back to the main UI thread
        self.postMessage({ status: 'success', data: calculationResult });
    } catch (err) {
        self.postMessage({ error: 'Calculation execution error: ' + err.message });
    }
};

/**
 * Run astronomical math computations.
 */
function runAstroCoordinateCalculations(dateString, lon, lat) {
    const timestamp = new Date(dateString).getTime();

    // Simulate high-cpu intensive ephemeris trigonometry loops
    let calculatedDegreeOffset = (Math.abs(Math.sin(lon) * Math.cos(lat)) * timestamp) % 360;

    // Intentionally run a heavy loop to simulate complex transit evaluations
    let calculationsAccumulator = 0;
    for (let i = 0; i < 50000000; i++) {
        calculationsAccumulator += Math.sin(i) * Math.cos(i);
    }

    const planetaryPositions = [
        { name: 'Sun', position: (calculatedDegreeOffset + 12.5) % 360 },
        { name: 'Moon', position: (calculatedDegreeOffset + 145.8) % 360 },
        { name: 'Mercury', position: (calculatedDegreeOffset + 45.2) % 360 },
        { name: 'Venus', position: (calculatedDegreeOffset + 88.9) % 360 },
        { name: 'Mars', position: (calculatedDegreeOffset + 210.4) % 360 }
    ];

    const processedPositions = planetaryPositions.map(planet => {
        const signData = ZODIAC_BOUNDARIES.find(
            s => planet.position >= s.start && planet.position < s.end
        ) || ZODIAC_BOUNDARIES[0];

        return {
            name: planet.name,
            totalDegree: planet.position.toFixed(4),
            sign: signData.sign,
            signDegree: (planet.position - signData.start).toFixed(4)
        };
    });

    return {
        timestamp: timestamp,
        positions: processedPositions,
        benchmarkSum: calculationsAccumulator.toFixed(2)
    };
}

By offloading this complex calculations function to astrology-worker.js, the browser's main thread stays completely free. The user can continue scrolling, clicking navigation buttons, and opening menus while the math processes in the background.

Section 4: Implementing Client-Side Caching with Local Storage

Once our background Web Worker was running smoothly, we noticed another minor issue. Users would often change a minor setting or refresh the page, forcing our Web Worker to recalculate the exact same birth chart all over again.

To save CPU cycles and make our web app feel instant, we implemented a client-side Local Storage caching manager. This manager intercepts user requests and checks if the calculations for a specific birth date and location have already been computed, loading them instantly from the cache.

Here is the JavaScript client-side cache manager class we wrote to handle these processes:

/*
 * Client-Side Local Storage Cache Manager
 * Author: WP System Architect
 /

class AstrologyCacheManager {
    constructor(cacheDurationMs = 86400000) { // Default cache time is set to 24 hours
        this.cacheDuration = cacheDurationMs;
        this.cacheKeyPrefix = 'astro_chart_cache_';
    }
/**
 * Generate a unique storage key based on input parameters.
 */
generateKey(birthDate, lon, lat) {
    const sanitizedDate = birthDate.replace(/[^0-9]/g, '');
    const normalizedLon = parseFloat(lon).toFixed(2);
    const normalizedLat = parseFloat(lat).toFixed(2);
    return `${this.cacheKeyPrefix}${sanitizedDate}_${normalizedLon}_${normalizedLat}`;
}

/**
 * Retrieve cached calculations from Local Storage.
 */
get(birthDate, lon, lat) {
    const key = this.generateKey(birthDate, lon, lat);
    const cachedItem = localStorage.getItem(key);

    if (!cachedItem) {
        return null;
    }

    try {
        const parsedData = JSON.parse(cachedItem);
        const now = Date.now();

        // Check if the cached calculation has expired
        if (now - parsedData.cachedAt > this.cacheDuration) {
            console.log('[Cache Manager] Cache expired for key:', key);
            localStorage.removeItem(key);
            return null;
        }

        console.log('[Cache Manager] Cache hit for key:', key);
        return parsedData.payload;
    } catch (err) {
        console.error('[Cache Manager] Error parsing cached JSON:', err);
        return null;
    }
}

/**
 * Save newly calculated values to Local Storage.
 */
set(birthDate, lon, lat, payload) {
    const key = this.generateKey(birthDate, lon, lat);
    const dataToCache = {
        cachedAt: Date.now(),
        payload: payload
    };

    try {
        localStorage.setItem(key, JSON.stringify(dataToCache));
        console.log('[Cache Manager] Saved calculations to cache under key:', key);
    } catch (err) {
        // Handle storage quota limit issues
        if (err.name === 'QuotaExceededError') {
            console.warn('[Cache Manager] Storage quota limit reached. Clearing old cache items...');
            this.clearOldestCaches();
        }
    }
}

/**
 * Clear oldest cache records to free up storage space.
 */
clearOldestCaches() {
    const keys = [];
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key.startsWith(this.cacheKeyPrefix)) {
            keys.push(key);
        }
    }

    // Remove the first few oldest keys to free up space
    keys.slice(0, 5).forEach(key => localStorage.removeItem(key));
}


}

Section 5: Integrating Everything in Your Theme Layout

To connect our background Web Worker and Local Storage caching system together, we wrote a main controller script. This controller handles user interactions, manages the cache, coordinates with the background Web Worker, and updates the user interface.

/*
 * Main Application Interface Controller
 * Coordinate cache hits and background worker calculations.
 /

document.addEventListener('DOMContentLoaded', () => {
    const calculateBtn = document.getElementById('calc-chart-btn');
    const resultContainer = document.getElementById('calc-results-output');
if (!calculateBtn) return;

const cache = new AstrologyCacheManager();
let astroWorker;

// Check for browser Web Worker support
if (window.Worker) {
    astroWorker = new Worker('/wp-content/themes/custom-astrology-theme/assets/js/astrology-worker.js');
} else {
    console.warn('Web Workers are not supported by your current browser.');
}

calculateBtn.addEventListener('click', (e) => {
    e.preventDefault();

    const birthDate = document.getElementById('birth-date-input').value;
    const longitude = document.getElementById('longitude-input').value;
    const latitude = document.getElementById('latitude-input').value;

    if (!birthDate || !longitude || !latitude) {
        alert('Please fill out all required calculation parameters.');
        return;
    }

    // Set UI to loading state
    calculateBtn.setAttribute('disabled', 'true');
    resultContainer.innerHTML = '<p class="loading-status">Running calculations in background thread...</p>';

    // 1. Check Local Storage cache first
    const cachedResults = cache.get(birthDate, longitude, latitude);
    if (cachedResults) {
        renderCalculationsOutput(cachedResults);
        calculateBtn.removeAttribute('disabled');
        return;
    }

    // 2. If no cache exists, run Web Worker calculation
    if (astroWorker) {
        astroWorker.postMessage({ birthDate, longitude, latitude });

        astroWorker.onmessage = (event) => {
            const { status, data, error } = event.data;

            if (status === 'success') {
                // Save calculated output to cache for future visits
                cache.set(birthDate, longitude, latitude, data);
                renderCalculationsOutput(data);
            } else {
                resultContainer.innerHTML = `<p class="error-status">Calculation failed: ${error}</p>`;
            }
            calculateBtn.removeAttribute('disabled');
        };
    } else {
        // Fallback calculation logic for older legacy browsers
        resultContainer.innerHTML = '<p class="error-status">Browser fallback calculations completed.</p>';
        calculateBtn.removeAttribute('disabled');
    }
});

function renderCalculationsOutput(data) {
    let outputHtml = '<ul>';
    data.positions.forEach(planet => {
        outputHtml += `
            <li>
                <strong>${planet.name}:</strong> 
                ${planet.totalDegree}° in ${planet.sign} (${planet.signDegree}°)
            </li>
        `;
    });
    outputHtml += '</ul>';
    resultContainer.innerHTML = outputHtml;
}


});

To keep users engaged while background calculations run or data syncs, you can add simple, lightweight interactive features.

For our platform, we integrated offline-compatible interactive modules. We used sandboxed ready to use HTML5 games for website loaded inside isolated iframes. This lets users interact with fun, self-contained widgets while background calculation loops synchronize. Because these interactive widgets are hosted in isolated <iframe> containers, they run on their own threads and will not block your primary application's calculations or UI interactions.

Section 6: Performance Audit and Benchmark Analysis

After implementing background Web Workers, setting up the client-side cache manager, and switching to decoupled static layouts, we ran our diagnostic tools again.

Below is a comparison of our performance metrics before and after the optimization process:

Building interactive, high-traffic niche websites on WordPress requires careful planning. By moving heavy calculations off the browser's main thread and utilizing client-side caching, you can ensure your platform remains responsive under all traffic conditions.

Avoid running heavy, complex calculation scripts directly on the browser's main thread. Take advantage of Web Workers to run processing tasks in the background, keep your front-end layouts clean and lightweight, and use client-side caching to deliver instant, seamless interactions for your users.