최적화(Optimization)

💡 최적화

• 주어진 상황에서 원하는 가장 알맞은 결과를 얻을수 있도록 처리하는 과정
  • 최적화는 허용된 자원의 한계 내에서 주어진 요구사항을 만족시키면서 최선의 결과를 얻는 과정이다.
  • 수익과 관련되는 분야에서는 이익을 최대로 내는 과정을 말하고 다양한 분야와 때에 따라 다르게 정의할 수 있고 물류, 설계 문제등에 응용됨
  • 분야마다 달라지지만 결국 주어진 조건으로 최대 효율을 낼 수 있도록 하는걸 의미함

컴퓨터 공학에서의 최적화는?

• 가능한 적은 리소스를 소모하면서 빠르게 원하는 결과를 얻을 수 있도록 하는걸 의미함
  • 알고리즘을 예로 들면 원하는 결과가 나온다면 메모리를 조금이라도 덜 소모하거나 연산 횟수가 한번이라도 더 적은 코드가 효율적이고 최적화된 코드임
    • 더 적은 비용, 더 적은 시간을 소모하기 때문

웹 개발에서의 최적화는?

• 별거없다! 최대한 빠르게 화면을 Render하는것!

---

💡 최적화의 필요성과 효과

이탈율 감소

• 최적화가 되지 않았다는건 결국 화면 로딩속도가 길어 진다는 의미와 동일함
  • 화면을 불러오는 시간이 길어지면 사용자에게 UX적인 안좋은 영향을 끼치게 되고 결국 페이지를 이탈할 확률이 높아짐
    • 여기서 이탈은 사용자가 웹사이트의 첫 페이지에서 아무런 상호작용도 하지않고 종료하는걸 의미함
  • KissMetrics의 연구에 따르면 47%의 소비자는 웹페이지가 2초 이내에 로드되길 기대하고 40%의 소비자가 3초가 되면 웹페이지를 이탈한다고 한다 그래서 결국 페이지로드시간 = 매출과 직결한다는것이다
    • 페이지 로드가 100ms 개선될때마다 수익의 1%가 증가한다고 한다
    • 웹 로딩속도 1초에 아마존 매출 68억이 왔다 갔다 한다고 한다

전환률 증가

• 웹 사이트를 방문한 사람들중 해당 웹사이트의 컨텐츠들을 한개라도 이용한 비율을 의미함
  • 화면이 제대로 표시되고 해도 방문자가 실제 서비스를 이용자로 전화하게 하는건 아주 어려운일임
  • 하지만 이탈해버린 사용자의 전환율은 0%이기 때문에 전환율을 늘려서 사용자를 늘리기 위해선 이탈율을 줄여야함

UX 향상

• 최적화는 UX 향상에 가장 효과적인 개선수단일 수 있다 페이지 로딩속도가 빠를수록 UX가 향상되고 이미 빠르다고 하더라도 최적화를 통해서 UX가 더 향상될 수 있다
  • 최적화를 하지 않아도 로딩중임을 알려주는 UI를 먼저 표시해서 조금 인내심을 가지고 기다리게 할 수 있는 방법은 있으나 최적화보다 UX에 좋다고는 할 수 없음
    • 이방법은 이탈률까지 개선할 수는 없기 때문

---

💡 최적화 기법

HTML 최적화 방법

• DOM 트리 가볍게 만들기
  • DOM 트리가 깊을수록 자식 요소가 많을수록 복잡도가 커지고 복잡도가 클 수록 변경되었을 때 계산해야 하는것도 많아지기 때문에 불필요한 깊이증가 요소가 있다면 삭제하는게 좋음
• 인라인 스타일 사용하지 않기
  • 인라인 스타일은 개별요소에 스타일 속성을 작성해주는 것이기 때문에 클래스로 묶어서 한번에 작성해도 될 스타일 속성을 중복으로 작성하게 되는 경우가 생김
  • 불필요한 코드중복은 가독성을 떨어뜨릴 뿐 아니라 파일 크기를 증가시킴
  • 인라인 스타일은 리플로우를 계속해서 발생시켜 렌더링 완료 시점을 늦춤
    • 하지만 인라인 스타일링은 가장 우선순위로 적용되는 스타일링 기법중 하나이기 때문에 무조껀적인 사용을 하지 말아야 한다는 아님
    • 만일 선 적용 되어야 하는 부분이 있다면 작성되어야 한다고 생각함( 개인적견해 )

CSS 최적화 방법

• 사용하지 않는 CSS 제거하기
  • CSS 파일의 모든 코드 분석이 끝난후에 CSSOM( CSS Object Model ) 트리가 생성됨
  • 그만큼 불필요한 CSS코드가 있다면 제거하는게 좋음
• 간결한 셀렉터 사용하기
  • 셀렉터가 복잡할수록 스타일 계산과 레이아웃에 시간을 더 많이 소모하게 됨
  • 최대한 간결한 셀렉터를 사용하는게 좋음

리소스 로딩 최적화하기

• CSS파일 불러오기
  • DOM트리는 HTML 코드를 한줄한줄 읽으면서 순차적 구성이 되는 반면에 CSSOM은 코드를 모두 해석해야 구성 할 수 있음
  • 그렇기 때문에 CSSOM트리를 가능한 빠르게 구성 할 수 있도록 최상단에 배치하는게 좋음
• JS파일 불러오기
  • JS는 HTML,CSS를 동적으로 만드는 코드들임
  • Script요소를 만나는 순간 스크립트가 실행되고 그 이전까지의 생성된 DOM까지만 접근 할 수 있기 때문에 최하단에 배치하는게 좋음
  • 그리고 DOM트리는 스크립트 실행이 완료되기 전까지 DOM트리 생성이 중단되기 때문에 트리 생성이 중단된 시간만큼 렌더링 완료 시간이 늦춰지게됨

브라우저 이미지 최적화하기

• 스프라이트 이미지
  • 여러가지 이미지를 하나하나 핸들링 하는것이 아닌 여러개의 이미지를 한 파일로 모아서 관리하는 방법임
  • 여러개의 파일의 이미지가 사용이 될 경우에는 용량, 처리속도의 효율성이 좋지않다
    • 그래서 그걸 하나의 이미지 파일로 만들어 놓은게 스트라이프 이미지라고 생각하면 편함
  • 스트라이프 이미지는 많은류의 사진을 한곳에 모아둔 것이기 때문에 기본용량이 각각의 이미지 용량을 합친것보다 적음
  • 그리고 한 파일에서 랜더링 되는것이기 때문에 처리속도도 빠르고 유지보수도 쉽다는 의견들이 많음
• 아이콘 폰트 사용하기
  • 아이콘 사용량이 많을때는 모든 아이콘을 이미지가 아닌 아이콘 폰트를 사용해서 용량을 줄일 수 있음

CDN 사용하기(Content Delivery Network)

• CDN은 콘텐츠를 좀더 빠르고 효율적으로 제공하기 위해 설계됨
  • 네트워크 지연은 유저와 호스팅 서버간의 물리적 거리의 한계가 존재하기 때문에 발생할 수 밖에 없음
  • 유저와 서버의 거리가 멀면 지연도 늘어남 그래서 세계곳곳에 분포한 분산된 서버에 콘텐츠를 저장해둠
    • 쉽게 이야기하면 CDN은 유저가 가까운곳에 위치한 서버의 데이터를 가져옴 그래서 데이터가 전달되기 위해서 거쳐야하는 서버의 개수가 줄어들어서 로딩속도가 빠름