처음에는 블로그에 남길 생각이 없었는데, 하다보니 꽤나 중요하다고 생각해서 간단하게나마 기록하려고 한다.
웹사이트의 첫 페이지의 로드는 사용자경험과 이탈율에 꽤 큰 영향을 줄 것이라 생각한다.
최근 UOSTime을 개선하면서 최적화에도 관심이 생기고 있는데, 오늘은 웹페이지 로드를 최적화했다.
UOSTime의 첫 페이지는 로그인페이지다. (자동로그인 사용자 제외)
이 페이지는 로그인 폼과 푸터, 모달들로만 이루어졌지만, 이미지나 폰트의 뒤늦은 로드 때문에 Layout Shift가 여러 번 발생했다. 더 빠르고 효율적인 렌더를 위해, 화면이 한 번에 짠! 하고 나타날 필요가 있었다.
기존 로그인 페이지의 로드 과정이다. 로드 중간에 Experience(빨간 박스)로 표시되는 부분이 Layout Shift다.
여러 가지 최적화를 하고, 오늘 Layout Shift까지 해결한 후의 모습이다. Experience 항목 자체가 사라졌다.
(다른 것도 많이 줄어든 것처럼 보이지만, 이전에 누적된 여러 최적화와 로컬 테스트로 인한 것이므로 Layout Shift만 비교해서 보자.)
- CSS, 이미지, 폰트 등, 렌더에 필수적인 파일을 preload 했다. 특히 폰트 파일은 preload시 crossorigin 속성을 주도록 한다.
- 이미지는 크기를 명시해주어 이미지 로드가 완료되기 전에 미리 공간을 확보할 수 있도록 한다.
- 스크립트 태그는 DOM 생성을 중단시키므로 렌더과정에 필요한 것이 아니면 defer나 async를 상황에 맞게 적극적으로 사용하도록 한다.
여기에 HTTP/2를 적용하면 더 좋겠지만, 현재 heroku가 HTTP/2를 지원하지 않아 적용하지는 않았다.
참고
Optimize Cumulative Layout Shift
Cumulative Layout Shift (CLS) is a metric that quantifies how often users experience sudden shifts in page content. In this guide, we'll cover optimizing common causes of CLS such as images and iframes without dimensions or dynamic content.
web.dev
https://developer.mozilla.org/ko/docs/Web/HTML/Preloading_content
Preloading content with rel="preload"
link엘리먼트의 rel 속성에 preload라는 값이 부여되면 페이지 라이프사이클 초기에 필요한 자원에 대해서 HTML head 에서 fetch 요청을 선언할 수 있다. 이는 해당 자원의 가용시점을 앞당기고 렌더
developer.mozilla.org
주요 렌더링 경로 성능 분석 | Web | Google Developers
주요 렌더링 경로 성능 병목 현상을 식별하고 해결하는 방법을 배워보세요.
developers.google.com
