I began the rewrite of my quiz web app called "et3allim" (which means "learn" in arabic) in solidjs. It was originally written in angular without paying much mind to performance. The goal of this rewrite was to make the site much faster and more responsive. I'm still in the beginning stages but I can already notice a 3.5 times (or 111.11%) difference in page load time. There are three reasons for this.
1. Web Framework
Angular is much slower than solidjs and updates in the UI take longer. I was using lazy loading and other best practices in angular but it just couldn't compete with the performance of solidjs.
2. UI Frameworks
In the older version, I was using bootstrap and material UI. Both have a combined size of 147kb + 90kb = 236kb. This is not small. You could compress it with gzip but it's still a heavy load on your page. Instead, I just didn't use a UI framework and wrote my own css. I did use skeleton css which is 170 bytes only, and just wrote my own css for the styling. This makes the site's css much smaller
3. Hosting
The old site was hosted in a vps (linux server) using digital ocean. This server is located in north america which means if someone opens the site from the other side of the world, the site will take longer to load. Instead, the new site is hosted on cloudflare pages which uses a cdn. They have many servers around the world and will deliver the page from the closest location to you.
A word on solidjs
I have nothing but great things to say about this amazing and minimal framework created by Ryan Carniato. It does everything perfectly, and once you understand the core concepts, you can create extremely fast reactive web apps.
Top comments (0)