Skip to content

Latest commit

 

History

History
112 lines (70 loc) · 6.09 KB

week1_think.md

File metadata and controls

112 lines (70 loc) · 6.09 KB
Raw

웹 최적화란?

최고의 웹 성능을 구현하기 위해 최고의 조건을 만드는 다양한 노력을 말한다.

조금 더 쉽게 말하자면, 최고의 성능을 만드는 최적화 조건을 갖추는 것이라고 할 수 있다.

웹 최적화가 필요한 이유는?

웹 성능은 마치 온라인에서 접한 서비스의 첫인상과 직결된다고 느껴진다.

왜냐, 내가 만약 웹서비스에 특정 기대를 지니고 접근한다고 가정해보자.

그런데 웹 로딩 속도가 느려 서비스가 빠르게 구동되지 않는다면,

특히 성격 급한 나같은 한국인은, 기다림을 못참고 서비스를 이탈해버릴 확률이 높다.

서비스를 제대로 이용해보기도 전에 서비스를 이탈해버리는 것이다.

느린 페이지는 사용자가 해당 서비스에 대해 부정적인 이미지를 갖게 하기 충분한 요소이다.

실제로 구글의 조사 자료를 바탕으로 한 **<3초의 법칙>**이 존재한다.

페이지가 3초 안에 로딩되지 않으면 53%의 사용자가 떠나고 길어질수록 이탈률은 늘어난다는 결과가 도출된 것이다.

따라서 서비스의 첫 인상이 사용자의 경험과 직결되는 만큼, 이를 웹서비스에 비유한다면 바로 웹 페이지가 사용자의 경험을 결정하게 될 것이다.

그만큼 사용자의 좋은 사용 경험을 제공하기 위해 웹 로딩 시간을 줄이는 과정은 매우 중요하다.

따라서 이를 위한 웹 최적화 과정이 진심으로 필요하다고 생각한다.

이를 위해 어떻게 개발을 해야 할까?

여러 방법들이 많지만, 지금 내 단계에서 실천해볼 만한 쉬운 방법 위주로 조사해봤다.

로딩 최적화

• css는 head, js는 body 하단에서 불러오기

  • 웹 페이지가 로드되면 html과 css가 동시에 파싱된다. html과 css는 바로 눈에 보이는 시각적 부분을 구현하기 때문에 빠르게 그려질수록 좋다. 그래서 css는 head 내에서 임포트한다.
  • 웹 페이지는 파싱을 실행하면서 script를 만나면 html 파싱을 멈추고 해당 파일을 다운로드한 뒤 실행한다. 따라서 js를 제외한 구조들의 로드가 끝나고 js가 들어오는 것이 좋다. 일반적으로 body 태그를 닫기 직전에 script를 임포트 한다.
  • media 속성 사용
  • media 속성을 사용하면 조건별로 css를 불러올 수 있다.
  • 반응형 웹 제작시 유용하게 사용될 수 있다.
  • 구글 크롬 라이트하우스는(Lighthouse) media 속성이 없는 < link rel=”stylesheet” >태그를 렌더 블로킹 리소스로 판단한다.
  • media 속성이 없는 스타일시트는 해당 스타일시트를 브라우저가 해석하는 동안 화면에 스타일을 불러오지 않는다.

• 웹팩(Webpack) 사용

  • 모듈 번들러 웹팩(Webpack)을 사용해서 css와 js 파일을 번들링해(하나의 파일들로 묶어서) 리소스 요청을 줄일 수 있다
<html><head><link href="main.css" rel="stylesheet"><link href="sub.css" rel="stylesheet"><link href="sub2.css" rel="stylesheet"></head><body><div id="content">
      ...
    </div><script async src="sample1.js" type="text/javascript"></script><script async src="sample2.js" type="text/javascript"></script></body></html>

⬇️ 웹팩 등을 통한 css/js 번들링 후 ⬇️

<html><head><link href="bundle.css" rel="stylesheet"></head><body><div id="content">
      ...
    </div><script async src="bundle.js" type="text/javascript"></script></body></html>

css 최적화

  • 사용하지 않는 css 제거

css는 렌더링 차단 리소스(브라우저의 렌더링을 막는 소스)이기 때문에 사용하지 않는 css는 제거하는 것이 좋다. Unused css는 구글 크롬 라이트하우스(Lighthouse )를 통해 확인이 가능하다는 점!

  • 구글 라이트하우스는 개발자도구 - Lighthouse 탭에서 확인할 수 있다.

  • Performance와 Mobile에 체크한 후 Generate report 버튼을 클릭하면 해당 페이지의 성능이 측정된다.

  • 구글 라이트하우스는 2KB 이상 사용되지 않은 css가 있을 시 오류로 표기한다.

  • 간결한 스타일 작성

복잡한 셀렉터 사용은 지양한다. css가 복잡하고 방대할수록 레이아웃을 그리는 데에 시간이 많이 소요된다. 선택자를 간결하게 사용하여 특이성을 낮게 유지하는 것이 좋다.

.mycard .mycard_item{...} /* BAD */
.mycard_item{...} /* GOOD */

해당 예시에서 .mycard .mycard_item 의 경우 .mycard_item이 부모요소인 .mycard 를 가지고 있는지 확인하기위해 DOM을 거슬러 올라가는 시간이 소요된다.

이미지 최적화

  • img 지연로딩 활용하기

  • loading 속성을 사용해서 이미지를 브라우저 화면에 지연/병렬 로딩할 수 있다.

  • 사용 가능한 값으로 auto, lazy, eager가 있다.

    • auto: 디폴트 값. loading 속성을 쓰지 않은 것과 같다.
    • lazy: 화상에 보이는 부분만 먼저 출력하고 화면 바깥쪽 이미지들은 로딩하지 않는다. 사용자가 화면을 위로 올리면 아래쪽에 있던 이미지가 올라오면서 로딩된다.
    • eager: 화면 위치에 상관없이 페이지가 로딩되자마자 이미지를 로드한다.
     <img src="item.jpg" loading="lazy" alt>

Gzip 사용

  • Gzip을 사용해 텍스트 기반의 리소스로 압축한다.
  • 이미지, pdf 등은 이미 압축된 파일일 경우가 많아서 Gzip을 사용하지 않는다.

최적화를 위한 개발을 꼭 해야 할까?

앞에서 생각을 제시했듯이, 최적화는 좋은 웹 성능, 즉 빠른 웹페이지 로딩 시간을 제공할 수 있는 과정이다.

웹서비스를 만드는 입장에서, 웹최적화를 고려하지 않는다는 것은, 즉 웹서비스를 사용하는 유저의 경험을 고려하지 않는다는 것과 같다고 생각한다.

따라서 사용자의 좋은 서비스 경험을 제공하기 위해, 최적화를 위한 개발은 필요하다!