프론트엔드 개발자가 바라볼 수 있는 웹 최적화

1. 웹 최적화는 무엇일까?

• 웹 최적화란?
  • 크게 프론트엔드 단에서 최적화를 할 때 렌더링을 최적화하는 방법과, 로딩을 최적화하는 방법이 있다. 이를 통해 리플로우를 최대한 적게 발생시키고, 화면을 빨리 그리는 것이 목표라고 할 수 있다. 콘텐츠를 브라우저 단에서 최고의 조건에서 다룸으로써 최대한 빨리 클라이언트에게 ui/ux를 제공할 수 있도록 웹 성능을 고도화하는 것을 말한다.
    • 리플로우란?
      • 브라우저는 아래와 같은 순서로 그려지는데, 레이아웃에 영향을 주는 css 속성을 변경할 경우 다시 레이아웃이 그려지는 것을 리플로우라고한다.
      • 또한 레이아웃이 아닌 다른 속성을 건드리는 경우는 리페인트라고 한다.

      • 

  • 프론트엔드 단에서 최적화하는 방법 외에도 백엔드 단에서 최대한 빠르게 사용자에게 닫기까지 조정할 수 있는 방법이 있다. 이는 서버에 쓰이는 네트워크 속도 조절, dns에 맞도록 캐싱/서버 조절 등에 관련되며 속도 향상보다는 안정적인 콘텐츠 전달에 목적을 둔다.
  • 또한 프로토콜 단에서도 최적화를 할 수 있다. 이는 프로토콜인 http 자체의 효과를 극대화해서 구현할 수 있으며, 대역폭, RTT같은 지표를 기반으로 최대한 프로토콜의 속도를 개선할 수 있는 데에 초점을 둔다.
  • 이 외에도 검색 엔진 최적화를 통해 사용자에게 잘 다가갈 수 있도록 하는 장치를 넣어줄 수 있다. 해당 최적화는 meta태그를 적절하게 사용하고, og(사이트 썸네일 개념)를 통해 사용자 친화적인 정보를 줄 수 있도록 하고, 시맨틱 태그를 적절히 사용함으로써 시도할 수 있다.

2. 최적화가 필요한 이유는 무엇일까?

• 사용자의 경험 관점에서, 혹은 컴퓨터의 리소스 관리 관점에서, 우리는 컴퓨터에 사용되는 비용을 생각할 수 있다. 해당 과정에서 최소 비용을 통해 사용자에게 콘텐츠를 제공할 수 있다면, 이는 사용자의 경험 개선으로 이어지며 기업의 경우 실적으로도 이어질 수 있는 중요한 부분이다. 따라서 우리는 개발자로서 최소비용 최대효과를 생각하며 코드를 짤 수 있는 중요한 지표를 얻은 셈이다.
• 프론트엔드 단에 집중해서 말해보자면, html을 읽고 css와 js를 매치하는 과정에서 웹페이지 상의 로딩 시간이 소요된다. 따라서 최대한 빠른 로딩을 통한 사용자 ux 경험 개선을 위해 최적화가 필요한 것이다.

 

3. 이를 위해 어떤 개발을 해야 할까?

