WebPerformace.md

웹 최적화

웹 최적화란?

웹사이트의 성능, 속도, 안정성, 검색 엔진 최적화 등을 개선해 사용자 경험을 향상 시킨다.

사용자 경험 향상 외에도 웹 최적화를 통해 사이트 유입률을 높여 페이지 방문자를 늘릴 수 있다.

페이지 속도 최적화 / 반응형 웹 디자인 / 검색 엔진 최적화를 통해서 최적화 할 수 있다.

이는 로드 시간, 초당 프레임 수와 같은 객관적인 측정과 컨텐츠가 로딩되는 것, 사용자의 상호 작용에 대한 반응과 같은 주관적인 경험 모두 포함 된다. → 사이트의 로딩 시간이 길어질 수록 더 많은 사용자는 사이트 이용을 포기하게 됨

웹 최적화가 필요한 이유

웹 최적화 없는 개발은 페이지 로딩 시간을 늘이고, 이는 사용자를 페이지에 머물게 하는 기회를 놓치게 된다. 웹 사이트에 머물수록 제작자에게 수익이 생길 가능성이 생기는 경우 (뉴스 레터 구독, 쇼핑몰 등) 최적화를 위한 개발은 해당 서비스를 통한 수익율을 높이는 것에 있어서 필수적이게 된다.

성능의 문제는 지역의 인터넷 연결, 사용 기기에 따라서도 차이를 보인다. 물론 좋은 인터넷 환경에서의 웹 사이트 로딩은 체감 시간과 그에 따라 지불하게 되는 인터넷 비용이이 크지 않을테지만 북서 아프리카의 모바일 기기의 경우 22.6MB CNN.com 페이지를 이용하는 것만으로도 평균 급여의 이틀이 소요될 수도 있기 때문에(!!!) 웹 최적화는 반드시 필요하다.

웹 최적화를 위한 개발

1. 간결한 스타일 작성
   1. 복잡한 셀렉터 사용을 지양한다.
   2. 특이성을 낮게 유지며 레이아웃이 그려지는 시간을 단축한다.
   3. 인라인 스타일을 사용하지 않는다. ⇒ 불필요한 코드 중복 발생 가능성 낮추기
   4. 애니메이션은 자바스크립트 api, 라이브러리보다 CSS를 통해 구현하도록 한다. ⇒ 렌더링 속도 향상
2. 렌더 블로킹 최적화
   1. 웹페이지 로드시 html과 css가 동시에 파싱
      1. css는 head ⇒ 시간 부분 구현으로 빠를수록 좋음
      2. js는 body태그 닫기 직전 ⇒ script를 만나면 html 파싱을 멈추고 해당 파일을 다운로드 받기 때문
3. 전체 로드 시간 단축
   1. 대기 시간, 파일 크기, 파일 수 등의 영향을 받음 ⇒ 파일 가능한 작게 만들고, HTTP 요청 수를 가능한 줄인다.
   2. 사이트를 가능한 빠르게 사용할 수 있는 상태로 만든다.
4. 빨라 “보이는” 사이트
   1. 실제 속도보다 사용자 체감 속도가 사용자 경험에 있어서 더 큰 영향을 미침 → 작업 시간이 오래 걸리더라도 로딩 스피너 부드럽게 움직이는 요소 등을 통해 기다리는 동안 사용자가 계속해서 상호 작용하고 있다고 느끼게 한다.

최적화를 위한 개발이 반드시 필요한가?

상기 두 번째 문항에서도 서술했듯 웹 최적화는 사이트를 통한 직접적인 수입, 사용자의 페이지 재방문률에도 다방면 영향을 끼치는 부분이다.

사용자의 더 편한 웹 경험과 사이트 제작 목적 달성(그것이 무엇이든 웹 최적화는 필요함.) 을 위해서는 반드시 고려해야할 부분이다.

🔗 : 성능 최적화 | TOAST UI

🔗: [최적화] 웹 성능 최적화 방법 5분 완성 - velog

🔗: Web Performance - MDN Web Docs - Mozilla