👉 성능은 사용자 유지를 좌우합니다
핀터레스트는 인지된 대기 시간을 40% 줄여 검색 엔진 트래픽과 가입수를 15% 늘렸습니다.
COOK은 평균 페이지 로드 시간을 850 밀리초로 줄여 전환율을 늘리고, 세션당 페이지 수를 10% 늘렸습니다.
연구에 따르면 사이트를 로드하는 시간이 1초 추가될 때마다 사용자 수가 10% 줄어든다는 사실을 발견했습니다.
이처럼 성능은 사용자 경험을 좌우하기 때문에 기본적으로 좋아야합니다.
많은 양의 코드를 제공하면, 데이터가 많기 때문에 최적화되지 않았다고 판단하기도 합니다.
프론트엔드에서 성능을 최적화 하려고 하면 어떤 방법이 있을까요?
https://coffeeandcakeandnewjeong.tistory.com/34 의 글을 보고 공부하고자 올렸습니다.
페이지 로드 최적화
1. 블록 차단 리소스 최적화
HTML을 파싱할 때, CSS나 JS를 만나게 되면, HTML 파싱을 중단하고 해당 파일을 파싱하거나 다운로드 후 실행하게 되는데,
이런 파싱 차단 요소를 블록 차단 리소스라고 합니다.
👀 HTML 파서는 스크립트 태그를 만나면 DOM 생성 프로세스를 중지하고 JS 엔진에 제어 권한을 넘깁니다.
JS 엔진의 실행이 완료된 후 브라우저가 중지했던 시점부터 DOM 생성을 재개합니다.
인라인 스크립트를 실행하게 되면 DOM 생성이 차단되고, 초기 렌더링이 지연되게 됩니다.
블록 차단 리소스는 올바른 실행 위치에서 코드를 작성해야 합니다.
CSS 의 경우 태그 안에서 불러와야 합니다.
<head>
<link href="./css/style.css" rel="stylesheet"/>
</head>
<body>
...
<script>
</script>
</body>CSS 의 경우는 media attribute 로 어떤 단말기의 유형인지에 따라 해당 css를 적용할지 명시하면 불필요한 블로킹을 방지할 수 있습니다.
<link href="mobile.css" rel="stylesheet" media="width:780px" />JS 의 경우 비동기로 다운로드 하도록 명시하면 , DOM 트리나 Sytle 트리를 변경하지 않겠다는 의미이므로 async,defer.. 을 활용합니다.
<script async> html 파싱을 블로킹하지 않고 다운로드preload와 prefetch 방식으로 css 파일의 로드 방식을 변경하는 방법도 있습니다.
<link href="style.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'"/>preload 와 as = style 로 load 이벤트를 막지 않으면서 css 파일을 요청할 수 있습니다.
onload='this.onload=null' 과 'this.rel='stylesheet' 로 css 파일이 로드 이벤트 이후에 파싱되고 onload 함수가 제거됩니다.
실제로 웹 폰트를 preloading 하면서 성능을 향상시킨 사례들이 있습니다.
👀 preload vs prefetch 언제, 무엇을 사용해야 할까?
중요한 컨텐츠를 우선적으로 요청해 먼저 보여져야 할 부분을 preload한다면 빨리 보여질 것입니다.
미래의 여러 곳에서 사용될거라 생각되는 자원들은 prefetch 하라
preload 는 브라우저에게 필요한 자원을 일찍이 받아 우선적으로 보여야할 자산에서 사용
prefetch 는 받아온 요청이나 자원이 유저의 앞으로의 페이지를 위한 것에 유용합니다.
2. 리소스 용량 줄이기
리소스 용량을 줄임으로써 리소스 다운로드 시간을 최적화할 수 있습니다.
개발자 도구의 필터에서 리소스의 유형을 보겠습니다.
XHR
xml http request 로 브라우저단에서 서버단으로 http 비동기 통신할 떄 request 전문이 어떻게 구성되어 서버로 전달되는지와 서버로 부터 요청에 따른 Response 결과를 확인하는 용도이므로 성능 최적화에서는 제외하겠습니다.
JS
1) 트리 쉐이킹
외부 모듈에서 필요한 기능만을 임포트 하는 것으로 파일 사이즈를 줄일 수 있습니다.
-
모든 배열 유틸리티들을 가져온다.
import arrayUtils from 'array-utils';=> bad -
유틸의 일부만 가져온다.
import {unique, implode, explode} from 'array-utils';=> good
2) 불필요한 코드 제거
3) tab size 2 spaces 권장
4) 압축(Minify ) 및 난독화(Uglify)
👀 Minify (압축) : 소스코드 중 아래와 같은 경우를 제거하는 작업입니다.
- 불필요한 줄바꿈, 공백 및 들여쓰기
- 짧게 쓸 수 있는 긴 구문(if 구문, 형 변환 축약 등)
- 스코프 내 사용하지 않는 변수 , 무의미한 매서드 호출
- 주석
- console.log
👀 Uglify (난독화) : 코드 자체를 분석하기 어렵게 만드는 과정
- 민감한 코드를 보기 어렵게 만드는 방법
- 경우에 따라서는 스크립트의 수행 속도에도 영향을 미침
- 변수명, 함수명 치환에서부터 자바스크립트 루틴을 문자열에 바꿔 변수에 담고 뒤섞는 방법도 있다.
CSS
1) 간결한 셀렉터를 사용하자
2) 공통 스타일은 class 정의 후 사용하자
3) 이미지일 경우, png 보다 jpg,jpeg 의 크기가 더 작으므로 jpg,jpeg 의 확장자를 사용하는 것이 유리합니다.
4) 애니메이션이 적용된 요소일 경우, gif 보다 video 태그로 mp4 파일을 사용하는 것이 적은 용량의 리소스를 요청합니다.
5) 폰트는 렌더링 트리가 완성된 후 렌더링 트레에서 글꼴 버전이 명시되어 있으면 폰트를 요청하고, 페인트 단계에서 설정합니다.
- 요청 시점과 페인트 시점 차이로 인해 텍스트가 보여지지 않기도 하여, preload 나 font-display 속성을 @font-face에 추가하여 제어할 수 있습니다.
3. 리소스 요청 개수 줄이기
리소스 요청 개수를 줄이는 것이 사용자에게 더 빠르게 페이지를 로드하는 방법입니다.
1) 이미지 요청 개수를 줄이기
- 이미지 스프라이트
이미지가 다수 사용되는 웹 서비스에서, 각각의 이미지 파일을 서버로 요청하는 것보다, 이미지를 하나로 묶어 한번의 리소스 요청을 통해 가져와 background-position 속성으로 원하는 부분만 표시하는 기법입니다.
- 이미지 지연로딩
이미지가 다수 필요한 서비스 ( 쇼핑?) 등에서 사용자 화면에 보이는 이미지만 요청하고, 사용자가 스크롤을 내려 다른 이미지가 보여야 할 떄 이미지를 요청하는 지연 로딩을 통해 리소스 요청을 줄일 수 있습니다.
👉 사용자가 스크롤을 내려 표시해야 할때 추후에 로드되기( 지연 로드)
CSS JS 요청 개수를 줄이기
모듈 번들러로 css와 js 번들링하기
webpack 과 같은 모듈 번들러로 여러개의 js 파일을 하나의 파일로 번들링할 수 있습니다.
캐싱할 필요없는 style은 내부 스타일 시트 사용하기
<link>로 가져오는 외부 스타일 시트가 아닌 , <style> 태그로 포함되는 시트를 사용하여 css 요청 횟수를 줄일 수 있습니다.
대신 style 시트는 캐싱되지 않습니다.
css, js 파일을 캐싱해서 사용하기
웹 캐시란, 애플리케이션을 빠르게 처리하기 위해 client에서 server로 정적 컨텐츠(js,css,이미지) 등을 요청할 때, 이것을 캐시에 저장해두고 , 해당 컨텐츠를 재호출할 때 서버 요청을 통하지 않고 캐시에서 가져와 사용가능합니다.
- 브라우저 캐시, 프록시 캐시, 게이트웨이 캐시 가 있습니다..
