[발표] Chrome Devtools를 활용한 성능 측정과 개선

[JaeYeopHan]

제목

• 후보 1. Vanilla로 SPA를 만들면서 배운 UX와 Performance
• 후보 2. 바닐라로 SPA를 만들면서 배운 웹을 지탱하는 기술들

동기

SPA로 개발되는 서비스가 많아지면서 웹 프론트엔드가 중요해졌습니다. SPA를 개발할 때는 많은 것을 고려해야 합니다. 주로 React, Vue 와 같은 라이브러리와 이를 기반으로한 Third-party 라이브러리로 개발이 이루어지고 있습니다. 올해 1월부터 Vanilla(no framework)로 SPA 서비스를 경험하면서 많은 것을 배울 수 있었습니다. 개발을 하면서 고민했던 부분, 구현했던 내용들을 공유하려고 합니다. 그 중에서도 다른 일반적인 내용보다는 UX를 고려한 부분, Performance를 개선한 부분에 초점을 맞출 예정입니다. 이 경험이 라이브러리를 사용하는 개발자에게 또는 웹 프론트엔드를 시작하시는 분들에게 기초가 될 수 있을거라 생각합니다.

발표 개요

Intro

• SPA 개발 시 고려해야할 것들.

사용자를 고려한 UX

Routing

• Permalink

스크롤 복구하기

• DOM 상태 저장하기
• history.scrollRestoration
• Page life cycle

Optimistic UI

audit을 활용한 Performance 개선

레이지 로딩, 레이지 초기화를 통한 빠른 초기 로딩

• IntersectionObserver
• Custom ImageElement
• Future) Native lazy load

렌더링 퍼포먼스

• 부드러운 애니메이션
  • 하드웨어 가속
  • scroll 제어하기
• trick
  • delay를 통한 렌더링 타이밍 분산

초기 로딩 개선

• preload
• Async keyword to script tag
• Smaller js file by code splitting and dynamic import

마무리