Skip to content

Conversation

@choiseona
Copy link
Member

@choiseona choiseona commented Jan 14, 2025

๐Ÿ“‚ ์ž‘์—… ๋‚ด์šฉ

closes #1

  • ์ž‘์—… ๋‚ด์šฉ

๐Ÿ’ก ์ž์„ธํ•œ ์„ค๋ช…

  • ์ด๋ฏธ์ง€ ์ตœ์ ํ™”

    • ํ™”๋ฉด์ƒ ์ด๋ฏธ์ง€ ํฌ๊ธฐ์™€ ์‹ค์ œ ์ด๋ฏธ์ง€ ํฌ๊ธฐ์— ์ฐจ์ด๊ฐ€ ์žˆ๋Š” ์ด๋ฏธ์ง€๋ฅผ ๋Œ€์ƒ์œผ๋กœ, ํ™”๋ฉด์ƒ ํฌ๊ธฐ์˜ 2๋ฐฐ๋กœ ๋ฆฌ์‚ฌ์ด์ง•ํ•˜์—ฌ ์ด๋ฏธ์ง€ ์šฉ๋Ÿ‰์„ ์ค„์˜€์Šต๋‹ˆ๋‹ค.
    • PNG ์ด๋ฏธ์ง€๋ฅผ WEBP์™€ AVIF ํฌ๋งท์œผ๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ์ด๋ฏธ์ง€ ์šฉ๋Ÿ‰์„ ์ค„์˜€์œผ๋ฉฐ, WEBP์™€ AVIF๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ๋ธŒ๋ผ์šฐ์ €์— ๋Œ€๋น„ํ•ด PNG ๋Œ€์ฒด ํฌ๋งท๋„ ํ•จ๊ป˜ ์ œ๊ณตํ•˜์˜€์Šต๋‹ˆ๋‹ค.
    • ์œ„ ๋‹จ๊ณ„๋ฅผ ๊ฑฐ์นœ ํ›„์—๋„ ์šฉ๋Ÿ‰์ด ํฐ ๋ฐฐ๊ฒฝํ™”๋ฉด ์ด๋ฏธ์ง€๋Š” ์ฒ˜์Œ์—๋Š” ์ €ํ™”์งˆ๋กœ ๋กœ๋“œํ•˜๊ณ , ์ดํ›„ ๊ณ ํ™”์งˆ๋กœ ๊ต์ฒดํ•˜๋Š” ์ ์ง„์  ์ด๋ฏธ์ง€ ๋กœ๋“œ ๋ฐฉ์‹์„ ์ ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • ์˜ค๋””์˜ค ์ตœ์ ํ™”

    • ๋นˆ ์ข…์†์„ฑ ๋ฐฐ์—ด์„ ๊ฐ€์ง„ useEffect ์•ˆ์—์„œ ์˜ค๋””์˜ค์˜ source๋ฅผ ์ง€์ •ํ•  ๋•Œ, audioRef.current.preload = 'metadata'; ์†์„ฑ์„ ์„ค์ •ํ•˜์—ฌ ์ดˆ๊ธฐ ๋กœ๋“œ ์‹œ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋งŒ ๋กœ๋“œํ•˜๋„๋ก ๋ช…์‹œํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • ์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ…

    • ๋กœ๋“œ ๋‹จ์œ„๋ฅผ [1]MainPage์™€ [2]LobbyPage + GamePage + ResultPage๋กœ ๊ตฌ๋ถ„ํ•˜์—ฌ, [1] ์ง„์ž… ํ›„ ๋ฐฉ ์ƒ์„ฑ ๋ฒ„ํŠผ hover ์‹œ [2]๋ฅผ ์‚ฌ์ „ ๋กœ๋“œ ํ•˜๋„๋ก ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.
    • URL๋กœ LobbyPage์— ์ž…์žฅํ•  ๊ฒฝ์šฐ, [2]๋งŒ ๋กœ๋“œ๋˜๋ฉฐ [1]์€ ๋กœ๋“œ๋˜์ง€ ์•Š๋„๋ก ์„ค์ •ํ–ˆ์Šต๋‹ˆ๋‹ค.
    • ๋„์›€๋ง ๋ฒ„ํŠผ์— ๋งˆ์šฐ์Šค๋ฅผ hoverํ–ˆ์„ ๋•Œ ๋„์›€๋ง ๋ชจ๋‹ฌ์ด ์‚ฌ์ „ ๋กœ๋“œ๋˜๋„๋ก ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • ๋ Œ๋”๋ง ์ฐจ๋‹จ ๋ฆฌ์†Œ์Šค ์ œ๊ฑฐ

    • font-display: swap; ์„ค์ •๊ณผ ํฐํŠธ ํ”„๋ฆฌ๋กœ๋”ฉ์„ ํ†ตํ•ด ํฐํŠธ ๋กœ๋”ฉ์„ ์ตœ์ ํ™”ํ•˜๊ณ , ์ดˆ๊ธฐ ๋ Œ๋”๋ง ์ค‘ ์‹œ์Šคํ…œ ํฐํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ฝ˜ํ…์ธ ๋ฅผ ์ฆ‰์‹œ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋„๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ“— ์ฐธ๊ณ  ์ž๋ฃŒ & ๊ตฌํ˜„ ๊ฒฐ๊ณผ (์„ ํƒ)

