일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- web vital
- TLS
- typeScript
- custom command
- vue
- 선택자
- api test
- rendering
- aws
- Cypress
- vue-cli
- msw
- ViTE
- vue3
- https
- e2e
- caching
- devtools
- 비동기
- CloudFlare
- csr
- CSS
- JavaScript
- http3
- ts error
- QUIC
- svelte
- SSR
- import.meta.env
- Testing
- Today
- Total
목록FrontEnd/Vitals (3)
Develop Note by J.S.

웹 사이트의 개선에 가장 중요한 핵심은? - 더 나은 웹 사이트 성능을 달성하기 위한 핵심 키워드는 크기와 순서 입니다. - 리소스 전송 파일의 크기를 줄일 수 있다면 더욱 빠르게 전송하여 시간을 단축 시킬 수 있고, 우선 순위에 따라 로드되는 순서를 조작 할 수 있다면 웹 바이탈 측정 결과가 더욱 향상 될 수 있습니다. 1. 호스팅 및 파일 전송 - 웹 성능은 웹 사이트의 파일을 전달하는 서버의 품질에서 시작됩니다. 서버 품질은 빠른 *TTFB(Time to First Byte)의 핵심이 되며 이는 더나은 FCP(First Contnentful Paint)로 연결 됩니다. - 또한 CDN을 활용하여 사용자의 위치에서 물리적으로 가까운 지역에 있는 CDN 서버를 둔다면 리소스 전달 속도를 향상 시킬 수 ..

웹 바이탈은 6개의 성능 측정 지표가 있습니다. 6개중 5개는 밀리초 또는 초 단위로 측정되며, 일반적으로 2초 이내 측정된 결과를 빠르다고 표현합니다. 1. First Contentful Paint - FCP는 브라우저가 첫번째 중요한 콘텐츠(텍스트 또는 이미지/애니메이션 등)를 표시하는 첫 번째 시점까지의 소요시간입니다. - 브라우저에 첫번째로 픽셀이 로드되는 First Paint(FP)와 FCP는 다릅니다. - FCP는 로딩 프로세스 초기에 발생하므로 백엔드 성능을 나타내는 좋은 지표가 되며 목표 FCP는 0~2초 범위입니다. - 요점 : FCP 이전에 발생되는 속도 저하 요소 감지 2. Time to Interactive - TTI는 페이지가 사용자와 완전히 상호작용할 때 까지의 소요시간입니다. ..

1. 개요 - 웹 바이탈은 페이지의 로딩속도, 응답성, 안정성 등의 평가 항목을 측정하는 것으로 더 나은 사용자 경험을 제공하기 위한 웹의 필수적인 품질 요소를 말합니다. 웹 바이탈은 사용자의 경험 뿐 만 아니라, 검색 엔진 최적화(SEO) 전략의 많은 영향을 주기 때문에 관리가 필요합니다. 2. Web Speed - Steve Souders(전 google 수석 성능 엔지니어, 전 Yahoo 최고 성능 책임자)는 클라이언트/서버가 8:2 비중으로 웹 성능에 영향을 준다고 말합니다. 웹은 클라이언트 측에서 대부분의 최적화 작업이 이루어진다고 볼 수 있습니다. - 웹 성능을 측정하는 여러가지 도구가 있는데, 접근성이 좋은 크롬 개발자 도구외에도 다양한 웹 측정 서비스들이 있습니다. [측정 방법] 1) Ch..