Big Win: 75% Faster FCP, 50% Faster LCP

Final Results: Before and After (Average of 10 Lighthouse Reports)

FCP: 1.2s ➜ 0.3s

LCP: 3.1s ➜ 1.3s

Before

Performance scores

Image description

Metrics

Image description

After

Performance scores

Image description

Metrics

Image description

Changes I Made

jenchen

Optimize Core Web Vitals - FCP and LCP: Lazy-Loading Offscreen

Jen C. ・ Mar 18

#webdev #html #frontend #webperf
jenchen

Optimize Core Web Vitals - FCP and LCP: Lazy-Loading Offscreen

Jen C. ・ Apr 17

#webdev #frontend #tutorial #webperf
jenchen

Optimize Core Web Vitals - FCP and LCP: Render-blocking resources

Jen C. ・ Mar 27

#webdev #frontend #tutorial #webperf
jenchen

Optimize Core Web Vitals - FCP and LCP: Remove not need dependencies

Jen C. ・ Mar 27

#webdev #tutorial #frontend #webperf
jenchen

Optimize Core Web Vitals - FCP and LCP: Tree-shaking Lodash

Jen C. ・ Mar 27

#webdev #tutorial #frontend #webperf
jenchen

Optimize Core Web Vitals - FCP and LCP: Optimize bundle size by lazy loading heavy 3rd-party package

Jen C. ・ Mar 27

#webdev #tutorial #frontend #webperf
jenchen

Optimize Core Web Vitals - FCP and LCP: Images

Jen C. ・ Mar 27

#webdev #frontend #tutorial #webperf