Performance Experiments with United Airlines

Performance Experiments with United Airlines

For most of the past 5 years I have dedicated countless hours trying to figure out the best way to get the best of all worlds in web development. I wanted to have a super fast initial load time which is great for any landing page and at the same time, I wanted an awesome rich client interface for users to interact with.

The problem is that it is crazy hard to optimize for both.

So, I have done a complete 180. I am in the process of completely separating landing pages vs rich client pages on GetHuman.com. For example, check out the new United Airlines phone number page. As I was doing this, I figured out one cool thing.

If you go directly to the United Airlines phone number page it will now only load server side with no client JavaScript whatsoever. If, however, you navigate to that page from the home page (do a search for “United Airlines”) then you will see the client view.

In other words, there is a client view, but it is only used when needed. This approach has yielded the following benefits:

  • Crazy fist Time to First Byte (was 800ms, but now 150ms)
  • Crazy fast Time to Interactive (was 5.6 seconds, but now 1.1 second)
  • Crazy fast navigation load (I haven’t measured, but it is client loaded so a few ms)
  • Code for the landing page is 100 lines (including HTML template) instead of 1000
  • Rich functionality all pushed to a separate page
  • Makes it MUCH easier to AMPify the page…which we have done (check out the AMP United Airlines phone number page)

The one downside is that you do need to have the user go to a different page in order to do any rich interactions and you have some limitations on what types of things you put on this page…but, tbh, I think these limitations are actually really good. Most initial users don’t want/need all that rich functionality right off the bat. It feels good to click on something that then gets you into a richer experience.

Up next is implementing service worker on landing pages in order to prefetch the client side JavaScript that will be used on other pages if the user clicks on any links.