프론트 최적화를 위한 눈물 겨운 노력

1. 비동기 처리

요청에 대한 응답이 끝날때 까지 다음 작업을 기다릴 필요가 없다면 비동기로 처리한다. 이는 작업 순서(비지니스)를 정확히 알고 있어야 하며 코드의 의존관계를 잘 파악해야만 적절히 적용 가능하다. 그리고 단순히 비동기를 사용하는 것으로 그치는게 아니라 어느 지점에서 비동기와 동기를 구분해서 사용해야 하는지 깊게 고민해봐야 하며 연속적인 비동기 작업중에 중간중간 필요한 작업을 배치시켜 효율을 극대화 할 수 있어야 한다.

2. 이미지 처리

 - 레이지 로드

다양한 종류의 리소스가 있지만 가장 큰 용량 중 하나가 이미지다.

그렇기 때문에 이미지 요청은 가장 나중으로 미루는 것이 사용자 경험상 좋다.

브라우저 별로 최대 요청 상태에 있는 커넥션 갯수가 한정되어 있기 때문에 요청에 대한 응답이 오래 걸릴 수록 이후의 작업은 느려지기 때문이다.

여기서 주의해야 할 점은 UI 설계시 이미지가 없는 상태에서도 구조가 흩으러지지 않게 만들어두는 것이 좋다. 이미지 로드 후 UI가 바뀌면 UX에 부정적영향을 주기 때문

 - 이미지 코드화(http://tools.dynamicdrive.com/imagetobase64/), 아이콘은 svg로 사용.

참고 : 브라우저별 최대 요청수 / HTTP2 도입 한다면

 - 이미지 포맷으로 webp 사용 (크롬외에는 거의 지원하지 않음)

3. 코드 최적화

비효율적인 코드나 중복된 코드를 찾아내어 수정하거나 삭제한다. 사실 너무 당연한 말이지만 생각보다 한번 작성하고 잘 돌아가는 코드를 두 번 이상 보는 경우가 드물다.

4. 번들링

요청에 대한 최대값이 브라우저마다 존재하기 때문에(2항목 참고) 서버에 대한 요청 수를 줄이는 게 중요하다. HTTP2를 도입한게 아니라면 더욱 중요해지는데 다양한 코드를 한데 묶어서 하나의 파일로 만들어 사용하면 좋다. 대표적인 번들러로 browserify / webpack / rollup.js 가 있으며 파일들의 의존성을 파악해서 효율적으로 하나의 파일이나 설정에 따라서 몇개의 파일로 분할하여 파일을 만들어준다. 추가적인 작업으로 ugliify, minify 작업을 통해 파일 크기를 더욱 줄일 수도 있다.

5. 불필요한 요청 제거

복붙에 대한 대가로 불필요한 요청이 발생될 수 있다. 다양한 라이브러리가 사용되는 모던 웹에서 생각보다 많은 불필요한 라이브러리를 호출하게 되는데 해당 라이브러리가 필요한 페이지나 작업시 요청할 수 있어야 한다.

6. 서버 콘텐츠 인코딩(압축)

response header를 보면 서버에 대한 정보를 볼 수 있는데 Content-Encoding 이란 항목이 있으며 다양한 압축 형태가 있으며 보통 gzip 으로 많이 사용된다.

이는 응답 데이터의 압축형태를 지칭하며 원본 크기보다 작은 크기로 데이터를 보내주어 요청에 대한 응답속도를 향상시킬 수 있다.

7. preconnect & prefetch(Link, DNS, prerender)

사전연결 및 자원힌트

https://www.speedshop.co/2015/11/05/page-weight-doesnt-matter.html

https://www.keycdn.com/blog/resource-hints

8. 성능 측정

webpagetest, 구글 페이지스피드 인사이트

*프론트엔드 체크리스트