![[Web] 웹 퍼포먼스 최적화](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbIqrsh%2FbtscRZggebu%2FAAAAAAAAAAAAAAAAAAAAAOgqy_pZbFIxy5RLoO23VhEvKwk4dy0e8kmnxEL41ZSj%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DggBXnVhpFJUStUYEpa7%252FVsa%252Bih0%253D)
Wanted - FE - Study 그룹에서 기술 공부 및 면접 준비를 위해 작성한 글 입니다.
면접 예상 질문
Q. 웹 퍼포먼스 최적화가 필요한 이유가 무엇인가요?
사용자 경험 개선 및 검색 엔진에서의 높은 순위를 위해 필요합니다.
Q. 웹 페이지 로딩 속도를 개선하기 위한 방법은 무엇이 있나요?
렌더링 차단 리소스인 JavaScript 와 스타일 코드를 최적화, 이미지 파일 크기를 줄이고 압축을 통한 로딩 속도 개선, 렌더링 지연 최소화, CND 활용 등이 있습니다.
Q. 웹 페이지의 초기 렌더링 속도를 향상시키기 위한 기술은 무엇인가요?
코드 스플리팅, 서버 사이드 랜더링, 프리로딩, 코드 최적화 등이 있습니다.
Q. 웹 페이지에서 사용되는 이미지 최적화 기술에 대해 설명해주세요.
알맞은 이미지 포맷과 크기 선택, 이미지 압축, 이미지 지연(lazy) 로딩 등이 있습니다.
Q. 웹 페이지에서 사용되는 CSS 및 JavaScript 최적화 기술에 대해 설명해주세요.
웹팩과 같은 번들러를 이용한 번들링, 자주 사용하는 요소들의 캐싱, 코드 스플리팅을 통한 불필요 모듈의 lazy 로딩 등이 있습니다.
웹 퍼포먼스 최적화의 필요성
- 사용자 경험 개선 : 유저의 만족도 및 재방문률의 상승 도모
- 검색 엔진 최적화(SEO) : 검색 크롤러는 웹 페이지의 로딩 속도를 고려하여 검색 결과를 노출시킴. 로딩 속도가 느리다면 검색 엔진 노출이 감소하고 검색 엔진에서의 순위가 하락할 수 있음
렌더링 차단 리소스 최적화 하기
렌더링 최적화의 목표는 중요한 리소스를 인라인하고, 중요하지 않은 리소스를 연기하고, 사용하지 않는 항목을 제거하여 이러한 렌더링 차단 URL의 영향을 줄이는 것이다. 따라서 렌더링을 차단(지연)하는 요소들을 알고 있는 것은 중요하다.
Render blocking 을 유발하는 URL들
<script> tag 중
- 문서의 <head> 에 있는 경우
- defer, async속성이 없는 경우
<link rel="stylesheet"> 중
- disabled속성이 없는 경우 → CSSOM 트리가 구성되지 않으면 렌더 트리를 만들지 못해 렌더링이 차단됨
- 사용자의 기기와 일치하는 미디어 속성이 없는 경우. (media=”all”은 렌더 차단으로 간주.)
⇒ 즉, 일반적인 script, stylesheet는 렌더링 차단 리소스라고 볼 수 있다.
JS 최적화
- HTML 문서 최하단에 배치 (</body> 직전)
- 중요하지 않은 렌더링 차단 URL에 코드가 있다면, async, defer 특성으로 표시
// before
<script src="app.js" type="text/javascript"></script>
// after : async 추가
<script async src="https://google.com/analatics.js" type="text/javascript"></script>- 사용되지 않는 코드 제거
- 만능 유틸 사용 주의하기
- 만능 유틸 라이브러리를 사용할때 필요한 것만 import 하여 사용
Sylesheets 최적화
- CSS는 항상 HTML 문서 최상단에 배치
- 미디어 쿼리를 이용한 최적화
// before
<link href="style.css" rel="stylesheet" />
<link href="portrait.css" rel="stylesheet" />
// after: media 추가
<link href="style.css" rel="stylesheet" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait"/>- 특정 조건에서만 필요한 CSS가 있을때 미디어 쿼리를 이용해 불필요한 렌더 블로킹 방지
- 외부 스타일시트를 가져올때 @import 사용 지양
- 간결한 CSS 선택자 사용. ID 대신 클래스 선택자를 사용하여 중복되는 스타일을 묶어서 처리
- 압축(주석, 공백 제거) 후 난독화. webpack 플러그인 도구 이용
이미지 최적화
💡 HTTP Archive의 2022년 보고서에 따르면 평균적으로 웹사이트 페이지 무게의 45%가 이미지로 구성되어 있습니다.
- HTTP 아카이브
- 이미지 CDN 사용
- 이미지 압축
- GIF → 비디오 대체
- 로딩 지연
- 반응형 이미지 제공 : 데스크톱 크기에 맞춘 이미지를 모바일 장치에 제공하면 필요한 것보다 2~4배 더 많은 데이터를 사용하며 제공되기 때문에 고려해볼만 하다.
- 올바른 크기의 이미지 제공
- WebP 이미지 사용
- 이미지 스프라이트 사용 : 여러개의 이미지를 하나로 만들고, CSS background-position 속성을 사용해 부분 이미지를 사용하는 방법
요청 최소화로 최적화 하기
- 번들러 사용
- 번들러는 여러개의 모듈 파일을 하나로 묶어 1개의 파일을 생성해주는 기능을 한다. 합쳐진 1개의 파일은 번들 파일이라고 한다.
기타 방법
SSR 적용
서버 사이드 렌더링(Server Side Rendering, SSR)을 이용하면 웹 페이지의 초기 로딩 속도를 개선하여 사용자 경험을 향상, SEO를 개선 시킬 수 있다.
CDN(Content Delivery Network) 활용
지리적으로 분산된 서버를 다양한 위치에 있는 유저들에게 빠르게 웹 페이지에 필요한 자산들을 전송할 수 있다.
또한, CDN은 자체적으로 캐시 서버와 클라이언트 서버 전체의 데이터 전송 양을 줄이는데 코드를 최소화 및 압축시킨다.
출처
성능 최적화
애플리케이션 성능 최적화는 앱과 웹에서 모두 중요하다. 최근 웹 애플리케이션은 Ajax 통신, 복잡한 UI 등 많은 기능을 담으면서 크고 무거워졌다. 무거워진 웹은 긴 로딩 시간 함께 사용자 경험
ui.toast.com
Eliminate render-blocking resources - Chrome Developers
Learn about the render-blocking-resources audit.
developer.chrome.com
Web Performance | MDN
Web performance is the objective measurements and the perceived user experience of load time and runtime. Web performance is how long a site takes to load, become interactive and responsive, and how smooth the content is during user interactions - is the s
developer.mozilla.org
'Study > FE-Study' 카테고리의 다른 글
| [JS] Promise (1) | 2023.05.19 |
|---|---|
| [CS] 시간복잡도와 공간복잡도 (0) | 2023.04.21 |
| [JS] Event Loop : JavaScript의 비동기 처리 방법 (0) | 2023.04.15 |
| [React] React의 렌더링 과정 (0) | 2023.04.06 |
| [JS] Closure의 의미와 활용 (0) | 2023.03.21 |