[perf] 번들·에셋 최적화 및 화면별 LCP·CLS 개선

index.html

@@ -22,6 +22,7 @@
                font-src 'self' https://cdn.jsdelivr.net;
                img-src 'self' data: https: http://www.kopis.or.kr;
                connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://vitals.vercel-insights.com;">
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
     <link rel="stylesheet" as="style" crossorigin
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
       integrity="sha384-GIdEBaqGN9mNkDkMkzMHW8EKUqtpPIe/sLj1X7DIrnc9uPtLROJgmuDlh+3rBw0j" />

src/App.jsx

@@ -1,47 +1,51 @@
-import { useEffect } from 'react'
+import { lazy, Suspense, useEffect } from 'react'
 import { Routes, Route } from 'react-router-dom'
 import { Analytics } from '@vercel/analytics/react'
 import { SpeedInsights } from '@vercel/speed-insights/react'
 
 import useAuthStore, { SESSION_HINT } from '@/stores/authStore'
 import { buildOrganizationJsonLd, buildWebsiteJsonLd, toSafeJsonLd } from '@/utils/structuredData'
-import AdminLayout from '@/components/layout/AdminLayout'
 import AdminRoute from '@/components/layout/AdminRoute'
 import Layout from '@/components/layout/Layout'
 import PageViewTracker from '@/components/layout/PageViewTracker'
 import PrivateRoute from '@/components/layout/PrivateRoute'
 import ScrollToTop from '@/components/layout/ScrollToTop'
-import AuthCallbackPage from '@/pages/AuthCallbackPage'
-import SignupPage from '@/pages/SignupPage'
-import ArtistDetailPage from '@/pages/ArtistDetailPage'
-import ArtistsPage from '@/pages/ArtistsPage'
-import CalendarPage from '@/pages/CalendarPage'
-import ConcertDetailPage from '@/pages/ConcertDetailPage'
-import ConcertsPage from '@/pages/ConcertsPage'
-import ReleaseDetailPage from '@/pages/ReleaseDetailPage'
-import ReleasesPage from '@/pages/ReleasesPage'
-import PostDetailPage from '@/pages/PostDetailPage'
-import PostsPage from '@/pages/PostsPage'
-import PostWritePage from '@/pages/PostWritePage'
-import NoticeDetailPage from '@/pages/NoticeDetailPage'
 import HomePage from '@/pages/HomePage'
-import MyPage from '@/pages/MyPage'
-import NotFoundPage from '@/pages/NotFoundPage'
-import AdminPage from '@/pages/admin/AdminPage'
-import AdminArtistFormPage from '@/pages/admin/AdminArtistFormPage'
-import AdminConcertFormPage from '@/pages/admin/AdminConcertFormPage'
-import AdminConcertCreatePage from '@/pages/admin/AdminConcertCreatePage'
-import AdminInquiriesPage from '@/pages/admin/AdminInquiriesPage'
-import AdminReportsPage from '@/pages/admin/AdminReportsPage'
-import AdminNoticesPage from '@/pages/admin/AdminNoticesPage'
-import AdminNoticeFormPage from '@/pages/admin/AdminNoticeFormPage'
-import AdminPendingConcertsPage from '@/pages/admin/AdminPendingConcertsPage'
-import AdminExcludedConcertsPage from '@/pages/admin/AdminExcludedConcertsPage'
-import AdminPolicyPage from '@/pages/admin/AdminPolicyPage'
-import PolicyPage from '@/pages/PolicyPage'
 import { TERMS_VERSIONS, PRIVACY_VERSIONS } from '@/constants/policy'
 import { ROUTES } from '@/constants/routes'
 
