Forem: Mike Kipruto

High-Performance WordPress Development: Architectural Lessons from the mike.co.ke Rebrand

Mike Kipruto — Fri, 08 May 2026 06:59:15 +0000

High-Performance WordPress Development: Architectural Lessons from the mike.co.ke Rebrand

WordPress has a performance problem, and we refused to be part of it.

During the recent rebranding of mike.co.ke, we executed a ruthless technical audit of our custom plugins and themes. We discovered the silent killers of site speed: heavy PHP loops, bloated 3rd-party JavaScript libraries, and unoptimized DOM manipulation.

Instead of slapping a caching plugin on top of bad code, we treated performance as a strict architectural requirement. We rebuilt our core tools—including our custom analytics dashboard—from the ground up. The results were massive:

The Rebrand Results at a Glance

Metric	Before (Standard Architecture)	After (Zero-Bloat Architecture)	Improvement
JS Bundle Size	~240KB	~12KB	95% Reduction
Database TTFB	600ms (Heavy SQL Grouping)	45ms (Raw JSON)	92% Faster
Client Memory	500MB+ (Leaking over time)	Stable ~40MB	Eliminated Leaks

(Note: Dropping our JS payload by 95% wasn't magic. We simply ripped out heavy dependencies like Chart.js and Moment.js, replacing them entirely with native browser APIs.)

Here is a technical breakdown of the performance-first strategies we implemented, complete with actionable code for your own WordPress projects.

1. Escaping the 3rd-Party Library Trap

The most common mistake in modern development is loading massive external libraries for localized UI problems. Enqueuing libraries like Slick.js or Chart.js adds parsing time, render-blocking latency, and plugin conflicts.

Native SVG vs. Canvas Libraries

In our legacy plugin, we loaded a 200KB charting library just to draw simple trend lines. By utilizing the browser's Native SVG API, we reduced our external graphing dependency to 0 bytes.

When data spikes massively, standard graph curves "oversteer" like a race car taking a corner too fast, creating ugly loops. To fix this natively, we implemented a concise Monotonic Bézier algorithm. It mathematically forces the curve to stay strictly between data points—no overshoots, no dips.

// AFTER: Zero-dependency SVG generation using Monotonic Bezier
const generateSmoothPath = (points) => {
    if (points.length < 2) return "";
    let d = `M ${points[0].x},${points[0].y}`;

    for (let i = 0; i < points.length - 1; i++) {
        const p0 = points[i], p1 = points[i + 1];

        // The midX control point mathematically guarantees ZERO vertical overshoot
        const midX = p0.x + (p1.x - p0.x) / 2;
        d += ` C ${midX},${p0.y} ${midX},${p1.y} ${p1.x},${p1.y}`;
    }
    return d;
};

The result is an ultra-smooth line generated entirely by the browser's GPU in microseconds.

2. Offloading Server-Side PHP to the Client GPU

WordPress developers often force MySQL to aggregate data before sending it to the client. Running massive GROUP BY queries on 50,000+ row log tables on every page load destroys server response times.

Client-Side Array Chunking

Our legacy SQL query took 600ms to execute. By shifting this logic to the client, our raw query takes just 45ms. We ship a lightweight JSON payload and let the client’s GPU/CPU do the heavy lifting via native JavaScript.

// If we have over 90 days of data, down-sample natively on the client
if (activeDataset.length > 90) {
    const downsampled = [];

    // Chunk the array into 7-day blocks
    for (let i = 0; i < activeDataset.length; i += 7) {
        const chunk = activeDataset.slice(i, i + 7);
        const aggregatedValue = chunk.reduce((sum, item) => sum + Number(item.value), 0);
        downsampled.push({ date: chunk[0].date, value: aggregatedValue });
    }
    activeDataset = downsampled;
}

Client-side chunking keeps the UI highly responsive while drastically lowering server compute costs.

3. Eradicating DOM Thrashing and Memory Leaks

If you build dynamic interfaces within the WordPress admin, memory management is critical. A common anti-pattern is constantly destroying and recreating HTML elements (e.g., element.innerHTML = newTable). This aggressive "DOM thrashing" forces layout recalculations and triggers garbage collection spikes.

Hardware-Accelerated Interactions

Our old dashboard leaked RAM, eventually hitting 500MB+ in prolonged sessions. By preventing node destruction, memory now idles at a stable ~40MB.

Never destroy elements for interactive states like tooltips. Render a single hidden <div> once, and move it using CSS absolute positioning.

// BAD: Thrashing the DOM on every mouse move
svg.onmousemove = (e) => {
    container.innerHTML += `<div class="tooltip" style="left:${e.clientX}px">Data</div>`;
};

// GOOD: Hardware-accelerated movement of a single, persistent node
const tooltipNode = document.getElementById('persistent-tooltip');

svg.onmousemove = (e) => {
    tooltipNode.style.display = 'block';

    // Modifying absolute coordinates triggers a lightweight GPU composite update
    tooltipNode.style.left = `${e.clientX + 15}px`;
    tooltipNode.style.top = `${e.clientY - 10}px`;
    tooltipNode.innerText = getDynamicData(e.clientX);
};

4. Modern CSS Architecture for Layout Stability

Visual bugs and Cumulative Layout Shifts (CLS) occur when developers rely on fragile CSS hacks—such as pairing justify-content: space-between with margin-left: auto. When dynamic content hydrates, these containers often collapse.

Strict Flex Gaps

Stop relying on the browser to guess your spacing. Enforce strict gap parameters on flex containers to mathematically guarantee safe spacing, eliminating layout jitter during AJAX requests.

/* Fragile: Prone to collapsing when content hydrates */
.admin-header {
    display: flex;
    justify-content: space-between;
}
.admin-header .legend { margin-left: auto; }

/* Bulletproof: Mathematically guaranteed layout stability */
.admin-header {
    display: flex;
    align-items: center;
    gap: 24px; 
}

[!TIP]

Key Takeaways for High-Performance WordPress Development

Zero-Dependency UI: Stop loading 200KB libraries for simple UI features. Use Vanilla JS and native browser APIs (like SVG) wherever possible.

Client-Side Aggregation: Offload heavy data grouping from MySQL/PHP to the client's GPU using JavaScript array methods to drastically reduce TTFB.

Hardware-Accelerated DOM: Never destroy and recreate DOM nodes for interactive states. Use persistent nodes and CSS absolute positioning (style.left/style.top) to trigger GPU composite updates.

Bulletproof CSS: Prevent Cumulative Layout Shifts (CLS) by abandoning fragile auto-margins in favor of strict gap spacing in Flexbox and Grid.

Conclusion

Building for WordPress means taking responsibility for both the server and the browser. High performance isn't a caching plugin you install right before launch—it is a deliberate, line-by-line architectural choice.

When you respect the browser and abandon bloat, you can build WordPress tools that feel as instantaneous and premium as custom enterprise software.

Offline Qwen3 AI Coding Setup for VS Code – No Internet, No Cost, Full Privacy

Mike Kipruto — Thu, 07 May 2026 19:16:54 +0000

Run a powerful, private AI coding assistant on your laptop — completely offline.

No API keys. No monthly fees. No telemetry. Your code never leaves your machine.

What You'll Get

Intelligent code generation, refactoring, debugging, and explanation
Support for Python, JavaScript, TypeScript, Go, Rust, Java, C++, PHP, SQL, and more
Works on airplanes, remote sites, air-gapped networks, or when internet is down
Full privacy and zero cost after initial setup

Prerequisites

Requirement	Minimum	Recommended
Operating System	macOS 12+, Windows 10/11, Linux	Latest macOS / Windows 11
RAM	8 GB	16 GB+
Disk Space	6 GB	10 GB+
VS Code	Latest version	Latest version
GPU (Optional)	None	NVIDIA 6GB+ / Apple Silicon

Step-by-Step Setup

Step 1: Install Ollama

macOS / Linux

curl -fsSL https://ollama.com/install.sh | sh

Windows: Download the installer from ollama.com/download

Verify:

ollama --version

Step 2: Download Qwen3 8B Model

ollama pull qwen3:8b

(≈5.2 GB – This is the only step that needs internet)

Step 3: Install Continue.dev in VS Code

Open VS Code
Go to Extensions (Ctrl/Cmd + Shift + X)
Search for "Continue" (by Continue Dev, Inc. — blue spiral icon)
Install it

Step 4: Configure Continue for Local Qwen3

Press Ctrl/Cmd + Shift + P → search "Continue: Open Config File"

Replace everything with:

{
  "models": [
    {
      "title": "Qwen3-8B (Code)",
      "provider": "ollama",
      "model": "qwen3:8b",
      "contextLength": 32768,
      "completionOptions": {
        "temperature": 0.2,
        "maxTokens": 4096
      }
    }
  ],
  "tabAutocompleteModel": {
    "title": "Qwen3-8B Autocomplete",
    "provider": "ollama",
    "model": "qwen3:8b"
  }
}

Save the file.

Step 5: Test It Offline

Open Continue sidebar (Ctrl/Cmd + Shift + L)
Select Qwen3-8B (Code)
Turn off your internet completely
Type in the chat: "Write a fast Python function to validate email addresses"

If it responds, your offline setup is working perfectly.

Useful Daily Workflows

Code Review: @Current File + "Review this function for bugs, security issues and performance"
Refactoring: Highlight code → Ctrl/Cmd + Shift + I → "Refactor with proper error handling and type hints"
Test Generation: "Write comprehensive pytest tests covering edge cases"
Faster responses: Set temperature to 0.1
Deeper analysis: Type /think in the chat

Hardware Performance Guide

Hardware	Tokens/sec	Experience
Apple M1/M2 (16GB)	18–28	Very Good
NVIDIA RTX 3060 / 4060	25–45	Excellent
NVIDIA RTX 4090	50–80+	Near Instant
CPU Only (8-core)	2–6	Usable

Troubleshooting

Issue	Solution
Model not appearing	Save config → Reload VS Code
Slow generation	Check GPU usage (`nvidia-smi`)
Ollama not running	Run `ollama serve` in terminal
Connection refused	Restart Ollama desktop app

Why This Setup Matters in 2026

Complete privacy for client or proprietary code
Zero recurring costs
True offline capability anywhere
Full control over your AI tools

This is currently one of the strongest local AI coding setups available.

Originally published on mike.co.ke

Follow me for more practical WordPress, AI, and development guides.

WP CLI Commands

Mike Kipruto — Wed, 17 May 2023 12:40:50 +0000

This is a list of the WP CLI commands. As I test it out, I am updating the lists here.

WP Core

The wp core command helps to download, install, update, and manage WordPress installation.

Delete the core updater lock option

wp option delete core_updater.lock

Update WordPress to Specific version forcefully

wp core update --version= --force

For example : wp core update --version=6.1.1 --force, this will update to the WP 6.1.1

Display the WordPress version

wp core version

Checks for WordPress updates via Version Check API.

wp core check-update

Update the WordPress database

wp core update-db

wp theme

The wp theme helps in managing themes, including installs, activations, and updates.

Update multiple default themes from wordpress.org

wp theme update twentynineteen twentytwenty twentytwentyone twentytwentytwo twentytwentythree

Delete older default themes

wp theme delete twentysixteen twentyseventeen

Update all themes

wp theme update --all

Install the new default theme

wp theme install twentytwentyone

wp theme search

The wp theme search searches the WordPress.org theme directory.

Example

wp theme search photo --per-page=6

wp theme get

The wp theme get Gets details about a theme.

Example

wp theme get twentytwentythree --fields=name,title,version

Reference:

WP CLI Commands