[포트폴리오] 포트폴리오 웹사이트 최적화(?) - 3 (CRP, link rel = pre connect, pre-load, dns-prefetch))

라이트 하우스 검사 결과를 보다보니 생긴 이 항목...!

 

preconnect나 dns-prefetch를 하라고 한다

항목을 보니 배경 이미지를 https://www.transparenttextures.com/ 여기서 url로 받아 사용하고 있었는데

이를 원 출처에 preconnect나 dns-prefetch 요구를 해서 좀 더 빨리 받아오라는 뜻인 거 같다

태영님과 스터디를 할 때 preconnect 인가 이거 본 거 같은데 잘 기억이 안 난다;

다행히 라이트 하우스는 아주 친절하게 어떻게 하면 해결할 수 있는지도 알려준다

learn how to ~를 누르면 아래의 url로 이동한다

 

https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect?utm_source=lighthouse&utm_medium=devtools&hl=ko

필수 원본에 사전 연결  |  Lighthouse  |  Chrome for Developers

 

<link>의 rel 속성에 preconnect나 pre-load, dns-prefetch 중 적절한 값을 넣으면 된다

찾아보니 이 값들은 브라우저에게 리소스 우선순위를 변경해달라고 힌트를 주는 값이라고 한다

 

검색을 해보니 브라우저는 CRP(critical rendering path)를 기준으로 리소스의 우선순위를 정한다고 한다

CRP를 검색해보니 MDN에서는 아래와 같이 설명하고 있었다

 

중요 렌더링 경로 (Critical Rendering Path)는 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시킵니다. 중요 렌더링 경로는 Document Object Model (DOM), 
CSS Object Model (CSSOM), 렌더 트리 그리고 레이아웃을 포함합니다.

 

즉, 브라우저가 서버로부터 받은 HTML, CSS, Javascript 파일을 받아 파싱하면서 DOM tree, CSSOM tree를 만듦 -> 

이 둘을 합쳐 Render tree 만듦 -> 레이아웃 - 페인트 - 합성 단계를 거쳐 화면에 그려줌

이 과정에서 브라우저가 파싱을 하면서 받아와야하는 리소스에 대해 우선순위를 브라우저가 추론한다고 한다.

그런데 브라우저가 추론한 우선순위가 항상 옳은 것은 아닐 수도 있고, 개발자는 preconnect 등을 통해 우선순위를 다르게 변경할 수 있다 

 

여기서 내가 헷갈린 것이 있었는데 브라우저 렌더링과 CRP가 무슨 차이인가 하는 점이었다

브라우저 렌더링은 말 그대로 브라우저가 렌더링을 어떻게 하는지에 관한 전반적인 내용이었고

CRP는 이러한 브라우저 렌더링 과정을 포함하지만 조금 다른 개념이었다

CRP는 사용자가 웹 페이지의 첫 화면을 빠르게 볼 수 있도록 최적화하는 것에 좀 더 초점을 둔 개념이었다

때문에 CRP를 향상시키면 렌더링 성능을 향상시킬 수 있다는 것이었다 

 

이를 위해서 아래와 같은 방법들을 사용할 수 있다고 MDN에 적혀있었다

1) 자원 다운로드를 연기함으로써 중요 자원들의 수를 최소화하기
2) 각 요청에 대한 파일 사이즈에 따라 필수적인 요청 횟수 최적하하기
3) 다운받을 중요 에셋의 우선순위를 정함으로써 중요 자원 불러오는 순서 최적화하고, 중요 경로 길이 최소화하기

 

그래서 라이트 하우스에 저렇게 나온거였구나...

근데 이런 CRP가 어디서 발생되는 건지 전체적으로 흐름을 알고 싶어서 찾아보았다

 

components of web, web structure 등의 검색어로 검색을 해보니 위와 같이 웹이 어떻게 구성되어있는지에 대해서 알게 되었다

웹은 7개의 컴포넌트로 구성되어있는데 각각의 역할은 아래와 같다

 

1. User Interface

웹 페이지에서 보이는 주소 표시줄, 홈버튼, 뒤로 가기 등을 통해 사용자와 웹페이지가 상호작용할 수 있도록 해주는 부분

ex: 구글의 검색 버튼, 주소 표시줄 등

 

2. Browser Engine
사용자 인터페이스와 렌더링 엔진 사이에 다리 역할을 함

사용자의 입력을 받아 렌더링 엔진을 제어함

