Building an API MVP from the Ground Up: Part 3 - Landing Page

So far, we've been making great progress. We've authenticated our users and set up our billing logic. Now, let's move on to making a beatiful and blazing fast landing page, like the one I made for FavoritesAPI.

FavoritesAPI Landing

There are a ton of templates and software to create landing pages with limited effort. The most important things (in my opinion) are that you:

  1. use minimal Javascript
  2. rely on a CDN

Performance

It's generally our tendency as web developers to grab Javascript whenever we see a frontend problem, but that has heavy ramifications for site performance. Especially with important marketing material, it's vital that we ship a blazing fast site.

For instance, my landing page for FavoritesAPI will load from anywhere from 200 ms to 750 ms depending on whether it's been cached by the CDN. A large part of the reason that it's so fast is because it uses very little Javascript. In fact, the only Javascript on the page is the Stripe client package from the previous billing tutorial.

Just as importantly, you need to rely on a CDN to ship your landing page site. CDNs (or content delivery networks) allow you to easily host your content around the world. Without a CDN in place, your users would need to go all the way to your server in order to fetch your content. With a CDN, they will hit a server that has cached your content much closer to where they live.

There are numberless CDNs to work with. Personally, I recommend Netlify for its ease of deployment, but you can use Cloudflare or BunnyCDN if you want to host your own content.

Now that we've covered how we want our landing page to perform, let's talk about what we want it to contain.

Content

Our #1 goal when constructing a landing page should be to properly inform our potential customers about the benefits of our service. They should quickly get the answers they are looking for, including:

  1. What benefits your service will provide
  2. What sacrifices they will need to make (cost, time, attention, etc.)

On top of having their questions answered, they should also have an action to take. This could be signing up for a waitlist, giving you their email, or paying for your product.

When building FavoritesAPI, I wanted the user to easily be able to scan my landing page to get the necessary information. The first thing they'll notice is the tag line, which is meant to give them a memorable hook into the product's purpose. Next, they'll want to know more specifically how that benefit is being provided. If you take a look at the landing page, you'll notice that your eye is drawn first to the tag line, and next to any of the bolded text. All of this bolded text is helpful information - how much the API costs, how much you will save, or how to consume the API. The unbolded text can be thought of as filler. If the user is willing to spend more time, they can peruse it, but it shouldn't be necessary.

The user should know your benefits and sacrifices in the first 10 seconds on the page

If they have to dig deep to figure those out, there's little chance they will go further.

Deployment and Hosting

This is probably a good time to talk about how your frontend landing page should be hosted, as opposed to your backend application. I prefer to keep the two separate with completely distinct Github repos and deployment pipelines. All of my backend code is hosted at api.favoritesapi.com or app.favoritesapi.com, while the landing page is on the base domain. This may seem like an unnecessary complication, but your marketing material has completely different needs than your backend code. Your landing page needs to be incredibly performant and rely on a first-class CDN. On the other hand, your backend code needs to be easy to deploy first and foremost. Keeping the two separate will also make it easier to make future changes to the landing page.

Personally, I enjoy using Netlify to deploy simple static sites. It is incredibly easy to integrate with Github, and I've found their CDN to be great. Deploying is as easy as git push. If you decide to go with Netlify (or a similar service), you will also need to configure your domain registrar to point to their DNS servers in order to use a custom domain.

Other alternatives include surge.sh, Github Pages, or just hosting your site yourself on a VPS. If you decide to go that route, make sure to use another CDN service like Cloudflare.

This has been a cursory overview of how I construct my landing pages. Next time we'll be tying together billing and authentication with an email layer. Thanks for reading!


If you've got any questions or suggestions, reach out to me at stephen.huffnagle@gmail.com

Show Comments