Speed up your app with Lighthouse Wars

One of the reasons Google takes speed so seriously is that it is a large part of the user experience. Most people have very limited patience, and that goes for people on any device and any connection. A large portion of traffic will leave your site or web application if it takes more than one second to load. For every additional second, you see a very large drop-off in traffic. 

Many developers will quickly pull out their new iPhone, check their website on a full bar 5G connection, and proclaim their site loads fast. But you’ll need to build for all kinds of people and circumstances. Even in certain parts of California, you’ll run into a sloppy 3G connection or the dreaded Edge network, which we all thought was no longer in service. Appearances can deceive, and that’s why you need tools to optimize your app.

When you need more speed

Your app should run smoothly everywhere, and Google built a useful open-source developer tool that will rate your app based on the metrics that matter. Google Lighthouse is a powerful tool that audits your app across several metrics and aims to provide you with actionable insights to help you improve the quality of your web pages. It’s one of those tools you’ll want in your tool belt if you’re building web applications with content you’ll want indexed. For example, marketplaces, e-commerce stores, etc. These applications all benefit from SEO; you will struggle to rank high without a sound (90+) Lighthouse score. 

While speed is a core part of how Google Lighthouse evaluates your score, it’s not the only factor, and that’s important. In the past, many websites tried to trick tools like Lighthouse. They would only load their HTML+CSS and leave their JavaScript for later. This would give them a fast-loading page but give their users a terrible experience with cumulative layout shifts and other unpleasantries.

Today, Google Lighthouse uses various factors to determine the quality of your page, such as:

1. Performance : How fast your web application loads and reacts. It looks at metrics like First Contentful Paint (FCP), Speed Index, and Time to Interactive (TTI). The faster your web application is, the higher your likelihood of ranking high in the organic search results with many search engines.

2. Accessibility : How accessible is your web application, and does it cater to people with disabilities? Lighthouse helps you identify missing alt text for images and assists you with setting the correct ARIA Labels and Landmarks to ensure your web application works well with assistive technologies . It will also identify poor contrast ratios, which can negatively impact the user experience. You’ll be surprised how easily an excellent web application turns to utter garbage if viewed by someone who has difficulty distinguishing between #FFFFFF and #FAFAFA.

3. Best Practices : Does your web application follow modern best practices? It performs basic security checks (like HTTPS usage), and deprecated APIs to help us maintain a secure, fast, and user-friendly web application.

4. SEO : How well does your web application cater to crawlers? Lighthouse will audit your web application and return recommendations that will help you optimize meta tags, proper use of headings, and mobile-friendliness. All to ensure that your site is optimized for crawlers.

5. Progressive Web App (PWA) : The last point is to check to understand if your application is enabled as a Progressive Web App. Does it follow best practices and function like a native app? Does it work offline and load fast?

There’s a lot more to Google Lighthouse than speed. While apps can load fast, if they don’t follow the latest best practices, they risk running slow under less-than-ideal circumstances. 

Note: Latest best practices is relative. They constantly change and that also goes for Lighthouse scores. As new frameworks and best practices are introduced, the bar moves. You can’t just set and forget. Our recommendation is to focus on the Core Web Vitals.  

Core Web Vitals in Google Lighthouse

Core Web Vitals are a subset of performance metrics vital for a good user experience and directly tied to Google’s ranking algorithm. Here are the three significant aspects we’d recommend you to focus on:

1. Largest Contentful Paint (LCP) : This metric measures how long the most significant content element (like an image or block of text) takes to load and become visible in the viewport. A good LCP score is under 2.5 seconds, but always aim for sub one second. The fastest way to improve LCP is often image optimization, which reduces render-blocking scripts (Check out squoosh.app ). Server response times matter greatly here, but few developers can impact this unless they self-host. If they host through a platform, they rely on the platform to make these optimizations.

2. First Input Delay (FID) : FID gauges how responsive your site is to user interactions, such as clicks, taps, or keyboard inputs. You’ll want to aim for a delay below 100 milliseconds. 100 milliseconds roughly feels like instant to humans, and that’s why Google has set the standard here. You’ll get a poor FID if there is a lag between the user action and the browser's response. Reduce the JavaScript execution times and defer non-essential scripts to improve the FID.

3. Cumulative Layout Shift (CLS) : CLS measures the visual stability of a web page by tracking how often elements on the page shift unexpectedly during the loading process. You may have experienced a recipé or overzealous news site where the text you are reading pops up and down as it loads the abundance of ads that completely ruin your experience. That’s CLS for you; you should aim to have a CLS score below 0.1. Not only do a high CLS score lead to a frustrating user experience, it also often leads to misclicks and occasional flying devices. Specify size attributes for images and media files, and don’t inject dynamic content that pushes things around.

If you want to learn more about Google Lighthouse, check out this video, in which Andreas details its various aspects. 

Try something different. Try Lighthouse Wars.

Google Lighthouse is but one of the tools that you can use to audit your web application. Pagespeed Insights is another, and one of our community members (Lucas Chae) just built Lighthouse Wars .

Lighthouse Wars is a Street Fighter-esque app where you can audit websites head-to-head to see how your web application fares against your competition. You can choose an established website builder, a no-code builder, a modern visual development tool, or your web application. 

Lighthouse Wars was entirely built in toddle, and it pings Google Lighthouse and renders the battle as a good old arcade-style fighting game. 

Try it out and test your site against your competition or your tool of choice. 

At toddle, we care a lot about the user experience, and we have made many decisions to ensure that developers can build a world-class user experience that feels natural. If you ever wonder why toddle web applications are so fast, it’s because one of the significant design decisions when building toddle was to render all content server-side, resulting in a blazing-fast experience. It ensures all scripts are rendered before the user engages with the page. There’s no need to download the page before you can interact with it. It’s great for the user and incredible for SEO. We are also incredibly strict with cookies and third-party scripts. We track web application activity on non-logged-in users in an anonymous and privacy-friendly way—no device IDs, third-party cookies, or scripts that slow our performance down here.