Lighthouse is an open-source auditing tool that helps evaluate the quality of a web page. It analyzes performance, accessibility, SEO, and other best practices. While improving Lighthouse scores can help identify optimization opportunities, it’s important to understand how Lighthouse differs from the metrics Google uses for search rankings.

Lighthouse and Core Web Vitals

Lighthouse and Core Web Vitals serve different purposes.

Core Web Vitals are based on real-world data collected from actual Chrome users visiting your site. Google uses this data to evaluate user experience and incorporate it into search rankings. Because the data comes from real visits, Core Web Vitals provide a more accurate picture of how users experience your site.

You can review Core Web Vitals data in Google Search Console. The reports are based on data collected over the previous 28 days, so performance improvements may take time to appear.

Lighthouse, on the other hand, is a diagnostic tool. It simulates page loads under controlled conditions and helps identify issues that may affect performance. While Lighthouse can help you improve Core Web Vitals, Google does not use Lighthouse scores directly for search rankings.

Understanding Lighthouse test conditions

Lighthouse simulates a relatively low-powered mobile device, similar to a Motorola phone from 2016. As a result, features such as HD background videos, animations, and interactive effects can significantly affect Lighthouse scores.

This does not necessarily mean your real users will have the same experience. Many visitors use newer devices that perform much better. For example, even highly optimized websites can receive moderate mobile Lighthouse scores while still delivering a good user experience.

Focus on creating an engaging website while avoiding excessive use of performance-intensive elements.

Key performance metrics

Lighthouse calculates its performance score using several weighted metrics. The most important metrics you can influence are Largest Contentful Paint (LCP), Total Blocking Time (TBT), and Cumulative Layout Shift (CLS).

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible content element on a page to load. This could include:

• A hero image

• A heading or large text block

• Navigation fonts

• An autoplaying video

Lighthouse continues measuring until the visible content stabilizes. Elements that appear later, such as entrance animations, cookie banners, or delayed-loading content, can increase your LCP score.

Use Lighthouse reports to identify which elements are contributing to slower LCP times and optimize them where possible.

Total Blocking Time (TBT)

TBT measures how much JavaScript blocks the browser from responding during page load.

When scripts take too long to execute, users may experience delays when interacting with the page. TBT adds together all periods where JavaScript execution blocks the main thread beyond acceptable thresholds.

Common causes of high TBT include:

• Analytics tools

• Advertising scripts

• Third-party integrations

• Large custom scripts

Reducing unnecessary JavaScript can help lower TBT. Unlike Core Web Vitals metrics, TBT is not used directly for search rankings.

Cumulative Layout Shift (CLS)

CLS measures unexpected layout changes that occur while a page loads.

For example, if content moves because an advertisement or dynamic element appears after the initial page render, users may accidentally click the wrong item.

Framer sites typically achieve very low CLS scores because layouts are designed to remain stable during loading.

Additional performance tips

Beyond Lighthouse metrics, other factors can affect your site's overall speed and user experience.

• Use modern hosting infrastructure: the HTTP version used by your hosting provider can impact performance. HTTP/3 generally delivers faster and more efficient connections than older protocols. Framer sites are automatically hosted with HTTP/3 enabled.

• Limit third-party services: third-party services can significantly increase page weight and loading times. Services such as analytics platforms, chat widgets, advertising networks, and embedded media often add additional JavaScript that must be downloaded and executed.