[ Project 작업 내역 ]

<aside> 📷 Photo-Pie 주소 Link

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1567128822/noticon/osiivsvhnu4nt8doquo0.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1567128822/noticon/osiivsvhnu4nt8doquo0.png" width="40px" /> Github 주소 Link

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1671380429/noticon/zczk9wzsj5jq0epa0ine.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1671380429/noticon/zczk9wzsj5jq0epa0ine.png" width="40px" /> 팀 Notion Link

</aside>

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1567002882/noticon/ctn6kpoyyaawcggjqmfj.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1567002882/noticon/ctn6kpoyyaawcggjqmfj.png" width="40px" /> YouTube 발표 Link

</aside>

[ Project Main 및 Photo-Pie 사진 결과물 ]

Main Page

Main Page

Photo-Pie 네컷 결과물

Photo-Pie 네컷 결과물

[ Photo-Pie 서비스 아키텍처 ]

스크린샷 2023-03-01 오후 4.30.33.png

[ Photo-Pie 페이지 성능 개선 ]

📍 Photo-Pie 최적화 성능 테스트 👉🏻 Link

📍성능 테스트 결과

스크린샷 2023-03-13 오후 5.53.07.png

스크린샷 2023-03-13 오후 5.13.06.png

  1. Main / Frame 페이지에 들어가는 이미지 확장자 변환 (png → webp)
  2. Main 페이지에서 가장 큰 파일을 미리 로드 하는 방법 적용
  3. 폰트 및 사이트 주소 / DNS 서버 미리 로드
성능 테스트 전 테스트 전 → 후
performance 81 → 96
SEO 100 → 100
FCP 0.7s → 0.7s
Speed Index 1.2s → 1**.1s**
LCP 2.7s → 1.1s
CLS 0.12 → 0
Total Blocking Time 110ms → 110ms

📍 이미지 최적화 성능 테스트

  1. 성능 테스트 전

    스크린샷 2023-03-13 오후 5.43.53.png

    스크린샷 2023-03-13 오후 5.44.11.png

    성능 테스트 전 수치
    FCP 0.7s
    Speed Index 1.2s
    LCP 2.7s
    Time to Interactive 1.2s
    CLS 0.12
    Total Blocking Time 110ms

    스크린샷 2023-03-13 오후 5.34.25.png

    성능 테스트 전 이미지의 크기가 png, jpg 형태이기 때문에 이미지 크기를 줄여야 한다.

    이미지 크기 때문에 초기 렌더링에서 2.52s나 걸리고 있다.

    이미지에 관한 부분만 차지하고 있는 부분이 크기 때문에 확장자명을 일단 먼저 변경해 보기로 했다.

  2. webp 확장자로 50%로 압축 테스트

    스크린샷 2023-03-13 오후 6.01.24.png

    성능 테스트 전 테스트 전→ 후
    FCP 0.7s → 0.7s
    Speed Index 1.2s → 1.1s
    LCP 2.7s → 1.1s
    Time to Interactive 1.2s → 1.1s
    CLS 0.12 → 0.12
    Total Blocking Time 110ms → 100ms

    스크린샷 2023-03-13 오후 6.03.45.png

  3. 이미지 width와 height를 명시적으로 지정해 주므로 줄여주는 작업을 진행했다.

    누적 레이아웃 이동(CLS)를 최적화 해주기 위한 작업이다.

    <aside> 💡 CLS(Cumulative Layout Shift) 누적 레이아웃 이동 사용자 입력 500ms 이내에 발생하지 않는 레이아웃 이동에 대한 점수를 합산하여 콘텐츠의 불안정성을 측정 뷰포트에서 가시적인 콘텐츠가 얼마나 이동했는지와 영향을 받은 요소가 이동한 거리를 확인

    </aside>

    크기가 정해지지 않으면 CLS 값이 발생할 수 있다

    <img src={group2} alt="group" style={{ width: "200px" }} />

  4. 폰트 및 DNS 서버 미리 로드하는 작업을 추가로 진행했다.

    // index.html
<link rel="preconnect" href="<https://photo-pie.store/>" />
<link rel="dns-prefetch" href="<https://photo-pie.store/>" />
<link rel="preload" as="font" />

[ Photo-Pie 트러블 슈팅 ]

01. OpenVidu WebCam 관련

→ 문제 및 해결 과정