2021. 8. 29. 02:01ㆍ카테고리 없음
이 글은 아래 링크의 내용을 바탕으로 작성되었습니다.
https://web.dev/prioritize-resources/
https://www.youtube.com/watch?v=R_D0rL094F4
https://beomy.github.io/tech/browser/preload-preconnect-prefetch/
기본 지식 이해
브라우저의 기본 다운로드 우선순위
브라우저는 기본적으로 '이 자원이 얼마나 중요할 것 같은지'를 판단하여 우선순위를 매깁니다. 따라서 <head>, <script> 태그를 통해 다운로드 되는 자원은 '높은(high)' 우선순위를 가지게 됩니다. 하지만 만일 해당 태그에 'async' 속성이 명시되어 있다면 해당 자원은 '낮은(Low)' 우선순위를 가지게 됩니다.
prefetch
prefetch 는 '다음 페이지'를 위해서 자원을 미리 받아놓는다는 뜻입니다. 다운로드를 하기는 하지만 다운로드 우선 순위가 최하위로 밀리게 됩니다.
preload
preload 는 '현재 페이지'에 사용될 자원을 우선적으로 다운로드 받는다는 의미입니다. 이게 과연 무슨 의미가 있는 건지 싶겠지만, 브라우저가 기본적으로 정해진 다운로드 순서보다도 앞서서 특정 자원을 다운로드 받고 싶다면 이 기능을 유용하게 사용할 수 있습니다.
preconnect
preconnect 는 자원을 가져오는 것은 아니지만 추후에 자원을 가져올 것을 대비해서 미리 외부 도메인과의 연결을 생성할 수 있습니다. 물론 추후에 요청에 걸리는 시간을 0으로 만드는 것은 아니지만 연결을 미리 형성해놓기 때문에 DNS, TCP, TLS 왕복에 걸리는 시간을 절약할 수 있습니다.
as 속성
미리 다운로드 받는 자원의 형식을 명시합니다. - 명시하지 않을 경우 파일이 다운로드 되지 않을 수도 있거나 다운로드 받더라도 해당 자원을 사용하지 않을 수도 있습니다.
crossorigin 속성
crossorigin 속성을 anonymous 로 설정하면 특정 식별용 header 나 쿠키 등의 데이터를 가지고 있지 않은 데이터도 불러옵니다. 마찬가지로 명시하지 않을 경우 파일이 정상적으로 다운로드 되지 않을 수 있습니다 (여러 번 다운로드 될 가능성 존재)
자세한 내용은 아래의 링크를 참고 바랍니다.
https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
자원 다운로드 전략 세우기
기존의 초기 자원 다운로드 과정은 위와 같습니다. css 와 번들 자바스크립트를 '먼저' 다운로드 받은 후에 다른 폰트와 이미지와 같은 정적 파일들을 다운로드 받습니다. 하지만 제 개인적인 생각으로는 초기 화면의 상단에 있는 이미지와 글자에 대한 폰트 파일은 렌더링이 수행되기 이전에 미리 다운로드 받는 것이 좋을 것 같습니다. 이미지를 아무리 최적화 하더라도 다음과 같이 자바스크립트 번들 다운로드 이후에 이미지나 폰트가 다운로드 받는 상황은 아래와 같은 문제를 야기할 수 있기 때문입니다.
이미지가 위에서부터 아래로 렌더링 되는 것이, 폰트가 갑자기 뒤바뀌거나 나중에 가서야 튀어나오는게, 이용자로 하여금 사이트의 성능에 대해 얼마나 나쁜 인식을 가지게 할지는 굳이 말하지 않아도 알 것이라고 생각합니다.
따라서 저는 이용자가 '빠른 로딩'을 체감하기 위해서는 미리 초기 화면 이미지와 웹폰트가 적용되어 있는 것이 필요할 것입니다. 따라서 저는 bundle 자바스크립트 파일과 css 파일을 가져오는 동시에 이미지와 웹 폰트 파일 또한 병렬적으로 다운로드 받는 전략을 세우도록 하겠습니다.
이를 위해 제가 head 태그 안에 작성한 코드는 위가 전부입니다. 초기 로딩만을 일단 고려해서 preload 만을 사용했습니다. 모든 자원을 미리 로드하기 보다는 이용자가 처음에 보게 될 홈 페이지 '상단'의 요소를 보여주기 위한 자원들만을 선정했습니다. 이미지의 경우엔 media 속성을 통해 기기마다 다른 크기의 이미지를 미리 불러오도록 설정했습니다.
이를 통해 자원 다운로드 과정이 위와 같이 변경된 것을 확인할 수 있습니다. 위의 전략을 적용하면 상단 컨텐츠와 폰트가 모두 미리 다운로드 되어 바로 화면상에 보이는 것을 확인할 수 있을 것입니다.