Optimization (최적화)

• 주어진 조건으로 최대의 효율을 낼 수 있도록 하는것이다.

웹 개발에서의 최적화

• 주어진 조건 아래 최대한 빠르게 화면을 표시하도록 하는것이다.

❗️최적화의 필요성 및 효과

• 이탈률 감소
• 전환율 증가
• 수익 증대
• 사용자 경험(UX) 향상

📝Optimization 기법 : 최적화 기법

✅HTML 코드 최적화하기

DOM 트리 가볍게 만들기

• DOM 트리가 깊을 수록, 자식 요소가 많을 수록 DOM 트리의 복잡도는 커지게 된다.
  HTML 요소들의 관계를 잘 살펴보고, 불필요하게 깊이를 증가시키는 요소가 있다면 삭제해야 한다.

인라인 스타일 사용하지 않기

• 인라인 스타일은 개별 요소에 스타일 속성을 작성해주는 것이기 때문에, 클래스로 무꺼엇 한 번에 작성해도 될 스타일 속성을 중복으로 작성하게 되는 경우가 생김 → 이는 가독성을 떨어뜨리고, 파일의 크기를 증가시킨다.

✅CSS 코드 최적화하기

사용하지 않는 CSS 제거하기

• CSS 파일의 모든 코드의 분석이 끝나면 CSSOM이 생성되는데, 불필요한 CSS 효과가 있다면 CSSOM 트리의 완성이 늦어짐 → 따라서 사용하지 않는 CSS 효과가 있다면 제거하는 것이 좋다.
  간결한 셀렉터 사용하기

✅리소스 로딩 최적화하기

CSS 파일 불러오기

• DOM 트리는 HTML 코드를 한줄 한줄 읽으면서 순차적으로 구성할 수 있지만, CSSOM 트리는 CSS 코드를 모두 해석해야 구성할 수 있다 → CSSOM 트리를 가능한 빠르게 구성할 수 있도록 HMTL 문서의 최상단에 배치하는 것이 좋다.

Javascript 파일 불러오기

• Javascript는 DOM 트리와 CSSOM 트리를 동적으로 변경할 수 있는데, HTML 코드 파싱 중에 script 요소를 만나는 순간 해당 스크립트가 실행되며, script 요소 이전까지 생성된 DOM 까지만 접근할 수 있다.
  → script 요소는 HTML 코드의 중간에 넣으면 안된다.

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

이미지 스프라이트

• 여러 개의 이미지를 모아 하나의 스프라이트 이미지를 만들고 CSS의 background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법

아이콘 폰트 사용하기

• 아이콘 사용이 많을 때는 모든 아이콘을 이미지로 사용하는 것이 아니라 Font Awesome과 같은 서비스를 통해 아이콘 폰트를 사용하여 용량을 줄일 수 있다.
• WebP 또는 AVIF 이미지 포맷 사용하기

Lighthouse?🤔

구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴

성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 어떤 웹페이지든 품질 검사를 할 수 있고

다양한 경로를 통해 사용할 수 있으며, 검사할 페이지의 url을 Lighthouse에 전달하면 Lighthouse는 해당 페이지에 대한 여러 검사를 진행한다.

📌Lighthouse 분석 항목

Performance(성능)

화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기까지 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등등

Accessibility(접근성)

웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인하고 대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등등

Best Practices(권장사항)

웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인하고 HTTPS 프로토콜을 사용하며, 사용자가 확인할 확률은 높지 않지만 콘솔 창에 오류가 표시 되지는 않는지 등등

SEO(검색엔진 최적화)

웹 페이지가 검색 엔진 최적화가 잘 되어 있는지 확인하고 애플리케이션의 robot.txt가 유효한지, meta 요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리는 없는지 등등

PWA (Progressive Web App)

웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인하고 앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지 등등을 점수가 아닌 체크리스트로 확인