FCP, LCP ์ตœ์ ํ™” ์ ์šฉ๊ธฐ

  • ์ตœ์ ํ™” ์ „
๋ฐ์Šคํฌํƒ‘ ๋ชจ๋ฐ”์ผ
Image 1 Image 2

  • ์ตœ์ ํ™” ํ›„
๋ฐ์Šคํฌํƒ‘ ๋ชจ๋ฐ”์ผ
image image

๐Ÿ“ข ๋ฆฌ๋ทฐ ์š”๊ตฌ ์‚ฌํ•ญ (์„ ํƒ)

๐Ÿšฉ ํ›„์† ์ž‘์—… (์„ ํƒ)

โœ… ์…€ํ”„ ์ฒดํฌ๋ฆฌ์ŠคํŠธ

  • PR ์ œ๋ชฉ์„ ํ˜•์‹์— ๋งž๊ฒŒ ์ž‘์„ฑํ–ˆ๋‚˜์š”?
  • ๋ธŒ๋žœ์น˜ ์ „๋žต์— ๋งž๋Š” ๋ธŒ๋žœ์น˜์— PR์„ ์˜ฌ๋ฆฌ๊ณ  ์žˆ๋‚˜์š”? (main์ด ์•„๋‹™๋‹ˆ๋‹ค.)
  • ์ด์Šˆ๋Š” close ํ–ˆ๋‚˜์š”?
  • Reviewers, Labels๋ฅผ ๋“ฑ๋กํ–ˆ๋‚˜์š”?
  • ์ž‘์—… ๋„์ค‘ ๋ฌธ์„œ ์ˆ˜์ •์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ ์ž˜ ์ˆ˜์ •ํ–ˆ๋‚˜์š”?
  • ํ…Œ์ŠคํŠธ๋Š” ์ž˜ ํ†ต๊ณผํ–ˆ๋‚˜์š”?
  • ๋ถˆํ•„์š”ํ•œ ์ฝ”๋“œ๋Š” ์ œ๊ฑฐํ–ˆ๋‚˜์š”?

- Compress and resize large images
- Convert to modern formats (WebP/AVIF)
- Add low quality image placeholder
- Implement smooth transition to high-res images
- Support multiple formats (AVIF/WebP/PNG) with picture element
- Configure code splitting for game-related pages in GameLayout loader
- Add preloading for Lobby, GameRoom and Result pages on MainPage button hover
- Implement lazy loading for help modal component with hover-based initialization
- Add font-display: swap for system font fallback during loading
- Implement preload for woff2 font to prioritize loading
@choiseona choiseona added ๐Ÿ’ป FE Frontend Code ๐Ÿ“ˆ Improvement Performance Optimization labels Jan 14, 2025
@choiseona choiseona self-assigned this Jan 14, 2025
@github-actions
Copy link

๐Ÿ“š Storybook preview deployed to: Visit Storybook Preview

@github-actions
Copy link

๐Ÿ“š Storybook preview deployed to: Visit Storybook Preview

- Changed critical imports to use ๏ฟฝwait to ensure they are loaded during the loader's execution.
- Handled non-critical imports with ๏ฟฝoid Promise.all for asynchronous preloading.
@github-actions
Copy link

๐Ÿ“š Storybook preview deployed to: Visit Storybook Preview

Copy link
Member

@kwaksj329 kwaksj329 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

์„ ์•„๋‹˜ ๋•๋ถ„์— ๋งŽ์ด ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค ์™€์•„ ๐Ÿ™‡๐Ÿปโ€โ™€๏ธ

@github-actions
Copy link

๐Ÿ“š Storybook preview deployed to: Visit Storybook Preview

@choiseona choiseona merged commit 4b458c4 into main Jan 17, 2025
2 checks passed
@github-actions
Copy link

๐Ÿงน Storybook preview for PR #8 has been removed.

github-actions bot added a commit that referenced this pull request Jan 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

๐Ÿ’ป FE Frontend Code ๐Ÿ“ˆ Improvement Performance Optimization

Projects

None yet

Development

Successfully merging this pull request may close these issues.

LCP ์ตœ์ ํ™”

4 participants