pile·
프론트엔드·oliveyoung올리브영 테크블로그·

온라인몰 성능개선을 위한 FE 개발자의 고민 part-1

문제올리브영 온라인몰 페이지에 표시할 상품·이미지 엘리먼트가 늘어나며 초기 로딩 속도와 메모리 사용량이 악화돼 사용자 체감 성능이 떨어졌다.
접근React 신규 프런트엔드 아키텍처에서 외부 무한 스크롤 라이브러리 대신 뷰포트에 보이는 엘리먼트만 렌더링하는 커스텀 인피니트 스크롤을 직접 구현해 DOM 노드 수와 리소스 사용을 제어했다.
결과DevTools 측정에서 FCP·LCP가 단축되고 스크롤 시 끊김이 줄어 클라이언트 자원 소비가 감소했다.
oliveyoung
올리브영 테크블로그 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)

이 글과 비슷한

  1. 프론트엔드·LINE EngineeringLINE Engineering·

    AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기

    LINE Planet 팀의 PM과 Android 엔지니어 두 명이 웹 전문 엔지니어 없이 LINE 앱 내에서 그룹 영상 통화 서비스를 개발한 과정을 다룬다. LIFF(LINE Front-end Framework)와 LINE Planet SDK를 활용해 React/Vite 기반 웹 앱을 구성했고, Firebase Cloud Functions로 별도 서버 인프라 없이 구현을 완료했다.

    #react#webrtc#firebase+2