프론트엔드 사이트 최적화

2023년 9월, 원티드 프리온보딩 프론트엔드 챌린지 요약

 

이제는 데스크탑 기준으로 웹 사이트를 개발해본다고 해보자.

 

데스크탑 기준으로 다양한 브라우저가 존재하며, 현재 기준으로 크롬, 엣지, 웨일, 사파리, IE 순으로 점유율이 높다.

모바일&태블릿 기준으로 본다면, 크롬, 사파리, 삼성인터넷, 웨일, 기타 순으로 점유율이 높다.

 

우리가 웹 사이트를 개발할 때, 고려해야 할 것은 바로 '브라우저 호환성'이다.

보통 'WebKit'을 떠올릴 수 있는데, 이는 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 응용 프로그램 프레임워크다.

쉽게 말해, 브라우저마다 각기 다른 대응을 할 수 있다는 것이다.

 

우리가 브라우저의 호환성을 알아야 하며 중요하게 생각해야 할 필요가 있을까?

당연히 있다. 이는 사이트 최적화를 통해서 사용자 경험 등을 향상시킬 수 있기 때문이다.

 

그렇다면 사이트 최적화를 위해서 알아보아야 할 지식들은 무엇들이 있을까?

 

사이트 최적화

Repaint

▶ 화면의 디자인이 변화 되었을 때

▶ Opacity, Backgorund-Color, Visibility, Outline 등 디자인 관련 스타일이 변경됐을 때

 

Reflow

▶ 화면의 레이아웃이 변화 되었을 때

▶ DOM 노드의 추가, 제거, 위치, 박스 모델의 변경

▶ CSS3 애니메이션과 트랜지션

▶ 폰트, 텍스트 내용 변경

▶ 이미지 크기 변경

▶ Offset, ScrollTop, ScrollLeft 등과 같은 계산된 스타일 정보 요청

▶ 페이지 초기 렌더링

 

위 'Repaint'와 'Reflow'를 최소화하는 것이 최적화에 가장 중요하다.

또한, 'DOM'과 'CSSOM'에 대해 이미지로 자세히 알아볼 수 있는 내용이 인터넷에 있으니 한 번쯤은 보고 학습할 필요가 있다. → beomy.github.io 참조

 

추가적으로 다음과 같은 기준을 지키려고 노력하자.

 

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

▶ HTML 구조를 깊게 짜지 않기

▶ CSS 셀렉터를 짧게 사용하기

▶ 렌터트리 생성 이후 박스 모델 변경하지 않기

▶ 애니메이션이 있는 요소는 'position: fixed | absolute, transform, opacity'를 사용하고, 'will-change'를 지정하기

▶ JS로 스타일을 변경할 때 'display: none'으로 숨긴 후 변경, 노출하기

▶ JS는 '</body> 바로 앞에 작성하기

 

사이트 최적화 - Preload

이 방법은 현재 페이지에서 사용할 소스를 미리 로딩하는 방법이다.

<link rel='preload' as='script' href='preload.js'>
<link rel='preload' as='style' href='preload.css'>
<link rel='preload' as='document' href='preload.html'>
<link rel='preload' as='image' href='preload.png'>
<link rel='preload' as='font' corssorigin type='font/woff2' href='myfont.woff2'>

이 방법을 활용하면, 현재 페이지에서 3초 이내에 반드시 사용되는 리소스에만 사용해야 한다는 것을 알고 사용해야 한다.

이를 남발하면 리퀘스트를 늘리기 때문에 오히려 악영향을 끼칠 것을 알아야 한다.

 

사이트 최적화 - Preconnect

이 방법은 현재 페이지에서 사용할 외부 도메인을 브라우저가 미리 준비하는 것이다.

<link rel='preconnect' href='https://fonts.googleapis.com'>

이 방법은 CPU에 부하를 줄 수 있다. 특히, HTTPS인 경우에는 더 많은 부하를 줄 수 있기 때문에 이를 주의하여 사용해야 한다.

그리고, 사용자가 10초 이상 보지 않는 짧은 내용의 콘텐츠에는 부적절하니 이를 알고 사용하자.

 

 

사이트 최적화 - Prefetch

이 방법은 지금 보는 콘텐츠가 아닌 사용자가 다음에 볼 콘텐츠에서 필요한 내용을 미리 로딩하는 것이다.

<link rel='prefetch' as='script' href='prefetch.js'>
<link rel='prefetch' as='style' href='prefetch.css'>
<link rel='prefetch' as='document' href='prefetch.html'>
<link rel='prefetch' as='image' href='prefetch.png'>
<link rel='prefetch' as='font' corssorigin type='font/woff2' href='myfont.woff2'>

 

사이트 최적화 - Async

이 방법은 JS 파일을 병렬 로딩하며, 로딩이 되면 HTML 파싱을 멈추고 JS를 먼저 실행 후 파싱을 이어서 진행하는 것이다.

<script src='async1.js' async></script>
<script src='async2.js' async></script>
<script src='async3.js' async></script>

이는, DOM에 영향을 주지 않는 JS 파일에 적합하니 유의하자.

예를 들자면, 'Jquery', 'Bootstrap'과 같은 라이브러리가 해당된다.

 

또한, 실행 순서를 보장하지 않으며, 순서를 보장하기 위해서는 자바스크립트로 동적 코드를 삽입하고 값을 'false'로 설정한 뒤 사용해야 한다. → script.async = false

 

사이트 최적화 - Defer

이 방법은 병렬 로딩을 하지만, HTML 파싱이 끝난 후에 실행이 된다.

<script src='defer.js' defer></script>

'</body>' 앞에 코드를 넣는 것과 같으나 간혹 'head' 영역 안에 JS 관련 코드를 넣어야 하는 경우에 유용하다.

그리고 JS 파일의 용량이 크거나 파싱 후 바로 실행시켜야 하는 경우에 사용하게 된다.

 

사이트 최적화 - 이미지 최적화

아마 가장 중요한 부분이지 않을까 싶다.

웹 사이트를 개발하면서 이미지, 아이콘을 사용하게 되는 경우가 굉장히 많은데, 이럴 때 이미지 최적화를 하여 각 파일의 크기를 최소화시켜야 한다는 것이다.

 

▶ 반드시 이미지는 최적화 과정을 거쳐야 한다.

▶ 이미지 파일을 주고 받는 횟수도 줄여주는 것이 중요하다.

▶ 아이콘 이미지 10개보다 아이콘을 모아둔 이미지 1개의 용량이 작으며, 이를 CSS 코드를 이용해 잘라서 사용하는 게 낫다.

▶ 이미지 스프라이트(Image Sprite) 기법을 사용할 수 있다.

         ▷ 이미지 용량도 줄이고 이미지 갯수도 줄여 사이트를 가볍게 만들 수 있다.

         ▷ 'Background-Position', 'Background-Size'를 이용한다.