May 23, 2018

Building traffic-ready websites

Let’s say you’re building a new project, and it has the potential to get hit by some intense traffic from places like Product Hunt or Reddit. How can you help your server stand up to this influx of users?

Who am I?

I helped engineer a site that had no downtime after it reached the front page of Reddit and got featured on 100+ media outlets, including Forbes and IGN. While I was a beginner developer at the time, this is what I learned.

Why landing pages go down

A lot of websites are dynamic, a fancy word for saying “connected to a database”. Information is retrieved when the user needs it, like this:

User: navigates to page
Server: Database, can you send me the correct information for this page?
Database: looks up page information
Database: Sure, Server, here you go.
Server: assembles content
Server: Here’s the content you need, User!

The problem is, your average database isn’t so good under pressure. They can become overwhelmed by heavy onslaughts of traffic. For a common example, have you ever seen the error, ”Error establishing a database connection” when you try to visit a site? It looks like this:

Picture of WordPress' Error Establishing A Database Connection

That’s what happens when a WordPress site’s database goes down. And while these dynamic sites – like Ruby on Rails applications, content management systems, and so on – can fill a lot of needs, they’re not the best place to put your landing pages. Mainly because:

  1. They cost a lot of money. Upgrading your Heroku dynos or WordPress server can get expensive fast. Especially when static site hosting can literally be free.
  2. Your application can go down if you get a lot of traffic. What if existing customers are trying to log in when you’re getting pummelled by traffic?
  3. You’re using a wrecking ball where a hole puncher would do. Your landing page probably doesn’t need all the bells and whistles that come with a fully fledged content management system.

Enter something simpler: the static landing page.

How static landing pages work

User: navigates to page
Server: Here’s the content you need!

You see, instead of pulling information from a database, static content is baked right into your pages. This is why that matters:

  1. You’ll be able to stand up to more traffic.
  2. Your site will get faster, which can help you rank higher on Google and raise your conversions. (All other things equal, faster sites convert better.)
  3. It’s more secure. A static site has less points of attack than something like a WordPress site. (You can’t hack plain HTML.)
  4. It’s super cheap – sometimes even free. We’ll discuss this below.
  5. You’ll have more peace of mind. Step away without worrying (as much) about traffic and security.

Recommended site structure

Let’s say you have a Ruby on Rails product or WordPress store that runs on something like a Heroku or DigitalOcean server (or, for non-developers, that could be something like GoDaddy or Bluehost).

Your goal is to split your project into two distinct halves:

  • marketing – your sharable public pages, like your homepage
  • application – your Rails/WordPress/etc. site that provides the product

Make your marketing site static and hosted on your base domain.

Add your application to a subdomain such as app.example.com.

Let’s say your site starts getting traffic, and 10% of those visitors convert to registered users. If you have a static landing page running, it will handle the traffic, and only the registering 10% will hit your application server.

That means you’ll save money. You might not need to upgrade your server, or your Heroku dynos, etc.

How to make landing pages

Static landing pages are made with HTML and CSS (JavaScript optional).

I made Everpage, a static landing page builder, because if you can’t already tell, I’m quite passionate about the topic. You can either upload it to a Netlify server for free hosting, or copy and paste the raw HTML/CSS into your Jekyll/Gatsby site.

If you hate Everpage for some reason, you can always Google for templates or design your own. There are many out there – some free, some paid.

If you can write code, you’ll additionally have the option of developing a full site (as opposed to a single page) with a static site generator like Jekyll or Gatsby.

How to host static landing pages

I’m not paid to say this, but I recommend Netlify. They’re free (unless you want to add a bunch of bells and whistles), and they’re the easiest/most well-designed platform I’ve used so far.

Disclaimer

Every situation is different. Not all servers can survive under large amounts of traffic. Make sure to talk to your host and do your own due diligence.