DIL: 모던 리액트 딥 다이브, 7주차-1

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

---

DIL-week7-1_2024-04-15

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ---------- | --------------------------------------------------------------------------------------- | ----------- | | 7주차 | 12장, 13장 | 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표, 웹 페이지의 성능을 측정하는 다양한 방법 | 775~781p |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 총 1시간

---

12장 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표

• 쉽고 빠르고 안전하게~
  • (1) 방문한 목적을 손 쉽게 달성
  • (2) 목적을 달성하는 게 걸리는 시간 짧아야
  • (3) 개인정보 보안

링크A

• https://www.portent.com/blog/analytics/research-site-speed-hurting-everyones-revenue.htm#:~:text=Thefirst5secondsof,(betweenseconds0-5
  • 전자상거래 전환률 conversion rate: 실제 구매로 이어지는 고객의 비율
  • 적정 페이지 로드 시간: 0~2초

링크B: 사용자 통계

• https://unbounce.com/page-speed-report/

  • When it comes to waiting for pages to load, most consumers think they’re more patient than they actually are.
  • Nearly 70% of consumers admit that page speed impacts their willingness to buy from an online retailer.
  • Although they know it’s important, the majority of marketers aren’t making page speed a priority. >
    

링크C

• https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/
  • 1페이지 request 50회 미만
  • 웹 페이지 전체 요청 15.3초

Core Web Vital 핵심 웹 지표

• 구글 에서 만든 지표
  • 웹 사이트에서 뛰어난 사용자 경험을 제공하는 데 필수적인 지표를 일컫는 용어

| Web Vital | 한글 | | -------------------------------- | ---------------------- | | 📌 LCP, Largest Contentful Paint | 최대 컨텐츠풀 페인트 | | 📌 FID, First Input Delay | 최초 입력 지연 | | 📌 CLS, Cumulative Layout Shift | 누적 레이아웃 이동 | | TTFB, Time To First Byte | 최초 바이트까지의 시간 | | FCP, First Contentful Paint | 최초 컨텐츠풀 페인트 |

LCP, Largest Contentful Paint

| LCP, 최초 컨텐츠풀 페인트 | 기준 결과 | | ------------------------- | --------- | | >2500ms | 좋음 | | >4000ms | 보통 | | ≤4000ms | 나쁨 |

정의

• viewport 기준! 오직 viewport!
• 페이지가 처음으로 로드를 시작한 시점에서부터, viewport 내부에서 가장 큰 이미지 | 텍스트를 랜더링하는 데 걸리는 시간
• 큰 이미지와 텍스트

  - <img>
  - <svg> 내부의 <image>
  - poster 속성을 사용하는 <video>
  - url() 배경 이미지가 있는 요소
  - 인라인 텍스트 요소를 포함하고 있는 블록 레벨 요소, <p>, <div>포함
  

• 언제 노출 되었는지 확인하는 시점 => W3C 문서
  • https://wicg.github.io/element-timing/#report-image-element-timing

    관련 문서

    • intersectionRect
    • relevant realm

  • 엘리먼트가 등장한 시점부터, 텍스트 또는 이미지가 완전히 로딩되는 시점