ํ๋ฌ์ ์ผ๋ง์ผ๋ง ์ง๋ฆฌ ์๊ธ์ ๋ฅผ ์ฐ๊ณ ์๋ค. ์ฒ์์ ์ ๊ณต๋ ๋ฐ์ดํฐ ๋ช๊ธฐ๊ฐ๋ฅผ ์ ๋ถ ์์งํ๋ฉด ๊ทธ ์ดํ๋ก ์๋์ ํ์ด ๊ฑธ๋ฆฐ ์ฑ ๋ฌด์ ํ์ผ๋ก ์ฌ์ฉํ ์ ์๋ค. ๋ง์ด ๋ฌด์ ํ์ด์ง, ์น์ํ๊ณผ ์์ ์คํธ๋ฆฌ๋ฐ์ ๋์์ ๋ชปํ๋ ๋์ญํญ. ๊ทธ๋ด ๋ ํด๋ํฐ์ผ๋ก ๋๋ฅ์ ๋ค์ด๊ฐ๋ฉด ๋ก๋ฉ์ด ๊ต์ฅํ ๋๋ ค ๋ต๋ตํ๋ค. ํฌ์คํฐ ์ด๋ฏธ์ง๋ฅผ ๋ง์ด ๋ถ๋ฌ์ค๋ ํํ๋ฉด์ ํนํ ๊ทธ๋ฌ๋ค. ์น ์ฑ๋ฅ ์ต์ ํ๋ฅผ ํด๋ณด๊ธฐ๋ก ํ๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๋ฒ ๊ธ์ ๊ทธ์ ๋ํ ๊ธฐ๋ก.
์ด๊ธฐ lightHouse ์ ์์ด๋ค. ๋คํํ ๋ง ํฌ๊ฒ ์์ข์ ์ ์๋ ์๋์๋ค.
1. ํฐํธ ์ต์ ํ
* ์นํฐํธ๊ฐ ๋ก๋๋๋ ๋์ ํ ์คํธ๊ฐ ๊ณ์ ํ์๋๋์ง ํ์ธํ๊ธฐ
์นํฐํธ๋ฅผ ๋ ๋๋งํ๋ ๋ฐฉ์์๋ ๋๊ฐ์ง๊ฐ ์๋ค.
- ๋์ฒด ๊ธ๊ผด์ด ์ ๊ธ๊ผด๋ก ๋ฐ๋ (FOUT - ์คํ์ผ์ด ์ง์ ๋์ง ์์ ํ ์คํธ ํ๋์).
- "๋ณด์ด์ง ์๋" ํ ์คํธ๋ ์ ๊ธ๊ผด์ด ๋ ๋๋ง๋ ๋๊น์ง ํ์๋จ (FOIT - ๋ณด์ด์ง ์๋ ํ ์คํธ ํ๋์).
ํ์ฌ๋ ํฐํธ๊ฐ ๋ถ๋ฌ์์ง๊ธฐ ์ ๊น์ง๋ ์๋ฌด๋ฐ ํ ์คํธ๋ ๋ํ๋์ง ์๊ณ ์๋ค๊ฐ ํฐํธ๊ฐ ๋ก๋๋ ํ์ ํ ์คํธ๊ฐ ๋ ๋ํ๋๋ค. ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ๋ ๊ธฐ๋ณธ์ ์ผ๋ก FOIT๋ฐฉ์์ ์ฌ์ฉํ๊ณ ์๋ค (์ฌํ๋ฆฌ์์๋ ๊ถ์์ฒด๋ก ๋ณด์ด๋ค๊ฐ ๋ฐ๋๋๋ผ - FOUT ๋ฐฉ์) .
font-display :swap;@font-face์ ์ต์
์ ํตํด ๋ ๋๋ง ๋ฐฉ์์ ๋ฐ๊ฟ ์ ์๋ค. swap์ ๊ธ์๋ฅผ ์ฐจ๋จํ๋ ์๊ฐ์ ์ค์ด๊ณ ๊ธ์๊ฐ ๋ถ๋ฌ์์ง๋ฉด ๊ต์ฒด(swap)ํ๋ ๋ฐฉ์์ด๋ค. optional๊ณผ fallback ์ต์
์ ํตํด, ๋น์ทํ๊ฒ ๋์ํ์ง๋ง ๊ธ๊ผด ์ฐจ๋จ ๊ธฐ๊ฐ ๋๋ swap์ ๋๊ธฐํ๋ (๊ธ๊ผด ๊ต์ฒด) ๊ธฐ๊ฐ์ ์กฐ์ ํ ์ ์๋ค.
๊ธ๊ผด ๋ก๋ ์ค ๋ณด์ด์ง ์๋ ํ ์คํธ ๋ฐฉ์ง
๊ธ๊ผด์ ๋ก๋ํ๋ ๋ฐ ์๊ฐ์ด ๊ฑธ๋ฆฌ๋ ๋์ฉ๋ ํ์ผ์ธ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ์ด๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํด ์ผ๋ถ ๋ธ๋ผ์ฐ์ ๋ ๊ธ๊ผด์ด ๋ก๋๋ ๋๊น์ง ํ ์คํธ๋ฅผ ์จ๊น๋๋ค("๋ณด์ด์ง ์๋ ํ ์คํธ์ ๊น๋ฐ์(FOIT)". ์ฑ๋ฅ์
web.dev
* ์นํฐํธ ๋ฏธ๋ฆฌ ๋ก๋
FOUT๋ฅผ ๋ฐฉ์ง ํ๊ธฐ ์ํด ์ฆ์ ํ์ํ ์นํฐํธ๋ฅผ ๋ฏธ๋ฆฌ ๋ก๋ํ ์ ์๋ค. html head์ ์ด ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ํ Link ์์๋ฅผ ์ถ๊ฐํ๋ค.
<head>
<!-- ... -->
<link
rel="preload"
as="style"
crossOrigin="anonymous"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"
/>
</head>preload๋ฅผ ํตํด ๋ฆฌ์์ค๋ฅผ ์์ฒญํ ๋์ ์ฐ์ ์์๋ฅผ ๋น๊ฒจ ๋ฏธ๋ฆฌ ๋ก๋ํ ์ ์๋๋ก ํ๋ค. ์ค์ ๋ก ์ ์ฉํ ํ์ ์๋ก ๋น๋ํด ํ์ธํด๋ณด๋ ๊ธ๊ผด์ด ๊น๋นก์ด๋ ํ์์ด ์ฌ๋ผ์ง๊ฒ์ ํ์ธํด๋ณผ ์ ์์๋ค.
ํ์ง๋ง Safari (๋๋ ๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ )์์๋ ์ ์ฉ์ด ๋์ง ์์๋ค. ์ฃ๋ค ๊ธฐ๋ณธ ๊ธ๊ผด๋ก ๊นจ์ ธ์ ๋ํ๋ฌ๋ค. ์คํ์ค๋ฒํ๋ก์ฐ์๋ ๋น์ทํ ์ง๋ฌธ๋ค์ด ๋ง์์.
<head>
<!-- ... -->
<link
rel="preload"
as="style"
href="https://asset.dudoong.com/common/fonts/dudoong-fonts.css"
crossOrigin="anonymous"
/>
</head>๋๋ฅ ์น์ Origin๊ณผ ํ์ฌ ์ฌ์ฉํ๊ณ ์๋ ์นํฐํธ CDN์ Origin์ด ๋ฌ๋ผ์ cross-origin ๋ฌธ์ ๊ฐ ์๊ธด๋ค๊ณ ์๊ฐํ๋ค. @font-face cssํ์ผ์ ๋๋ฅ ์ธํ๋ผ์์ ์ฌ์ฉํ๊ณ ์๋ CDN์ ๋์์ ์ง์ ์ ๊ณตํด๋ณด๋ ค๊ณ ํ๋ค. ๊ทธ๋๋ ๊ฒฐ๊ณผ๋ ๋๊ฐ์๋ค.
๊ธ๊ผด์ ์์ฒญํ ๋๋ CORS์์ฒญ์ผ๋ก ์ ์ก๋๋ค. ๊ทธ๋์ ๋๋ฉ์ธ์ด ๋ค๋ฅผ๋ ์์ฒญ์ด ๋์ง ์๋๊ฒ์ด์๋๋ฐ, ์๋ธ ๋๋ฉ์ธ๋ ๋๊ฐ์ด cross-origin์ผ๋ก ๋ถ๋ฅ๋๊ธฐ ๋๋ฌธ์ด์๋ค. CDN ์ค์ ์์ Allow-Origin์ ๋ชจ๋ ์ด์ด์ฃผ์์์๋ ๋ถ๊ตฌํ๊ณ ์ ๋๋ก ์์ฒญ์ด ๋์ง ์์๋ค. ์ด ๊ธ์ ๋ณด๋ฉด ๋ชจ์ข ์ ์ด์ ๋ก safari์์ cdn์ ๋ํ preload ์์ฒญ์ด ์๋๋๊ฒ์ผ๋ก ๋ณด์๋ค.
* ์นํฐํธ ํฌ๊ธฐ ์ค์ด๊ธฐ
๋ญ ์ด๋ฐ๊ฒ๋ค์ด ์์ ์ ์๋ค.
- WOFF2์ ๊ฐ์ ์ฉ๋์ด ์์ ์์ถ๋ ํ์ผ์ ์ฌ์ฉํ๊ธฐ
- @font-face๋ฅผ ํตํด ๊ธ๊ผด ๋ชจ์์ ์ ์ํ๊ธฐ
- ์๋ธ์ , ๋ค์ด๋๋ฏน ์๋ธ์ ๋ฑ์ ํตํด ๊ธ๊ผด์ ์ฉ๋์ ์ค์ด๊ธฐ
1๋ฒ๊ณผ 2๋ฒ๊ฐ์ ๊ฒฝ์ฐ์ ์ด๋ฏธ ์ ์ฉ์ด ๋์ด ์์๊ณ , 3๋ฒ์ ํตํด ์นํฐํธ ๋ฆฌ์์ค์ ์ฉ๋์ ์ค์ฌ๋ณด์๋ค.
์๋ธ์ ํฐํธ๋ ํฐํธ ํ์ผ์์ ๋ถํ์ํ ๊ธ์๋ฅผ ์ ๊ฑฐํ๊ณ ์ฌ์ฉํ ๊ธ์๋ง ๋จ๊ฒจ๋ ํฐํธ๋ค. ๋ณดํต์ '๋ท'๊ณผ ๊ฐ์ ๊ธ์๋ ์ฐ์ง ์์ผ๋๊น. 26๊ฐ์ ์ํ๋ฒณ๊ณผ ๋ฌ๋ฆฌ ํ๊ธ ์กฐํฉ์ ๋ง๊ฐ ์ธ์ ๋ฆฌ๋ ๋๋๋ฐ, ์๋ธ์ ํฐํธ๋ก ๋ง๋ค์ด ์ฌ์ฉํ๋ฉด 2300๊ฐ ์ ๋์ ๊ธ์๋ง ๋จ๊ฒจ๋ ์ ์๋ค. ๋๋ถ์ ์ฉ๋์ด ํจ์ ์์์ง๋ค. ์๋ธ์ ํฐํธ ๋ฉ์ด์ปค๋ผ๋ ๋๊ตฌ๋ฅผ ํตํด ๋ณํํ ์ ์๋ค. ๊ทผ๋ฐ ์น์์ ์ฐ์ด๋ ์ฌ๋งํ ํฐํธ๋ ์ด๋ฏธ ์๋๋ฏ.
ํ์ง๋ง ๊ทธ๋๋ ์ฌ์ ํ ๋ง๋ค. ๊ทธ ์ค์์๋ ์์ฐ๋ ํฐํธ๊ฐ ์ ๋ง ๋ง์๋ฐ. ๋ค์ด๋๋ฏน ์๋ธ์
์ CSS์ unicode-range ์์ฑ์ ํตํด, ํด๋น ์ ๋์ฝ๋ ์์ญ์ ๋ฌธ์๊ฐ ์ฌ์ฉ๋ ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ํฐํธ ํ์ผ๋ฅผ ์์ฒญํ๋ค.
/* [0] */
@font-face {
font-family: 'Pretendard';
font-style: normal;
font-display: swap;
font-weight: 100;
src: url(../../../packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Thin.subset.0.woff2) format('woff2'), url(../../../packages/pretendard/dist/web/static/woff-dynamic-subset/Pretendard-Thin.subset.0.woff) format('woff');
unicode-range: U+f9ca-fa0b, U+ff03-ff05, U+ff07, U+ff0a-ff0b, U+ff0d-ff19, U+ff1b, U+ff1d, U+ff20-ff5b, U+ff5d, U+ffe0-ffe3, U+ffe5-ffe6;
}
/* [1] */
@font-face {
font-family: 'Pretendard';
font-style: normal;
font-display: swap;
font-weight: 100;
src: url(../../../packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Thin.subset.1.woff2) format('woff2'), url(../../../packages/pretendard/dist/web/static/woff-dynamic-subset/Pretendard-Thin.subset.1.woff) format('woff');
unicode-range: U+d723-d728, U+d72a-d733, U+d735-d748, U+d74a-d74f, U+d752-d753, U+d755-d757, U+d75a-d75f, U+d762-d764, U+d766-d768, U+d76a-d76b, U+d76d-d76f, U+d771-d787, U+d789-d78b, U+d78d-d78f, U+d791-d797, U+d79a, U+d79c, U+d79e-d7a3, U+f900-f909, U+f90b-f92e;
}
/* https://github.com/orioncactus/pretendard */์ค์ ํ๋ฆฌํ ๋ค๋ ๋ค์ด๋๋ฏน ์๋ธ์ ํฐํธ ํ์ผ์ ๋ด์ฉ์ด๋ค. ํ๊ธ์ ๋งค์ฐ ์์ฃผ ์ฌ์ฉํ๋ ๋ฌธ์๋ค ์กฐ๊ธ๊ณผ, ๋น๊ต์ ์ ๊ฒ ์ฌ์ฉ๋๋ ๋ฌธ์๋ค ๋ค์๋ก ์ด๋ฃจ์ด์ ธ ์๋ค๊ณ ํ๋ค. ๊ทธ๊ฑธ ๊ตฌ๊ธ๊ป์ ์ด์ฉ๊ตฌ์ ์ฉ๊ตฌ ํด์ ์ต์ ์ unicode-range๋ก ๋๋์๋ค๊ณ ํ๋ค. https://www.googblogs.com/tag/korean/
๋ณดํต Header์ ํฐํธ๋ก ์ฌ์ฉํ๋ Gmarket Sans๋ฅผ ๋ค์ด๋๋ฏน ์๋ธ์
ํ์ผ๋ก ๋ณ๊ฒฝ๋ง ํด๋ ๊ธฐ์กด 1.3mb์์ 408kb๊น์ง ์ฉ๋์ ์ค์ผ ์ ์์๋ค. ํ๋ฆฌํ
๋ค๋๋ @font-face์ src์์ local์ ํตํด ๋ก์ปฌ ํฐํธํ์ผ์ ์ฌ์ฉํ๋๋ก ๋์ด์์๊ธฐ ๋๋ฌธ์, ๊ธฐ์กด ์ฉ๋์ด ์ผ๋ง๋ ๋๋์ง ๋ฐ๋ก ์์๋ณด๊ธด ๊ท์ฐฎ์์ ํจ์ค. ๋๋ถ๋ถ ์์ดํฐ์ ํ๋ฆฌํ
๋ค๋๊ฐ ์ค์น๋์ด ์์ ์ผ์ ๋ณ๋ก ์๋ค๋ณด๋ ํ๋ฆฌํ
๋ค๋ ์ญ์ ๋ค์ด๋๋ฏน ์๋ธ์
ํฐํธ๋ก ๋ฐ๊พธ์ด ์ฃผ์๋ค.
์ฒ์๋ถํฐ next/font๋ฅผ ์ ์ฉํด๋ณผ๊ฑธ ํ๋ ์๊ฐ์ด ๋ ๋ค. ์ฒ์์ ๊ตฌ๊ธํฐํธ๊ฐ ์๋ ์นํฐํธ๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ์ ๊ณ ๋ คํ์ง ์์๋ค. ๊ทผ๋ฐ ๋ก์ปฌ๋ก ๋ค์ด๋ฐ์์ ์๋ธ์ ํฐํธ ๋ง๋ค๊ณ , ๋ด CDN์ ์ฌ๋ฆฌ๊ณ ๋ฑ์ ์ฌ๋ฌ ์๋๋ฅผ ํ๋ฉด์.. ์ด๋ด๋ฐ์ ๊ทธ๋ฅ ๋ก์ปฌํฐํธ๋ก next/font๋ฅผ ์ ์ฉํ๋๊ฒ ๋ง์ง ์๋? ํ๋ ์๊ฐ.
2. ์ด๋ฏธ์ง ์ต์ ํ
ํฐํธ๋ณด๋ค ๋ ํฐ ๋ฌธ์ ๋ ์ด๋ฏธ์ง์ ์์๋ค. ๋๋ฅ์ ๋ฉ์ธํ์ด์ง๋ ํธ์คํธ๊ฐ ์ฌ๋ฆฐ ํฌ์คํฐ ์ด๋ฏธ์ง๋ฅผ ๊ทธ๋๋ก ์ ์ฅํ๋ค๊ฐ ๋ณด์ฌ์ฃผ๊ณ ์์๋ค. ์ฉ๋์ด ๋งค์ฐ ๋ง์ ์ด๋ฏธ์ง๋ก ์ ๋ก๋ํด๋์ผ๋ฉด ๊ทธ๋ฐ๋๋ก ๋ก๋ฉ์ด ๋๋ ค์ง๋ ์ํฉ์ด์์.
๊ธฐ๋ณธ์ ์ผ๋ก ์ด๋ฏธ์ง ์ต์ ํ๋ฅผ ์ํด์ ์ด๋ฐ ๊ฒ๋ค์ ํ๋ค.
- ์ด๋ฏธ์ง ์ฌ์ด์ฆ๋ฅผ ๋ณด์ฌ์ค ํฌ๊ธฐ ๋๋ ๋ทฐํฌํธ์ ๋ง๊ฒ ๋ณํํด์ ์ ๊ณตํ๋ค.
- ์ฉ๋์ด ์๊ฒ ์์ถ๋ ํ์ผ ํ์ฅ์(WEBP)๋ฅผ ์ด์ฉํ๋ค.
- ์ฒ์์ ๋ชจ๋ ์ด๋ฏธ์ง๋ฅผ ๋ก๋ํ์ง ์๊ณ , ๋ทฐํฌํธ์ ๋ณด์ฌ์ง ๊ฒ๋ค๋ง lazy loading ํ๋ค.
- ์ด๋ฏธ์ง์ ๋๋น์ ๋์ด๋ฅผ ์ง์ ํด Cumulative Layout Shift๋ฅผ ๋ฐฉ์งํ๋ค.
์ด๋ฅผ ์ํด Next/Image๋ฅผ ๋์
ํ๋ค. ์์ ๊ฒ๋ค์ ๊ตฌํํ๊ธฐ ์ํด์ intersection-observer ๋ฑ์ ํตํด ์ง์ ๋ทฐํฌํธ์ ๋ณด์ด๋์ง๋ฅผ ์บ์นํด lazy loading์ ์ ์ฉํด์ผ ํ๊ณ (ํฌ๋กฌ์ ๋๋), ์ด๋ฏธ์ง๋ฅผ ์
๋ก๋ํ ๋ ๋ณ๋์ ์ด๋ฏธ์ง ์์ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํตํด ๋ฆฌ์ฌ์ด์ง๊ณผ ์์ถ์ ํ ํ์ ์คํ ๋ฆฌ์ง์ ์
๋ก๋ํ๋ ๋ฐฉ์์ด ํ์ํ๋ค.
๋ด๊ฐ ๋ชจ๋ฅด๋๊ฑฐ ์์ผ๋ฉด ๋ง์ข
๊ทผ๋ฐ Next/Image๋ ์ด๋ฐ ๊ธฐ๋ฅ๋ค์ ๋ค ์ ๊ณตํด์ค๋ค.
<Image
src={img}
fill={true}
sizes="(max-width: 768px) 50vw, 25vw"
alt={props.name}
priority
/>ํ์ฌ ๋ฉ์ธ ํ์ด์ง์ ์ ์ฉ๋ Image ์ปดํฌ๋ํธ์ด๋ค. ์ธํฐ๋ท์ ๋ง์ด ์๋ ์๋ฃ๋ค์ ๋ ๊ฑฐ์์ธ ๊ฒฝ์ฐ๊ฐ ๋ง์์, ๊ณต์๋ฌธ์๋ฅผ ๋ณด๊ณ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋๊ฒ ์ข๋ค.
* fill
๋ ์ด์์ ์ํํธ๋ฅผ ์์ ๊ธฐ ์ํด width์ height๋ฅผ ์ฌ์ฉํ๋ค ํ๋๋ฐ, ๋์ fill ์์ฑ์ ์ฌ์ฉํ๋ค. fill์ ํตํด ์ด๋ฏธ์ง๊ฐ ์์ ์์๋ฅผ ์ฑ์ฐ๋๋ก ํ ์ ์๋ค.
position: relative;
padding-top: 141.4%;
overflow: hidden;Image ์ปดํฌ๋ํธ์ ์์ ์์์๋ ์์ ๊ฐ์ด relative์ overflow: hidden ์์ฑ์ ์ฃผ๊ณ , 141.4%(A์ฌ์ด์ฆ ์ฉ์ง)์ ๋น์จ๋ก ์ ์ง๋๋๋ก ํ๋ค.
* sizes
์ด๋ฏธ์ง๊ฐ ๋ฐ์ํ์ผ๋ next-images๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ด๋ฏธ์ง์ ํฌ๊ธฐ๋ฅผ 100vw๋ก ์๊ฐํ๊ณ ๋ด๋ ค์ค๋ค. sizes ์์ฑ์ ์ฌ์ฉํ๋ฉด ์ค์ ์ด๋ฏธ์ง์ ์ฌ์ด์ฆ๊ฐ 100vw๋ณด๋ค ์์๊ฑฐ๋ผ๊ณ ๋ธ๋ผ์ฐ์ ์๊ฒ ์๋ฆด ์ ์๋ค. ๋ชจ๋ฐ์ผ ํ๋ฉด์ผ๋ 1์ด์ ํฌ์คํฐ๊ฐ ๋๊ฐ, ์๋ ๋ ๋ค๊ฐ์ฉ ๋ค์ด๊ฐ๊ธฐ ๋๋ฌธ์ (max-width: 768px) 50vw, 25vw๋ก ์ค์ ํด์ฃผ์๋ค. sizes์์ฑ์ ์ฌ์ฉํ์ง ์์์๋๋ณด๋ค 16๋ฐฐ ์์ ์ด๋ฏธ์ง๋ฅผ ๋ฐ์์ฌ ์ ์๋ค.
์ถ๊ฐ๋ก ์ด๋ฏธ์ง์ ์ฐ์ ์์๋ฅผ ๋์ด๊ณ preloadํ๊ธฐ ์ํด priority ์์ฑ์ ์ค ์ ์๊ณ , ์ด๋ฏธ์ง๊ฐ ๋ก๋ฉ๋๊ธฐ๊น์ง ๋ณด์ฌ์ค placeholder ๋๋ blur ์ด๋ฏธ์ง๋ฅผ ์ค์ ํ ์๋ ์๋ค. ์คํฌ๋กค ์์ด ๋ณผ ์ ์๋ ์ด๋ฏธ์ง๊ฐ ์ง์ฐ ๋ก๋๋๋ฉด ํ์ด์ง ์๋ช
์ฃผ๊ธฐ ํ๋ฐ์ ๋ ๋๋ง๋๋ฏ๋ก preload ์์ฑ์ ์ฃผ๋ ๊ฒ์ด ์ข๋ค. ์ด๋ ๊ฒ Next/Image ์ปดํฌ๋ํธ๋ก ๋์ฒดํ๋ฉด์ ๋๋ฅ ๋ฉ์ธ ํ์ด์ง์ ์ด๊ธฐ ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ 1800kb์์ 444kb๋ก ์ค์ผ ์ ์์๋ค. ์ด๋ฏธ์ง๋ง์ผ๋ก๋ ํ์คํ ๋ก๋ฉ ์๋๊ฐ ๋นจ๋ผ์ง์ ์ฒด๊ฐํ ์ ์์๋ค. ์ ์ผ ๋๋ฌธ์ง๋งํ๊ธด ํด์.
3. ๋ฒ๋ค ์ฌ์ด์ฆ ์ต์ ํ
๋ณดํธ์ ์ผ๋ก ์ฝ๊ฒ ๋ฒ๋ค์ ์ฌ์ด์ฆ๋ฅผ ์ต์ ํํ๋ ๋ฐฉ๋ฒ์ผ๋ก๋ ์ฝ๋ ์คํ๋ฆฌํ ์ด ์๋ค. Next๋ ๊ธฐ๋ณธ์ ์ผ๋ก pages๋ด์ ํ์ผ๋ค์ ๋น๋ ๊ณผ์ ์์ ๋ถํ ํด ์ฝ๋ ์คํ๋ฆฌํ ์ ์๋์ ์ผ๋ก ์ง์ํด์ค๋ค. ๊ทธ ์ธ์ ๋ฐ๋ก ๊ฐ์ ธ์ฌ ํ์๊ฐ ์๋ ์ฝ๋๋ค์ dynamic import๋ฅผ ํตํด ํ์ํ๋์ ๋ถ๋ฌ์ฌ ์ ์๋ค.
๋๋ฅ์ ๊ฒฝ์ฐ์ ๋ชจ๋ฌ(ํน์ ๋ฐํ ์ํธ)๋ฅผ ๊ธ๋ก๋ฒ๋ก ์ ์ดํ๊ธฐ ์ํด, ์์ ์ปดํฌ๋ํธ์ ์์นํด๋๊ณ ์ ์ญ์ํ๋ฅผ ํตํด ๊ด๋ฆฌํ๊ณ ์๋ค. ํด๋น ์ปดํฌ๋ํธ๋ฅผ ํ์ํ ๊ฒฝ์ฐ์๋ง ๋ถ๋ฌ์ฌ ์ ์๋๋ก ํ๋ค.
const GlobalOverlay = dynamic(
() => import('@components/shared/overlay/GlobalOverlay'),
{ ssr: false },
);์ด ์ธ์๋ MdViewer, QRcode ๋ฑ์ ์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ next/dynamic์ ํตํด ๋์ ์ผ๋ก ๋ถ๋ฌ์ค๊ณ ์๋ค.
์ฌ์ฉ๋ ์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด ๋ง์ ์ฉ๋์ ์ฐจ์งํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง๊ธฐ ๋๋ฌธ์ ํธ๋ฆฌ์
ฐ์ดํน์ ํ๊ณค ํ๋ค. next/bundle-analyzer๋ฅผ ํตํด Next ํ๋ก์ ํธ๋ฅผ ๋น๋ํ ๋ ์ด๋ค ๋ชจ๋์ด ์ผ๋ง๋ ๋ง์ ์ฉ๋์ ์ฐจ์งํ๋์ง ์๊ฐ์ ์ผ๋ก ๋ณผ ์ ์๋ค.
https://www.npmjs.com/package/@next/bundle-analyzer
์ฌ์ค ํฌ๊ฒ ๋์ ๋๋ ๋ถ๋ถ์ ์๋ค. ๋ค๋ง ๋์์ด๋๊ฐ ๋๋ฉํ์ด์ง์ ์ผ๋ฌ์คํธ๋ก ๋ง๋ค์ด์ค ์ด๋ฏธ์ง๋ค์ ๊ทธ๋๋ก svg๋ก ๋ฃ์๋๋ฐ, ์ง๊ธ ์๊ฐํด๋ณด๋ ๋ฏธ์น ์ง์ด์์. ์ด์ฐจํผ ๋๋ฉํ์ด์ง ๋ฆฌ๋ด์ผ ์์ ์ค์ด๋ผ ๋์ค์ ์น ๋ฐ๊ฟ ์์ ์ด๊ธฐ ๋๋ฌธ์ ์ง๊ธ ๋น์ฅ์ ๊ฑด๋ค ์๊ฐ์ด ์๋ค. ํ์ด์ง ๋งจ ์ ์น์ ์ธ์ ์๋ ๋์ค๋ ์น์ ๋ค์ ๋ค์ด๋๋ฏน ์ํฌํธ๋ฅผ ํตํด ๋ ์ด์งํ๊ฒ ๋ก๋ฉ๋๋๋ก ์์ ํด์ฃผ์๋ค.
์์ ์ ํ pages/index.js ๋ชจ๋์ analyzer ๊ฒฐ๊ณผ์ด๋ค. ๋น๋ ํ์ผ์ ๋ฌด๊ฑฐ์ด svg๋ค์ด ์ ๊ฑฐ๋๊ฒ์ ์๊ฐ์ ์ผ๋ก ๋ณผ ์ ์๋ค.
์ต์ ํ ์์ ์ ํ๋ก ๋น๋๋ JSํ์ผ์ ํฌ๊ธฐ๊ฐ ๋์ ๋ณด์ด๊ฒ ์ค์ด๋ค์๋ค.
๋ฉ์ธ ํ์ด์ง๋ 89์ , ๊ณต์ฐ ์์ธํ์ด์ง๋ 98์ ๊น์ง ์ฌ๋ฆด ์ ์๊ฒ ๋์๋ค. ์๋ง๋ค ์ ๊ทผ์ฑ.
