This document aims to assist users in Korea who are learning Framer and facing difficulties due to a lack of Korean materials. We've translated content from the official blog into Korean and added practical information. We hope it provides some help to Framer users.

Difference between Lighthouse and Core Web Vitals

Google's Lighthouse is a debugging tool that automatically checks website performance, accessibility, best practices, SEO, and more. Meanwhile, Core Web Vitals are measured based on data collected from actual users visiting through Chrome.

In other words, it's not the Lighthouse score but Core Web Vitals data that directly affects Google search ranking. Core Web Vitals data can be checked in the Google Search Console, and since it reflects the average of the past 28 days, it may take time for optimization results to show.

• Lighthouse: A debugging tool using real-time simulation

• Core Web Vitals: Real user experience data (affects search rankings)

Why you don’t need to obsess over Lighthouse scores

Lighthouse simulations are based on a 2016 Motorola device, so features like high-quality video autoplay or heavily interactive elements may result in low scores. However, these devices are rarely used, so there's no need for concern.

For example, apple.com scores just 56 on the mobile Lighthouse test. Hence, a slightly lower Lighthouse score when using videos or animations in design doesn't necessarily mean it's bad.

Just avoid excessive use.

The Three Key Performance Metrics of Lighthouse

Lighthouse calculates scores by integrating various performance metrics. Among these, there are three key metrics that we can directly impact:

1. LCP (Largest Contentful Paint)

Measures the time it takes for the majority of the site's content to load. Examples include header images, menu fonts, or autoplay videos.
Note: Elements like welcome animations or late-appearing cookie banners can delay LCP. Use Lighthouse to analyze which elements affect LCP, and optimize design for loading times.

2. TBT (Total Blocking Time)

Measures delays caused by JavaScript during page loading. Scripts running for more than 0.05 to 0.1 seconds can impact user experience, and TBT sums up these delays.
Note: It's advisable to eliminate unnecessary analytics or ad scripts to reduce TBT. High TBT doesn't impact search rankings and is not included in Core Web Vitals.

3. CLS (Cumulative Layout Shift)

Measures unexpected movements of the page during loading (e.g., text shifting due to sudden popup ads). Framer sites are technically close to a CLS of zero, making it easier to maintain stable layouts.

Tips to Improve Lighthouse Scores

• Improve speed using HTTP/3: The version of the HTTP protocol used by servers also affects speed. (Framer inherently supports HTTP/3, ensuring fast speeds without additional configurations)

• Only necessary external service scripts: Scripts loaded from external sources like Google Analytics or YouTube embeds can significantly increase site size. A single JavaScript line can halve page performance, so it's best to add scripts minimally and only when necessary.

If you want to boost SEO, focus on Core Web Vitals first

To elevate search rankings, rather than merely focusing on Lighthouse scores, optimizing Core Web Vitals, which measure actual user experience, is far more effective.

Google directly uses speed data felt by real Chrome users in determining rankings, so designing the site for fast and smooth navigation is paramount.

This article adapts and translates Framer's official blog ‘Guide to Lighthouse scores’.