Every speed issue on the old build was inspected and fixed one by one — not patched over. These are the real Google PageSpeed Insights reports for SpeedCharge 2.0, mobile and desktop.
Mobile Performance
50s
Before
98
After
The old build shipped oversized imagery and render-blocking assets — mobile took the hardest hit. Rebuilt to 98.
Desktop Performance
60s
Before
98
After
Desktop bandwidth was hiding the problem, not solving it. Same rebuild, same result: 98.
SEO
Partial
Before
100
After
Complete metadata, canonicals, structured data and a self-updating sitemap, all driven from the admin panel.
Best Practices
Mixed
Before
100
After
Modern image formats, correct aspect ratios, secure headers and zero console errors.
Accessibility
Low contrast
Before
93
After
Moving to a light, high-contrast palette fixed the contrast failures the dark theme never could.
Mobile98 Performance93 Accessibility100 Best Practices100 SEO
Google PageSpeed Insights — Mobile · https://www.speedcharge.in/
Desktop98 Performance93 Accessibility100 Best Practices100 SEO
Google PageSpeed Insights — Desktop · https://www.speedcharge.in/
UI Evolution
Before vs After
The same brand, rebuilt from scratch. On the left, the original dark, image-heavy build that took its time on a first load. On the right, the redesign — lighter, calmer, and scoring 98 on both mobile and desktop without losing a single feature.
BeforeVersion 1 — dark theme, 50s mobile PageSpeed
v1
AfterVersion 2 — premium clean UI, 98 PageSpeed
v2 — Current
100% original design — both versions
No templates, no UI kits. The original launch and the full redesign were both conceived and built from scratch by Mohd Saif — demonstrating a complete design-to-code ownership cycle.
Optimization Log
How the 98 Was Actually Built
No single trick moves a site from the 50s to 98. Each of these was a separate diagnosis and a separate fix, measured before and after.
01
Treated every Lighthouse diagnostic as its own ticket
Rather than chasing one number, I profiled the old site and turned every opportunity and diagnostic into a separate fix — LCP element, unused JavaScript, render-blocking CSS, layout shift, cache policy, image delivery — measuring before and after each time. The 98 is the sum of a dozen deliberate fixes, not one lucky change.
02
Rebuilt the entire image pipeline
The v1 site was image-heavy and that was the single largest cost. Every asset was re-encoded to AVIF and WebP with fallbacks, served through responsive srcset breakpoints so phones never download desktop-sized files, given explicit width and height to eliminate layout shift, and lazy-loaded below the fold. Only the true LCP image is preloaded with priority — everything else waits its turn.
03
Removed the JavaScript nobody was using
Route-level code splitting plus dynamic imports for the heavy interactive pieces — maps, calculators, editors — so the homepage stopped paying for features it never renders. Unused dependencies were deleted outright rather than worked around, and third-party scripts were deferred off the critical path.
04
Fixed the font strategy
Self-hosted, subsetted font files replaced remote font requests. Only the weights actually used are shipped, the LCP typeface is preloaded, and font-display: swap keeps text visible while fonts load — no invisible text, no late reflow when the typeface arrives.
05
Rewrote the critical render path
SCSS was restructured into modular, route-scoped partials so each page ships only the styles it needs. Critical CSS is inlined, the rest is deferred, and render-blocking requests were cut to the minimum required to paint the first screen.
06
Made the animation layer effectively free
The custom cursor splash — designed and coded from scratch, not a library — and every scroll interaction were rebuilt on transform and opacity alone, driven by requestAnimationFrame and IntersectionObserver instead of scroll listeners. Motion scales down automatically on coarse-pointer devices and fully respects prefers-reduced-motion: premium feel, no main-thread cost.
07
Cut API response times at the database
MongoDB indexes were added on every field the application actually filters and sorts by, responses use lean projections that return only the fields the UI renders, and N+1 request patterns were collapsed into single aggregation pipelines. Express serves compressed payloads behind cache headers, so repeat reads are answered without touching the database at all.
08
Cached and delivered content properly
Immutable long-lived cache headers on hashed static assets, CDN edge delivery in front of the app, and incremental regeneration for content pages — so blog posts, job listings and city pages stay fully editable from the admin panel without paying a server-render cost on every request.
09
Designed the new UI to be light by default
The redesign was itself a performance decision. Depth now comes from typography, spacing and soft elevation instead of full-bleed photography and heavy gradients — which stripped megabytes of decorative media out of first load while making the brand read as more premium, not less.
Inside the Platform
Everything Running Behind the Website
The public site is one half of the build. The other half is a complete custom admin platform — designed, engineered and secured from scratch.
Command-Center Admin Panel
One custom-built control room for the whole platform — no off-the-shelf CMS, no admin template.
Built from scratch in Next.js and TypeScript: the layout shell, navigation, permission gates, tables, forms and modals are all custom components.
Every public surface of speedcharge.in — content, jobs, SEO, city pages, media — is editable without touching code or waiting for a deploy.
Optimistic updates and skeleton states keep the panel feeling instant while requests confirm in the background.
Shares its design language with the public site, so the team works inside the same premium interface their customers see.
Custom Authorization & Role-Based Access
Hand-written auth — not a plug-in — enforced at the API before the UI ever renders.
Custom JWT authentication with a protected refresh flow, secure token rotation and hardened session handling.
Role-based access control across Super Admin, Admin, Editor, Author and HR — each role gets a different panel and a different set of callable endpoints.
Authorization middleware validates role and granular permission on every route: hiding a button in the UI is never treated as the security boundary.
Unauthorised modules are stripped from navigation, blocked at the route and rejected at the API — three layers, one source of truth.
Team & Role Management
Onboard, promote and revoke access without a developer.
Invite team members, assign roles and adjust individual permissions directly from the panel.
Per-member activity visibility, so it is always clear who published, edited or archived what.
Instant revocation — removing access cuts API privileges immediately, not at next login.
Scales from a solo operator to a full content, HR and marketing team without a schema change.
Blog Panel with Writer & Author Profiles
A publishing system with real editorial workflow and genuine author authority.
Rich-text editor with images, tables, callouts and FAQ blocks — full formatting control without touching raw HTML.
Draft, schedule, publish and archive workflow, with per-post SEO fields for meta title, description, canonical URL and social preview.
Dedicated writer and author profile pages carrying bio, photo, role and social links, each with an archive page listing everything that author has written.
Author attribution feeds Person and Article structured data, strengthening topical authority and E-E-A-T signals on every post.
Categories, tags, related posts and automatic internal linking keep readers moving deeper into the site.
Careers Portal & Applicant Tracking
Post a job from the panel, receive applications, and read the CV without downloading a thing.
Job posts created in the admin panel publish straight to live, SEO-ready career pages on the website.
Public application form with resume upload, validation and confirmation, built mobile-first for applicants applying from a phone.
In-browser CV and resume preview inside the admin panel — HR opens an application and reads the document inline, with no downloads and no local file clutter.
Applications organised by role and date with status tracking, so the hiring pipeline lives in the same place as the job posting.
Instant notification the moment an application lands.
SEO Control Center
Every ranking lever the marketing team needs, exposed safely inside the panel.
Per-page control of meta title, meta description, canonical URL, Open Graph and Twitter cards, and index/noindex.
Structured data managed per template — Organization, Article, Person, JobPosting, FAQ and Breadcrumb schema generated automatically.
Sitemap and robots directives regenerate themselves as pages are published, unpublished or renamed, so stale URLs never linger.
Redirect management, so a URL change never costs the ranking that URL had earned.
City-Wise Page Automation
Programmatic SEO: add a city once, get a complete optimized landing page.
Define a city in the admin panel and the platform generates a full localized landing page from the template.
City-specific content, stations, copy and metadata are injected per page, so every page is genuinely distinct rather than duplicated.
Bulk publish, unpublish and update city pages, with sitemap entries and internal links wired automatically.
Targets high-intent local search — 'EV charging station in {city}' — at a scale nobody could maintain by hand.
Analytics & Lead Intelligence Dashboard
What is happening on the site, who is asking about it, and which pages actually convert.
Unified lead tracking across franchise, partner, contact and career enquiries in a single pipeline.
Most-clicked pages and engagement breakdowns showing exactly where attention lands.
Traffic and conversion trends over time, plus per-city performance to guide where the next station or campaign should go.
Real-time alerts when a new lead arrives, so response time is measured in seconds instead of days.
Enterprise Data Grid
The workhorse view behind leads, applications, posts and city pages.
Server-side pagination, sorting and multi-field filtering — the browser never loads more rows than it draws.
Column visibility controls, saved filters and quick search across large datasets.
Bulk actions and CSV export for anything the team needs to work on outside the panel.
Stays fast at thousands of records, and stays usable all the way down to a phone screen.
01. Web Development Problems Solved
SpeedCharge 1.0 was working, but it was carrying two problems that were getting more expensive every month. The first was speed. The dark theme leaned on large full-bleed photography for atmosphere, and each new page added more of it — mobile PageSpeed sat in the 50s, desktop in the 60s, and first-time visitors on mobile data regularly waited through a blank or half-painted screen before anything useful appeared. In a market where most traffic arrives from a phone via search, that was costing real enquiries. The second problem was operational: too much of the site could only be changed by a developer. Publishing a blog post, opening a job role, adjusting a page's meta description or launching a new city page all needed code and a deploy, which meant the content and hiring pipelines moved at developer speed rather than business speed. SpeedCharge 2.0 solves both at once — a design and performance rebuild that takes both mobile and desktop to 98 without dropping a single feature, and a custom admin platform that hands the team control of content, jobs, SEO and city pages with role-based permissions so that control can be delegated safely.
02. Technical Architecture & Decisions
Next.js with TypeScript remained the foundation, but the rendering strategy was rethought: content-driven pages — blogs, jobs, city landing pages — use incremental regeneration so the team can publish from the admin panel and see changes live, without paying a server-render cost on every visit. SCSS was kept over a utility framework deliberately. The design system needed shared tokens for the new light palette, spacing scale and elevation, and route-scoped partials so a page only ever ships its own styles — a compiled, modular stylesheet gives tighter control over the critical CSS path than utility classes generated across the whole app. The custom cursor splash was written by hand rather than pulled from a library, built purely on transform and opacity inside a requestAnimationFrame loop, so the signature interaction costs nothing measurable and disables itself cleanly on touch devices and under prefers-reduced-motion.
On the backend, Node.js and Express serve a versioned REST API deployed independently of the frontend, so the two scale separately and the admin platform can evolve without redeploying the public site. Authentication and authorization were written from scratch instead of adopting a drop-in provider — the role model needed genuine granularity across Super Admin, Admin, Editor, Author and HR, and every route validates both role and specific permission server-side, with the UI treated purely as a convenience layer rather than a security boundary. MongoDB was chosen for the flexible document model, since leads, applications, posts, jobs and city pages all carry different shapes; response time was then engineered rather than assumed, with indexes on every queried and sorted field, lean projections returning only what the UI renders, and aggregation pipelines replacing N+1 patterns. Images run through an optimization and CDN layer with AVIF and WebP output and responsive sizing, and fonts are self-hosted and subsetted — the two decisions that, more than any other, moved the mobile score out of the 50s and into the 90s.
The Development Challenge
SpeedCharge 2.0 is the complete second-generation rebuild of speedcharge.in — the same EV charging brand, rebuilt from the ground up as a faster, lighter, and far more capable platform. Version 1 launched with a dark, high-contrast red-and-black identity and a large amount of full-bleed photography. It looked striking, but it was heavy: first-time visitors waited, mobile PageSpeed sat in the 50s, desktop in the 60s, and every additional image made it worse. Version 2 answers that with a full design migration and a full performance rebuild, both done from scratch.
The design moved from dark to a premium, smooth, clean UI. Instead of relying on heavy imagery for atmosphere, the new interface builds depth through typography, generous whitespace, soft elevation and restrained use of the SpeedCharge red as an accent. Motion was rebuilt to match — including a custom cursor splash interaction designed and coded by hand rather than pulled from a library. The result reads as calmer and more premium, loads a fraction of the weight, and finally passes contrast requirements the dark theme structurally could not.
The performance work was methodical rather than cosmetic. Every Lighthouse opportunity and diagnostic on the old site was inspected and fixed individually: the image pipeline was rebuilt around AVIF and WebP with responsive sizing and explicit dimensions, unused JavaScript was removed and the rest split by route, fonts were self-hosted and subsetted, the critical CSS path was rewritten, and caching and CDN delivery were configured properly. On the backend, MongoDB indexes, lean projections and aggregation pipelines replaced slow, over-fetching queries, cutting API response times. Google PageSpeed Insights now reports 98 performance on both mobile and desktop, with 100 SEO, 100 best practices and 93 accessibility — verified reports included on this page.
Behind the public site sits the part most visitors never see: a complete custom admin platform. It runs custom JWT authentication with genuine role-based authorization enforced at the API, team and role management, a blog panel with writer and author profile pages, a careers portal where jobs are published to the live site and applicants' CVs are previewed in-browser, an SEO control center covering metadata and structured data per page, city-wise page automation for programmatic local SEO, an enterprise data grid, and a dashboard tracking leads, traffic, conversions and most-clicked pages.
Every layer — product design, UI, frontend, REST API, database schema, authorization model, admin tooling, image and font optimization, and technical SEO — was designed and engineered solo by Mohd Saif.
Engineering Strategy
Sole designer and engineer of the 2.0 rebuild — design direction, UI, frontend, backend, database, admin platform, performance and SEO, all delivered by one developer.
Migrated the entire visual identity from a heavy dark theme to a premium, smooth, clean UI, designed from scratch with no templates or UI kits involved.
Rebuilt the frontend in Next.js and TypeScript with a modular SCSS architecture — route-scoped partials, shared tokens and mixins keeping the design system consistent and the CSS payload small.
Designed and coded a custom cursor splash interaction by hand, built on transform-only animation so it costs nothing on the main thread and degrades gracefully on touch devices.
Diagnosed and fixed every speed issue on the old build individually, taking mobile from the 50s and desktop from the 60s to a verified 98 on Google PageSpeed Insights.
Rebuilt the image pipeline end to end: AVIF/WebP encoding, responsive srcset delivery, explicit dimensions to eliminate CLS, priority loading for the LCP image only.
Engineered the Node.js and Express REST API with custom JWT authentication and role-based authorization middleware enforced on every route.
Modelled the MongoDB schemas and cut API response times with targeted indexes, lean projections and aggregation pipelines replacing N+1 query patterns.
Built the complete admin platform: dashboard, data grid, blog CMS, author profiles, careers portal with in-browser CV preview, SEO controls, city-page automation and team management.
Implemented the SEO layer — per-page metadata control, structured data, self-updating sitemap, canonical handling and redirect management, all editable by the team from the panel.
Made the platform fully responsive across phone, tablet, laptop and large desktop, with typography, spacing and interaction tuned per breakpoint rather than merely scaled down.
Key Outcomes
Mobile PageSpeed rebuilt from the 50s to 98, and desktop from the 60s to 98 — verified Google PageSpeed Insights reports for both are published on this page.
100 SEO, 100 best practices and 93 accessibility alongside the 98 performance score, on a platform that lost none of its features in the process.
Eliminated the slow first load that defined version 1: the site now paints fast on a mid-range phone over mobile data, not just on desktop broadband.
Replaced the dark, image-heavy identity with a premium clean UI that raises brand perception while shipping a fraction of the page weight.
Gave the SpeedCharge team full operational independence — blogs, jobs, city pages, SEO metadata and team roles are all managed in the panel, with no developer in the loop.
Turned local search into a scalable channel through city-wise page automation, where each new city becomes a fully optimized landing page in minutes.
Cut API response times through database-level optimization, making both the public site and the admin panel feel immediate.
Demonstrated end-to-end solo capability: design, frontend, backend, database, authorization, admin tooling, performance engineering and technical SEO in a single production platform.
SpeedCharge 2.0 was designed and developed entirely by Mohd Saif, a full-stack developer based in Delhi, India. The redesign, the frontend, the Node.js and Express backend, the MongoDB data model, the custom admin platform and the performance and SEO engineering were all delivered solo, without a team or an agency.
A comprehensive on-demand platform for booking specialized manpower and home services. Ranked #1 on Google, offering everything from domestic repairs to international corporate recruitment.
