Webflow ➔ Vercel

Date: March 5, 2025

Intro

I've been hosting my personal site on Webflow for about two years now without any issues. But there's always been a part of me that wanted more control—like I had full control over my site.

Tbh, I knew it was going to be a big process moving over platforms, since all of my pictures and custom code were already setup on my Webflow project and honestly that's why I put it off for so long. But now, I can finally say that I am now hosting my site with Vercel. 🎉

And I've already noticed that everything is much much faster - navigating between pages feels lightning fast and produces little to no lag, thanks to Next.JS's server side rendering (SSR). Plus, animations feel super smooth now thanks to motion primitives.

Speed

Another great way to visualize these speed improvements is through a page load timeline comparison:

Webflow Timeline (ales.lat):
0s    [Initial Request]---|
0.5s  [Server Response]---------|
1.0s  [Asset Loading/FCP]-----------------|
1.5s  [Asset Loading]----------------------|
2.1s  [Full Render/LCP]------------------------|
                                      (~2.1s total)

Vercel Timeline (ales.lat):
0s    [Initial Request]--|
0.2s  [Server Response]---|
0.4s  [Asset Loading/FCP]-------|
0.6s  [Full Render]------------|
0.8s  [LCP]------------|
                          (~0.8s total)

Looking at the test, key metrics like First Contentful Paint (FCP) and Largest Contentful Paint (LCP), got huge improvements. FCP (when the first content appears) dropped from 1.0s to 0.4s, while LCP (when the largest content loads) improved from 2.1s to 0.8s.

While Webflow requires a full page request and response cycle for each new page, Vercel's caching system prepares other pages before you even click on them. This means navigation between pages feels instant.

Organization

In terms of organization, my webflow project was a mess, and yes that's my fault. Overall, the structure was ok, but it definitely needed a lot of improvements. That's where this new portfolio comes in handy. Starting fresh allowed me to be in control of the organization from the very beginning.

Tailwind really was the saving grace here - all of my classes and organization feel much more intentional and swapping classes over feels as easy as doing it in Figma. Tailwind provided this project with a ton of functionality and responsiveness, which is importnat with the web (you never know what kind of device people are viewing your website on).

On Webflow, my class list turned into this never-ending library of duplicates and randomly named classes. Again, that was on me in the early stages, but as the site grew, it became a mess—making it hard to keep everything consistent and properly aligned.

Also the local organization of components helped with the structure as well. Webflow's embed system is great, but when you view your site on the platform, and its full of embeds, you can't see anything unless you push to your staging site, which made quick iteration take longer than it needed to.

My new organization method is much better than what I was previously using with Webflow. Of course there is a lot more to the file structure than this, but this is just a small example. Standard, but effective.

components/
└── ui/
    ├── animated-beam.tsx
    ├── mathjax/
    │   └── bayer/
    │       └── matrix-example.tsx
    ├── morphing-dialog.tsx
    └── windows-icon.tsx

Developer Experience

Another thing I like about being able to host my site myself is the staging phase. I can run npm run dev or vercel dev and visualize the features and components that I am testing out in real time with no issues. Before, I did this a lot on webflow and would have to push the new changes to my staging website becuase the code embed does not show up without pushing it to the site. So testing would take much longer since there was a delay in between iteration and deployment.

Github Integration

Now, with the files locally on my device, and my github, I am able to quickly push updates with little to no wait time and get instant builds through Vercel. Any commit that I make will be automatically built out and deployed instantly. But I definitely have done this and broke the website, so that's why staging exists.

Final Thoughts

• This served as a good lesson for learning web development and prompt engineering.
• Nearly doubled the speed of my portfolio & allowed me to restructure the organization.
• Happy that now I have full control over my site and don't have to pay a hosting fee.
• Cache makes navigation feel instant by pre-loading pages before I even click.
• Looking forward to shipping faster ... much much faster.