shape

Website Performance Optimization

Description

Performance optimization work for the Codestates website.
Applied learnings from an internal performance study group

Tech Stack

  • React.js
  • Next.js
  • Javascript

Team

5 (FE 5)

Period

2023.05 ~ 2023.07

Details

  1. Ran a frontend performance study group and defined an improvement plan
    • Conducted a month-long study group outside work hours using the book "Frontend Performance Optimization Guide"
    • Selected measurable metrics to track improvements (Chrome LightHouse score)
    • Compiled a list of applicable performance improvements for the current site based on study learnings; distributed tasks among study group members
  2. Executed performance improvements
    • Reduced JS bundle size: optimized libraries such as lodash and framer, migrated date library from moment to dayjs, updated import patterns
    • Optimized animations: removed or modified animations causing reflow/repaint; reduced scroll event overhead with Intersection Observer
    • Applied image size optimization and lazy loading
    • LightHouse score increased by 11% over 2 months
Jin-kyeong Song | Frontend Developer