👋🏼 Hello Novel Community,

Welcome back to this week’s edition of 🚀 The Journey Newsletter. My name is Jason Mattiace and I’m the CTO at Novel.

In today’s post, we’re getting technical and exploring why webpage load times are important, and how Novel successfully reduced their page load times by 5x. Strap in!

- Jason

TL;DR

We know that webpage load times are vitally important to conversion rates. But, what does one do to get their page loading times down to an optimal level?

• Latency is the #1 reason why visitors decide to bounce from mobile webpages

• The most well-known culprits of slow page load times are media size, network requests, caching, & network bandwidth

• Understand the key benchmarks to collect, enabling you to start optimizing

• Novel’s journey to reducing latency by 5x

Every Millisecond Counts

Yes, it’s true that humans have shorter attention spans than goldfish, and I’m unclear if that should be comedic or flat out scary. So it should come as no surprise that just a 0.1s change in page load time can impact every step of the user journey for a visitor on your webpage.

While page load times can have a variety of impacts on your business’ bottom line ranging from SEO to COGS, we’re going to examine goal oriented sites (e.g. ecommerce, lead generation, etc.) with an interest in increasing conversion rates. Let’s start with four eye-popping statistics on page load times:

• Latency is the #1 reason in the U.S. why consumers decide to bounce from mobile pages (Deloitte)

• The probability of bounce increases 32% as page load time goes from 1 second to 3 seconds (Google)

• On mobile, 53% of site visitors will leave a page if it takes more than three seconds to load (Google)

• A non-ecommerce goal-oriented site has a 44% dropoff rate after 5 seconds (Portent)

Why Is My Page Loading Like It’s 1999?

No two webpages are created equal, and depending on the page’s objective it can be built with fundamentally different architectures and tech stacks. Some sites are simple landing pages that require a limited amount of features and functionality, while others are full blown web applications, reliant upon complex layers of API’s and services.

I’m going to cut to the chase and hit you with the bad news first: there is no silver bullet to reducing your page load times since there are boundless permutations of how a site can be built. However, while there is no silver bullet, there is a silver lining. That silver lining being that there are various well-known culprits that should always be put under the microscope first to diagnose the impacts on your page load times.

The Well Known Culprits

Media size

Webpages are typically designed with an abundance of images and videos. These assets must be optimized to reduce file size and reduce network throughput as much as possible.

Network Requests

Google research found that the threshold of network requests should be kept under 50 (on average) for optimal load times. Every additional feature you add to your webpage that requires data to be fetched or stored (*cough* analytics trackers *cough*) hogs up the browser’s computing resources and subsequently your device’s CPU.

Caching

Caching comes in all shapes and sizes from your servers all the way to the browser. Oftentimes, cache settings are misconfigured or even overlooked.

Network Bandwidth

This one is unfortunately out of our control, but worthy of highlighting here since many users, predominately on mobile, can have poor experiences just because they are driving through the Rockies or in the middle-of-nowhere with 3G at best (seriously? it’s 2022).

Ok, But What Can I Do To Optimize?

Just like any technical troubleshooting, you must first obtain key data points to understand the current state of the union. The most important benchmarks to collect when troubleshooting slow page load times are:

• 🏃‍♀️ Time To First Byte (TTFB) - measures the amount of time between a browser's request for a webpage and when the very first byte of the response arrives.

• 🏞 First Contentful Paint (FCP) - the time it takes for you to see the first piece of content (images, videos, text, etc.) on a webpage after you have landed.

• 🌐 Round Trip Time (RTT) - the amount of time it takes for network requests to reach the origin server travel back to the browser.

• 🏋️ Page size - the total file size of all the resources that need to be loaded for the page to function.

• 🎨 Largest Contentful Paint (LCP) - marks the point in the page load timeline when the page's main content has likely loaded.

• 🤳 Time to Interactive (TTI) - measures how much time it takes for a page to become fully interactive.

There are many different tools that can help you collect, analyze, and measure these benchmarks while on your path to righteousness. Services such as Google’s Test My Site or Web.dev Measure will give you a general understanding of your benchmarks along with insights and tips on what you can do to improve. Lighthouse is another great tool that we leverage here at Novel to get more fine grained reporting on the key benchmarks which you can find in the Chrome DevTools suite and run it against any web page.

Once you understand these benchmarks, the power is in your hands to begin prioritizing based on what is being impacted the most. Work with your development team to identify if some of the well-known culprits are contributing to the latency. While I highlighted a few key ones, there are many different types of issues that I have not talked about here that are worth exploring.

Last, but most certainly not least, don’t underestimate the power of the eye test. Know your user, be your user, and if your page load times don’t meet your expectations, iterate!

Novel’s Journey

We’ve spent a solid amount of time getting our web application’s load time down by 5x here at Novel and are going to share with you our insights.

We explored all of the previously discussed well-known culprits for our web application and found that while they were contributing factors, they were not the major sources of our calamity. Here’s what the breakdown for our slow page loading times consisted of:

• Duplicate network requests - 35%

• Server inefficiencies - 25%

• Blocking processes - 20%

• Non-optimized videos - 10%

• Miscellaneous - 10%

Within our web application, we use a microfrontend architecture and reuse a number of components. We found that our application was creating duplicate requests each time the components needed to be reused which, in turn, was causing an overload of unnecessary processing and throughput. After making these changes, we saw a dramatic increase in page loading times because the application was able to allocate it’s computing resources to other important processes.

The server optimization bucket is one that deserves it’s own blog post and can get very deep into the bits and bytes. To summarize in a short line, we were able to reconfigure our servers to remove something known as cold starts and implemented a form of caching to reuse server resources.

Another large contributing factor was that we had a slew of processes that needed to execute, but were blocked on processes that came before them to complete. Blocking processes is a big no-no in engineering land so once we were able to identify this, we came up with a clever solution to develop a priority loader. The job of the priority loader is to kick off processes in order of importance and lazy load the ones that can wait for a later time to initiate. This was a fun project, and one that came with huge performance gains.

Video optimization was one of the last puzzle pieces we needed to get our page load times to where we wanted them to be. Being a video technology platform, there’s a lot to discuss on this topic so there will be a separate blog post focused solely on this where you’ll get all the juicy details on what video optimization entails.

💪🏻 Pro tip: Using video to communicate and engage with your audience converts 86% better than static content. Try Novel today to turn your video content into a conversion machine 🤑

❤️ Enjoy this piece?

We know this got more technical than you may have expected…but hey I did give you fair warning on that at the onset 😉

Share The Journey newsletter with another marketer on your team.

All you need to do is copy and paste the link 😀

– Jason