This document was created to help domestic users learning Framer overcome difficulties due to the lack of Korean resources by translating the content of the official blog into Korean and adding practical information. We hope it will be of some help to you using Framer.

The Difference Between Lighthouse and Core Web Vitals

Google's Lighthouse is a debugging tool that automatically evaluates a website's performance, accessibility, best practices, and SEO, among other things. On the other hand, Core Web Vitals are measured based on data collected from real user visits through Chrome.

In other words, it's the Core Web Vitals data, not the Lighthouse scores, that directly affect Google search rankings. You can check Core Web Vitals data in the Google Search Console, and since it reflects the average over the past 28 days, it might take time for the results to show after optimizations.

• Lighthouse: Debugging tool through real-time simulation

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

Reasons Not to Obsess Over Lighthouse Scores

Lighthouse simulations are based on a 2016 Motorola device, which might give low scores for auto-playing high-resolution videos or interactive elements. However, since these devices are hardly used, there's no need to worry.

For example, even apple.com has a mobile Lighthouse score of only 56. So when designing with videos or animations, a slightly lower Lighthouse score doesn't necessarily mean it's bad.

However, excessive use should be avoided.

Three Key Performance Indicators of Lighthouse

Lighthouse calculates scores based on several performance indicators. The three aspects we can directly influence are as follows:

1. LCP (Largest Contentful Paint)

Measures the time it takes for the majority of the content displayed on the site to load. Elements like header images, menu fonts, and auto-playing videos are included.
Note: Elements like welcome animations or late-appearing cookie banners can delay LCP. Use Lighthouse to identify what affects LCP and optimize the design for loading time.

2. TBT (Total Blocking Time)

Measures the delay caused by JavaScript during page load. Scripts running for more than 0.05 to 0.1 seconds can affect user experience, and TBT sums up these delays.
Note: To reduce TBT, it's advisable to remove unnecessary analytics or ad scripts. High TBT doesn't affect search rankings and isn't included in Core Web Vitals.

3. CLS (Cumulative Layout Shift)

Measures unexpected page shifts during loading (e.g., ads popping up suddenly and changing text position). The Framer site technically has a CLS close to 0, making it favorable for maintaining a stable layout.

Tips for Increasing Lighthouse Scores

• Speed up with HTTP/3: The HTTP protocol version used by the server also affects speed. (Framer supports HTTP/3 by default, offering fast speeds without extra configuration)

• External service scripts only if necessary: Scripts fetched from external sources like Google Analytics and YouTube embeds can significantly increase site load. A single line of JavaScript can cut page performance in half, so it's best to add them minimally if truly necessary.

If You Want to Improve SEO, Focus on Core Web Vitals First

If you want to increase search rankings, concentrating solely on raising Lighthouse scores isn't as effective as optimizing Core Web Vitals metrics, which are based on actual user experiences.

Because Google directly uses the speed data from real Chrome users to determine rankings, designing for fast and smooth site exploration is most important.

This article is a translation and adaptation from Framer's official blog, ‘Guide to Lighthouse scores’.