• 우선 렌더링이 작동하는 원리를 알고, 어떻게 하면 웹페이지 로딩과 사용자경험 측면에서 시간을 단축할 수 있을지 구조적으로 접근해봐야한다. 즉, 서버 단에서 이 html/css코드를 어떻게 읽어서 클라이언트에 빠르게 보여줄 수 있을지에 대해 생각하면서 개발을 해야한다.
• 아래는 지금 바로 최적화를 실현해볼 수 있는 몇 가지 방법이다.
  • 크게 렌더링을 최적화하는 방법과, 로딩을 최적화하는 방법이 있다. 해당 갈래에서 사용하면 좋을 몇가지 개발 사항을 말해보겠다 :)
  1. 렌더링 최적화
     • 우선 사용하지 않는 css를 제거하자. css 자체가 렌더링을 지연시키는 요소라고 할 수 있기 때문이다. 해당 사이트를 참고하면 사용하지 않는 css요소를 알 수 있다.
     • html에서 렌더링 최적화
       • 불필요한 요소를 감싸는 컨테이너의 사용은 지양하자. dom 트리 자체를 간결하게 하는 것이 최적화에 도움이 된다.
     • css에서 렌더링 최적화
       • 상위요소 + 하위요소 조합은 dom을 거슬러 올라가는 시간을 가질 수 있다. 따라서 하위요소만으로 선택이 가능하다면 그렇게 정리하자.
       • 애니메이션을 css로 구현할 수 있다면, js 대신 써보자.
     • js에서 렌더링 최적화
       • 원래 레이아웃은 비동기가 원칙이지만, 특정 상황에서 동기적으로 동작할 수 있는데 이때 강제동기 레이아웃 이라는 상황이 발생한다. 이를 지양하도록 해야한다.
       • 가령 상위의 dom을 변경하고 나서 특정 dom의 값에 접근하려는 행위가 이에 해당된다. 이는 불필요한 레이아웃 과정을 다시 거친다는 점에서 최적화 시간이 오래 수행된다고 할 수 있다.
  2. 로딩 최적화
     • js나 css 등의 스크립트를 불러올 때, 혹은 이미지 파일을 불러올 때
       • media 속성 (특정 미디어에서 불러오는 css파일을 분리)
       • async 속성 (스크립트 파일을 병렬적으로 다운로드)
       • picture 태그의 type 속성 (미디어에 맞는 속성으로 이미지를 불러옴)
         등을 통해 특정 조건에서 해당 파일을 불러오게 하는 식으로 최적화를 할 수 있다.
     • 또한 다양한 웹팩을 이용해 html/css 파일을 번들링한다.
     • CDN(Content Delivery Network)를 이용해 대용량 콘텐츠를 효율적으로 다운로드 한다.
     • 캐싱을 통해 서버와 클라이언트 단에서 소통하는 작은 저장소를 이용하도록 한다. 브라우저 단에서 우리의 html/css파일을 만났을 때, 더 효율적으로 다운로드하고 파일을 관리해 로딩 최적화를 할 수 있게 한다.

 

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

• 해야한다. 웹 개발을 하다보면 개발자 관점에서 코드를 정리하려는 시도를 하게 된다. 하지만 생각해보면 우리가 만드는 웹이 전달되는 주체는 개발자가 아닌 사용자이다. 즉, 웹을 사용하는 주체를 위해 코드를 짜기 위해서는, 사용자 관점에서 우리의 코드를 잘 전달하기 위한 코드 작성을 해야한다.
• 따라서 이 최적화에 대한 접근과 개발 방법은 중요하다. 서버 단에서 이 코드가 갖는 장점을 생각하게 하고, 또 콘텐츠의 로딩 단에서 생각하게 하며, 궁극적으로는 이 웹과 사용자가 갖는 관계 단에서까지 코드를 확장적으로 생각하게 한다. 즉, 생각의 지표와 생각의 동기를 제공해준다는 점에서도 이 최적화를 위한 개발은 중요하다.
• 사실 html/css라는 프로그래밍 언어가 아닌 마크업 / 스타일 시트 언어를 배우면서, 성능을 개선할 수 있을 거라는 기대를 하지 않았다. 하지만 이 웹 최적화를 공부하면서 추후에 콘텐츠가 방대하게 늘어났을 경우를 대비하기 위한, 혹은 사용자에게 웹을 더 접근성이 있게 제공하기 위한 여러 개선점을 깨닫게 된 것 같다. 코드를 짜는 것에서 그치지 않고 어떻게 하면 사용자에게 더 효율적으로 다가갈 수 있을까?라는 생각을 꾸준히 해봐야겠다.

 

참고 자료

• https://velog.io/@hsecode/%EC%B5%9C%EC%A0%81%ED%99%94-%EC%9B%B9-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-%EB%B0%A9%EB%B2%95-5%EB%B6%84-%EC%99%84%EC%84%B1#-%EC%84%B1%EB%8A%A5-%EC%B8%A1%EC%A0%95-%EB%8F%84%EA%B5%AC
• https://sw-ryu.tistory.com/78