Eugene-A-01
commented
4 months ago 1. 긴 로딩시간을 짧게 단축하는 방법
- TTFB(time to first byte) 개선 : 서버 성능과 직결된 문제. 요청수 줄이고 전송크기 줄이기, db쿼리 최적화, 서버 애플리케이션 로직 최적화, 서버 하드웨어 업그레이드 등 TTFB를 개선하기 위해선 서버측에서 할 일이 많음. 프론트엔드 개발자로서 할수있는 개선법에는 리다이렉트 발생 부분을 최대한 줄이기, 캐시를 잘 활용하는 방법이 있다.
- FCP(first contentful paint) 개선 : CSS, js 제거 및 최소화
2. 로딩시간이 짧은 것처럼 사용자 경험을 개선하는 방법
- 로딩 인디케이터(스피너, 프로그레스바) 도입 (1초-3초:스피너, 3초이상 프로그레스바, 1초미만 도입하지 않음 권장)
- 애니메이션 사용 (애니메이션 적용된 로딩, 브랜드 이미지, 팁이나 정보 보여주기 등 -> 대표적으로 크롬 공룡게임)
- 스켈레톤 UI (애니메이션이 적용된 동적인 스켈레톤일때 대기시간을 더 짧게 느낀다고 함)
- 낙관적 UI (이미 이벤트가 발생한것처럼 보여주고, 실패했을때는 따로 알려주는 식의 UI)
HaydenDevK
📎 질문
긴 로딩시간을 처리하는 방법에 대해서 알려주세요.
✏ 서술 답변
웹페이지 긴 로딩 시간 개선 방안
1️⃣ 서버 측 개선
TTFB(Time to First Byte) 개선
2️⃣ 클라이언트 측 개선
FCP(First Contentful Paint) 개선
이미지 최적화
<img>태그의srcset속성 사용콘텐츠 전송 네트워크(CDN) 사용
비동기 로딩
<script src="path/to/script.js" async>또는<script src="path/to/script.js" defer>사용<link rel="preload" href="path/to/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">사용지연 로딩(Lazy Loading)
<img loading="lazy" src="path/to/image.jpg">속성 사용3️⃣ 사용자 경험 개선
로딩 인디케이터 도입
애니메이션 사용
스켈레톤 UI
낙관적 UI
4️⃣ 로딩 시간 최적화
초기 로딩 최적화
Next.js 및 React 최적화
5️⃣ 로딩 시간 UI/UX 개선
React의 Suspense 활용
loading.js사용