+// 첫 진입 화면(HomePage)을 제외한 페이지는 라우트 단위로 분할해 초기 번들에서 뺀다
+const AuthCallbackPage = lazy(() => import('@/pages/AuthCallbackPage'))
+const SignupPage = lazy(() => import('@/pages/SignupPage'))
+const ArtistDetailPage = lazy(() => import('@/pages/ArtistDetailPage'))
+const ArtistsPage = lazy(() => import('@/pages/ArtistsPage'))
+const CalendarPage = lazy(() => import('@/pages/CalendarPage'))
+const ConcertDetailPage = lazy(() => import('@/pages/ConcertDetailPage'))
+const ConcertsPage = lazy(() => import('@/pages/ConcertsPage'))
+const ReleaseDetailPage = lazy(() => import('@/pages/ReleaseDetailPage'))
+const ReleasesPage = lazy(() => import('@/pages/ReleasesPage'))
+const PostDetailPage = lazy(() => import('@/pages/PostDetailPage'))
+const PostsPage = lazy(() => import('@/pages/PostsPage'))
+const PostWritePage = lazy(() => import('@/pages/PostWritePage'))
+const NoticeDetailPage = lazy(() => import('@/pages/NoticeDetailPage'))
+const MyPage = lazy(() => import('@/pages/MyPage'))
+const NotFoundPage = lazy(() => import('@/pages/NotFoundPage'))
+const PolicyPage = lazy(() => import('@/pages/PolicyPage'))
+
+// 관리자 화면 — 일반 사용자 번들에 react-datepicker 등이 섞이지 않도록 분리
+const AdminLayout = lazy(() => import('@/components/layout/AdminLayout'))
+const AdminPage = lazy(() => import('@/pages/admin/AdminPage'))
+const AdminArtistFormPage = lazy(() => import('@/pages/admin/AdminArtistFormPage'))
+const AdminConcertFormPage = lazy(() => import('@/pages/admin/AdminConcertFormPage'))
+const AdminConcertCreatePage = lazy(() => import('@/pages/admin/AdminConcertCreatePage'))
+const AdminInquiriesPage = lazy(() => import('@/pages/admin/AdminInquiriesPage'))
+const AdminReportsPage = lazy(() => import('@/pages/admin/AdminReportsPage'))
+const AdminNoticesPage = lazy(() => import('@/pages/admin/AdminNoticesPage'))
+const AdminNoticeFormPage = lazy(() => import('@/pages/admin/AdminNoticeFormPage'))
+const AdminPendingConcertsPage = lazy(() => import('@/pages/admin/AdminPendingConcertsPage'))
+const AdminExcludedConcertsPage = lazy(() => import('@/pages/admin/AdminExcludedConcertsPage'))
+const AdminPolicyPage = lazy(() => import('@/pages/admin/AdminPolicyPage'))
+
 function App() {
   const clearUser = useAuthStore((s) => s.clearUser)
 
@@ -61,6 +65,8 @@ function App() {
     <script type="application/ld+json">{toSafeJsonLd(buildOrganizationJsonLd())}</script>
     <Layout>
       <ScrollToTop />
+      {/* 페이지 청크를 받는 동안 푸터가 화면 안으로 올라왔다가 밀려나지 않도록(CLS) 페이지 최소 높이만큼 비워 둔다 */}
+      <Suspense fallback={<div style={{ minHeight: 'calc(100svh - var(--header-height))' }} />}>
       <Routes>
         <Route path={ROUTES.AUTH_CALLBACK} element={<AuthCallbackPage />} />
         <Route path={ROUTES.SIGNUP} element={<SignupPage />} />
@@ -106,6 +112,7 @@ function App() {
 
         <Route path="*" element={<NotFoundPage />} />
       </Routes>
+      </Suspense>
       <PageViewTracker />
       <Analytics />
       <SpeedInsights />

src/components/artist/ArtistCard.jsx

@@ -10,9 +10,11 @@ import { ROUTES } from '@/constants/routes'
 import { getArtistColor } from '@/utils/artistColor'
 import { followArtist, unfollowArtist } from '@/services/artistApi'
 import { trackEvent } from '@/utils/analytics'
+import { getSpotifyArtistThumbnail } from '@/utils/spotify'
 import styles from './ArtistCard.module.css'
 
-function ArtistCard({ artist }) {
+// priority: 첫 화면에 바로 보이는 카드(LCP 후보)는 지연 로드하지 않고 먼저 받는다
+function ArtistCard({ artist, priority = false }) {
   const { id, name, koreanName, imageUrl, hasUpcomingConcert, spotifyUrl } = artist
   const [isFollowing, setIsFollowing] = useState(artist.isFollowing)
   const [prevIsFollowingProp, setPrevIsFollowingProp] = useState(artist.isFollowing)
@@ -66,10 +68,11 @@ function ArtistCard({ artist }) {
             </div>
           ) : (
             <img
-              src={imageUrl}
+              src={getSpotifyArtistThumbnail(imageUrl)}
               alt={name}
               className={styles.avatar}
-              loading="lazy"
+              loading={priority ? 'eager' : 'lazy'}
+              fetchPriority={priority ? 'high' : 'auto'}
               decoding="async"
               onError={() => setImgFailed(true)}
             />

src/components/artist/ArtistCard.test.jsx

@@ -0,0 +1,85 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { MemoryRouter } from 'react-router-dom'
+import useAuthStore from '@/stores/authStore'
+import useLoginModalStore from '@/stores/loginModalStore'
+import ArtistCard from './ArtistCard'
+
+vi.mock('@/services/artistApi', () => ({
+  followArtist: vi.fn(),
+  unfollowArtist: vi.fn(),
+}))
+
+const HASH = 'f1e2d3c4b5a60718293a4b5c'
+
+function makeArtist(overrides = {}) {
+  return {
+    id: 1,
+    name: 'YOASOBI',
+    koreanName: '요아소비',
+    imageUrl: `https://i.scdn.co/image/ab6761610000e5eb${HASH}`,
+    hasUpcomingConcert: false,
+    spotifyUrl: null,
+    isFollowing: false,
+    ...overrides,
+  }
+}
+
+function renderCard(props) {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>
+        <ArtistCard {...props} />
+      </MemoryRouter>
+    </QueryClientProvider>,
+  )
+}
+
+// 아바타 링크가 aria-hidden이라 접근성 트리에서 제외되므로 hidden: true로 조회한다
+function getAvatar(name) {
+  return screen.getByRole('img', { name, hidden: true })
+}
+
+beforeEach(() => {
+  useAuthStore.setState(useAuthStore.getInitialState(), true)
+  useLoginModalStore.setState(useLoginModalStore.getInitialState(), true)
+  localStorage.clear()
+})
+
+describe('ArtistCard', () => {
+  it('640px Spotify 이미지면 320px 버전으로 렌더링', () => {
+    const artist = makeArtist()
+    renderCard({ artist })
+
+    expect(getAvatar(artist.name)).toHaveAttribute('src', `https://i.scdn.co/image/ab67616100005174${HASH}`)
+  })
+
+  it('priority를 지정하지 않으면 이미지를 지연 로드', () => {
+    const artist = makeArtist()
+    renderCard({ artist })
+
+    const avatar = getAvatar(artist.name)
+
+    expect(avatar).toHaveAttribute('loading', 'lazy')
+    expect(avatar).toHaveAttribute('fetchpriority', 'auto')
+  })
+
+  it('priority를 지정하면 이미지를 우선 로드', () => {
+    const artist = makeArtist()
+    renderCard({ artist, priority: true })
+
+    const avatar = getAvatar(artist.name)
+
+    expect(avatar).toHaveAttribute('loading', 'eager')
+    expect(avatar).toHaveAttribute('fetchpriority', 'high')
+  })
+
+  it.each([false, true])('imageUrl이 없으면 priority가 %s여도 이미지 없음', (priority) => {
+    const artist = makeArtist({ imageUrl: null })
+    renderCard({ artist, priority })
+
+    expect(screen.queryByRole('img', { name: artist.name, hidden: true })).not.toBeInTheDocument()
+  })
+})

src/components/calendar/DayConcertList.jsx

@@ -1,9 +1,11 @@
+import { useState } from 'react'
 import { Link } from 'react-router-dom'
 
 import ArtistAliasName from '@/components/artist/ArtistAliasName'
 import { ROUTES } from '@/constants/routes'
 import { CONCERT_STATUS_COLOR, CONCERT_STATUS_LABEL } from '@/constants/concert'
 import { formatDate } from '@/utils/date'
+import { toKopisHttpsUrl } from '@/utils/kopis'
 import styles from './DayConcertList.module.css'
 
 const WEEKDAY_NAMES = ['일', '월', '화', '수', '목', '금', '토']
@@ -29,6 +31,25 @@ function CheckIcon() {
   )
 }
 
+// 포스터가 없거나 로드에 실패하면 이미지 없이 .poster 배경만 남긴다
+function DayConcertPoster({ posterUrl, title }) {
+  const [imgFailed, setImgFailed] = useState(false)
+
+  return (
+    <div className={styles.poster}>
+      {posterUrl && !imgFailed && (
+        <img
+          src={toKopisHttpsUrl(posterUrl)}
+          alt={title}
+          loading="lazy"
+          decoding="async"
+          onError={() => setImgFailed(true)}
+        />
+      )}
+    </div>
+  )
+}
+
 function DayConcertList({ selectedDate, events, onCalendarToggle }) {
   if (!selectedDate) return null
 
@@ -72,15 +93,7 @@ function DayConcertList({ selectedDate, events, onCalendarToggle }) {
                     }}
                   />
 
-                  <div className={styles.poster}>
-                    <img
-                      src={ev.posterUrl || '/assets/poster-placeholder.png'}
-                      alt={ev.title}
-                      onError={(e) => {
-                        e.target.src = '/assets/poster-placeholder.png'
-                      }}
-                    />
-                  </div>
+                  <DayConcertPoster key={ev.posterUrl} posterUrl={ev.posterUrl} title={ev.title} />
 
                   <div className={styles.info}>
                     <p className={styles.artist}>