데굴데굴

TIL: 2022-12-05 본문

Lesson/TIL

TIL: 2022-12-05

aemaaeng 2022. 12. 5. 20:56

⚙️ 오늘 배운 주제

최적화 (Optimization)

 

🐹 오늘의 기분

산뜻하게 월요일을 시작했다. 사실 축구 생각에 하루종일 도파민이 넘쳐흘러서 피곤해도 피곤한 것 같지가 않았다. 이따 새벽에 16강 경기를 볼지 말지 고민 중인데 이런 건 또 실시간으로 봐줘야되는 성격이라,, 아마 볼 것 같음 ㅠㅠㅋㅋㅋ 자발적으로 밤새는 것과 할 일에 의해 밤새는 건 엄연히 다르니까 😌

오늘 학습은 하루종일 솔로였는데 블로깅한 내용으로 소그룹끼리 모여서 이야기해보는 시간이 있었다. 처음엔 잘못 써진 건 줄 알았는데 블로깅 제출 페이지에 가보니까 진짜로 그룹이 짜여 있어서 부랴부랴 작성했다. 직접 Lighthouse를 돌려보고 분석 결과를 글로 써보니 웹을 구축할 때 신경써야 할 부분이 어떤 것인지 알 수 있었다.

 

🗝 키워드

최적화, 이미지 스프라이트, cdn, WebP, AVIF, 캐시 관리, Tree shaking, Lighthouse

 

🗣 스스로에게 설명

최적화: 가능한 적은 리소스를 소모하면서 최대한 빠르게 원하는 결과를 얻을 수 있도록 하는 것

웹 접근 속도가 느려지면 사용자의 이탈율이 높아지고 이는 곧 수익과도 직결됨.

웹 개발에서의 최적화 = 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 만드는 것

 

HTML, CSS 코드 최적화

- DOM 트리 가볍게 만들기

불필요하게 깊이를 증가시키는 요소가 있다면 삭제한다.

<div>
  <ul>
    <li>리스트 요소1</li>
    <li>리스트 요소2</li>
    <li>리스트 요소3</li>
    <li>리스트 요소4</li>
  </ul>
</div>

<!-- 불필요한 div는 삭제하는 것이 좋음 -->
<ul>
  <li>리스트 요소1</li>
  <li>리스트 요소2</li>
  <li>리스트 요소3</li>
  <li>리스트 요소4</li>
</ul>

스타일이 적용된 요소가 아닌 이상 불필요하게 DOM 트리를 깊게 만드는 요소는 삭제하는 것이 좋다. 

 

- 인라인 스타일 지양하기

- 사용하지 않는 CSS 제거하기

- 간결한 셀렉터 사용하기 (최대 두 개)

- CSS <link> 태그는 <head>에서 불러오기

- <script> 태그는 DOM 트리가 생성된 직후에 파싱하도록 <body>가 끝나기 직전에 작성한다.

 

브라우저 이미지 최적화

1. 이미지 스프라이트

여러 개의 이미지를 모아 하나의 스프라이트 이미지로 만듦

마치 스티커북처럼 모아둔다고 생각하면 됨!

background-position 속성으로 일정 부분만 클래스로 구분해 사용

네이버 데스크탑 홈페이지에 이런 게 잘 적용되어 있다.

네이버에 쓰인 스프라이트 이미지

 

2. 폰트 글꼴 사용하기

이미지를 불러오는 대신 아이콘을 폰트 형식으로 제공하는 사이트를 이용할 수 있다.

ex) 폰트어썸

사이트에서 키트를 발급받아 <head> 쪽에 cdn 코드를 넣는다. 

 

CDN (Content Delivering Network)

유저와 서버 간의 물리적 거리를 보완하기 위해 전세계 곳곳에 분산되어 설치된 서버

 

3. WebP 또는 AVIF 이미지 포맷 사용하기

jpeg/png보다 압축률이 좋아 용량이 훨씬 감소된다. 하지만 모든 브라우저에서 지원되지 않아 <picture>태그로 분기해주는 것이 적절하다.

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>

webp를 지원하지 않는 브라우저라면 밑의 img 태그가 적용되는 방식이다.

 

 

캐시 관리

