In the digital world of ecommerce, milliseconds can mean millions. Load times, layout stability, and interactivity don’t just affect user experience, they directly influence conversions, revenue, and search visibility. That's the exact problem EcomVitals was built to solve.

This project isn't just another performance testing tool. It’s a business intelligence engine, custom-built for ecommerce sites. EcomVitals translates raw technical performance data into actionable insights that directly tie back to what really matters, conversions, revenue, SEO rankings, and user trust.

EcomVitals is a modern web application that audits ecommerce websites using real-world performance metrics, like Core Web Vitals, and turns them into tailored recommendations with business projections. From identifying layout shifts caused by specific DOM elements to predicting revenue uplift from speed improvements, this tool brings technical and business worlds together.

Where traditional tools end with scores and graphs, EcomVitals continues the journey by offering:

• Concrete, prioritized action plans
• Conversion and revenue impact projections
• Detailed root cause analysis
• Industry-specific benchmarks
• Competitive performance comparisons

The frontend is built with React and TypeScript, using a component-based architecture with Tailwind CSS and shadcn/ui for styling. TanStack Query ensures efficient data fetching and caching.

The backend leverages Node.js with Express to interface with Puppeteer and run Lighthouse audits. Data is processed, stored, and compared across sessions using a modular, scalable storage architecture.

Each analysis is stored in a structured format enabling historical comparisons. The recommendation engine uses an impact-to-effort scoring system to prioritize fixes. DOM elements and third-party scripts are analyzed for their load time contribution and blocking behavior. Competitive comparisons are powered by asynchronous audits and benchmark databases.

Users enter a URL, which triggers a Lighthouse audit through Puppeteer. Metrics like LCP, CLS, and FID are gathered, and individual elements are traced through their CSS selectors. A custom algorithm assesses performance impact and generates projections on revenue and conversions. Results are presented in a dynamic dashboard with drill-down capabilities.

1. Submit URL

2. View audit results and visualizations

3. Explore each issue and affected elements

4. Review impact scores and effort levels

5. Implement recommended fixes

6. Re-run audits and compare improvements

Imagine an online fashion store with a CLS of 0.42 caused by banner ads. EcomVitals identifies the banner element and suggests deferring its load. The tool estimates a potential 3.5% conversion lift. After implementation, the site sees improved rankings and lower bounce rates, generating an estimated $180,000 in extra revenue annually.

Challenges included handling asynchronous audits, managing Puppeteer failures, and designing a clean UI for dense data. I resolved these by implementing retry logic, separating the backend audit queue, and building reusable frontend components with progressive disclosure.

• Core Web Vitals breakdown and improvement guidance
• Element-level analysis with CSS selector insights
• Third-party script impact scoring
• Revenue and conversion projection models
• Competitor benchmarking engine

Unlike PageSpeed Insights or WebPageTest, EcomVitals tailors insights to ecommerce businesses. It adds value with business projections, prioritization scoring, and a comparative analysis engine that positions a site against its competition in real terms, not just scores.

Built with scalable architecture, robust API handling, modular visual components, and strict TypeScript typing. Accessibility and mobile-first best practices were followed throughout. Each module was tested with mocked audits and live production checks.

• Historical performance timelines and reports
• Team collaboration dashboard
• Code snippet suggestions for common fixes
• Automated A/B testing integration

EcomVitals bridges the gap between tech and business. It’s a developer’s toolkit and a marketer’s playbook in one. From frontend polish to backend rigor, this project demonstrates my ability to build with clarity, purpose, and measurable impact.