Last week, I wrote code after long time. It felt good to be back, and my task was straightforward: improve the performance of a website.
The site uses a following technology stack:
- Backend: Ruby on Rails
- Frontend: Next.js
- Database: PostgreSQL
As I dug into the site’s performance, a few things caught my attention:
- Multiple redundant API calls were being made from the same page.
- The API responses were bloated with unnecessary data. For example, even if the homepage only needed 20 items, the API was returning the entire dataset, complete with irrelevant associated data.
- API Call Priority: The API that provided data for the hero section—one of the most critical parts of the page—was being called last, delaying its rendering.
So, I made a few key changes that drastically improved the site’s performance:
- Eliminated redundant API calls: I consolidated the calls so that the same data wasn’t being fetched multiple times.
- Optimized API responses: By breaking down large APIs and limiting the data returned, I was able to reduce both database load and the size of the responses. This sped up the overall API performance.
- Prioritized API calls: Even though JavaScript API calls are asynchronous, they still hit the backend and can bottleneck if poorly sequenced. I made sure the hero section’s data was fetched first, ensuring that key content loaded faster and improved the user experience.
There are countless ways to enhance site performance, but sometimes small tweaks can make a big impact.
Until next time, happy coding!