Skip to content

roundshoulder/black_rabbit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

86 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Frame 236

🐰 Happy New Year!

2023 흑끼의 마법 떡집 은 새해 맞이 덕담 컨텐츠를 제공하는 서비스입니다.

  • 새해 목표와 연관된 재료를 선택하면,
  • 흑끼에게 행운의 떡덕담을 받을 수 있어요!
  • 흑끼의 마법 떡집 Link

🥕 Summary

Type Static web page
Version 1.0 2022.12.18 ~ 2022.12.25 서비스 개발
Version 2.0 2023.01.22 ~ 사이트 성능 개선
Role 개발, CI/CD, 배포, 그림 da-in

🔧 Stack


📖 File Structure

📂.github
 ┣ 📂workflows
📂public
📂src
 ┣ 📂components
 ┣ 📂pages
 ┣ 📂static
 ┃ ┣ 📂fonts
 ┃ ┗ 📂images
 ┣ App.tsx
 ┣ index.css
 ┗ index.tsx

🚨 Performance Issue

Google PageSpeed Insights 에서 웹 성능을 측정하였습니다.

개선 전 (2023.01.22 기준)

성능 접근성 권장사항 검색엔진 최적화
mobile 64 95 100 92
web 96 95 100 100

개선 후 (2023.01.00)

개선 작업 진행중입니다.

TODO

  • First Contentful Paint(3G)
  • Time to Interactive
  • Speed Index
  • Largest contentful Paint
  • Cumulative Layout shift

  • 사용하지 않는 자바스크립트 줄이기
  • 차세대 형식을 사용해 이미지 제공하기
  • 콘텐츠가 포함된 최대 페인트 이미지 미리 로드

  • 웹폰트가 로드되는 동안 텍스트가 계속 표시되는지 확인하기
  • 이미지 요소에 widthheight 명시
  • 효율적인 캐시 정책
  • 중요 요청 체이닝 차단
  • 요청 수는 낮게, 전송 크기는 작게 유지하기
  • 콘텐츠가 포함된 최대 페인트 요소
  • 대규모 레이아웃 변경 피하기
  • 긴 기본 스레드 작업 피하기

  • <iframe> 요소에 제목없음
  • 문서에 읽기 쉬운 글꼴 크기를 사용하지 않음