Speed Boost: WordPress Redesign with Next.js and Vercel

Faster average page load

80%

• Next.js (Front end)
• Vercel (Web Server)
• Heroku (Hosting)
• Gencove (API)
• Open Humans (API)
• JavaScript (App)

Client

Essential Returns, a financial advisory company helping fund managers create portfolios that meet specific target rates.

While target-date funds have contributed positively to participant outcomes, they are not without shortcomings. Personalized solutions, on the other hand, present intriguing potential benefits, but cost considerations must be carefully weighed. In this context, the ERO Calculator and Optimizer offer a comprehensive solution that transcends the limitations of generic strategies.

By combining the strengths of target-date funds and personalized solutions, the ERO Calculator and Optimizer offer a compelling research-backed approach to retirement planning. This academic-driven tool enables individuals to maximize their 401k plans, empowering them to take charge of their financial future with informed investment decisions.

Project Goal

The client’s primary goals were to improve performance, modernize the design, and simplify infrastructure management. The client’s website, previously built on WordPress and hosted on AWS, was compromised due to expired security certificates, hacking, and lack of maintenance. The goal was to replace the broken website with a fully modernized, functional, and secure site that could present Essential Returns’ value propositions effectively and allow them to market their services with confidence.

Challenges

The original WordPress site, created by an agency that was no longer in partnership with Essential Returns, was not maintained. Expired plugin subscriptions, security vulnerabilities, and downtime meant that the site was unusable and couldn’t support the business. AWS hosting added further complications, as the client lacked the technical expertise to manage the infrastructure. There were even remnants of hacking attempts that compromised the security and functionality of the site.

Solution

I proposed a complete migration to Next.js, hosted on Vercel. This decision was based on the need for a faster, more modern framework that could be easily managed by the client, and one that would offer a smoother development process. The use of Vercel’s platform allowed for rapid feedback loops, with features like preview applications and built-in client commenting on specific site elements, which sped up the decision-making process. Tailwind CSS was used to ensure responsive, mobile-friendly design throughout.

Key Actions

• Migrated the site to Vercel from AWS, leveraging Next.js for server-side rendering and improved performance.
• Addressed security concerns by working through Vercel’s robust production checklist and ensuring all vulnerabilities from the previous setup were closed.
• Streamlined development with Tailwind UI components, customizing them to meet Essential Returns’ design and functionality requirements.
• Set up a feedback loop that allowed the client to view updates and provide input in real-time, speeding up the entire development cycle.

Outcome

The most notable impact was the improvement in page load times. By leveraging static site generation with Next.js, the site now delivers content faster and more efficiently, enhancing the user experience and potentially improving SEO rankings.

Additionally, the shift away from AWS removed the need for managing complex cloud infrastructure. By adopting Vercel’s managed platform, the client reduced operational overhead and simplified their technology stack. The updated, modern site design provided a fresh, engaging experience for visitors, contributing to the overall effectiveness of the client’s digital presence.

Auxiliary benefits included improved scalability and easier maintenance, thanks to the static nature of the site. With Vercel’s continuous integration capabilities, the client can expect a smoother development process moving forward, ensuring the site remains fast, secure, and easy to update. This project exemplifies how thoughtful design, combined with cutting-edge technology, can deliver substantial business value through improved performance, reduced complexity, and enhanced user experience.

The new website reduced page load times from over ten seconds to just two, drastically improving user experience. The modern design effectively communicated Essential Returns’ business value propositions while providing an avenue for the client to demonstrate their proprietary tools. The client was extremely satisfied with the final product, and discussions for future development are already underway.

Key Learnings

The move to Vercel introduced a streamlined workflow for developers, with features like preview apps and the Vercel toolbar, enabling quicker feedback loops and easier deployment.

Using platforms like Vercel, with its fast environment and secure hosting, combined with a strong focus on client feedback throughout the process, was critical to the project’s success. I learned to leverage these tools to not only speed up development but also to create a collaborative atmosphere that made the client feel more involved and in control of the end product. Additionally, keeping up with the latest Next.js features will be invaluable for future projects.