Cache-Control : max-age=<초>

ex) Cache-Control: max-age=60

해당 파일이 60초 동안 유효 -> 60초 안에 같은 요청이 들어오면 캐시에서 꺼내줌

🤔 캐시 유효 시간이 지났지만 캐시에 같은 파일이 남아있는 경우에는 그냥 캐시에서 불러올 수 없나?
👉 캐시 검증 헤더와 조건부 요청 헤더 활용
캐시 검증 헤더
=> Last-Modified : 데이터가 마지막으로 수정된 시점 응답, If-Modified-Since와 묶어서 사용
=> Etag: 데이터의 버전 응답, If-None-Match와 묶어서 사용


조건부 요청 헤더
=> If-Modified-Since: last-modified 이후에 서버 리소스가 수정되었는지 확인, 수정되지 않았다면 캐시에서 꺼내온다
=> If-None-Match: 캐시에서의 Etag값과 서버 리소스의 Etag값이 같은지 확인 같으면 캐시에서 꺼내옴

 

Tree Shaking

잔가지를 털어내듯 불필요한 코드를 제거하는 것
http 요청 수와 자바스크립트 파일의 크기가 늘어남

웹팩 사용 환경에서 트리쉐이킹 수행하기

1. 필요한 모듈만 import하기

2. Babelrc 파일 설정하기: ES6의 import를 require로 변환하는 과정에서 문제가 생김. require는 모든 모듈을 불러오기 때문

{
  “presets”: [ 
    [
      “@babel/preset-env”,
      {
	    "modules": false
      }
    ]
 ]
}

 

3. sideEffects 설정하기: package.json에 작성, sideEffects 사이드이펙트가 생기지 않을 것이므로 이 코드는 제외시켜도 된다는 의미

4. ES6 문법을 사용하는 모듈 쓰기.

 

Lighthouse

구글에서 개발한 오픈소스

웹페이지의 품질 검사 기능 제공 => 낮은 지표에 대해 개선 가능

개발자 도구의 Lighthouse 탭에서 실행 가능, CLI에서도 실행 가능하다.

CLI에서 실행하기

npm install -g lighthouse

검사 실행

lighthouse <url>

모든 옵션 보기

lighthouse --help

 

Performance, Accessibility, Best Practices, SEO, PWA 지표 제공

- Performance: 화면에 콘텐츠가 표시되는 시간, 표시된 후 사용자와 상호작용하기까지 걸리는 시간, 화면에 불안정한 요소는 없는지 등을 확인

- Accessibility: 웹 접근성을 잘 갖추고 있는지를 확인

- Best Practices: 웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인, https 프로토콜을 사용하는지, 콘솔에 오류가 표시되지는 않는지 확인

 

Performance metrics

First Contentful Paint 성능 지표 추적
Largest Contentful Paint 뷰포트를 차지하는 가장 큰 콘텐츠의 렌더 시간 측정
Speed Index 성능 지표 추적, 얼마나 빨리 컨텐츠가 시각적으로 표시되는가
Time To Interactive 상호작용이 가능한 시점까지의 시간 측정
Total Blocking Time 상호작용하기까지의 막혀있는 시간 계산 50ms만 남겨둠
Cumulative Layout Shift 컨텐츠가 화면에서 얼마나 많이 움직이는지 확인 (불안정한 요소)

 

Lighthouse로 네이버 데스크탑 웹사이트를 분석해본 글이다.

 

<WEB> Lighthouse로 웹사이트 성능 분석하기

Lighthouse 구글에서 개발한 오픈소스 웹페이지의 품질 검사 기능 제공 -> 이를 참고하여 낮은 지표에 대해 개선 가능 lighthouse 성능 분석은 결국 로컬 pc에서 진행되기 때문에 사용자의 pc 성능에 따

haruisshort.tistory.com

 

'Lesson > TIL' 카테고리의 다른 글

TIL: 2022-12-07  (0) 2022.12.07
TIL: 2022-12-06  (0) 2022.12.06
TIL: 2022-12-02  (0) 2022.12.02
TIL: 2022-12-01  (0) 2022.12.01
TIL: 2022-11-30  (0) 2022.11.30
'Lesson/TIL' Related Articles more
Comments