Building a Faster Clone of the OVH Manager

January 2023

  • A Journey into Legacy Code and Modern Solutions

Looking good ? It should be near pixel-similar, loading time less


In an effort to address performance issues plaguing the OVH Manager, a project was initiated to identify and rectify slowdown bottlenecks. This endeavor focused on rebuilding key functionalities to achieve significant improvements in loading times and user experience on a one-night project time window.

The OVH manager, a tool for managing various web services, had been my bane for too long. I jokingly told a friend, “I could make this faster,” and with that casual challenge, the project was born. Armed with a day (or rather night) of determination, I set out to create a simplified clone, aiming to outpace the sluggish dashboard

Identifying Legacy Constraints

Upon analysis, it became evident that the OVH Manager’s reliance on legacy frameworks such as React and Angular was a significant contributor to its slow performance. The convoluted structure of CSS and non-scoped styles further compounded the issue, necessitating a strategic overhaul of the codebase.

As I delved into the project, it became apparent that the OVH manager’s slow speed was not just a coincidence. To test it reliably, I even put timeout and actionable slowdowns on some endpoints.

At first I even put a timeout to see it more, because it loaded so fast

The OVH manager’s class names and non-scoped styles were like a riddle I had to decipher. Reusing their UI CSS framework introduced an array of familiar bugs.

OUI css, the UI overload plus a very old bootstrap 3

Implementing Modern Solutions

To address these challenges, modern solutions were employed, including the adoption of Svelte and SvelteKit for improved efficiency and responsiveness. By leveraging server-side rendering (SSR) and pre-loading mechanisms, loading times were drastically reduced, resulting in a more seamless user experience.

Enhanced Speed and Efficiency

The implementation of pre-loading user data on the server side led to a remarkable threefold increase in loading speed. Additionally, API mocking using SvelteKit’s rest endpoints ensured a seamless transition between user interactions, further optimizing performance.

Pre-loading user data on the server side was the killer feature. This meant users didn’t have to wait data to fetch from the API. It resulted in a threefold boost in speed, transforming the experience from sluggish to snappy.

It *is* fast, and I didn't even bother to optimize it

I even mocked the OVH manager’s API using SvelteKit’s rest endpoints, creating a seamless illusion of interacting with the native UI.

Seriously, so much endpoints needed just for the home screen to load ?

Migration Recommendations

For organizations grappling with legacy code, the following recommendations emerged from this project:

  • Migration to Modern Frameworks: Consider transitioning to modern frameworks like Svelte and SvelteKit to leverage their efficiency and responsiveness.

When encountered components or functionalities that resist the migration to SvelteKit, consider the versatile world of web components. These standalone units of code are like Lego blocks for the web, providing a clean way to encapsulate and reuse elements across frameworks. They can seamlessly integrate with SvelteKit, offering a bridge between old and new while maintaining performance.

That's good but use them only when you *do* need them

  • Optimization of CSS: Streamline CSS structures and adopt scoped styles to minimize complexity and enhance performance.

  • Integration of Pre-Loading Mechanisms: Implement server-side pre-loading of critical data to expedite loading times and improve user satisfaction.

THAT loading screen


The project to rebuild the OVH Manager uncovered critical insights into the challenges posed by legacy code and the potential for modern solutions to address performance issues. By implementing strategic optimizations and embracing contemporary frameworks, significant improvements in loading speed and user experience were achieved. As organizations continue to navigate the complexities of legacy systems, the lessons learned from this project serve as a valuable guide for future endeavors in code optimization and modernization.

Also Read

  • Phaser web IDE

    Phaser Studio

    Building a PhaserJS IDE using reactive binding with Svelte and TypeScript object mapping from PhaserJS. The scenes are passed from CustomEvent and listed in Inspector view.

    • PhaserJS
    • Web IDE
    • Svelte
    • TypeScript
  • Reviving with Deno

    GDocs Refactoring

    Modernizing the GDocs documentation generator using Deno and Svelte for better performance and development workflow.

    • Deno
    • Svelte
    • Legacy
    • Refactoring
  • A better file listing

    Games Center

    Frustrated from the Apache default index page, I decided to write a simple single file web app under constraints

    • Svelte
    • SPA
    • Single File
    • Scraping

Want more ?

I've got a lot of other awesome projects

See them all !