본 내용은 프론트엔드 성능 체크리스트에서 정독을 하며, 유용하고 자주봤거나, 중요한 부분들을 정리한다.
https://github.com/parksb/Front-End-Performance-Checklist
GitHub - parksb/Front-End-Performance-Checklist: 🎮 더 빠르게 작동하는 프론트엔드 성능 체크리스트
🎮 더 빠르게 작동하는 프론트엔드 성능 체크리스트. Contribute to parksb/Front-End-Performance-Checklist development by creating an account on GitHub.
github.com
해당 레포지토리는 3가지의 레벨로 중요도를 나눴으니, 최소 1번쯤은 정독할 만한 내용이라고 생각한다.
View의 Optimzation?
우선 왜 알아야할까?
백엔드와 어드민에서 줄이는 성능차이는 막대할 정도로 차이를 낼 수 있다(몇초, 몇십초). 클라이언트에서 줄이는 시간들이 과연 웹의 성능과 marketplace에 얼마나 영향을 줄까?
이는 단순히 유저가 빈화면과 동작하지 않는 UI들을 몇초 보게 되고, 유저 경험을 풍부하게 할 뿐만 아니라, 구글의 Search Engine에 막대한 영향을 끼치는 부분이기도 하다. 유저를 끌어모으기 위한 owner의 입장에서 이보다 중요한 것이 있을까?
성능 측정 도구
웹페이지의 성능 측정을 위해서는 많은 도구들이 있지만, Lighthouse를 적극적으로 활용할 것 이다. 성능에 대한 4가지 항몫의 간단한 시각화 뿐만 아니라, 가장 Critical 한 부분부터 minor한 부분까지 고쳐야 할 부분을 제시해준다.
HTML
사실, React와 Vue, Angular 같은 프레임워크를 사용하여 SPA를 만들 때는, HTML파일을 들여다 볼 일은 별로 없을 수도 있다(CDN을 위해 script 태그를 넣는 것 말곤...). 하지만, 다양한 페이지를 갖고 있고, 레거시와 SEO등 다양한 부분을 고려한다면 HTML을 만지게 될 수 밖에 없다.
HTML파일의 빠른 로딩을 위해서는 다음과 같은 규칙들을 지킬 필요가 있다.
1. HTML 압축
HTML 코드들을 압축하고, 최종 파일에서 주석, 공백, 줄바꿈을 제거한다.이미 다양한 프레임워크에는 웹페이지를 압축시키는 플러그인이 있고, NPM 모듈을 사용해 작업을 자동으로 처리 할 수도 있다.
불필요한 공백, 주석, 속성 제거는 HTML의 크기를 줄이고, 페이지의 로딩 속도를 높일 수 있으며, 사용자 다운로드 시간을 줄인다.
2. CSS 태그는 자바스크립트 태그 앞에 오기
CSS가 항상 자바스크립트 코드 전에 로드되는지 확인하자.
<head>의<link>와<style>이<script>앞에 있는지 확인하기.
자바스크립트 전에 CSS 태그를 두면 브라우저의 렌더링 속도를 높이는 병렬 다운로드가 가능하다.
3. <iframe>의 최소화
다른 기술적 가능성이 없을 때 만 `<iframe>`을 사용하고 최대한 사용하지 않기4. Pre-load 최적화를 prefatch와 dns-prefetch 그리고 prerender를 통해 이루기
인기있는 브라우저들은 `<link>` 태그와 `rel` 어트리뷰트와 특정 키워드를 함께 사용하여 특정 URL에 대해 pre-load할 수 있다.
<link>가<head>에 있도록 확인하자.
prefetching은 브라우저가 미래에 보여줄 특정 리소스들을 미리 가져올 수 있다. 캐쉬에 해당 리소스들을 저장하여 다른 도메인에서 사용할 때 빠르게 로딩 할 수 있다. 페이지가 로딩이 완료되고, 특정 시간이 지났을 때, 브라우저는 다른 리소스들을 받기 시작한다. prefetch된 링크를 접할 때, 컨텐츠는 즉시 나올 것 이다.
CSS
Content를 Paint하는 CSS는 DOM과 함께 CSSOM이라는 CSS객체모델을 그린다. 마찬가지로 빠른 로드와 파일의 압축은 컨텐츠 로딩에 큰 영향을 미칠 것 이다.
1. CSS 압축
CSS 파일을 압축하고, 최종 파일에서 주석, 공백, 줄바꿈을 제거한다.CSS 파일을 압축하면 클라이언트에게 더 적은 데이터를 전송하게되고, 컨텐츠가 더 빨리 로드된다. 대역폭 리소스 사용을 줄이고자 하는 모든 비즈니스에 있어 사용자에게 도움이 된다.
2. 합치기
HTTP/1을 사용한다면, 파일을 합칠 필요가 있다. 하지만 HTTP/2라면 꼭 그렇지는 않다.3. Non-blocking
`DOM`이 로드되는데 시간이 걸리지 않도록 CSS 파일은 non-blocking 되어야 한다.<link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="global.min.css"></noscript>CSS 파일은 페이지 로드와 렌더링을 지연시킬 수 있다.
preload를 통해 브라우저가 페이지의 콘텐츠를 보여주기 전에 CSS 파일을 로드 할 수 있다.
rel속성의 값을preload로 주고,as="style"를<link>태그에 넣는다.
4. 스타일시트 복잡도 분석
스타일시트를 분석하는 것은 불필요한 중복 CSS 선택자를 찾는 데 도움이 된다.종종 중복, 또는 유효성 에러가 CSS 코드에서 발생한다. CSS 파일을 분석하고 복잡성을 해결하면 CSS 파일의 속도를 높일 수 있다.
CSS 전처리기를 사용해 CSS를 조직해야 한다.
- 🛠 TestMyCSS | Optimize and Check CSS Performance
- 🛠 CSS Stats
- 🛠 macbre/analyze-css: CSS selectors complexity and performance analyzer
- 🛠 Project Wallace is like CSS Stats but stores stats over time so you can track your changes
다음 포스트는 폰트와 이미지, 자바스크립트와 서버에 대해 이야기 해 볼 것이다.
'Software Engineering' 카테고리의 다른 글
| [Javascript] Class vs Factory Function (2) | 2022.09.24 |
|---|---|
| Git 브랜치 전략, Git-flow (0) | 2022.09.03 |
| Quality Assurance (QA: 품질보증) (0) | 2022.08.26 |
| 함수형 프로그래밍 (Functional Programming) (0) | 2022.08.21 |
| 명령형 프로그래밍 VS 선언형 프로그래밍 (2) | 2022.08.15 |