ex: 사용자 인터페이스에 있는 새로고침 버튼 누름 -> 브라우저 엔진은 명령으로 들어온 새로고침을 수행함

3. Rendering Engine

HTML, CSS, Javascript 코드를 해석하고 파싱해 사용자 인터페이스에 보여줄 웹 페이지를 만듦

브라우저마다 고유한 렌더링 엔진이 있음

 

- Google Chrome and Opera v.15+: Blink

- Internet Explorer: Trident

- Mozilla Firefox: Gecko

- Chrome for iOS and Safari: WebKit

 

4. Networking
HTTP 또는 FTP와 같은 표준 프로토콜을 사용해 서버와 통신하고 외부 리소스를 받아옴 

5. Javascript Interpreter
웹 페이지에 내장된 자바스크립트 코드를 해석하고 실행함

6. UI Backend
브라우저가 동작하고 있는 운영체제의 인터페이스를 따르는 UI를 제공함

ex: alert, select 박스 등 운영체제마다 기본 스타일이 다름 

7. Data Storage/Persistence 
데이터를 로컬에 저장하기 위해 쿠키나 indexDB 등을 사용해 브라우저에 저장함

 

이 중 렌더링 엔진에서 CRP를 기준으로 어떤 리소스가 먼저 다운로드 될지 말지 우선순위를 정한다는 것이었다

 

여기까지는 이해했다

 

그러면 preconnect, preload, dns-pretetch의 차이점은 뭘까?

 

1. <link rel="preload">

현재 페이지에서 필요한 리소스의 우선순위를 높여 빠르게 사용할 수 있도록 함

href, as 속성을 지정해주어야한다

as의 값으로 제공하는 콘텐츠는 여기를 참조하자

또한 외부 리소스를 가져오는 경우 CORS 요청을 하기 때문에 crossorigin을 써주어야 한다

특히 as 속성을 제대로 지정하지 않으면 브라우저는 미리 가져온 리소스를 사용하지 않는다

 

2. <link rel="dns-prefectch">, <link rel="preconnect">

 

https://so-so.dev/web/index-html-1/

https://black7375.tistory.com/74#2.1-%EB%B0%B0%EC%B9%98%EC%88%9C%EC%84%9C

(위의 블로그들을 참고했고 자세하게 적혀있으니까 읽어보면 좋을 듯하다)

둘 다 외부 도메인의 리소스를 참고하는 것을 브라우저에게 미리 알려서 외부 도메인과 미리 연결해놓는다는 점은 비슷한데

차이점을 잘 모르겠어서 찾아보았다

 

간단하게 설명하자면 

dns-prefetch는 DNS 조회까지만 미리 처리해놓는 것이고

preconnect는 DNS 조회 + TCP + TLS 을 미리 수행해 나중에 해당 도메인에서 리소스를 받아와야할 때, 해당 연결을 이용해 필요한 리소스만 빠르게 가져올 수 있게 해준다고 한다

 

나는 백그라운드 이미지가 초기에 바로 보여야하기 때문에 preload를 사용하기로 했다 

 

app/layout.tsx에 아래와 같이 작성하였다

 

 

전(회색)

 

후(초록색)

브라우저가 받아와야 할 리소스의 우선순위가 바뀌어 먼저 받아와지는 것을 볼 수 있다

 

근데 texturetransparent 홈페이지에 가보니 아래와 같이 적혀있었다

 

프로덕션 환경에서는 이미지 다운 받아서 리호스트 해라(너네 서버 써라^^)

하하...

  .section {
    position: relative;
  }

  .section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../public/dark-brick-wall.png");
    opacity: 0.9;
    z-index: 0;
  }

 

결론적으론 public 폴더에 해당 이미지 다운로드 해서 넣어놓고 사용하는 걸로 바꾸었다

그래도 preconnect, pre-load, dns-prefectch를 공부할 수 있는 좋은 시간이었다

 

 

참고 

- https://yozm.wishket.com/magazine/detail/1338/ 

- https://developer.mozilla.org/ko/docs/Web/Performance/Critical_rendering_path

- https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel

- https://yeoulcoding.me/270

- https://www.browserstack.com/guide/browser-rendering-engine

- https://so-so.dev/web/index-html-1/

- https://black7375.tistory.com/74#2.1-%EB%B0%B0%EC%B9%98%EC%88%9C%EC%84%9C